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 
+      <Toolbar minimized bottom="6rem">
-        style={{ position: 'fixed', right: '1rem', bottom: '6rem', zIndex: 1000 }}
-      >
         <IconButton
           icon={Wrench}
           onClick={() => setIsMinimized(false)}
@@ -239,31 +238,12 @@ export function DevToolbar() {
           title="Open Dev Toolbar"
           size="lg"
         />
-      </Stack>
+      </Toolbar>
     );
   }
 
   return (
-    <Stack
+    <Toolbar bottom="6rem">
-      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}
-    >
       {/* 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 
+          <Box display={{ base: 'none', md: 'block' }}>
-            type="button"
+            <Input
-            onClick={() => setIsCommandOpen(true)}
+              readOnly
-            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"
+              onClick={() => setIsCommandOpen(true)}
-          >
+              placeholder="Search or type a command..."
-            <Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
+              variant="search"
-            <span className="flex-1 text-left text-sm text-text-low/70">
+              width="24rem"
-              Search or type a command...
+              rightElement={
-            </span>
+                <Box display="flex" alignItems="center" gap={1} paddingX={1.5} paddingY={0.5} rounded bg="white/5" border>
-            <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} />
-              <Command size={10} />
+                  <Text size="xs" font="mono" variant="low" style={{ fontSize: '10px' }}>K</Text>
-              <span>K</span>
+                </Box>
-            </div>
+              }
-          </button>
+              className="cursor-pointer"
+            />
+          </Box>
         </Box>
 
         {/* Right: User & Notifications */}
         <Box display="flex" alignItems="center" gap={4}>
           {/* Notifications - Only when authed */}
           {isAuthenticated && (
-            <Box 
+            <Box position="relative">
-              as="button" 
+              <IconButton 
-              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"
+                icon={Bell} 
-              title="Notifications"
+                variant="ghost" 
-            >
+                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="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">
+    <ShellSidebar
-      {/* Brand Header */}
+      collapsed={isCollapsed}
-      <Box p={6} pb={8} display="flex" alignItems="center" justifyContent={isCollapsed ? 'center' : 'start'}>
+      header={<BrandMark collapsed={isCollapsed} />}
-        <BrandMark collapsed={isCollapsed} />
+      footer={
-      </Box>
+        <Button
-
+          icon={isCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
-      {/* 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 
           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`}
+          variant="ghost"
-          title={isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+          fullWidth
+          justifyContent={isCollapsed ? 'center' : 'start'}
         >
-          {isCollapsed ? (
+          {!isCollapsed && "Collapse"}
-            <ChevronRight size={16} className="group-hover:translate-x-1 transition-transform" />
+        </Button>
-          ) : (
+      }
-            <>
+    >
-              <ChevronLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
+      <Stack gap={8}>
-              <Text size="xs" className="font-medium">Collapse</Text>
+        <Stack gap={3}>
-            </>
+          {!isCollapsed && (
+            <Text size="xs" variant="low" weight="bold" uppercase>
+              Platform
+            </Text>
           )}
-        </button>
+          <Stack gap={3}>
-      </Box>
+            {mainItems.map((item) => (
-    </Box>
+              <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>
   );
 }

apps/website/ui/Button.tsx

@@ -45,6 +45,7 @@ export interface ButtonProps {
   shadow?: string;
   display?: string;
   center?: boolean;
+  justifyContent?: string;
 }
 
 export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({ 
@@ -89,6 +90,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
   shadow,
   display,
   center,
+  justifyContent,
 }, ref) => {
   const baseClasses = 'inline-flex items-center justify-center focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
   const transitionClasses = transition !== false ? 'transition-all duration-150 ease-in-out' : '';
@@ -125,6 +127,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
     hoverScale ? 'hover:scale-105' : '',
     display === 'flex' ? 'flex' : '',
     center ? 'items-center justify-center' : '',
+    justifyContent ? `justify-${justifyContent}` : '',
     className,
   ].filter(Boolean).join(' ');
   

apps/website/ui/Input.tsx

@@ -1,77 +1,100 @@
 import React, { forwardRef, InputHTMLAttributes } from 'react';
 import { Box } from './Box';
+import { Icon } from './Icon';
 import { Text } from './Text';
+import { LucideIcon } from 'lucide-react';
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  icon?: LucideIcon | React.ReactNode;
+  rightElement?: React.ReactNode;
+  variant?: 'default' | 'ghost' | 'search' | 'error';
+  fullWidth?: boolean;
   label?: string;
   error?: string;
-  errorMessage?: string;
+  errorMessage?: string; // Alias for error
   hint?: string;
-  fullWidth?: boolean;
+  size?: string | number; // Allow size prop
-  size?: 'sm' | 'md' | 'lg';
-  icon?: React.ReactNode;
-  variant?: 'default' | 'error';
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(({ 
-  label, 
+  icon, 
-  error, 
+  rightElement, 
-  errorMessage,
+  variant = 'default', 
-  hint, 
   fullWidth = false,
-  size = 'md',
+  className,
-  icon,
+  label,
-  variant = 'default',
+  error,
+  errorMessage,
+  hint,
+  id,
+  size,
   ...props 
 }, ref) => {
-  const finalError = error || errorMessage;
+  const variantClasses = {
-  const sizeClasses = {
+    default: 'bg-surface-charcoal border border-outline-steel focus:border-primary-accent',
-    sm: 'px-3 py-1.5 text-xs',
+    ghost: 'bg-transparent border-none',
-    md: 'px-4 py-2 text-sm',
+    search: 'bg-surface-charcoal/50 border border-outline-steel focus:border-primary-accent hover:border-text-low/50',
-    lg: 'px-4 py-3 text-base'
+    error: 'bg-surface-charcoal border border-critical-red focus:border-critical-red',
   };
 
-  const baseClasses = 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-[var(--ui-color-text-high)] placeholder-[var(--ui-color-text-low)] focus:outline-none focus:border-[var(--ui-color-intent-primary)] transition-colors';
+  const inputId = id || (label ? `input-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined);
-  const errorClasses = (finalError || variant === 'error') ? 'border-[var(--ui-color-intent-critical)]' : '';
+  const displayError = error || errorMessage;
-  const widthClasses = fullWidth ? 'w-full' : '';
-
-  const classes = [
-    baseClasses,
-    sizeClasses[size],
-    errorClasses,
-    widthClasses,
-    icon ? 'pl-10' : '',
-  ].filter(Boolean).join(' ');
 
   return (
-    <Box width={fullWidth ? '100%' : undefined}>
+    <Box width={fullWidth ? 'full' : 'auto'}>
       {label && (
         <Box marginBottom={1.5}>
-          <Text as="label" size="xs" weight="bold" variant="low">
+          <Text 
+            as="label" 
+            htmlFor={inputId} 
+            size="sm" 
+            weight="medium" 
+            variant="high"
+          >
             {label}
           </Text>
         </Box>
       )}
-      <Box position="relative">
+      
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={3}
+        paddingX={3}
+        height="9" // h-9
+        rounded="md"
+        width="full"
+        className={`transition-all duration-200 group ${variantClasses[variant]}`}
+      >
         {icon && (
-          <Box position="absolute" left={3} top="50%" style={{ transform: 'translateY(-50%)' }}>
+          React.isValidElement(icon) ? icon : (
-            {icon}
+            <Icon 
-          </Box>
+              icon={icon as LucideIcon} 
+              size={3.5} 
+              className="text-text-low group-focus-within:text-text-high transition-colors" 
+            />
+          )
         )}
+        
         <input
           ref={ref}
-          className={classes}
+          id={inputId}
+          className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
           {...props}
         />
+
+        {rightElement}
       </Box>
-      {finalError && (
+
+      {displayError && (
         <Box marginTop={1}>
           <Text size="xs" variant="critical">
-            {finalError}
+            {displayError}
           </Text>
         </Box>
       )}
-      {hint && !finalError && (
+      
+      {hint && !displayError && (
         <Box marginTop={1}>
           <Text size="xs" variant="low">
             {hint}

apps/website/ui/Toolbar.tsx

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { Stack } from './Stack';
+
+interface ToolbarProps {
+  children: ReactNode;
+  minimized?: boolean;
+  bottom?: number | string;
+}
+
+export function Toolbar({ children, minimized = false, bottom = '2rem' }: ToolbarProps) {
+  if (minimized) {
+    return (
+      <Stack 
+        position="fixed" 
+        right={4} 
+        zIndex={1000}
+        style={{ bottom }}
+      >
+        {children}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack
+      position="fixed"
+      right={4}
+      zIndex={1000}
+      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={{
+        bottom,
+        boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
+        backdropFilter: 'blur(12px)',
+        WebkitBackdropFilter: 'blur(12px)',
+      }}
+      gap={4}
+    >
+      {children}
+    </Stack>
+  );
+}

apps/website/ui/shell/Shell.tsx

@@ -0,0 +1,101 @@
+import { ReactNode } from 'react';
+import { Box } from '../Box';
+
+// --- Shell Sidebar ---
+
+interface ShellSidebarProps {
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  collapsed?: boolean;
+  width?: string | number;
+  collapsedWidth?: string | number;
+}
+
+export function ShellSidebar({ 
+  children, 
+  header, 
+  footer, 
+  collapsed = false,
+  width = '16rem',
+  collapsedWidth = '5rem'
+}: ShellSidebarProps) {
+  return (
+    <Box 
+      as="aside"
+      display="flex" 
+      flexDirection="col" 
+      height="full" 
+      className="bg-base-black border-r border-white/10 relative transition-all duration-300 ease-in-out"
+      style={{ width: collapsed ? collapsedWidth : width }}
+    >
+      {header && (
+        <Box p={6} pb={8} display="flex" alignItems="center" justifyContent={collapsed ? 'center' : 'start'}>
+          {header}
+        </Box>
+      )}
+
+      <Box flex={1} px={collapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300">
+        {children}
+      </Box>
+
+      {footer && (
+        <Box className="h-14 flex items-center px-4 border-t border-white/10">
+          {footer}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+// --- Shell Header ---
+
+interface ShellHeaderProps {
+  children: ReactNode;
+  collapsed?: boolean;
+}
+
+export function ShellHeader({ children, collapsed = false }: ShellHeaderProps) {
+  return (
+    <Box
+      as="header"
+      className={`
+        fixed top-0 right-0 z-40
+        h-14
+        bg-base-black/80 backdrop-blur-xl
+        border-b border-white/10
+        flex items-center justify-between px-6
+        transition-all duration-300 ease-in-out
+        left-0 ${collapsed ? 'lg:left-20' : 'lg:left-64'}
+      `}
+    >
+      {children}
+    </Box>
+  );
+}
+
+// --- Shell Footer ---
+
+interface ShellFooterProps {
+  children: ReactNode;
+  collapsed?: boolean;
+}
+
+export function ShellFooter({ children, collapsed = false }: ShellFooterProps) {
+  return (
+    <Box
+      as="footer"
+      className={`
+        fixed bottom-0 right-0 z-40
+        h-14
+        bg-base-black/80 backdrop-blur-xl
+        border-t border-white/10
+        flex items-center justify-between px-6
+        transition-all duration-300 ease-in-out
+        left-0 ${collapsed ? 'lg:left-20' : 'lg:left-64'}
+      `}
+    >
+      {children}
+    </Box>
+  );
+}