Refactor client UI with shadcn heatmap layout

2025-10-10 10:04:04 +02:00
parent 9834438ff1
commit 8f4b954af8
20 changed files with 2133 additions and 739 deletions
@@ -0,0 +1,84 @@
+import { Flame, Focus, LocateFixed, MapPin, RefreshCw } from 'lucide-react'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { ThemeToggle } from '@/components/layout/ThemeToggle'
+import type { FeedStatus } from '@/types/api'
+
+interface AppHeaderProps {
+  status: FeedStatus
+  statusLabel: string
+  lastUpdatedLabel: string
+  onRefresh: () => void
+  onFocusHeat: () => void
+  onLocateUser: () => void
+  onFocusMySignal: () => void
+  disableRefresh: boolean
+  disableHeat: boolean
+  disableLocate: boolean
+  disableMySignal: boolean
+}
+
+export function AppHeader({
+  status,
+  statusLabel,
+  lastUpdatedLabel,
+  onRefresh,
+  onFocusHeat,
+  onLocateUser,
+  onFocusMySignal,
+  disableRefresh,
+  disableHeat,
+  disableLocate,
+  disableMySignal,
+}: AppHeaderProps) {
+  const isError = status === 'error'
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-border/60 bg-background/80 backdrop-blur">
+      <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
+        <div className="flex items-center gap-3">
+          <span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-primary/10 text-primary">
+            <Flame className="h-5 w-5" />
+          </span>
+          <div className="flex flex-col">
+            <span className="text-lg font-semibold sm:text-xl">SignalMap</span>
+            <span className="text-xs text-muted-foreground sm:text-sm">Crowd signals around your route</span>
+          </div>
+        </div>
+        <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
+          <Badge
+            variant="secondary"
+            className={
+              'inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/60 px-3 py-1 text-xs font-medium uppercase tracking-wide'
+            }
+          >
+            <span
+              className={`flex items-center gap-2 ${isError ? 'text-destructive' : 'text-primary'}`}
+              aria-live="polite"
+            >
+              <span className="relative block h-2.5 w-2.5 rounded-full bg-current">
+                <span className="absolute inset-[-0.35rem] rounded-full border border-current opacity-40 animate-status-pulse" />
+              </span>
+              {statusLabel}
+            </span>
+            <span className="text-[10px] uppercase text-muted-foreground">{lastUpdatedLabel}</span>
+          </Badge>
+          <Button variant="ghost" size="icon" onClick={onRefresh} disabled={disableRefresh} aria-label="Refresh now">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          <Button variant="secondary" size="icon" onClick={onFocusHeat} disabled={disableHeat} aria-label="Focus heatmap">
+            <Focus className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={onLocateUser} disabled={disableLocate} aria-label="Locate me">
+            <LocateFixed className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={onFocusMySignal} disabled={disableMySignal} aria-label="My last signal">
+            <MapPin className="h-4 w-4" />
+          </Button>
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  )
+}