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-19 01:24:07 +01:00
parent e1ce3bffd1
commit edc4cd7f21
64 changed files with 1113 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/website/components/errors/AppErrorBoundaryView.tsx
View File

@@ -3,6 +3,8 @@
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { AlertTriangle } from 'lucide-react';
import React from 'react';
@@ -20,30 +22,31 @@ interface AppErrorBoundaryViewProps {
*/
export function AppErrorBoundaryView({ title, description, children }: AppErrorBoundaryViewProps) {
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem', width: '100%' }}>
<Stack alignItems="center" gap={6} fullWidth>
{/* Header Icon */}
<div
style={{
padding: '1rem',
borderRadius: '9999px',
backgroundColor: 'rgba(255, 190, 77, 0.1)',
border: '1px solid rgba(255, 190, 77, 0.3)'
}}
<Surface
padding={4}
rounded="full"
bg="rgba(255, 190, 77, 0.1)"
border="1px solid rgba(255, 190, 77, 0.3)"
display="flex"
alignItems="center"
justifyContent="center"
>
<Icon icon={AlertTriangle} size={8} intent="warning" />
</div>
</Surface>
{/* Typography */}
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
<Stack alignItems="center" gap={2}>
<Heading level={1} weight="bold">
{title}
</Heading>
<Text variant="low" align="center" style={{ maxWidth: '32rem' }} leading="relaxed">
{description}
</Text>
</div>
</Stack>
{children}
</div>
</Stack>
);
}

6
apps/website/components/errors/ErrorAnalyticsDashboard.tsx
View File

@@ -194,10 +194,10 @@ export function ErrorAnalyticsDashboard({
{/* Header */}
<Stack display="flex" alignItems="center" justifyContent="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
<Stack display="flex" alignItems="center" gap={2}>
<Icon icon={Activity} size={4} color="rgb(239, 68, 68)" />
<Text size="sm" weight="semibold" color="text-white">Error Analytics</Text>
<Icon icon={Activity} size={4} intent="critical" />
<Text size="sm" weight="semibold" variant="high">Error Analytics</Text>
{isDev && (
<Badge variant="danger" size="xs">
<Badge variant="critical" size="sm">
DEV
</Badge>
)}

14
apps/website/components/errors/ErrorDetails.tsx
View File

@@ -4,6 +4,8 @@ import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Accordion } from '@/ui/Accordion';
import { Copy } from 'lucide-react';
import React, { useState } from 'react';
@@ -40,9 +42,9 @@ export function ErrorDetails({ error }: ErrorDetailsProps) {
};
return (
<div style={{ width: '100%', marginTop: '1.5rem', paddingTop: '1.5rem', borderTop: '1px solid var(--ui-color-border-muted)' }}>
<Box width="100%" marginTop={6} paddingTop={6} borderTop="1px solid var(--ui-color-border-muted)">
<Accordion title="Technical Logs">
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<Stack gap={4}>
<Card variant="outline">
<Text font="mono" size="xs" variant="low" block leading="relaxed" style={{ maxHeight: '12rem', overflow: 'auto' }}>
{error.stack || 'No stack trace available'}
@@ -50,7 +52,7 @@ export function ErrorDetails({ error }: ErrorDetailsProps) {
</Text>
</Card>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Box display="flex" justifyContent="end">
<Button
variant="secondary"
size="sm"
@@ -59,9 +61,9 @@ export function ErrorDetails({ error }: ErrorDetailsProps) {
>
{copied ? 'Copied!' : 'Copy Details'}
</Button>
</div>
</div>
</Box>
</Stack>
</Accordion>
</div>
</Box>
);
}

14
apps/website/components/errors/ErrorDetailsBlock.tsx
View File

@@ -4,6 +4,8 @@ import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Accordion } from '@/ui/Accordion';
import { Copy } from 'lucide-react';
import React, { useState } from 'react';
@@ -40,9 +42,9 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
};
return (
<div style={{ width: '100%', marginTop: '1.5rem', paddingTop: '1.5rem', borderTop: '1px solid var(--ui-color-border-muted)' }}>
<Box width="100%" marginTop={6} paddingTop={6} borderTop="1px solid var(--ui-color-border-muted)">
<Accordion title="Technical Logs">
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<Stack gap={4}>
<Card variant="outline">
<Text font="mono" size="xs" variant="low" block leading="relaxed" style={{ maxHeight: '12rem', overflow: 'auto' }}>
{error.stack || 'No stack trace available'}
@@ -50,7 +52,7 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
</Text>
</Card>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Box display="flex" justifyContent="end">
<Button
variant="secondary"
size="sm"
@@ -59,9 +61,9 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
>
{copied ? 'Copied!' : 'Copy Details'}
</Button>
</div>
</div>
</Box>
</Stack>
</Accordion>
</div>
</Box>
);
}

35
apps/website/components/errors/GlobalErrorScreen.tsx
View File

