Add bilingual i18n UI and lighten component shadows

client/src/components/layout/AppHeader.tsx

@@ -1,7 +1,9 @@
 import { Flame, Focus, LocateFixed, MapPin, RefreshCw } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { LanguageToggle } from '@/components/layout/LanguageToggle'
 import { ThemeToggle } from '@/components/layout/ThemeToggle'
 import type { FeedStatus } from '@/types/api'
 
@@ -32,6 +34,7 @@ export function AppHeader({
   disableLocate,
   disableMySignal,
 }: AppHeaderProps) {
+  const { t } = useTranslation()
   const isError = status === 'error'
 
   return (
@@ -42,8 +45,8 @@ export function AppHeader({
             <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>
+            <span className="text-lg font-semibold sm:text-xl">{t('app.name')}</span>
+            <span className="text-xs text-muted-foreground sm:text-sm">{t('app.tagline')}</span>
           </div>
         </div>
         <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
@@ -62,20 +65,47 @@ export function AppHeader({
               </span>
               {statusLabel}
             </span>
-            <span className="text-[10px] uppercase text-muted-foreground">{lastUpdatedLabel}</span>
+            <span className="text-[10px] uppercase text-muted-foreground">
+              {t('header.badge.updated', { time: lastUpdatedLabel })}
+            </span>
           </Badge>
-          <Button variant="ghost" size="icon" onClick={onRefresh} disabled={disableRefresh} aria-label="Refresh now">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={disableRefresh}
+            aria-label={t('header.actions.refresh')}
+          >
             <RefreshCw className="h-4 w-4" />
           </Button>
-          <Button variant="secondary" size="icon" onClick={onFocusHeat} disabled={disableHeat} aria-label="Focus heatmap">
+          <Button
+            variant="secondary"
+            size="icon"
+            onClick={onFocusHeat}
+            disabled={disableHeat}
+            aria-label={t('header.actions.focusHeat')}
+          >
             <Focus className="h-4 w-4" />
           </Button>
-          <Button variant="ghost" size="icon" onClick={onLocateUser} disabled={disableLocate} aria-label="Locate me">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onLocateUser}
+            disabled={disableLocate}
+            aria-label={t('header.actions.locate')}
+          >
             <LocateFixed className="h-4 w-4" />
           </Button>
-          <Button variant="ghost" size="icon" onClick={onFocusMySignal} disabled={disableMySignal} aria-label="My last signal">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onFocusMySignal}
+            disabled={disableMySignal}
+            aria-label={t('header.actions.mySignal')}
+          >
             <MapPin className="h-4 w-4" />
           </Button>
+          <LanguageToggle />
           <ThemeToggle />
         </div>
       </div>