From 132afa749c3e5577921cd69efe5638037b55016b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:44:49 +0100
Subject: [PATCH] fix: collapse toggle as first sidebar item, realtime stays in
 glass bar

Collapse icon at top of sidebar (aligned with all icons). Glass top
bar now only shows realtime indicator on the right.
---
 components/dashboard/DashboardShell.tsx | 11 +----------
 components/dashboard/Sidebar.tsx        | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 93b2bab..714baca 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -38,16 +38,7 @@ function GlassTopBar({ siteId }: { siteId: string }) {
   }, [realtime])
 
   return (
-    <div className="hidden md:flex items-center justify-between h-10 shrink-0 pr-3">
-      {/* Collapse toggle — negative margin to align with sidebar icons */}
-      <button
-        onClick={toggle}
-        className="flex items-center justify-center w-10 h-10 -ml-[52px] text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
-        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-      >
-        <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
-      </button>
-
+    <div className="hidden md:flex items-center justify-end h-10 shrink-0 px-3">
       {/* Realtime indicator */}
       {lastUpdatedRef.current != null && (
         <div className="flex items-center gap-1.5 text-xs text-neutral-500">
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 8a265f0..99c49dd 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -9,6 +9,7 @@ import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
 import { useSidebar } from '@/lib/sidebar-context'
+import { SidebarSimple } from '@phosphor-icons/react'
 // `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
@@ -340,6 +341,7 @@ interface SidebarContentProps {
   onMobileClose: () => void
   onExpand: () => void
   onCollapse: () => void
+  onToggle: () => void
   wasCollapsed: React.MutableRefObject<boolean>
   pickerOpenCallbackRef: React.MutableRefObject<(() => void) | null>
   auth: ReturnType<typeof useAuth>
@@ -350,7 +352,7 @@ interface SidebarContentProps {
 
 function SidebarContent({
   isMobile, collapsed, siteId, sites, canEdit, pendingHref,
-  onNavigate, onMobileClose, onExpand, onCollapse,
+  onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
   wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings,
 }: SidebarContentProps) {
   const router = useRouter()
@@ -359,7 +361,20 @@ function SidebarContent({
 
   return (
     <div className="flex flex-col h-full overflow-hidden">
-      {/* App Switcher — top of sidebar (scope-level switch) */}
+      {/* Collapse toggle — first item, aligned with all other sidebar icons */}
+      {!isMobile && (
+        <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-0 shrink-0 overflow-hidden">
+          <button
+            onClick={onToggle}
+            className="w-9 h-9 flex items-center justify-center shrink-0 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+            aria-label={c ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            <SidebarSimple className="w-[18px] h-[18px]" weight={c ? 'regular' : 'fill'} />
+          </button>
+        </div>
+      )}
+
+      {/* App Switcher — scope-level switch */}
       <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-1 shrink-0 overflow-hidden">
         <span className="w-9 h-9 flex items-center justify-center shrink-0">
           <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
@@ -525,7 +540,7 @@ export default function Sidebar({
           onMobileClose={onMobileClose}
           onExpand={expand}
           onCollapse={collapse}
-
+          onToggle={toggle}
           wasCollapsed={wasCollapsedRef}
           pickerOpenCallbackRef={pickerOpenCallbackRef}
           auth={auth}
@@ -568,7 +583,7 @@ export default function Sidebar({
               onMobileClose={handleMobileClose}
               onExpand={expand}
               onCollapse={collapse}
-    
+              onToggle={toggle}
               wasCollapsed={wasCollapsedRef}
               pickerOpenCallbackRef={pickerOpenCallbackRef}
               auth={auth}