feat: move site picker from sidebar to breadcrumbs

Replaced simple breadcrumb dropdown with the full sidebar-style site picker (search, favicons, name+domain, add new site, animation). Removed SitePicker from sidebar and cleaned up unused props.
2026-03-28 20:57:29 +01:00
parent ff256a5986
commit 48320c4db3
2 changed files with 95 additions and 228 deletions
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,10 +1,12 @@
 'use client'

 import { useState, useCallback, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { motion, AnimatePresence } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import { formatUpdatedAgo } from '@ciphera-net/ui'
+import { formatUpdatedAgo, PlusIcon } from '@ciphera-net/ui'
 import { CaretDown, CaretRight, SidebarSimple } from '@phosphor-icons/react'
 import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
 import { useRealtime } from '@/lib/swr/dashboard'
@@ -60,8 +62,12 @@ const Sidebar = dynamic(() => import('./Sidebar'), {

 function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteId: string; currentSiteName: string }) {
  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
  const [sites, setSites] = useState<Site[]>([])
  const ref = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
  const pathname = usePathname()
  const router = useRouter()

@@ -71,37 +77,79 @@ function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteI
    }
  }, [open, sites.length])

+  const updatePosition = useCallback(() => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      let top = rect.bottom + 4
+      if (panelRef.current) {
+        const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
+        top = Math.min(top, Math.max(8, maxTop))
+      }
+      setFixedPos({ left: rect.left, top })
+    }
+  }, [])
+
  useEffect(() => {
    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+      const target = e.target as Node
+      if (
+        ref.current && !ref.current.contains(target) &&
+        (!panelRef.current || !panelRef.current.contains(target))
+      ) {
+        if (open) { setOpen(false); setSearch('') }
+      }
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
-  }, [])
+  }, [open])
+
+  useEffect(() => {
+    if (open) {
+      updatePosition()
+      requestAnimationFrame(() => updatePosition())
+    }
+  }, [open, updatePosition])
+
+  const closePicker = () => { setOpen(false); setSearch('') }

  const switchSite = (id: string) => {
-    // Navigate to same section on the new site
    router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
-    setOpen(false)
+    closePicker()
  }

-  return (
-    <div className="relative" ref={ref}>
-      <button
-        onClick={() => setOpen(!open)}
-        className="inline-flex items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors max-w-[160px] cursor-pointer"
-      >
-        <span className="truncate">{currentSiteName}</span>
-        <CaretDown className="w-3 h-3 shrink-0 translate-y-px" />
-      </button>
+  const filtered = sites.filter(
+    (s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.domain.toLowerCase().includes(search.toLowerCase())
+  )
+
+  const dropdown = (
+    <AnimatePresence>
      {open && (
-        <div className="absolute top-full left-0 mt-1 z-50 w-[220px] bg-neutral-900/90 backdrop-blur-2xl border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden">
+        <motion.div
+          ref={panelRef}
+          initial={{ opacity: 0, y: 10, scale: 0.95 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 10, scale: 0.95 }}
+          transition={{ duration: 0.15 }}
+          className="fixed z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden origin-top-left"
+          style={fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
+        >
+          <div className="p-2">
+            <input
+              type="text"
+              placeholder="Search sites..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Escape') closePicker() }}
+              className="w-full px-3 py-1.5 text-sm bg-white/[0.04] border border-white/[0.08] rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
+              autoFocus
+            />
+          </div>
          <div className="max-h-64 overflow-y-auto">
-            {sites.map((site) => (
+            {filtered.map((site) => (
              <button
                key={site.id}
                onClick={() => switchSite(site.id)}
-                className={`w-full flex items-center gap-2.5 px-3 py-2 text-sm text-left transition-colors ${
+                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
                  site.id === currentSiteId
                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
                    : 'text-neutral-300 hover:bg-white/[0.06]'
@@ -110,14 +158,38 @@ function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteI
                <img
                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
                  alt=""
-                  className="w-4 h-4 rounded object-contain shrink-0"
+                  className="w-5 h-5 rounded object-contain shrink-0"
                />
-                <span className="truncate">{site.name}</span>
+                <span className="flex flex-col min-w-0">
+                  <span className="truncate">{site.name}</span>
+                  <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
+                </span>
              </button>
            ))}
+            {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
          </div>
-        </div>
+          <div className="border-t border-white/[0.06] p-2">
+            <Link href="/sites/new" onClick={() => closePicker()} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-white/[0.06] rounded-lg">
+              <PlusIcon className="w-4 h-4" />
+              Add new site
+            </Link>
+          </div>
+        </motion.div>
      )}
+    </AnimatePresence>
+  )
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        ref={buttonRef}
+        onClick={() => setOpen(!open)}
+        className="inline-flex items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors max-w-[160px] cursor-pointer"
+      >
+        <span className="truncate">{currentSiteName}</span>
+        <CaretDown className="w-3 h-3 shrink-0 translate-y-px" />
+      </button>
+      {typeof document !== 'undefined' ? createPortal(dropdown, document.body) : dropdown}
    </div>
  )
 }