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-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
apps/website/components/dev/DebugModeToggle.tsx
View File

@@ -1,16 +1,14 @@
import type { ApiRequestLogger } from '@/lib/infrastructure/ApiRequestLogger';
import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
import type { GlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { Bug, Shield, X } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Grid } from '@/ui/Grid';
// Extend Window interface for debug globals
declare global {
@@ -189,48 +187,45 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
}
return (
<Box position="fixed" bottom="4" left="4" zIndex={50}>
<Stack position="fixed" bottom="4" left="4" zIndex={50}>
{/* Main Toggle Button */}
{!isOpen && (
<Box
as="button"
<Button
onClick={() => setIsOpen(true)}
p={3}
rounded="full"
shadow="lg"
bg={debugEnabled ? 'bg-green-600' : 'bg-iron-gray'}
color="text-white"
className="transition-all hover:scale-110"
variant={debugEnabled ? 'primary' : 'secondary'}
className={`transition-all hover:scale-110 ${debugEnabled ? 'bg-green-600' : 'bg-iron-gray'}`}
title={debugEnabled ? 'Debug Mode Active' : 'Enable Debug Mode'}
>
<Icon icon={Bug} size={5} />
</Box>
</Button>
)}
{/* Debug Panel */}
{isOpen && (
<Box width="80" bg="bg-deep-graphite" border={true} borderColor="border-charcoal-outline" rounded="xl" shadow="2xl" overflow="hidden">
<Stack w="80" bg="bg-deep-graphite" border={true} borderColor="border-charcoal-outline" rounded="xl" shadow="2xl" overflow="hidden">
{/* Header */}
<Box display="flex" alignItems="center" justifyContent="between" px={3} py={2} bg="bg-iron-gray/50" borderBottom={true} borderColor="border-charcoal-outline">
<Stack direction="row" align="center" justify="between" px={3} py={2} bg="bg-iron-gray/50" borderBottom={true} borderColor="border-charcoal-outline">
<Stack direction="row" align="center" gap={2}>
<Icon icon={Bug} size={4} color="text-green-400" />
<Text size="sm" weight="semibold" color="text-white">Debug Control</Text>
</Stack>
<Box
as="button"
<Button
onClick={() => setIsOpen(false)}
p={1}
variant="ghost"
className="hover:bg-charcoal-outline rounded"
>
<Icon icon={X} size={4} color="text-gray-400" />
</Box>
</Box>
</Button>
</Stack>
{/* Content */}
<Box p={3}>
<Stack p={3}>
<Stack gap={3}>
{/* Debug Toggle */}
<Box display="flex" alignItems="center" justifyContent="between" bg="bg-iron-gray/30" p={2} rounded="md" border={true} borderColor="border-charcoal-outline">
<Stack direction="row" align="center" justify="between" bg="bg-iron-gray/30" p={2} rounded="md" border={true} borderColor="border-charcoal-outline">
<Stack direction="row" align="center" gap={2}>
<Icon icon={Shield} size={4} color={debugEnabled ? 'text-green-400' : 'text-gray-500'} />
<Text size="sm" weight="medium">Debug Mode</Text>
@@ -243,31 +238,31 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
>
{debugEnabled ? 'ON' : 'OFF'}
</Button>
</Box>
</Stack>
{/* Metrics */}
{debugEnabled && (
<Box display="grid" gridCols={3} gap={2}>
<Box bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} textAlign="center">
<Grid cols={3} gap={2}>
<Stack bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} align="center">
<Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>Errors</Text>
<Text size="lg" weight="bold" color="text-red-400" block>{metrics.errors}</Text>
</Box>
<Box bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} textAlign="center">
</Stack>
<Stack bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} align="center">
<Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>API</Text>
<Text size="lg" weight="bold" color="text-blue-400" block>{metrics.apiRequests}</Text>
</Box>
<Box bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} textAlign="center">
</Stack>
<Stack bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} align="center">
<Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>Failures</Text>
<Text size="lg" weight="bold" color="text-yellow-400" block>{metrics.apiFailures}</Text>
</Box>
</Box>
</Stack>
</Grid>
)}
{/* Actions */}
{debugEnabled && (
<Stack gap={2}>
<Text size="xs" weight="semibold" color="text-gray-400">Test Actions</Text>
<Box display="grid" gridCols={2} gap={2}>
<Grid cols={2} gap={2}>
<Button
onClick={triggerTestError}
variant="danger"
@@ -281,10 +276,10 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
>
Test API
</Button>
</Box>
</Grid>
<Text size="xs" weight="semibold" color="text-gray-400" mt={2}>Utilities</Text>
<Box display="grid" gridCols={2} gap={2}>
<Grid cols={2} gap={2}>
<Button
onClick={copyDebugInfo}
variant="secondary"
@@ -299,7 +294,7 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
>
Clear Logs
</Button>
</Box>
</Grid>
</Stack>
)}
@@ -307,26 +302,26 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
{debugEnabled && (
<Stack gap={1}>
<Text size="xs" weight="semibold" color="text-gray-400">Quick Access</Text>
<Box color="text-gray-500" font="mono" style={{ fontSize: '10px' }}>
<Stack color="text-gray-500" className="font-mono" style={{ fontSize: '10px' }}>
<Text block>• window.__GRIDPILOT_GLOBAL_HANDLER__</Text>
<Text block>• window.__GRIDPILOT_API_LOGGER__</Text>
<Text block>• window.__GRIDPILOT_REACT_ERRORS__</Text>
</Box>
</Stack>
</Stack>
)}
{/* Status */}
<Box textAlign="center" pt={2} borderTop={true} borderColor="border-charcoal-outline">
<Text size="xs" color="text-gray-500" style={{ fontSize: '10px' }}>
<Stack pt={2} borderTop={true} borderColor="border-charcoal-outline" align="center">
<Text size="xs" color="text-gray-500" style={{ fontSize: '10px' }} textAlign="center">
{debugEnabled ? 'Debug features active' : 'Debug mode disabled'}
{isDev && ' • Development Environment'}
</Text>
</Box>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
)}
</Box>
</Stack>
);
}

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

