website refactor

apps/website/components/layout/AppHeader.tsx

@@ -12,6 +12,9 @@ import { Input } from '@/ui/Input';
 import { Box } from '@/ui/Box';
 import { IconButton } from '@/ui/IconButton';
 import { useSidebar } from '@/components/layout/SidebarContext';
+import { PublicTopNav } from '@/ui/PublicTopNav';
+import { PublicNavLogin } from '@/ui/PublicNavLogin';
+import { PublicNavSignup } from '@/ui/PublicNavSignup';
 
 export function AppHeader() {
   const pathname = usePathname();
@@ -41,29 +44,39 @@ export function AppHeader() {
   return (
     <>
       <ShellHeader collapsed={isCollapsed}>
-        {/* Left: Context & Search */}
+        {/* Left: Public Navigation & Context */}
         <Box display="flex" alignItems="center" gap={6} flex={1}>
-          <Text size="sm" variant="med" weight="medium" style={{ minWidth: '100px' }}>
-            {breadcrumbs}
-          </Text>
+          {/* Public Top Navigation - Only when not authenticated */}
+          {!isAuthenticated && (
+            <PublicTopNav pathname={pathname} />
+          )}
 
-          {/* Command Search Trigger */}
-          <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>
+          {/* Context & Search - Only when authenticated */}
+          {isAuthenticated && (
+            <>
+              <Text size="sm" variant="med" weight="medium" style={{ minWidth: '100px' }}>
+                {breadcrumbs}
+              </Text>
+
+              {/* Command Search Trigger */}
+              <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 */}
@@ -71,17 +84,25 @@ export function AppHeader() {
           {/* Notifications - Only when authed */}
           {isAuthenticated && (
             <Box position="relative">
-              <IconButton 
-                icon={Bell} 
-                variant="ghost" 
+              <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 />
+          {/* Public Login/Signup Buttons - Only when not authenticated */}
+          {!isAuthenticated && (
+            <>
+              <PublicNavLogin />
+              <PublicNavSignup />
+            </>
+          )}
+
+          {/* User Pill (Handles Auth & Menu) - Only when authenticated */}
+          {isAuthenticated && <UserPill />}
         </Box>
       </ShellHeader>