import { useState } from 'react'; import { useRouter } from 'next/router'; import Link from 'next/link'; /** * TopSearchBar — the top horizontal chrome strip from the operator's * redesign-v2 mockup. * * Layout: prominent search input on the left (with magnifier + Cmd+K * hint pill), then 3 right-side widgets — notification bell (with red * badge when there are unread items), mail/inbox icon, and a compact * user-menu chip (avatar + name + chevron). * * Mounted globally inside for authenticated users; renders * as a no-op `null` for unauthenticated visitors (the public landing * uses its own marketing header). * * Props: * user { username, email, avatar_url, ... } * notificationCount number — drives the bell badge; 0 hides it * onOpenCommandPalette () => void — fires when user clicks the * search input or presses ⌘K (the global * keydown listener lives in ). * * Implementation notes: * - The search input is intentionally read-only-ish: clicking or * focusing it opens the CommandPaletteModal instead of typing * inline. This matches Linear / Notion / Vercel's pattern and * avoids two competing search affordances on the page. * - The "Cmd+K" hint adapts to the user's platform: ⌘K on Mac, * Ctrl+K elsewhere. Detection is best-effort via navigator.platform * and gracefully defaults to ⌘ on the server (matches the Mac * audience's default expectation). * - User menu (avatar + name) is a Link that routes to /settings; * a follow-up convoy can replace this with a real dropdown if * the operator wants the full Notion-style menu. */ function isMacPlatform() { if (typeof window === 'undefined' || !window.navigator) return true; return /Mac|iPhone|iPad|iPod/.test(window.navigator.platform); } export default function TopSearchBar({ user, notificationCount = 0, onOpenCommandPalette, }) { const router = useRouter(); const [hovered, setHovered] = useState(false); if (!user) return null; const isMac = isMacPlatform(); const shortcutLabel = isMac ? '⌘K' : 'Ctrl+K'; const initial = (user.username || user.email || 'U').charAt(0).toUpperCase(); const displayName = user.username || user.email?.split('@')[0] || 'Account'; const openPalette = () => { onOpenCommandPalette?.(); }; return (
{/* Search affordance — read-only-ish input that opens the command palette on click. */}
{displayName}
); }