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 23:24:30 +01:00
parent aeaa43f4d3
commit 182056a57b
487 changed files with 1783 additions and 2170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,8 @@ import { Text } from '@/ui/Text';
import { FloatingAction } from '@/ui/FloatingAction';
import { DebugPanel } from '@/ui/DebugPanel';
import { StatGrid } from '@/ui/StatGrid';
import { Stack } from '@/ui/Stack';
import { ButtonGroup } from '@/ui/ButtonGroup';
import { Bug, Shield } from 'lucide-react';
import React, { useCallback, useEffect, useState } from 'react';
@@ -207,13 +209,13 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
onClose={() => setIsOpen(false)}
icon={<Icon icon={Bug} size={4} intent="success" />}
>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<Stack gap={4}>
{/* Debug Toggle */}
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', borderRadius: '0.5rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Stack align="center" justify="between">
<ButtonGroup gap={2}>
<Icon icon={Shield} size={4} intent={debugEnabled ? 'success' : 'low'} />
<Text size="sm" weight="medium">Debug Mode</Text>
</div>
</ButtonGroup>
<Button
onClick={toggleDebug}
size="sm"
@@ -221,7 +223,7 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
>
{debugEnabled ? 'ON' : 'OFF'}
</Button>
</div>
</Stack>
{/* Metrics */}
{debugEnabled && (
@@ -238,41 +240,41 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
{/* Actions */}
{debugEnabled && (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<Stack gap={2}>
<Text size="xs" weight="semibold" variant="low" uppercase>Test Actions</Text>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
<Button onClick={triggerTestError} variant="danger" size="sm">Test Error</Button>
<Button onClick={triggerTestApiCall} size="sm">Test API</Button>
</div>
<ButtonGroup gap={2}>
<Button onClick={triggerTestError} variant="danger" size="sm" fullWidth>Test Error</Button>
<Button onClick={triggerTestApiCall} size="sm" fullWidth>Test API</Button>
</ButtonGroup>
<Text size="xs" weight="semibold" variant="low" uppercase style={{ marginTop: '0.5rem' }}>Utilities</Text>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
<Button onClick={copyDebugInfo} variant="secondary" size="sm">Copy Info</Button>
<Button onClick={clearAllLogs} variant="secondary" size="sm">Clear Logs</Button>
</div>
</div>
<Text size="xs" weight="semibold" variant="low" uppercase>Utilities</Text>
<ButtonGroup gap={2}>
<Button onClick={copyDebugInfo} variant="secondary" size="sm" fullWidth>Copy Info</Button>
<Button onClick={clearAllLogs} variant="secondary" size="sm" fullWidth>Clear Logs</Button>
</ButtonGroup>
</Stack>
)}
{/* Quick Links */}
{debugEnabled && (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
<Stack gap={1}>
<Text size="xs" weight="semibold" variant="low" uppercase>Quick Access</Text>
<div style={{ fontSize: '10px', color: 'var(--ui-color-text-low)', fontFamily: 'var(--ui-font-mono)' }}>
<div>• window.__GRIDPILOT_GLOBAL_HANDLER__</div>
<div>• window.__GRIDPILOT_API_LOGGER__</div>
<div>• window.__GRIDPILOT_REACT_ERRORS__</div>
</div>
</div>
<Stack gap={0.5}>
<Text size="xs" variant="low" font="mono">• window.__GRIDPILOT_GLOBAL_HANDLER__</Text>
<Text size="xs" variant="low" font="mono">• window.__GRIDPILOT_API_LOGGER__</Text>
<Text size="xs" variant="low" font="mono">• window.__GRIDPILOT_REACT_ERRORS__</Text>
</Stack>
</Stack>
)}
{/* Status */}
<div style={{ paddingTop: '0.5rem', borderTop: '1px solid var(--ui-color-border-muted)', textAlign: 'center' }}>
<Text size="xs" variant="low" style={{ fontSize: '10px' }}>
<Stack align="center">
<Text size="xs" variant="low">
{debugEnabled ? 'Debug features active' : 'Debug mode disabled'}
{isDev && ' • Development Environment'}
</Text>
</div>
</div>
</Stack>
</Stack>
</DebugPanel>
)}
</React.Fragment>

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

