website refactor

apps/website/components/layout/AppHeader.tsx

@@ -2,18 +2,19 @@
 
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Search, Bell, User, ChevronDown, Command } from 'lucide-react';
+import { Search, Bell, Command } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
-import { routes } from '@/lib/routing/RouteConfig';
-import { Button } from '@/ui/Button';
 import { useState, useEffect } from 'react';
 import { AppShellBar } from './AppShellBar';
+import { CommandModal } from './CommandModal';
+import { UserPill } from '@/components/profile/UserPill';
 
 export function AppHeader() {
   const pathname = usePathname();
   const { data: session } = useCurrentSession();
   const isAuthenticated = !!session;
+  const [isCommandOpen, setIsCommandOpen] = useState(false);
   
   // Simple breadcrumb logic
   const pathSegments = pathname.split('/').filter(Boolean);
@@ -21,99 +22,64 @@ export function AppHeader() {
     ? pathSegments.map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' / ')
     : 'Home';
 
-  // Clock
-  const [time, setTime] = useState<string>('');
+  // Cmd+K Listener
   useEffect(() => {
-    const updateTime = () => {
-      const now = new Date();
-      setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setIsCommandOpen((open) => !open);
+      }
     };
-    updateTime();
-    const interval = setInterval(updateTime, 60000);
-    return () => clearInterval(interval);
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
   }, []);
 
   return (
-    <AppShellBar position="top">
-      {/* Left: Context & Search */}
-      <Box display="flex" alignItems="center" gap={6} flex={1}>
-        <Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
-          {breadcrumbs}
-        </Text>
-
-        {/* Command Search - Refined */}
-        <Box 
-          className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal/50 border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 focus-within:border-primary-accent focus-within:ring-1 focus-within:ring-primary-accent/20 transition-all cursor-text group"
-        >
-          <Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
-          <Box 
-            as="input"
-            type="text" 
-            placeholder="Search or type a command..." 
-            className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
-          />
-          <Box className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
-            <Command size={10} />
-            <span>K</span>
-          </Box>
-        </Box>
-      </Box>
-
-      {/* Right: System Status & User */}
-      <Box display="flex" alignItems="center" gap={4}>
-        {/* System Time */}
-        <Box className="hidden lg:flex items-center gap-2 text-text-med border-r border-outline-steel pr-4 h-6">
-          <Text size="sm" font="mono" className="tracking-widest tabular-nums">
-            {time} UTC
+    <>
+      <AppShellBar position="top">
+        {/* Left: Context & Search */}
+        <Box display="flex" alignItems="center" gap={6} flex={1}>
+          <Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
+            {breadcrumbs}
           </Text>
+
+          {/* Command Search Trigger */}
+          <button 
+            type="button"
+            onClick={() => setIsCommandOpen(true)}
+            className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 hover:text-text-med transition-all group cursor-pointer"
+          >
+            <Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
+            <span className="flex-1 text-left text-sm text-text-low/70">
+              Search or type a command...
+            </span>
+            <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
+              <Command size={10} />
+              <span>K</span>
+            </div>
+          </button>
         </Box>
 
-        {/* Notifications */}
-        <Box 
-          as="button" 
-          className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
-          title="Notifications"
-        >
-          <Bell size={16} />
-          <Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
-        </Box>
-
-        {/* User Menu */}
-        {isAuthenticated ? (
-          <Box display="flex" alignItems="center" gap={3} className="pl-2 cursor-pointer group">
+        {/* Right: User & Notifications */}
+        <Box display="flex" alignItems="center" gap={4}>
+          {/* Notifications - Only when authed */}
+          {isAuthenticated && (
             <Box 
-              className="w-8 h-8 rounded-full bg-surface-charcoal flex items-center justify-center text-text-med border border-outline-steel group-hover:border-primary-accent transition-colors"
+              as="button" 
+              className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
+              title="Notifications"
             >
-              <User size={14} />
+              <Bell size={16} />
+              <Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
             </Box>
-            <Box className="hidden md:block text-left">
-              <Text size="sm" weight="medium" className="text-text-high leading-none group-hover:text-primary-accent transition-colors">
-                {session.user.displayName || 'Driver'}
-              </Text>
-            </Box>
-            <ChevronDown size={12} className="text-text-low group-hover:text-text-high transition-colors" />
-          </Box>
-        ) : (
-          <Box display="flex" gap={2}>
-            <Button 
-              as="a" 
-              href={routes.auth.login} 
-              variant="ghost" 
-              size="sm"
-            >
-              Sign In
-            </Button>
-            <Button 
-              as="a" 
-              href={routes.auth.signup} 
-              variant="primary" 
-              size="sm"
-            >
-              Join
-            </Button>
-          </Box>
-        )}
-      </Box>
-    </AppShellBar>
+          )}
+
+          {/* User Pill (Handles Auth & Menu) */}
+          <UserPill />
+        </Box>
+      </AppShellBar>
+
+      <CommandModal isOpen={isCommandOpen} onClose={() => setIsCommandOpen(false)} />
+    </>
   );
 }