mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-20 00:41:57 +01:00
parent f5215f9d73
commit b9624db452
8 changed files with 316 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/website/components/dev/DevToolbar.tsx
View File

@@ -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>
);
}

13
apps/website/components/layout/AppFooter.tsx
View File

@@ -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>
);
}

60
apps/website/components/layout/AppHeader.tsx
View File

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

127
apps/website/components/layout/AppSidebar.tsx
View File

@@ -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>
);
}

3
apps/website/ui/Button.tsx
View File

@@ -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(' ');

99
apps/website/ui/Input.tsx
View File

@@ -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?: 'sm' | 'md' | 'lg';
icon?: React.ReactNode;
variant?: 'default' | 'error';
size?: string | number; // Allow size prop
}
export const Input = forwardRef<HTMLInputElement, InputProps>(({
label,
error,
errorMessage,
hint,
icon,
rightElement,
variant = 'default',
fullWidth = false,
size = 'md',
icon,
variant = 'default',
className,
label,
error,
errorMessage,
hint,
id,
size,
...props
}, ref) => {
const finalError = error || errorMessage;
const sizeClasses = {
sm: 'px-3 py-1.5 text-xs',
md: 'px-4 py-2 text-sm',
lg: 'px-4 py-3 text-base'
const variantClasses = {
default: 'bg-surface-charcoal border border-outline-steel focus:border-primary-accent',
ghost: 'bg-transparent border-none',
search: 'bg-surface-charcoal/50 border border-outline-steel focus:border-primary-accent hover:border-text-low/50',
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 errorClasses = (finalError || variant === 'error') ? 'border-[var(--ui-color-intent-critical)]' : '';
const widthClasses = fullWidth ? 'w-full' : '';
const classes = [
baseClasses,
sizeClasses[size],
errorClasses,
widthClasses,
icon ? 'pl-10' : '',
].filter(Boolean).join(' ');
const inputId = id || (label ? `input-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined);
const displayError = error || errorMessage;
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%)' }}>
{icon}
</Box>
React.isValidElement(icon) ? icon : (
<Icon
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}

48
apps/website/ui/Toolbar.tsx Normal file
View File

@@ -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>
);
}

101
apps/website/ui/shell/Shell.tsx Normal file
View File

@@ -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>
);
}