website refactor

apps/website/components/layout/AppHeader.tsx

@@ -1,20 +1,24 @@
 'use client';
 
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Search, Bell, Command } from 'lucide-react';
+import { Bell, Command } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { useState, useEffect } from 'react';
-import { AppShellBar } from './AppShellBar';
+import { ShellHeader } from '@/ui/shell/Shell';
 import { CommandModal } from './CommandModal';
 import { UserPill } from '@/components/profile/UserPill';
+import { Input } from '@/ui/Input';
+import { Box } from '@/ui/Box';
+import { IconButton } from '@/ui/IconButton';
+import { useSidebar } from '@/components/layout/SidebarContext';
 
 export function AppHeader() {
   const pathname = usePathname();
   const { data: session } = useCurrentSession();
   const isAuthenticated = !!session;
   const [isCommandOpen, setIsCommandOpen] = useState(false);
+  const { isCollapsed } = useSidebar();
   
   // Simple breadcrumb logic
   const pathSegments = pathname.split('/').filter(Boolean);
@@ -36,48 +40,50 @@ export function AppHeader() {
 
   return (
     <>
-      <AppShellBar position="top">
+      <ShellHeader collapsed={isCollapsed}>
         {/* 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]">
+          <Text size="sm" variant="med" weight="medium" style={{ minWidth: '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 display={{ base: 'none', md: 'block' }}>
+            <Input
+              readOnly
+              onClick={() => setIsCommandOpen(true)}
+              placeholder="Search or type a command..."
+              variant="search"
+              width="24rem"
+              rightElement={
+                <Box display="flex" alignItems="center" gap={1} paddingX={1.5} paddingY={0.5} rounded bg="white/5" border>
+                  <Command size={10} />
+                  <Text size="xs" font="mono" variant="low" style={{ fontSize: '10px' }}>K</Text>
+                </Box>
+              }
+              className="cursor-pointer"
+            />
+          </Box>
         </Box>
 
         {/* Right: User & Notifications */}
         <Box display="flex" alignItems="center" gap={4}>
           {/* Notifications - Only when authed */}
           {isAuthenticated && (
-            <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 position="relative">
+              <IconButton 
+                icon={Bell} 
+                variant="ghost" 
+                title="Notifications"
+              />
+              <Box position="absolute" top={2} right={2} width={1.5} height={1.5} bg="var(--ui-color-intent-primary)" rounded="full" ring="2px" />
             </Box>
           )}
 
           {/* User Pill (Handles Auth & Menu) */}
           <UserPill />
         </Box>
-      </AppShellBar>
+      </ShellHeader>
 
       <CommandModal isOpen={isCommandOpen} onClose={() => setIsCommandOpen(false)} />
     </>