refactor(sidebar): make the cookie the single source of truth for collapse

Consolidates the collapse machinery onto one source of truth instead of
layering the cookie on top of the legacy localStorage + CSS-mask system:

- Collapse persists only in the sidebar_collapsed cookie; the store seeds
  isCollapsed from it and drops it from localStorage (partialize + merge),
  removing the dual-write and the cross-tab desync it caused.
- Retire the redundant html[data-sidebar-collapsed] attribute + CSS mask now
  that the server emits the correct data-collapsed structure; also delete the
  dead sidebar-collapse-show/-remove/-btn rules.
- Blocking script reads the cookie for collapse (width stays in localStorage)
  and seeds the cookie once from the legacy flag so existing collapsed users
  keep their preference.
- Keep skipHydration + a pre-paint rehydrate for width only — the documented
  zustand SSR pattern, so _hasHydrated is deterministically false during SSR.

Width stays in localStorage; each field now has exactly one home.

Author: waleedlatif1

apps/sim/app/_styles/globals.css

@@ -66,38 +66,11 @@
   opacity: 0;
 }
 
-html[data-sidebar-collapsed] .sidebar-container span,
-html[data-sidebar-collapsed] .sidebar-container .text-small {
-  opacity: 0;
-}
-
 .sidebar-container .sidebar-collapse-hide {
   transition: opacity 60ms ease;
 }
 
