diff --git a/surfsense_web/components/layout/hooks/useSidebarState.ts b/surfsense_web/components/layout/hooks/useSidebarState.ts index 78631694d..63ecbe49a 100644 --- a/surfsense_web/components/layout/hooks/useSidebarState.ts +++ b/surfsense_web/components/layout/hooks/useSidebarState.ts @@ -37,8 +37,14 @@ export function useSidebarState(defaultCollapsed = false): UseSidebarStateReturn }, []); const toggleCollapsed = useCallback(() => { - setIsCollapsed(!isCollapsed); - }, [isCollapsed, setIsCollapsed]); + setIsCollapsedState(prev => { + const next = !prev; + try { + document.cookie = `${SIDEBAR_COOKIE_NAME}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`; + } catch {} + return next; + }); + }, []); // Keyboard shortcut: Cmd/Ctrl + \ useEffect(() => { diff --git a/surfsense_web/components/onboarding-tour.tsx b/surfsense_web/components/onboarding-tour.tsx index e5dd3a825..11d3b78fa 100644 --- a/surfsense_web/components/onboarding-tour.tsx +++ b/surfsense_web/components/onboarding-tour.tsx @@ -666,27 +666,33 @@ export function OnboardingTour() { }, [targetEl, isActive]); const handleNext = useCallback(() => { - if (stepIndex < TOUR_STEPS.length - 1) { - retryCountRef.current = 0; - setShouldAnimate(true); - setStepIndex(stepIndex + 1); - } else { - // Tour completed - save to localStorage - if (user?.id) { - const tourKey = `surfsense-tour-${user.id}`; - localStorage.setItem(tourKey, "true"); + retryCountRef.current = 0; + setShouldAnimate(true); + setStepIndex(prev => { + if (prev < TOUR_STEPS.length - 1) { + return prev + 1; + } else { + // Tour completed - save to localStorage + if (user?.id) { + const tourKey = `surfsense-tour-${user.id}`; + localStorage.setItem(tourKey, "true"); + } + setIsActive(false); + return prev; } - setIsActive(false); - } - }, [stepIndex, user?.id]); + }); + }, [user?.id]); const handlePrev = useCallback(() => { - if (stepIndex > 0) { - retryCountRef.current = 0; - setShouldAnimate(true); - setStepIndex(stepIndex - 1); - } - }, [stepIndex]); + retryCountRef.current = 0; + setShouldAnimate(true); + setStepIndex(prev => { + if (prev > 0) { + return prev - 1; + } + return prev; + }); + }, []); const handleSkip = useCallback(() => { // Tour skipped - save to localStorage