feat: Linear-style sidebar with explicit toggle

Rewrite sidebar from scratch: 256px expanded, 56px collapsed via
click toggle + [ keyboard shortcut. Two-phase CSS transitions (labels
fade then width contracts). Contextual ContentHeader replaces
UtilityBar (no logo, just actions). Remove framer-motion sidebar
primitive, hover-to-expand, and sidebar-context.

components/dashboard/Sidebar.tsx

@@ -1,17 +1,10 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import { motion } from 'framer-motion'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
-import {
-  Sidebar as SidebarPrimitive,
-  SidebarBody,
-  SidebarLink,
-  useSidebar,
-} from '@/components/ui/sidebar'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -21,14 +14,22 @@ import {
   CloudUploadIcon,
   HeartbeatIcon,
   SettingsIcon,
+  CollapseLeftIcon,
+  CollapseRightIcon,
   ChevronUpDownIcon,
   PlusIcon,
+  XIcon,
+  MenuIcon,
 } from '@ciphera-net/ui'
 
+const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
+
+type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
+
 interface NavItem {
   label: string
   href: (siteId: string) => string
-  icon: React.ComponentType<{ className?: string; weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' }>
+  icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
   matchPrefix?: boolean
 }
 
@@ -64,61 +65,72 @@ const SETTINGS_ITEM: NavItem = {
   matchPrefix: true,
 }
 
-function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
-  const { open: sidebarOpen } = useSidebar()
+// ─── Site Picker ────────────────────────────────────────────
+
+function SitePicker({
+  sites,
+  siteId,
+  collapsed,
+}: {
+  sites: Site[]
+  siteId: string
+  collapsed: boolean
+}) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const ref = useRef<HTMLDivElement>(null)
   const pathname = usePathname()
   const router = useRouter()
-
   const currentSite = sites.find((s) => s.id === siteId)
+  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
 
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
+    const handler = (e: MouseEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) {
         setOpen(false)
         setSearch('')
       }
     }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
   }, [])
 
+  const switchSite = (id: string) => {
+    router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
+    setOpen(false)
+    setSearch('')
+  }
+
   const filtered = sites.filter(
     (s) =>
       s.name.toLowerCase().includes(search.toLowerCase()) ||
       s.domain.toLowerCase().includes(search.toLowerCase())
   )
 
