fix(sidebar): render collapse state from a cookie so SSR matches

The server couldn't read localStorage, so a collapsed user's first paint
rendered the *expanded* tree at 51px — prefetched chat/workflow lists,
pinned-chat pin icons, and loading skeletons all crammed into the rail and
then reflowed once the store hydrated.

Mirror the collapse state into a sidebar_collapsed cookie (the shadcn/ui
sidebar pattern), read it in the workspace server layout, and seed the
sidebar's first render with it: structure is now correct on the server, so
the first paint is the real rail with no skeleton/pin/shift. The store
remains the post-hydration source of truth; the blocking script honors the
cookie for width when localStorage is absent so width and structure agree.

Author: waleedlatif1

apps/sim/app/layout.tsx

@@ -79,6 +79,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 var defaultSidebarWidth = 248;
                 try {
                   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;
@@ -96,6 +100,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                           : defaultSidebarWidth;
                       document.documentElement.style.setProperty('--sidebar-width', finalWidth + 'px');
                     }
+                  } else if (cookieCollapsed) {
+                    document.documentElement.style.setProperty('--sidebar-width', '51px');
+                    document.documentElement.setAttribute('data-sidebar-collapsed', '');
                   } else {
                     document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth + 'px');
                   }

apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx

@@ -15,6 +15,8 @@ const SLIDE_TRANSITION =
 
 interface WorkspaceChromeProps {
   children: React.ReactNode
+  /** Cookie-derived collapse state from the server layout; seeds the sidebar's first render. */
+  initialSidebarCollapsed?: boolean
 }
 
 function isFullscreenPath(pathname: string | null): boolean {
@@ -41,7 +43,7 @@ function isFullscreenPath(pathname: string | null): boolean {
  * On a direct load of a fullscreen route the wrapper mounts already collapsed,
  * so no slide plays (CSS transitions don't run on mount).
  */
-export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
+export function WorkspaceChrome({ children, initialSidebarCollapsed }: WorkspaceChromeProps) {
   const pathname = usePathname()
   const isFullscreen = isFullscreenPath(pathname)
 
@@ -103,7 +105,7 @@ export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
             isFullscreen && '-translate-x-full'
           )}
         >
-          <Sidebar />
+          <Sidebar initialCollapsed={initialSidebarCollapsed} />
         </div>
       </div>
       <div

apps/sim/app/workspace/[workspaceId]/layout.tsx

@@ -1,4 +1,5 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
+import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { ToastProvider } from '@/components/emcn'
 import { getSession } from '@/lib/auth'
@@ -27,6 +28,7 @@ export default async function WorkspaceLayout({
   }
 
   const { workspaceId } = await params
+  const initialSidebarCollapsed = (await cookies()).get('sidebar_collapsed')?.value === '1'
   const queryClient = getQueryClient()
   const sidebarPrefetch = prefetchWorkspaceSidebar(queryClient, workspaceId, session.user.id)
 
@@ -47,7 +49,9 @@ export default async function WorkspaceLayout({
             <WorkspacePermissionsProvider>
               <WorkspaceScopeSync />
               <HydrationBoundary state={dehydrate(queryClient)}>
-                <WorkspaceChrome>{children}</WorkspaceChrome>
+                <WorkspaceChrome initialSidebarCollapsed={initialSidebarCollapsed}>
+                  {children}
+                </WorkspaceChrome>
               </HydrationBoundary>
             </WorkspacePermissionsProvider>
           </div>

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

@@ -347,7 +347,18 @@ const HIDDEN_STYLE = { display: 'none' } as const
  *
  * @returns Sidebar with workflows panel
  */
-export const Sidebar = memo(function Sidebar() {
+interface SidebarProps {
+  /**
+   * Collapse state read from the `sidebar_collapsed` cookie in the server
+   * layout. Seeds the first (pre-hydration) render so the server emits the
+   * correct collapsed/expanded structure — without it the server can't read
+   * `localStorage` and always renders the expanded tree, which then paints
+   * skeletons and pinned-chat icons inside the 51px rail until React flips it.
+   */
+  initialCollapsed?: boolean
+}
+
+export const Sidebar = memo(function Sidebar({ initialCollapsed = false }: SidebarProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const workflowId = params.workflowId as string | undefined
@@ -378,15 +389,21 @@ export const Sidebar = memo(function Sidebar() {
   }, [initializeSearchData, filterBlocks, providerModelSignature])
 
   const setSidebarWidth = useSidebarStore((state) => state.setSidebarWidth)
-  const isCollapsed = useSidebarStore((state) => state.isCollapsed)
+  const storeIsCollapsed = useSidebarStore((state) => state.isCollapsed)
+  const hasHydrated = useSidebarStore((state) => state._hasHydrated)
   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.
+  const isCollapsed = hasHydrated ? storeIsCollapsed : initialCollapsed
+
   // Hydrate the persisted sidebar state before the browser paints. The store
-  // sets `skipHydration` so its default (`isCollapsed: false`) matches the SSR
-  // HTML on first render; flushing rehydration here re-renders the correct
-  // collapsed/expanded structure synchronously in the same pre-paint commit,
-  // preventing the expanded tree from flashing inside the collapsed rail.
+  // 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.
   useLayoutEffect(() => {
     void useSidebarStore.persist.rehydrate()
   }, [])

apps/sim/stores/sidebar/store.ts

@@ -24,6 +24,17 @@ function applySidebarWidth(width: number) {
   document.documentElement.style.setProperty('--sidebar-width', `${value}px`)
 }
 
+/**
+ * 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.
+ */
+function applyCollapsedCookie(collapsed: boolean) {
+  if (typeof document === 'undefined') return
+  document.cookie = `sidebar_collapsed=${collapsed ? '1' : '0'}; path=/; max-age=31536000; samesite=lax`
+}
+
 export const useSidebarStore = create<SidebarState>()(
   persist(
     (set, get) => ({
@@ -42,6 +53,7 @@ export const useSidebarStore = create<SidebarState>()(
         const { isCollapsed, sidebarWidth } = get()
         const nextCollapsed = !isCollapsed
         set({ isCollapsed: nextCollapsed })
+        applyCollapsedCookie(nextCollapsed)
         applySidebarWidth(nextCollapsed ? SIDEBAR_WIDTH.COLLAPSED : clampSidebarWidth(sidebarWidth))
       },
       syncWidth: () => {
@@ -71,6 +83,7 @@ export const useSidebarStore = create<SidebarState>()(
       onRehydrateStorage: () => (state) => {
         if (state) {
           state.setHasHydrated(true)
+          applyCollapsedCookie(state.isCollapsed)
           const width = state.isCollapsed
             ? SIDEBAR_WIDTH.COLLAPSED
             : clampSidebarWidth(state.sidebarWidth)