website refactor
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user