-  const switchSite = (id: string) => {
-    const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
-    router.push(`/sites/${id}${currentPageType}`)
-    setOpen(false)
-    setSearch('')
-  }
-
-  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
-
   return (
-    <div className="relative mb-4" ref={ref}>
+    <div className="relative px-3 mb-4" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2.5 rounded-lg px-1 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-white/10 dark:hover:bg-white/5"
+        className={`w-full flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
+          collapsed ? 'justify-center' : ''
+        }`}
+        title={collapsed ? currentSite?.name || 'Select site' : undefined}
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
           {initial}
         </span>
-        {sidebarOpen && (
-          <>
-            <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
-            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
-          </>
-        )}
+        <span
+          className={`flex items-center gap-1 min-w-0 flex-1 overflow-hidden transition-opacity duration-150 ${
+            collapsed ? 'opacity-0 w-0' : 'opacity-100'
+          }`}
+        >
+          <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
+          <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
+        </span>
       </button>
 
       {open && (
-        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
+        <div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
           <div className="p-2">
             <input
               type="text"
@@ -169,110 +181,225 @@ function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
   )
 }
 
-function SidebarContent({ siteId }: { siteId: string }) {
-  const { user } = useAuth()
-  const { open } = useSidebar()
+// ─── Nav Item ───────────────────────────────────────────────
+
+function NavLink({
+  item,
+  siteId,
+  collapsed,
+  onClick,
+}: {
+  item: NavItem
+  siteId: string
+  collapsed: boolean
+  onClick?: () => void
+}) {
   const pathname = usePathname()
+  const href = item.href(siteId)
+  const active = item.matchPrefix ? pathname.startsWith(href) : pathname === href
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      title={collapsed ? item.label : undefined}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
+        collapsed ? 'justify-center' : ''
+      } ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+      }`}
+    >
+      <item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
+      <span
+        className={`whitespace-nowrap overflow-hidden transition-opacity duration-150 ${
+          collapsed ? 'opacity-0 w-0' : 'opacity-100'
+        }`}
+      >
+        {item.label}
+      </span>
+    </Link>
+  )
+}
+
+// ─── Main Sidebar ───────────────────────────────────────────
+
+export default function Sidebar({
+  siteId,
+  mobileOpen,
+  onMobileClose,
+  onMobileOpen,
+}: {
+  siteId: string
+  mobileOpen: boolean
+  onMobileClose: () => void
+  onMobileOpen: () => void
+}) {
+  const { user } = useAuth()
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const pathname = usePathname()
   const [sites, setSites] = useState<Site[]>([])
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem(SIDEBAR_KEY) === 'true'
+  })
 
   useEffect(() => {
     listSites().then(setSites).catch(() => {})
   }, [])
 
-  const isActive = (item: NavItem) => {
-    const href = item.href(siteId)
-    return item.matchPrefix ? pathname.startsWith(href) : pathname === href
+  // Close mobile on navigation
+  useEffect(() => {
+    onMobileClose()
+  }, [pathname, onMobileClose])
+
+  // Keyboard shortcut: [ to toggle
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const tag = (e.target as HTMLElement)?.tagName
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+        e.preventDefault()
+        toggle()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [collapsed])
+
+  const toggle = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev
+      localStorage.setItem(SIDEBAR_KEY, String(next))
+      return next
+    })
+  }, [])
+
+  const sidebarContent = (isMobile: boolean) => {
+    const isCollapsed = isMobile ? false : collapsed
+
+    return (
+      <div className="flex flex-col h-full overflow-x-hidden">
+        {/* Logo */}
+        <Link
+          href="/"
+          className={`flex items-center gap-3 px-5 py-5 shrink-0 group ${isCollapsed ? 'justify-center px-0' : ''}`}
+        >
+          <img
+            src="/pulse_icon_no_margins.png"
+            alt="Pulse"
+            className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200"
+          />
+          <span
+            className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-all duration-150 whitespace-nowrap overflow-hidden ${
+              isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
+            }`}
+          >
+            Pulse
+          </span>
+        </Link>
+
+        {/* Site Picker */}
+        <SitePicker sites={sites} siteId={siteId} collapsed={isCollapsed} />
+
+        {/* Nav Groups */}
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
+          {NAV_GROUPS.map((group) => (
+            <div key={group.label}>
+              <div
+                className={`overflow-hidden transition-all duration-150 ${
+                  isCollapsed ? 'h-2' : 'h-auto'
+                }`}
+              >
+                {!isCollapsed && (
+                  <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+                    {group.label}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-0.5">
+                {group.items.map((item) => (
+                  <NavLink
+                    key={item.label}
+                    item={item}
+                    siteId={siteId}
+                    collapsed={isCollapsed}
+                    onClick={isMobile ? onMobileClose : undefined}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </nav>
+
+        {/* Bottom */}
+        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-0.5 shrink-0">
+          {canEdit && (
+            <NavLink
+              item={SETTINGS_ITEM}
+              siteId={siteId}
+              collapsed={isCollapsed}
+              onClick={isMobile ? onMobileClose : undefined}
+            />
+          )}
+          {!isMobile && (
+            <button
+              onClick={toggle}
+              className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full ${
+                isCollapsed ? 'justify-center' : ''
+              }`}
+              title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
+            >
+              {collapsed ? (
+                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0" />
+              ) : (
+                <>
+                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
+                  <span className="whitespace-nowrap overflow-hidden">Collapse</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    )
   }
 
   return (
     <>
-      <div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        {/* Site Picker */}
-        <SitePicker sites={sites} siteId={siteId} />
+      {/* Desktop */}
+      <aside
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden"
+        style={{
+          width: collapsed ? 56 : 256,
+          transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      >
+        {sidebarContent(false)}
+      </aside>
 
-        {/* Nav Groups */}
-        {NAV_GROUPS.map((group) => (
-          <div key={group.label} className="mb-4">
-            {open && (
-              <motion.p
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="px-1 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider"
-              >
-                {group.label}
-              </motion.p>
-            )}
-            <div className="flex flex-col gap-0.5">
-              {group.items.map((item) => (
-                <SidebarLink
-                  key={item.label}
-                  active={isActive(item)}
-                  link={{
-                    label: item.label,
-                    href: item.href(siteId),
-                    icon: (
-                      <item.icon
-                        className={`h-5 w-5 flex-shrink-0 ${
-                          isActive(item)
-                            ? 'text-brand-orange'
-                            : 'text-neutral-700 dark:text-neutral-200'
-                        }`}
-                        weight={isActive(item) ? 'fill' : 'regular'}
-                      />
-                    ),
-                  }}
-                  className={
-                    isActive(item)
-                      ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
-                      : 'rounded-lg px-1'
-                  }
-                />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Bottom: Settings */}
-      <div className="border-t border-neutral-700/30 pt-3">
-        {canEdit && (
-          <SidebarLink
-            active={isActive(SETTINGS_ITEM)}
-            link={{
-              label: SETTINGS_ITEM.label,
-              href: SETTINGS_ITEM.href(siteId),
-              icon: (
-                <SETTINGS_ITEM.icon
-                  className={`h-5 w-5 flex-shrink-0 ${
-                    isActive(SETTINGS_ITEM)
-                      ? 'text-brand-orange'
-                      : 'text-neutral-700 dark:text-neutral-200'
-                  }`}
-                  weight={isActive(SETTINGS_ITEM) ? 'fill' : 'regular'}
-                />
-              ),
-            }}
-            className={
-              isActive(SETTINGS_ITEM)
-                ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
-                : 'rounded-lg px-1'
-            }
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/30 md:hidden"
+            onClick={onMobileClose}
           />
-        )}
-      </div>
+          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
+              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
+              <button
+                onClick={onMobileClose}
+                className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
+              >
+                <XIcon className="w-5 h-5" />
+              </button>
+            </div>
+            {sidebarContent(true)}
+          </aside>
+        </>
+      )}
     </>
   )
 }
-
-export default function PulseSidebar({ siteId }: { siteId: string }) {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <SidebarPrimitive open={open} setOpen={setOpen}>
-      <SidebarBody className="justify-between gap-6 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
-        <SidebarContent siteId={siteId} />
-      </SidebarBody>
-    </SidebarPrimitive>
-  )
-}