@@ -15,7 +15,6 @@ import { NotificationTypeSection } from './sections/NotificationTypeSection';
import { UrgencySection } from './sections/UrgencySection';
import { NotificationSendSection } from './sections/NotificationSendSection';
import { APIStatusSection } from './sections/APIStatusSection';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
@@ -230,7 +229,7 @@ export function DevToolbar() {
if (isMinimized) {
return (
<Box position="fixed" bottom="4" right="4" zIndex={50}>
<Stack position="fixed" bottom="4" right="4" zIndex={50}>
<IconButton
icon={Wrench}
onClick={() => setIsMinimized(false)}
@@ -238,12 +237,12 @@ export function DevToolbar() {
title="Open Dev Toolbar"
size="lg"
/>
</Box>
</Stack>
);
}
return (
<Box
<Stack
position="fixed"
bottom="4"
right="4"
@@ -257,15 +256,15 @@ export function DevToolbar() {
overflow="hidden"
>
{/* Header */}
<Box display="flex" alignItems="center" justifyContent="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
<Box display="flex" alignItems="center" gap={2}>
<Stack direction="row" align="center" justify="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
<Stack direction="row" align="center" gap={2}>
<Icon icon={Wrench} size={4} color="rgb(59, 130, 246)" />
<Text size="sm" weight="semibold" color="text-white">Dev Toolbar</Text>
<Badge variant="primary" size="xs">
DEMO
</Badge>
</Box>
<Box display="flex" alignItems="center" gap={1}>
</Stack>
<Stack direction="row" align="center" gap={1}>
<IconButton
icon={isExpanded ? ChevronDown : ChevronUp}
onClick={() => setIsExpanded(!isExpanded)}
@@ -278,12 +277,12 @@ export function DevToolbar() {
variant="ghost"
size="sm"
/>
</Box>
</Box>
</Stack>
</Stack>
{/* Content */}
{isExpanded && (
<Box p={4}>
<Stack p={4}>
<Stack gap={3}>
{/* Notification Section - Accordion */}
<Accordion
@@ -337,23 +336,23 @@ export function DevToolbar() {
onToggle={() => setOpenAccordion(openAccordion === 'errors' ? null : 'errors')}
>
<Stack gap={2}>
<Box display="flex" justifyContent="between" alignItems="center" p={2} bg="bg-iron-gray/30" rounded="md">
<Stack direction="row" justify="between" align="center" p={2} bg="bg-iron-gray/30" rounded="md">
<Text size="xs" color="text-gray-400">Total Errors</Text>
<Text size="xs" font="mono" weight="bold" color="text-red-400">{errorStats.total}</Text>
</Box>
</Stack>
{Object.keys(errorStats.byType).length > 0 ? (
<Stack gap={1}>
{Object.entries(errorStats.byType).map(([type, count]) => (
<Box key={type} display="flex" justifyContent="between" alignItems="center" p={1.5} bg="bg-deep-graphite" rounded="md">
<Stack key={type} direction="row" justify="between" align="center" p={1.5} bg="bg-deep-graphite" rounded="md">
<Text size="xs" color="text-gray-300">{type}</Text>
<Text size="xs" font="mono" color="text-warning-amber">{count}</Text>
</Box>
</Stack>
))}
</Stack>
) : (
<Box textAlign="center" py={2}>
<Stack align="center" py={2}>
<Text size="xs" color="text-gray-500">No errors yet</Text>
</Box>
</Stack>
)}
<Button
variant="secondary"
@@ -370,15 +369,15 @@ export function DevToolbar() {
</Stack>
</Accordion>
</Stack>
</Box>
</Stack>
)}
{/* Collapsed state hint */}
{!isExpanded && (
<Box px={4} py={2}>
<Stack px={4} py={2}>
<Text size="xs" color="text-gray-500">Click ↑ to expand dev tools</Text>
</Box>
</Stack>
)}
</Box>
</Stack>
);
}

38
apps/website/components/dev/sections/APIStatusSection.tsx
View File

@@ -2,11 +2,11 @@
import React from 'react';
import { Activity, Wifi, RefreshCw, Terminal } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Button } from '@/ui/Button';
import { Grid } from '@/ui/Grid';
import { StatusIndicator, StatRow, Badge } from '@/ui/StatusIndicator';
interface APIStatusSectionProps {
@@ -60,13 +60,13 @@ export function APIStatusSection({
const consecutiveFailuresLabel = String(apiHealth.consecutiveFailures);
return (
<Box>
<Box display="flex" alignItems="center" gap={2} mb={3}>
<Stack>
<Stack direction="row" align="center" gap={2} mb={3}>
<Icon icon={Activity} size={4} color="rgb(156, 163, 175)" />
<Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
API Status
</Text>
</Box>
</Stack>
{/* Status Indicator */}
<StatusIndicator
@@ -76,7 +76,7 @@ export function APIStatusSection({
variant={getStatusVariant()}
/>
<Box mt={2}>
<Stack mt={2}>
{/* Reliability */}
<StatRow
label="Reliability"
@@ -91,29 +91,29 @@ export function APIStatusSection({
valueColor="text-primary-blue"
valueFont="mono"
/>
</Box>
</Stack>
{/* Consecutive Failures */}
{apiHealth.consecutiveFailures > 0 && (
<Box mt={2}>
<Stack mt={2}>
<StatusIndicator
icon={Activity}
label="Consecutive Failures"
subLabel={consecutiveFailuresLabel}
variant="danger"
/>
</Box>
</Stack>
)}
{/* Circuit Breakers */}
<Box mt={2}>
<Stack mt={2}>
<Text size="xs" color="text-gray-500" block mb={1}>Circuit Breakers:</Text>
{Object.keys(circuitBreakers).length === 0 ? (
<Text size="xs" color="text-gray-500" italic>None active</Text>
) : (
<Stack gap={1} maxHeight="4rem" overflow="auto">
{Object.entries(circuitBreakers).map(([endpoint, status]) => (
<Box key={endpoint} display="flex" alignItems="center" justifyContent="between">
<Stack key={endpoint} direction="row" align="center" justify="between">
<Text size="xs" color="text-gray-400" truncate flexGrow={1}>
{endpoint}
</Text>
@@ -123,14 +123,14 @@ export function APIStatusSection({
{status.failures > 0 && (
<Text size="xs" color="text-red-400" ml={1}>({status.failures})</Text>
)}
</Box>
</Stack>
))}
</Stack>
)}
</Box>
</Stack>
{/* API Actions */}
<Box display="grid" gridCols={2} gap={2} mt={3}>
<Grid cols={2} gap={2} mt={3}>
<Button
variant="primary"
onClick={onHealthCheck}
@@ -147,9 +147,9 @@ export function APIStatusSection({
>
Reset Stats
</Button>
</Box>
</Grid>
<Box display="grid" gridCols={1} gap={2} mt={2}>
<Grid cols={1} gap={2} mt={2}>
<Button
variant="danger"
onClick={onTestError}
@@ -158,13 +158,13 @@ export function APIStatusSection({
>
Test Error Handler
</Button>
</Box>
</Grid>
<Box mt={2}>
<Stack mt={2}>
<Text size="xs" color="text-gray-600">
Last Check: {lastCheckLabel}
</Text>
</Box>
</Box>
</Stack>
</Stack>
);
}

10
apps/website/components/dev/sections/NotificationSendSection.tsx
View File

@@ -3,10 +3,10 @@
import React from 'react';
import { Bell, Loader2 } from 'lucide-react';
import type { DemoNotificationType, DemoUrgency } from '../types';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
interface NotificationSendSectionProps {
selectedType: DemoNotificationType;
@@ -22,7 +22,7 @@ export function NotificationSendSection({
onSend
}: NotificationSendSectionProps) {
return (
<Box>
<Stack>
<Button
onClick={onSend}
disabled={sending}
@@ -36,7 +36,7 @@ export function NotificationSendSection({
{sending ? 'Sending...' : lastSent ? '✓ Notification Sent!' : 'Send Demo Notification'}
</Button>
<Box p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" mt={2}>
<Stack p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" mt={2}>
<Text size="xs" color="text-gray-500" block>
<Text weight="bold" color="text-gray-400">Silent:</Text> Notification center only
</Text>
@@ -46,7 +46,7 @@ export function NotificationSendSection({
<Text size="xs" color="text-gray-500" block>
<Text weight="bold" color="text-gray-400">Modal:</Text> Blocking popup (may require action)
</Text>
</Box>
</Box>
</Stack>
</Stack>
);
}

31
apps/website/components/dev/sections/NotificationTypeSection.tsx
View File

@@ -3,9 +3,11 @@
import React from 'react';
import { MessageSquare, AlertTriangle, Shield, Vote, TrendingUp, Award, LucideIcon } from 'lucide-react';
import type { DemoNotificationType } from '../types';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Button } from '@/ui/Button';
interface NotificationOption {
type: DemoNotificationType;
@@ -60,34 +62,27 @@ export const notificationOptions: NotificationOption[] = [
export function NotificationTypeSection({ selectedType, onSelectType }: NotificationTypeSectionProps) {
return (
<Box>
<Box display="flex" alignItems="center" gap={2} mb={2}>
<Stack>
<Stack direction="row" align="center" gap={2} mb={2}>
<Icon icon={MessageSquare} size={4} color="rgb(156, 163, 175)" />
<Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
Notification Type
</Text>
</Box>
</Stack>
<Box display="grid" gridCols={2} gap={1}>
<Grid cols={2} gap={1}>
{notificationOptions.map((option) => {
const isSelected = selectedType === option.type;
return (
<Box
<Button
key={option.type}
as="button"
type="button"
onClick={() => onSelectType(option.type)}
display="flex"
flexDirection="col"
alignItems="center"
gap={1}
variant="ghost"
p={2}
rounded="lg"
border
transition
bg={isSelected ? 'bg-primary-blue/20' : 'bg-iron-gray/30'}
borderColor={isSelected ? 'border-primary-blue/50' : 'border-charcoal-outline'}
className={`flex flex-col items-center gap-1 transition-all ${isSelected ? 'bg-primary-blue/20 border-primary-blue/50' : 'bg-iron-gray/30 border-charcoal-outline'} border`}
>
<Icon
icon={option.icon}
@@ -101,10 +96,10 @@ export function NotificationTypeSection({ selectedType, onSelectType }: Notifica
>
{option.label.split(' ')[0]}
</Text>
</Box>
</Button>
);
})}
</Box>
</Box>
</Grid>
</Stack>
);
}

3
apps/website/components/dev/sections/ReplaySection.tsx
View File

@@ -3,9 +3,8 @@
import React, { useState, useEffect } from 'react';
import { Play, Copy, Trash2, Download, Clock } from 'lucide-react';
import { getGlobalReplaySystem } from '@/lib/infrastructure/ErrorReplay';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { IconButton } from '@/ui/IconButton';
import { Button } from '@/ui/Button';

31
apps/website/components/dev/sections/UrgencySection.tsx
View File

@@ -3,9 +3,11 @@
import React from 'react';
import { Bell, BellRing, AlertCircle, LucideIcon } from 'lucide-react';
import type { DemoUrgency } from '../types';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Button } from '@/ui/Button';
interface UrgencyOption {
urgency: DemoUrgency;
@@ -42,15 +44,15 @@ export const urgencyOptions: UrgencyOption[] = [
export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySectionProps) {
return (
<Box>
<Box display="flex" alignItems="center" gap={2} mb={2}>
<Stack>
<Stack direction="row" align="center" gap={2} mb={2}>
<Icon icon={BellRing} size={4} color="rgb(156, 163, 175)" />
<Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
Urgency Level
</Text>
</Box>
</Stack>
<Box display="grid" gridCols={3} gap={1}>
<Grid cols={3} gap={1}>
{urgencyOptions.map((option) => {
const isSelected = selectedUrgency === option.urgency;
@@ -73,21 +75,14 @@ export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySect
};
return (
<Box
<Button
key={option.urgency}
as="button"
type="button"
onClick={() => onSelectUrgency(option.urgency)}
display="flex"
flexDirection="col"
alignItems="center"
gap={1}
variant="ghost"
p={2}
rounded="lg"
border
transition
bg={isSelected ? getSelectedBg() : 'bg-iron-gray/30'}
borderColor={isSelected ? getSelectedBorder() : 'border-charcoal-outline'}
className={`flex flex-col items-center gap-1 transition-all ${isSelected ? `${getSelectedBg()} ${getSelectedBorder()}` : 'bg-iron-gray/30 border-charcoal-outline'} border`}
>
<Icon
icon={option.icon}
@@ -101,13 +96,13 @@ export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySect
>
{option.label}
</Text>
</Box>
</Button>
);
})}
</Box>
</Grid>
<Text size="xs" color="text-gray-600" mt={1} block>
{urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
</Text>
</Box>
</Stack>
);
}