website refactor

apps/website/components/dev/DevToolbar.tsx

@@ -17,6 +17,7 @@ import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Toolbar } from '@/ui/Toolbar';
 import { APIStatusSection } from './sections/APIStatusSection';
 import { NotificationSendSection } from './sections/NotificationSendSection';
 import { NotificationTypeSection } from './sections/NotificationTypeSection';
@@ -229,9 +230,7 @@ export function DevToolbar() {
 
   if (isMinimized) {
     return (
-      <Stack 
-        style={{ position: 'fixed', right: '1rem', bottom: '6rem', zIndex: 1000 }}
-      >
+      <Toolbar minimized bottom="6rem">
         <IconButton
           icon={Wrench}
           onClick={() => setIsMinimized(false)}
@@ -239,31 +238,12 @@ export function DevToolbar() {
           title="Open Dev Toolbar"
           size="lg"
         />
-      </Stack>
+      </Toolbar>
     );
   }
 
   return (
-    <Stack
-      width="min(420px, calc(100vw - 2rem))"
-      maxHeight="calc(100vh - 2rem)"
-      overflow="auto"
-      border={true}
-      borderColor="var(--ui-color-border-default)"
-      rounded="xl"
-      bg="rgba(20, 22, 25, 0.92)"
-      padding={3}
-      style={{
-        position: 'fixed',
-        right: '1rem',
-        bottom: '6rem',
-        zIndex: 1000,
-        boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
-        backdropFilter: 'blur(12px)',
-        WebkitBackdropFilter: 'blur(12px)',
-      }}
-      gap={4}
-    >
+    <Toolbar bottom="6rem">
       {/* Header */}
       <Stack direction="row" align="center" justify="between" gap={4}>
         <Stack direction="row" align="center" gap={2}>
@@ -386,6 +366,6 @@ export function DevToolbar() {
           <Text size="xs" variant="low">Click ↑ to expand dev tools</Text>
         </Stack>
       )}
-    </Stack>
+    </Toolbar>
   );
 }

apps/website/components/layout/AppFooter.tsx

@@ -1,13 +1,14 @@
 'use client';
 
+import { useSidebar } from '@/components/layout/SidebarContext';
 import { Box } from '@/ui/Box';
 import { Link } from '@/ui/Link';
+import { ShellFooter } from '@/ui/shell/Shell';
 import { Text } from '@/ui/Text';
 import { useEffect, useState } from 'react';
-import { AppShellBar } from './AppShellBar';
 
 export function AppFooter() {
-  const currentYear = new Date().getFullYear();
+  const { isCollapsed } = useSidebar();
   
   // Clock
   const [time, setTime] = useState<string>('');
@@ -22,12 +23,12 @@ export function AppFooter() {
   }, []);
 
   return (
-    <AppShellBar position="bottom">
+    <ShellFooter collapsed={isCollapsed}>
       {/* Left: System Info */}
       <Box display="flex" alignItems="center" gap={6} flex={1}>
         <Box display="flex" alignItems="center" gap={2}>
           <Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
-          <Text size="xs" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
+          <Text size="xs" variant="med" font="mono" style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
             GRIDPILOT
           </Text>
         </Box>
@@ -35,7 +36,7 @@ export function AppFooter() {
 
       {/* Center: Time */}
       <Box display="flex" alignItems="center" justifyContent="center" flex={1}>
-        <Text size="sm" font="mono" className="text-text-med tracking-widest tabular-nums">
+        <Text size="sm" font="mono" variant="med" style={{ letterSpacing: '0.1em' }}>
           {time} UTC
         </Text>
       </Box>
@@ -46,7 +47,7 @@ export function AppFooter() {
         <FooterLink href="/privacy">Privacy</FooterLink>
         <FooterLink href="/status">Status</FooterLink>
       </Box>
-    </AppShellBar>
+    </ShellFooter>
   );
 }
 

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)} />
     </>

apps/website/components/layout/AppSidebar.tsx

@@ -3,7 +3,6 @@
 import { BrandMark } from '@/ui/BrandMark';
 import { NavLink } from '@/ui/NavLink';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { 
@@ -18,6 +17,8 @@ import {
 } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useSidebar } from '@/components/layout/SidebarContext';