-.sidebar-container .sidebar-collapse-show {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 120ms ease-out;
-}
-
-.sidebar-container[data-collapsed] .sidebar-collapse-hide,
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-hide {
-  opacity: 0;
-}
-
-.sidebar-container[data-collapsed] .sidebar-collapse-show,
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-show {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-remove {
-  display: none;
-}
-
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
-  width: 0;
+.sidebar-container[data-collapsed] .sidebar-collapse-hide {
   opacity: 0;
 }
 

apps/sim/app/layout.tsx

@@ -78,33 +78,30 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 // window yields a width >= MIN instead of a sub-minimum sliver.
                 var defaultSidebarWidth = 248;
                 try {
+                  // Collapse is owned by the sidebar_collapsed cookie (the same
+                  // source the server renders structure from); width is read from
+                  // localStorage so the two never disagree on the first paint.
                   var stored = localStorage.getItem('sidebar-state');
-                  // The server renders collapsed/expanded structure from the
-                  // sidebar_collapsed cookie; fall back to it for the width when
-                  // localStorage is absent so width and structure never disagree.
-                  var cookieCollapsed = document.cookie.indexOf('sidebar_collapsed=1') !== -1;
-                  if (stored) {
-                    var parsed = JSON.parse(stored);
-                    var state = parsed && parsed.state;
-                    var isCollapsed = state && state.isCollapsed;
+                  var state = stored ? JSON.parse(stored).state : null;
+                  var collapsed = document.cookie.indexOf('sidebar_collapsed=1') !== -1;
+
+                  // One-time migration: seed the cookie from the legacy localStorage
+                  // flag for users who collapsed before the cookie existed.
+                  if (document.cookie.indexOf('sidebar_collapsed=') === -1 && state && typeof state.isCollapsed === 'boolean') {
+                    collapsed = state.isCollapsed;
+                    document.cookie = 'sidebar_collapsed=' + (collapsed ? '1' : '0') + '; path=/; max-age=31536000; samesite=lax';
+                  }
 
-                    if (isCollapsed) {
-                      document.documentElement.style.setProperty('--sidebar-width', '51px');
-                      document.documentElement.setAttribute('data-sidebar-collapsed', '');
-                    } else {
-                      var width = state && state.sidebarWidth;
-                      var maxSidebarWidth = Math.max(248, window.innerWidth * 0.3);
-                      var finalWidth =
-                        typeof width === 'number' && isFinite(width)
-                          ? Math.min(Math.max(width, 248), maxSidebarWidth)
-                          : defaultSidebarWidth;
-                      document.documentElement.style.setProperty('--sidebar-width', finalWidth + 'px');
-                    }
-                  } else if (cookieCollapsed) {
+                  if (collapsed) {
                     document.documentElement.style.setProperty('--sidebar-width', '51px');
-                    document.documentElement.setAttribute('data-sidebar-collapsed', '');
                   } else {
-                    document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth + 'px');
+                    var width = state && state.sidebarWidth;
+                    var maxSidebarWidth = Math.max(248, window.innerWidth * 0.3);
+                    var finalWidth =
+                      typeof width === 'number' && isFinite(width)
+                        ? Math.min(Math.max(width, 248), maxSidebarWidth)
+                        : defaultSidebarWidth;
+                    document.documentElement.style.setProperty('--sidebar-width', finalWidth + 'px');
                   }
                 } catch (e) {
                   document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth + 'px');

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -394,16 +394,14 @@ export const Sidebar = memo(function Sidebar({ initialCollapsed = false }: Sideb
   const toggleCollapsed = useSidebarStore((state) => state.toggleCollapsed)
   const isOnWorkflowPage = !!workflowId
 
-  // Until the persisted store hydrates, fall back to the cookie-seeded value so
-  // the server and the first client render agree (no hydration mismatch) and the
-  // correct structure paints immediately. After hydration the store — the source
-  // of truth, including cross-tab updates — takes over.
+  // The server renders from the `sidebar_collapsed` cookie (via `initialCollapsed`);
+  // the client store seeds from the same cookie, so both agree on the first paint.
+  // Until the store reports hydration we read the prop to guarantee that match,
+  // then the store takes over.
   const isCollapsed = hasHydrated ? storeIsCollapsed : initialCollapsed
 
-  // Hydrate the persisted sidebar state before the browser paints. The store
-  // sets `skipHydration` so its default matches the cookie-seeded first render;
-  // flushing rehydration here reconciles any drift synchronously in the same
-  // pre-paint commit instead of reflowing after paint.
+  // Hydrate the persisted width before paint (collapse already came from the
+  // cookie). Pre-paint so any width-dependent layout settles in the same commit.
   useLayoutEffect(() => {
     void useSidebarStore.persist.rehydrate()
   }, [])

apps/sim/stores/sidebar/store.ts

@@ -25,22 +25,28 @@ function applySidebarWidth(width: number) {
 }
 
 /**
- * Mirrors the collapse state into the `sidebar_collapsed` cookie so the server
- * layout can render the correct structure on the first paint (the store itself
- * lives in `localStorage`, which the server can't read). Written on every toggle
- * and once on rehydration to backfill the cookie for already-persisted users.
+ * The `sidebar_collapsed` cookie is the single source of truth for collapse: the
+ * server layout reads it to render the correct structure on the first paint
+ * (it can't read `localStorage`), and the client seeds its initial state from it
+ * below. Width is the only field persisted to `localStorage`.
  */
 function applyCollapsedCookie(collapsed: boolean) {
   if (typeof document === 'undefined') return
   document.cookie = `sidebar_collapsed=${collapsed ? '1' : '0'}; path=/; max-age=31536000; samesite=lax`
 }
 
+/** Reads the collapse state the server saw, so the client store seeds identically. */
+function readCollapsedCookie(): boolean {
+  if (typeof document === 'undefined') return false
+  return document.cookie.includes('sidebar_collapsed=1')
+}
+
 export const useSidebarStore = create<SidebarState>()(
   persist(
     (set, get) => ({
       workspaceDropdownOpen: false,
       sidebarWidth: SIDEBAR_WIDTH.DEFAULT,
-      isCollapsed: false,
+      isCollapsed: readCollapsedCookie(),
       _hasHydrated: false,
       setWorkspaceDropdownOpen: (isOpen) => set({ workspaceDropdownOpen: isOpen }),
       setSidebarWidth: (width) => {
@@ -71,31 +77,30 @@ export const useSidebarStore = create<SidebarState>()(
     {
       name: 'sidebar-state',
       /**
-       * Hydration is driven manually from a `useLayoutEffect` (see Sidebar) so it
-       * runs synchronously before the first paint. Auto-hydration would either
-       * (a) run at module load and make the client's first render disagree with
-       * the server's `isCollapsed: false` HTML — a mismatch React recovers from by
-       * flashing the server tree, or (b) run after paint, reflowing the expanded
-       * tree into the collapsed rail. Skipping it lets the layout effect flip the
-       * structure in the same pre-paint commit, so neither flash is visible.
+       * Width is hydrated manually from a client-only effect (see Sidebar) so
+       * `_hasHydrated` is deterministically `false` during SSR and the first
+       * client render — both of which read collapse from the cookie-seeded prop.
+       * This is zustand's documented SSR pattern; it avoids relying on auto
+       * hydration's behavior when `localStorage` is absent on the server.
        */
       skipHydration: true,
       onRehydrateStorage: () => (state) => {
         if (state) {
           state.setHasHydrated(true)
-          applyCollapsedCookie(state.isCollapsed)
           const width = state.isCollapsed
             ? SIDEBAR_WIDTH.COLLAPSED
             : clampSidebarWidth(state.sidebarWidth)
           applySidebarWidth(width)
-          if (typeof document !== 'undefined') {
-            document.documentElement.removeAttribute('data-sidebar-collapsed')
-          }
         }
       },
-      partialize: (state) => ({
-        sidebarWidth: state.sidebarWidth,
-        isCollapsed: state.isCollapsed,
+      // Only width is persisted; collapse lives in the cookie.
+      partialize: (state) => ({ sidebarWidth: state.sidebarWidth }),
+      // Never let a legacy persisted `isCollapsed` override the cookie-seeded
+      // value — the cookie is the source of truth (handles migration cleanly).
+      merge: (persisted, current) => ({
+        ...current,
+        ...(persisted as Partial<SidebarState>),
+        isCollapsed: current.isCollapsed,
       }),
     }
   )