website refactor
This commit is contained in:
@@ -4,11 +4,12 @@ import type { GlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler
|
||||
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Grid } from '@/ui/primitives/Grid';
|
||||
import { Stack } from '@/ui/primitives/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Bug, Shield, X } from 'lucide-react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { FloatingAction } from '@/ui/FloatingAction';
|
||||
import { DebugPanel } from '@/ui/DebugPanel';
|
||||
import { StatGrid } from '@/ui/StatGrid';
|
||||
import { Bug, Shield } from 'lucide-react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
// Extend Window interface for debug globals
|
||||
declare global {
|
||||
@@ -187,141 +188,94 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack position="fixed" bottom="4" left="4" zIndex={50}>
|
||||
<React.Fragment>
|
||||
{/* Main Toggle Button */}
|
||||
{!isOpen && (
|
||||
<Button
|
||||
<FloatingAction
|
||||
onClick={() => setIsOpen(true)}
|
||||
p={3}
|
||||
rounded="full"
|
||||
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} />
|
||||
</Button>
|
||||
</FloatingAction>
|
||||
)}
|
||||
|
||||
{/* Debug Panel */}
|
||||
{isOpen && (
|
||||
<Stack w="80" bg="bg-deep-graphite" border={true} borderColor="border-charcoal-outline" rounded="xl" shadow="2xl" overflow="hidden">
|
||||
{/* Header */}
|
||||
<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>
|
||||
<Button
|
||||
onClick={() => setIsOpen(false)}
|
||||
p={1}
|
||||
variant="ghost"
|
||||
className="hover:bg-charcoal-outline rounded"
|
||||
>
|
||||
<Icon icon={X} size={4} color="text-gray-400" />
|
||||
</Button>
|
||||
</Stack>
|
||||
<DebugPanel
|
||||
title="Debug Control"
|
||||
onClose={() => setIsOpen(false)}
|
||||
icon={<Icon icon={Bug} size={4} intent="success" />}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
{/* 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' }}>
|
||||
<Icon icon={Shield} size={4} intent={debugEnabled ? 'success' : 'low'} />
|
||||
<Text size="sm" weight="medium">Debug Mode</Text>
|
||||
</div>
|
||||
<Button
|
||||
onClick={toggleDebug}
|
||||
size="sm"
|
||||
variant={debugEnabled ? 'primary' : 'secondary'}
|
||||
>
|
||||
{debugEnabled ? 'ON' : 'OFF'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<Stack p={3}>
|
||||
<Stack gap={3}>
|
||||
{/* Debug Toggle */}
|
||||
<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>
|
||||
</Stack>
|
||||
<Button
|
||||
onClick={toggleDebug}
|
||||
size="sm"
|
||||
variant={debugEnabled ? 'primary' : 'secondary'}
|
||||
className={debugEnabled ? 'bg-green-600 hover:bg-green-700' : ''}
|
||||
>
|
||||
{debugEnabled ? 'ON' : 'OFF'}
|
||||
</Button>
|
||||
</Stack>
|
||||
{/* Metrics */}
|
||||
{debugEnabled && (
|
||||
<StatGrid
|
||||
variant="box"
|
||||
columns={3}
|
||||
stats={[
|
||||
{ label: 'Errors', value: metrics.errors, intent: 'critical', icon: Bug },
|
||||
{ label: 'API', value: metrics.apiRequests, intent: 'primary', icon: Bug },
|
||||
{ label: 'Failures', value: metrics.apiFailures, intent: 'warning', icon: Bug },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Metrics */}
|
||||
{debugEnabled && (
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</Stack>
|
||||
</Grid>
|
||||
)}
|
||||
{/* Actions */}
|
||||
{debugEnabled && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
<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>
|
||||
|
||||
{/* Actions */}
|
||||
{debugEnabled && (
|
||||
<Stack gap={2}>
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Test Actions</Text>
|
||||
<Grid cols={2} gap={2}>
|
||||
<Button
|
||||
onClick={triggerTestError}
|
||||
variant="danger"
|
||||
size="sm"
|
||||
>
|
||||
Test Error
|
||||
</Button>
|
||||
<Button
|
||||
onClick={triggerTestApiCall}
|
||||
size="sm"
|
||||
>
|
||||
Test API
|
||||
</Button>
|
||||
</Grid>
|
||||
<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" color="text-gray-400" mt={2}>Utilities</Text>
|
||||
<Grid cols={2} gap={2}>
|
||||
<Button
|
||||
onClick={copyDebugInfo}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
Copy Info
|
||||
</Button>
|
||||
<Button
|
||||
onClick={clearAllLogs}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
Clear Logs
|
||||
</Button>
|
||||
</Grid>
|
||||
</Stack>
|
||||
)}
|
||||
{/* Quick Links */}
|
||||
{debugEnabled && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* Quick Links */}
|
||||
{debugEnabled && (
|
||||
<Stack gap={1}>
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Quick Access</Text>
|
||||
<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>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{/* Status */}
|
||||
<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>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</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' }}>
|
||||
{debugEnabled ? 'Debug features active' : 'Debug mode disabled'}
|
||||
{isDev && ' • Development Environment'}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</DebugPanel>
|
||||
)}
|
||||
</Stack>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user