feat: replace sidebar with 21st.dev hover-to-expand component

Use framer-motion animated sidebar from 21st.dev — collapses to icons,
expands on hover. Phosphor icons instead of lucide. Remove old manual
collapse/expand and sidebar-context. Top bar has Pulse logo + user
actions, sidebar below with site picker and nav groups.

components/dashboard/Sidebar.tsx

@@ -3,8 +3,15 @@
 import { useState, useEffect, useRef } 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,
@@ -14,16 +21,10 @@ import {
   CloudUploadIcon,
   HeartbeatIcon,
   SettingsIcon,
-  CollapseLeftIcon,
-  CollapseRightIcon,
   ChevronUpDownIcon,
   PlusIcon,
-  XIcon,
-  MenuIcon,
 } from '@ciphera-net/ui'
 
-const SIDEBAR_COLLAPSED_KEY = 'pulse_sidebar_collapsed'
-
 interface NavItem {
   label: string
   href: (siteId: string) => string
@@ -63,22 +64,15 @@ const SETTINGS_ITEM: NavItem = {
   matchPrefix: true,
 }
 
-function SitePicker({
-  sites,
-  currentSiteId,
-  collapsed,
-}: {
-  sites: Site[]
-  currentSiteId: string
-  collapsed: boolean
-}) {
+function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
+  const { open: sidebarOpen } = useSidebar()
   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 === currentSiteId)
+  const currentSite = sites.find((s) => s.id === siteId)
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -97,10 +91,9 @@ function SitePicker({
       s.domain.toLowerCase().includes(search.toLowerCase())
   )
 
-  const switchSite = (siteId: string) => {
-    // Preserve current page type
+  const switchSite = (id: string) => {
     const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
-    router.push(`/sites/${siteId}${currentPageType}`)
+    router.push(`/sites/${id}${currentPageType}`)
     setOpen(false)
     setSearch('')
   }
@@ -108,18 +101,15 @@ function SitePicker({
   const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
 
   return (
-    <div className="relative px-3 mb-2" ref={ref}>
+    <div className="relative mb-4" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className={`w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors ${
-          collapsed ? 'justify-center' : ''
-        }`}
-        title={collapsed ? currentSite?.name || 'Select site' : undefined}
+        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"
       >
         <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>
-        {!collapsed && (
+        {sidebarOpen && (
           <>
             <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
             <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
@@ -128,7 +118,7 @@ function SitePicker({
       </button>
 
       {open && (
-        <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="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="p-2">
             <input
               type="text"
@@ -144,8 +134,8 @@ function SitePicker({
               <button
                 key={site.id}
                 onClick={() => switchSite(site.id)}
-                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors text-left ${
-                  site.id === currentSiteId
+                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
+                  site.id === siteId
                     ? 'bg-brand-orange/10 text-brand-orange font-medium'
                     : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                 }`}
@@ -167,7 +157,7 @@ function SitePicker({
             <Link
               href="/sites/new"
               onClick={() => setOpen(false)}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg"
             >
               <PlusIcon className="w-4 h-4" />
               Add new site
@@ -179,186 +169,110 @@ function SitePicker({
   )
 }
 
-function NavItemLink({
-  item,
-  siteId,
-  collapsed,
-  onClick,
-}: {
-  item: NavItem
-  siteId: string
-  collapsed: boolean
-  onClick?: () => void
-}) {
-  const pathname = usePathname()
-  const href = item.href(siteId)
-  const isActive = 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' : ''
-      } ${
-        isActive
-          ? '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={isActive ? 'fill' : 'regular'} />
-      {!collapsed && <span>{item.label}</span>}
-    </Link>
-  )
-}
-
-export default function Sidebar({
-  siteId,
-  mobileOpen,
-  onMobileClose,
-}: {
-  siteId: string
-  mobileOpen: boolean
-  onMobileClose: () => void
-}) {
+function SidebarContent({ siteId }: { siteId: string }) {
   const { user } = useAuth()
-  const canEdit = user?.role === 'owner' || user?.role === 'admin'
-  const [collapsed, setCollapsed] = useState(() => {
-    if (typeof window === 'undefined') return false
-    return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === 'true'
-  })
-  const [sites, setSites] = useState<Site[]>([])
+  const { open } = useSidebar()
   const pathname = usePathname()
-
-  // Close mobile drawer on navigation
-  useEffect(() => {
-    onMobileClose()
-  }, [pathname, onMobileClose])
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const [sites, setSites] = useState<Site[]>([])
 
   useEffect(() => {
-    listSites()
-      .then(setSites)
-      .catch(() => {})
+    listSites().then(setSites).catch(() => {})
   }, [])
 
-  const toggleCollapsed = () => {
-    const next = !collapsed
-    setCollapsed(next)
-    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next))
-  }
-
-  const sidebarContent = (isMobile: boolean) => {
-    const isCollapsed = isMobile ? false : collapsed
-
-    return (
-      <div className="flex flex-col h-full overflow-hidden">
-        {/* Site Picker */}
-        <div className="pt-3 pb-2">
-          <SitePicker sites={sites} currentSiteId={siteId} collapsed={isCollapsed} />
-        </div>
-
-        {/* Nav Groups */}
-        <nav className="flex-1 overflow-y-auto px-3 space-y-4">
-          {NAV_GROUPS.map((group) => (
-            <div key={group.label}>
-              {!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 className="space-y-0.5">
-                {group.items.map((item) => (
-                  <NavItemLink
-                    key={item.label}
-                    item={item}
-                    siteId={siteId}
-                    collapsed={isCollapsed}
-                    onClick={isMobile ? () => onMobileClose() : undefined}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </nav>
-
-        {/* Bottom: Settings + Collapse toggle */}
-        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-1">
-          {canEdit && (
-            <NavItemLink
-              item={SETTINGS_ITEM}
-              siteId={siteId}
-              collapsed={isCollapsed}
-              onClick={isMobile ? () => onMobileClose() : undefined}
-            />
-          )}
-          {!isMobile && (
-            <button
-              onClick={toggleCollapsed}
-              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 transition-colors w-full"
-              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-            >
-              {collapsed ? (
-                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0 mx-auto" />
-              ) : (
-                <>
-                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
-                  <span>Collapse</span>
-                </>
-              )}
-            </button>
-          )}
-        </div>
-      </div>
-    )
+  const isActive = (item: NavItem) => {
+    const href = item.href(siteId)
+    return item.matchPrefix ? pathname.startsWith(href) : pathname === href
   }
 
   return (
     <>
-      {/* Mobile hamburger trigger — rendered in the header via leftActions */}
+      <div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+        {/* Site Picker */}
+        <SitePicker sites={sites} siteId={siteId} />
 
-      {/* Desktop sidebar */}
-      <aside
-        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 ${
-          collapsed ? 'w-[68px]' : 'w-60'
-        }`}
-      >
-        {sidebarContent(false)}
-      </aside>
-
-      {/* Mobile overlay drawer */}
-      {mobileOpen && (
-        <>
-          <div
-            className="fixed inset-0 z-40 bg-black/30 lg:hidden"
-            onClick={() => onMobileClose()}
-          />
-          <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 lg: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 transition-colors"
+        {/* 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"
               >
-                <XIcon className="w-5 h-5" />
-              </button>
+                {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>
-            {sidebarContent(true)}
-          </aside>
-        </>
-      )}
+          </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'
+            }
+          />
+        )}
+      </div>
     </>
   )
 }
 
-export function SidebarMobileToggle({ onClick }: { onClick: () => void }) {
+export default function PulseSidebar({ siteId }: { siteId: string }) {
+  const [open, setOpen] = useState(false)
+
   return (
-    <button
-      onClick={onClick}
-      className="lg:hidden p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
-      aria-label="Open navigation"
-    >
-      <MenuIcon className="w-5 h-5" />
-    </button>
+    <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>
   )
 }