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