fix: move collapse toggle + realtime to glass area above content panel

GlassTopBar in the margin strip — SidebarSimple icon (phosphor) on
left, "Live · Xs ago" on right. ContentHeader reverted to mobile-only.

components/dashboard/ContentHeader.tsx

@@ -1,67 +1,21 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
+import { MenuIcon } from '@ciphera-net/ui'
-import { MenuIcon, CollapseLeftIcon, formatUpdatedAgo } from '@ciphera-net/ui'
-import { useSidebar } from '@/lib/sidebar-context'
-import { useRealtime } from '@/lib/swr/dashboard'
 
 export default function ContentHeader({
-  siteId,
   onMobileMenuOpen,
 }: {
-  siteId: string
   onMobileMenuOpen: () => void
 }) {
-  const { collapsed, toggle } = useSidebar()
-  const { data: realtime } = useRealtime(siteId)
-  const lastUpdatedRef = useRef<number | null>(null)
-  const [, setTick] = useState(0)
-
-  // Track when realtime data last changed
-  useEffect(() => {
-    if (realtime) lastUpdatedRef.current = Date.now()
-  }, [realtime])
-
-  // Tick every second to keep "X seconds ago" fresh
-  useEffect(() => {
-    if (lastUpdatedRef.current == null) return
-    const timer = setInterval(() => setTick((t) => t + 1), 1000)
-    return () => clearInterval(timer)
-  }, [realtime])
-
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-800/60 px-3 py-2">
+    <div className="shrink-0 flex items-center border-b border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
-      {/* Left — mobile hamburger or desktop collapse toggle */}
+      <button
-      <div className="flex items-center">
+        onClick={onMobileMenuOpen}
-        {/* Mobile hamburger */}
+        className="p-2 -ml-2 text-neutral-400 hover:text-white"
-        <button
+        aria-label="Open navigation"
-          onClick={onMobileMenuOpen}
+      >
-          className="p-2 text-neutral-400 hover:text-white md:hidden"
+        <MenuIcon className="w-5 h-5" />
-          aria-label="Open navigation"
+      </button>
-        >
-          <MenuIcon className="w-5 h-5" />
-        </button>
-
-        {/* Desktop collapse toggle */}
-        <button
-          onClick={toggle}
-          className="hidden md:flex items-center justify-center p-2 text-neutral-500 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
-          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        >
-          <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${collapsed ? 'rotate-180' : ''}`} />
-        </button>
-      </div>
-
-      {/* Right — realtime indicator */}
-      {lastUpdatedRef.current != null && (
-        <div className="flex items-center gap-1.5 text-xs text-neutral-500">
-          <span className="relative flex h-1.5 w-1.5">
-            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
-            <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
-          </span>
-          Live · {formatUpdatedAgo(lastUpdatedRef.current)}
-        </div>
-      )}
     </div>
   )
 }

components/dashboard/DashboardShell.tsx

@@ -1,8 +1,11 @@
 'use client'
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect, useRef } from 'react'
 import dynamic from 'next/dynamic'
-import { SidebarProvider } from '@/lib/sidebar-context'
+import { formatUpdatedAgo } from '@ciphera-net/ui'
+import { SidebarSimple } from '@phosphor-icons/react'
+import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
+import { useRealtime } from '@/lib/swr/dashboard'
 import ContentHeader from './ContentHeader'
 
 // Load sidebar only on the client — prevents SSR flash
@@ -18,6 +21,47 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   ),
 })
 
+function GlassTopBar({ siteId }: { siteId: string }) {
+  const { collapsed, toggle } = useSidebar()
+  const { data: realtime } = useRealtime(siteId)
+  const lastUpdatedRef = useRef<number | null>(null)
+  const [, setTick] = useState(0)
+
+  useEffect(() => {
+    if (realtime) lastUpdatedRef.current = Date.now()
+  }, [realtime])
+
+  useEffect(() => {
+    if (lastUpdatedRef.current == null) return
+    const timer = setInterval(() => setTick((t) => t + 1), 1000)
+    return () => clearInterval(timer)
+  }, [realtime])
+
+  return (
+    <div className="hidden md:flex items-center justify-between h-10 shrink-0 px-3">
+      {/* Collapse toggle */}
+      <button
+        onClick={toggle}
+        className="flex items-center justify-center p-1.5 text-neutral-500 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      >
+        <SidebarSimple className="w-4 h-4" weight={collapsed ? 'regular' : 'fill'} />
+      </button>
+
+      {/* Realtime indicator */}
+      {lastUpdatedRef.current != null && (
+        <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+          <span className="relative flex h-1.5 w-1.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+            <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
+          </span>
+          Live · {formatUpdatedAgo(lastUpdatedRef.current)}
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default function DashboardShell({
   siteId,
   children,
@@ -38,11 +82,16 @@ export default function DashboardShell({
           onMobileClose={closeMobile}
           onMobileOpen={openMobile}
         />
-        <div className="flex-1 flex flex-col min-w-0 mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
+        <div className="flex-1 flex flex-col min-w-0">
-          <ContentHeader siteId={siteId} onMobileMenuOpen={openMobile} />
+          {/* Glass top bar — collapse toggle + realtime, in the margin above the content panel */}
-          <main className="flex-1 overflow-y-auto pt-4">
+          <GlassTopBar siteId={siteId} />
-            {children}
+          {/* Content panel */}
-          </main>
+          <div className="flex-1 flex flex-col min-w-0 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
+            <ContentHeader onMobileMenuOpen={openMobile} />
+            <main className="flex-1 overflow-y-auto pt-4">
+              {children}
+            </main>
+          </div>
         </div>
       </div>
     </SidebarProvider>