@@ -6,6 +6,9 @@ import { Glow } from '@/ui/Glow';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
import { AlertTriangle, Home, RefreshCw, Terminal } from 'lucide-react';
import React from 'react';
@@ -28,39 +31,39 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
{/* Background Accents - Subtle telemetry vibe */}
<Glow color="primary" size="xl" position="center" opacity={0.03} />
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', paddingBottom: '1rem', borderBottom: '1px solid var(--ui-color-border-default)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<Box display="flex" alignItems="center" justifyContent="between" marginBottom={6} paddingBottom={4} borderBottom="1px solid var(--ui-color-border-default)">
<Group gap={3}>
<Icon icon={AlertTriangle} size={5} intent="warning" />
<Heading level={2} weight="bold">
System Fault Detected
</Heading>
</div>
</Group>
<Text font="mono" size="xs" variant="low" uppercase>
Status: Critical
</Text>
</div>
</Box>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<Stack gap={8}>
{/* Fault Description */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<Stack gap={4}>
<Text variant="med" size="base" leading="relaxed">
The application kernel encountered an unrecoverable execution error.
Telemetry has been captured for diagnostic review.
</Text>
<SystemStatusPanel error={error} />
</div>
</Stack>
{/* Recovery Actions */}
<RecoveryActions onRetry={reset} onHome={onHome} />
</div>
</Stack>
{/* Footer / Metadata */}
<div style={{ marginTop: '2rem', paddingTop: '1rem', borderTop: '1px solid var(--ui-color-border-default)', textAlign: 'right' }}>
<Box marginTop={8} paddingTop={4} borderTop="1px solid var(--ui-color-border-default)" textAlign="right">
<Text font="mono" size="xs" variant="low">
GP-CORE-ERR-{error.digest?.substring(0, 8).toUpperCase() || 'UNKNOWN'}
</Text>
</div>
</Box>
</ErrorPageContainer>
);
}
@@ -73,13 +76,13 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
return (
<Card variant="outline">
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Stack gap={3}>
<Group gap={2}>
<Icon icon={Terminal} size={3} intent="low" />
<Text font="mono" size="xs" variant="low" uppercase>
Fault Log
</Text>
</div>
</Group>
<Text font="mono" size="sm" variant="warning" block>
{error.message || 'Unknown execution fault'}
</Text>
@@ -88,7 +91,7 @@ function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
Digest: {error.digest}
</Text>
)}
</div>
</Stack>
</Card>
);
}
@@ -100,7 +103,7 @@ function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
*/
function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
<Group gap={4} wrap>
<Button
variant="primary"
onClick={onRetry}
@@ -115,6 +118,6 @@ function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: ()
>
Return to Pits
</Button>
</div>
</Group>
);
}

5
apps/website/components/errors/NotFoundCallToAction.tsx
View File

@@ -2,6 +2,7 @@
import { Button } from '@/ui/Button';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import React from 'react';
interface NotFoundCallToActionProps {
@@ -17,7 +18,7 @@ interface NotFoundCallToActionProps {
*/
export function NotFoundCallToAction({ label, onClick }: NotFoundCallToActionProps) {
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
<Stack alignItems="center" gap={4}>
<Button
variant="primary"
size="lg"
@@ -28,6 +29,6 @@ export function NotFoundCallToAction({ label, onClick }: NotFoundCallToActionPro
<Text size="xs" variant="low" uppercase>
Telemetry connection lost
</Text>
</div>
</Stack>
);
}

5
apps/website/components/errors/RecoveryActions.tsx
View File

@@ -2,6 +2,7 @@
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Group } from '@/ui/Group';
import { Home, LifeBuoy, RefreshCw } from 'lucide-react';
import React from 'react';
@@ -18,7 +19,7 @@ interface RecoveryActionsProps {
*/
export function RecoveryActions({ onRetry, onHome }: RecoveryActionsProps) {
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.75rem', flexWrap: 'wrap', width: '100%' }}>
<Group gap={3} justify="center" wrap fullWidth>
<Button
variant="primary"
onClick={onRetry}
@@ -43,6 +44,6 @@ export function RecoveryActions({ onRetry, onHome }: RecoveryActionsProps) {
>
Contact Support
</Button>
</div>
</Group>
);
}

39
apps/website/components/errors/ServerErrorPanel.tsx
View File

@@ -4,6 +4,9 @@ import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { AlertTriangle } from 'lucide-react';
import React from 'react';
@@ -20,24 +23,22 @@ interface ServerErrorPanelProps {
*/
export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps) {
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem', width: '100%' }}>
<Stack alignItems="center" gap={6} fullWidth>
{/* Status Indicator */}
<div
style={{
padding: '1rem',
borderRadius: '9999px',
backgroundColor: 'rgba(255, 190, 77, 0.1)',
border: '1px solid rgba(255, 190, 77, 0.3)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
<Surface
padding={4}
rounded="full"
bg="rgba(255, 190, 77, 0.1)"
border="1px solid rgba(255, 190, 77, 0.3)"
display="flex"
alignItems="center"
justifyContent="center"
>
<Icon icon={AlertTriangle} size={8} intent="warning" />
</div>
</Surface>
{/* Primary Message */}
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
<Stack alignItems="center" gap={2}>
<Heading level={1} weight="bold">
CRITICAL_SYSTEM_FAILURE
</Heading>
@@ -45,12 +46,12 @@ export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps)
The application engine encountered an unrecoverable state.
Telemetry has been dispatched to engineering.
</Text>
</div>
</Stack>
{/* Technical Summary */}
<div style={{ width: '100%' }}>
<Box fullWidth>
<Card variant="outline">
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<Stack gap={2}>
<Text font="mono" size="sm" variant="warning" block>
STATUS: 500_INTERNAL_SERVER_ERROR
</Text>
@@ -64,9 +65,9 @@ export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps)
INCIDENT_ID: {incidentId}
</Text>
)}
</div>
</Stack>
</Card>
</div>
</div>
</Box>
</Stack>
);
}