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/errors/EnhancedFormError.tsx
View File

@@ -15,9 +15,8 @@ import {
} from 'lucide-react';
import { parseApiError, getErrorSeverity, isRetryable, isConnectivityError } from '@/lib/utils/errorUtils';
import { ApiError } from '@/lib/api/base/ApiError';
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';
@@ -66,13 +65,13 @@ export function EnhancedFormError({
const color = getColor();
return (
<Box
<Stack
as={motion.div}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
>
<Box
<Stack
bg={`bg-${color}-500/10`}
border
borderColor={`border-${color}-500/30`}
@@ -80,18 +79,18 @@ export function EnhancedFormError({
overflow="hidden"
>
{/* Main Error Message */}
<Box p={4} display="flex" alignItems="start" gap={3}>
<Box color={`text-${color}-400`} flexShrink={0} mt={0.5}>
<Stack p={4} display="flex" alignItems="start" gap={3}>
<Stack color={`text-${color}-400`} flexShrink={0} mt={0.5}>
<Icon icon={getIcon()} size={5} />
</Box>
</Stack>
<Box flexGrow={1} minWidth="0">
<Box display="flex" alignItems="center" justifyContent="between" gap={2}>
<Stack flexGrow={1} minWidth="0">
<Stack display="flex" alignItems="center" justifyContent="between" gap={2}>
<Text size="sm" weight="medium" color={`text-${color}-200`}>
{parsed.userMessage}
</Text>
<Box display="flex" alignItems="center" gap={2}>
<Stack display="flex" alignItems="center" gap={2}>
{retryable && onRetry && (
<IconButton
icon={RefreshCw}
@@ -121,8 +120,8 @@ export function EnhancedFormError({
title="Toggle technical details"
/>
)}
</Box>
</Box>
</Stack>
</Stack>
{/* Validation Errors List */}
{parsed.isValidationError && parsed.validationErrors.length > 0 && (
@@ -136,31 +135,31 @@ export function EnhancedFormError({
)}
{/* Action Hint */}
<Box mt={2}>
<Stack mt={2}>
<Text size="xs" color="text-gray-400">
{connectivity && "Check your internet connection and try again"}
{parsed.isValidationError && "Please review your input and try again"}
{retryable && !connectivity && !parsed.isValidationError && "Please try again in a moment"}
</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
{/* Developer Details */}
<AnimatePresence>
{showDetails && (
<Box
<Stack
as={motion.div}
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
>
<Box borderTop borderColor={`border-${color}-500/20`} bg="bg-black/20" p={4}>
<Stack borderTop borderColor={`border-${color}-500/20`} bg="bg-black/20" p={4}>
<Stack gap={3} fontSize="0.75rem">
<Box display="flex" alignItems="center" gap={2} color="text-gray-400">
<Stack display="flex" alignItems="center" gap={2} color="text-gray-400">
<Icon icon={Bug} size={3} />
<Text weight="semibold">Developer Details</Text>
</Box>
</Stack>
<Stack gap={1}>
<Text color="text-gray-500">Error Type:</Text>
@@ -186,9 +185,9 @@ export function EnhancedFormError({
</Stack>
)}
<Box pt={2} borderTop borderColor="border-charcoal-outline/50">
<Stack pt={2} borderTop borderColor="border-charcoal-outline/50">
<Text color="text-gray-500" block mb={1}>Quick Actions:</Text>
<Box display="flex" gap={2}>
<Stack display="flex" gap={2}>
{retryable && onRetry && (
<Button
variant="secondary"
@@ -216,15 +215,15 @@ export function EnhancedFormError({
>
Log to Console
</Button>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
)}
</AnimatePresence>
</Box>
</Box>
</Stack>
</Stack>
);
}
@@ -248,21 +247,21 @@ export function FormErrorSummary({
};
return (
<Box
<Stack
as={motion.div}
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
>
<Box bg="bg-red-500/10" border borderColor="border-red-500/30" rounded="lg" p={3} display="flex" alignItems="start" gap={2}>
<Stack bg="bg-red-500/10" border borderColor="border-red-500/30" rounded="lg" p={3} display="flex" alignItems="start" gap={2}>
<Icon icon={AlertCircle} size={4} color="rgb(239, 68, 68)" mt={0.5} />
<Box flexGrow={1} minWidth="0">
<Box display="flex" alignItems="center" justifyContent="between" gap={2}>
<Box>
<Stack flexGrow={1} minWidth="0">
<Stack display="flex" alignItems="center" justifyContent="between" gap={2}>
<Stack>
<Text size="sm" weight="medium" color="text-red-200" block>{summary.title}</Text>
<Text size="xs" color="text-red-300/80" block mt={0.5}>{summary.description}</Text>
<Text size="xs" color="text-gray-400" block mt={1}>{summary.action}</Text>
</Box>
</Stack>
{onDismiss && (
<IconButton
icon={X}
@@ -272,9 +271,9 @@ export function FormErrorSummary({
color="rgb(239, 68, 68)"
/>
)}
</Box>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
);
}