ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

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

Browse Source 
GlassTopBar in the margin strip — SidebarSimple icon (phosphor) on
left, "Live · Xs ago" on right. ContentHeader reverted to mobile-only.
This commit is contained in:
Usman Baig
2026-03-24 23:02:52 +01:00
parent 102551b1ce
commit 0f462314e2
2 changed files with 65 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/dashboard/ContentHeader.tsx
View File

@@ -1,67 +1,21 @@
'use client'
import { useState, useEffect, useRef } from 'react'
import { MenuIcon, CollapseLeftIcon, formatUpdatedAgo } from '@ciphera-net/ui'
import { useSidebar } from '@/lib/sidebar-context'
import { useRealtime } from '@/lib/swr/dashboard'
import { MenuIcon } from '@ciphera-net/ui'
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">
{/* Left — mobile hamburger or desktop collapse toggle */}
<div className="flex items-center">
{/* Mobile hamburger */}
<button
onClick={onMobileMenuOpen}
className="p-2 text-neutral-400 hover:text-white md:hidden"
aria-label="Open navigation"
>
<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 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">
<button
onClick={onMobileMenuOpen}
className="p-2 -ml-2 text-neutral-400 hover:text-white"
aria-label="Open navigation"
>
<MenuIcon className="w-5 h-5" />
</button>
</div>
)
}

63
components/dashboard/DashboardShell.tsx
View File

@@ -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">
<ContentHeader siteId={siteId} onMobileMenuOpen={openMobile} />
<main className="flex-1 overflow-y-auto pt-4">
{children}
</main>
<div className="flex-1 flex flex-col min-w-0">
{/* Glass top bar — collapse toggle + realtime, in the margin above the content panel */}
<GlassTopBar siteId={siteId} />
{/* Content panel */}
<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>