@@ -4,7 +4,7 @@ import { useNotifications } from '@/components/notifications/NotificationProvide
import type { NotificationVariant } from '@/components/notifications/notificationTypes';
import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
import { ApiConnectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
import { CircuitBreakerRegistry } from '@/lib/api/base/CircuitBreakerRegistry';
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { Activity, AlertTriangle, ChevronDown, ChevronUp, MessageSquare, Wrench, X } from 'lucide-react';
import { useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { IconButton } from '@/ui/IconButton';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';
import { Stack } from '@/ui/Stack';
import { APIStatusSection } from './sections/APIStatusSection';
import { NotificationSendSection } from './sections/NotificationSendSection';
import { NotificationTypeSection } from './sections/NotificationTypeSection';
@@ -229,7 +229,7 @@ export function DevToolbar() {
if (isMinimized) {
return (
<Stack position="fixed" bottom="4" right="4" zIndex={50}>
<Stack align="end" justify="end">
<IconButton
icon={Wrench}
onClick={() => setIsMinimized(false)}
@@ -242,25 +242,13 @@ export function DevToolbar() {
}
return (
<Stack
position="fixed"
bottom="4"
right="4"
zIndex={50}
w="80"
bg="bg-deep-graphite"
border
borderColor="border-charcoal-outline"
rounded="xl"
shadow="2xl"
overflow="hidden"
>
<Stack gap={4}>
{/* Header */}
<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" justify="between" gap={4}>
<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">
<Icon icon={Wrench} size={4} intent="primary" />
<Text size="sm" weight="semibold" variant="high">Dev Toolbar</Text>
<Badge variant="primary" size="sm">
DEMO
</Badge>
</Stack>
@@ -282,12 +270,11 @@ export function DevToolbar() {
{/* Content */}
{isExpanded && (
<Stack p={4}>
<Stack gap={4}>
<Stack gap={3}>
{/* Notification Section - Accordion */}
<Accordion
title="Notifications"
icon={<Icon icon={MessageSquare} size={4} color="rgb(156, 163, 175)" />}
isOpen={openAccordion === 'notifications'}
onToggle={() => setOpenAccordion(openAccordion === 'notifications' ? null : 'notifications')}
>
@@ -313,7 +300,6 @@ export function DevToolbar() {
{/* API Status Section - Accordion */}
<Accordion
title="API Status"
icon={<Icon icon={Activity} size={4} color="rgb(156, 163, 175)" />}
isOpen={openAccordion === 'apiStatus'}
onToggle={() => setOpenAccordion(openAccordion === 'apiStatus' ? null : 'apiStatus')}
>
@@ -331,27 +317,26 @@ export function DevToolbar() {
{/* Error Stats Section - Accordion */}
<Accordion
title="Error Stats"
icon={<Icon icon={AlertTriangle} size={4} color="rgb(156, 163, 175)" />}
isOpen={openAccordion === 'errors'}
onToggle={() => setOpenAccordion(openAccordion === 'errors' ? null : 'errors')}
>
<Stack gap={2}>
<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>
<Stack direction="row" justify="between" align="center" gap={2}>
<Text size="xs" variant="low">Total Errors</Text>
<Text size="xs" font="mono" weight="bold" variant="critical">{errorStats.total}</Text>
</Stack>
{Object.keys(errorStats.byType).length > 0 ? (
<Stack gap={1}>
{Object.entries(errorStats.byType).map(([type, count]) => (
<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>
<Stack key={type} direction="row" justify="between" align="center" gap={2}>
<Text size="xs" variant="low">{type}</Text>
<Text size="xs" font="mono" variant="warning">{count}</Text>
</Stack>
))}
</Stack>
) : (
<Stack align="center" py={2}>
<Text size="xs" color="text-gray-500">No errors yet</Text>
<Stack align="center">
<Text size="xs" variant="low">No errors yet</Text>
</Stack>
)}
<Button
@@ -374,8 +359,8 @@ export function DevToolbar() {
{/* Collapsed state hint */}
{!isExpanded && (
<Stack px={4} py={2}>
<Text size="xs" color="text-gray-500">Click ↑ to expand dev tools</Text>
<Stack>
<Text size="xs" variant="low">Click ↑ to expand dev tools</Text>
</Stack>
)}
</Stack>

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

@@ -4,8 +4,8 @@ import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Badge, StatRow, StatusIndicator } from '@/ui/StatusIndicator';
import { Text } from '@/ui/Text';
import { Grid } from '@/ui/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Activity, RefreshCw, Terminal, Wifi } from 'lucide-react';
interface APIStatusSectionProps {

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

@@ -2,7 +2,7 @@
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Bell, Loader2 } from 'lucide-react';
import type { DemoNotificationType, DemoUrgency } from '../types';

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

@@ -2,8 +2,8 @@
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { AlertTriangle, Award, LucideIcon, MessageSquare, Shield, TrendingUp, Vote } from 'lucide-react';
import type { DemoNotificationType } from '../types';

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

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

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

@@ -2,8 +2,8 @@
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { AlertCircle, Bell, BellRing, LucideIcon } from 'lucide-react';
import type { DemoUrgency } from '../types';