Global Search — UI

TopBar (all three portals)
┌──────────────────────────────────────────────────────┐
│  [≡ sidebar]   🔍 Search...  Ctrl+K       [icons...] │
└──────────────────────────────────────────────────────┘
         ↓ click or Ctrl+K
┌──────────────────────────────────────────────────────┐
│  🔍 Search blogs, contacts, campaigns...             │  ← autofocused input
├──────────────────────────────────────────────────────┤
│  BLOGS                                               │
│   📝 Q2 SEO Strategy for Acme Corp      draft        │
│   📝 10 Tips for Email Marketing        published    │
├──────────────────────────────────────────────────────┤
│  CONTACTS                                            │
│   👤 John Smith · Acme Corp             lead         │
├──────────────────────────────────────────────────────┤
│  CAMPAIGNS                                           │
│   📣 Q2 Launch Campaign                 active       │
└──────────────────────────────────────────────────────┘
  Showing 6 of 47 results  ·  Press ↑↓ to navigate, Enter to open

interface GlobalSearchProps {
  scope: "tenant" | "admin"
  // "tenant" → POST /v1/search (injected tenantId from server session)
  // "admin"  → POST /v1/admin/search (manage portal)
 
  apiBase: string
  // Base URL for the API, e.g. "http://localhost:3003"
  // Passed in so the component works across portals without hardcoding
 
  getAuthHeaders: () => Promise<Record<string, string>>
  // Async function that returns { Authorization: "Bearer ..." }
  // All portals use JWT cookies — pass empty headers; the API reads the cookie
 
  onNavigate: (href: string) => void
  // Called when user selects a result; portal passes router.push or similar
}

GlobalSearch.tsx
  ├── Ctrl+K keydown listener (document-level, on mount)
  ├── Modal overlay  (z-50, backdrop-blur)
  │     ├── Input  (autofocus, debounced onChange)
  │     ├── ResultsList
  │     │     └── ResultGroup (per entity type)
  │     │           └── GlobalSearchResult (one per hit)
  │     └── Footer hint  ("↑↓ navigate · Enter open · Esc close")
  └── Loading / empty / error states

GlobalSearchResult.tsx
  ├── Entity type icon  (Lucide icon per collection)
  ├── Title            (highlighted if Typesense returns highlight snippets)
  ├── Subtitle         (status badge)
  └── Entity type label (small muted text)

import { GlobalSearch } from "@leadmetrics/ui"
import { useRouter } from "next/navigation"
 
// Inside TopBar:
const router = useRouter()
const [searchOpen, setSearchOpen] = useState(false)
 
<button
  onClick={() => setSearchOpen(true)}
  className="flex items-center gap-2 text-sm text-muted-foreground
             hover:text-foreground transition-colors px-3 py-1.5
             rounded-md border border-border/50 hover:border-border"
>
  <Search className="h-4 w-4" />
  <span className="hidden sm:inline">Search</span>
  <kbd className="hidden sm:inline text-xs bg-muted px-1.5 py-0.5 rounded">
    Ctrl+K
  </kbd>
</button>
 
{searchOpen && (
  <GlobalSearch
    scope="tenant"
    apiBase={process.env.NEXT_PUBLIC_API_URL!}
    getAuthHeaders={async () => {
      // Dashboard uses JWT cookie (dashboard_access_token) — sent automatically
      // Pass empty headers; the API middleware reads the cookie
      return {}
    }}
    onNavigate={(href) => {
      router.push(href)
      setSearchOpen(false)
    }}
  />
)}

<GlobalSearch
  scope="admin"
  apiBase={process.env.NEXT_PUBLIC_API_URL!}
  getAuthHeaders={async () => ({})}  // JWT cookie
  onNavigate={(href) => {
    router.push(href)
    setSearchOpen(false)
  }}
/>