+import { ShellSidebar } from '@/ui/shell/Shell';
+import { Button } from '@/ui/Button';
 
 export function AppSidebar() {
   const pathname = usePathname();
@@ -36,76 +37,64 @@ export function AppSidebar() {
   ];
 
   return (
-    <Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-white/10 relative transition-all duration-300 ease-in-out">
-      {/* Brand Header */}
-      <Box p={6} pb={8} display="flex" alignItems="center" justifyContent={isCollapsed ? 'center' : 'start'}>
-        <BrandMark collapsed={isCollapsed} />
-      </Box>
-
-      {/* Navigation */}
-      <Box flex={1} px={isCollapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300">
-        <Stack gap={8}>
-          <Box>
-            {!isCollapsed && (
-              <Text size="xs" className="px-1 mb-3 text-text-low/40 font-mono uppercase tracking-widest text-[10px] font-bold transition-opacity duration-300">
-                Platform
-              </Text>
-            )}
-            <Stack gap={3}>
-              {mainItems.map((item) => (
-                <NavLink
-                  key={item.href}
-                  href={item.href}
-                  label={item.label}
-                  icon={item.icon}
-                  isActive={pathname === item.href}
-                  variant="sidebar"
-                  collapsed={isCollapsed}
-                />
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            {!isCollapsed && (
-              <Text size="xs" className="px-1 mb-3 text-text-low/40 font-mono uppercase tracking-widest text-[10px] font-bold transition-opacity duration-300">
-                Competition
-              </Text>
-            )}
-            <Stack gap={3}>
-              {competitionItems.map((item) => (
-                <NavLink
-                  key={item.href}
-                  href={item.href}
-                  label={item.label}
-                  icon={item.icon}
-                  isActive={pathname === item.href}
-                  variant="sidebar"
-                  collapsed={isCollapsed}
-                />
-              ))}
-            </Stack>
-          </Box>
-        </Stack>
-      </Box>
-
-      {/* Bottom Actions */}
-      <Box className="h-14 flex items-center px-4 border-t border-white/10">
-        <button 
+    <ShellSidebar
+      collapsed={isCollapsed}
+      header={<BrandMark collapsed={isCollapsed} />}
+      footer={
+        <Button
+          icon={isCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
           onClick={toggleCollapse}
-          className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-start'} gap-2 text-text-low hover:text-text-high transition-colors px-2 py-2 rounded-md hover:bg-white/5 w-full group`}
-          title={isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+          variant="ghost"
+          fullWidth
+          justifyContent={isCollapsed ? 'center' : 'start'}
         >
-          {isCollapsed ? (
-            <ChevronRight size={16} className="group-hover:translate-x-1 transition-transform" />
-          ) : (
-            <>
-              <ChevronLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
-              <Text size="xs" className="font-medium">Collapse</Text>
-            </>
+          {!isCollapsed && "Collapse"}
+        </Button>
+      }
+    >
+      <Stack gap={8}>
+        <Stack gap={3}>
+          {!isCollapsed && (
+            <Text size="xs" variant="low" weight="bold" uppercase>
+              Platform
+            </Text>
           )}
-        </button>
-      </Box>
-    </Box>
+          <Stack gap={3}>
+            {mainItems.map((item) => (
+              <NavLink
+                key={item.href}
+                href={item.href}
+                label={item.label}
+                icon={item.icon}
+                isActive={pathname === item.href}
+                variant="sidebar"
+                collapsed={isCollapsed}
+              />
+            ))}
+          </Stack>
+        </Stack>
+
+        <Stack gap={3}>
+          {!isCollapsed && (
+            <Text size="xs" variant="low" weight="bold" uppercase>
+              Competition
+            </Text>
+          )}
+          <Stack gap={3}>
+            {competitionItems.map((item) => (
+              <NavLink
+                key={item.href}
+                href={item.href}
+                label={item.label}
+                icon={item.icon}
+                isActive={pathname === item.href}
+                variant="sidebar"
+                collapsed={isCollapsed}
+              />
+            ))}
+          </Stack>
+        </Stack>
+      </Stack>
+    </ShellSidebar>
   );
 }