Add bilingual i18n UI and lighten component shadows

client/src/components/panels/ActivityPanel.tsx

@@ -1,4 +1,5 @@
 import { Activity, ArrowRight } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -20,14 +21,16 @@ interface ActivityPanelProps {
 }
 
 export function ActivityPanel({ items, emptyMessage }: ActivityPanelProps) {
+  const { t } = useTranslation()
+
   return (
     <Card className="h-full">
       <CardHeader className="space-y-1">
         <CardTitle className="flex items-center gap-2">
           <Activity className="h-5 w-5 text-primary" />
-          Live community pings
+          {t('activity.title')}
         </CardTitle>
-        <CardDescription>Latest activity reported by nearby contributors.</CardDescription>
+        <CardDescription>{t('activity.description')}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
         {items.length === 0 && <p className="text-sm text-muted-foreground">{emptyMessage}</p>}
@@ -48,7 +51,7 @@ export function ActivityPanel({ items, emptyMessage }: ActivityPanelProps) {
                   <div className="mt-2 flex items-center justify-between text-xs text-muted-foreground">
                     <span>{item.distanceLabel}</span>
                     <Button variant="ghost" size="sm" className="h-8 gap-2 text-xs" onClick={item.onFocus}>
-                      View
+                      {t('activity.view')}
                       <ArrowRight className="h-3.5 w-3.5" />
                     </Button>
                   </div>

client/src/components/panels/HotspotStatsPanel.tsx

@@ -1,4 +1,5 @@
 import { Flame, MapPin } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -21,19 +22,21 @@ interface HotspotStatsPanelProps {
 }
 
 export function HotspotStatsPanel({ hasLocation, radiusKm, locationHint, cells }: HotspotStatsPanelProps) {
+  const { t } = useTranslation()
+
   return (
     <Card className="h-full">
       <CardHeader className="space-y-1">
         <CardTitle className="flex items-center gap-2">
           <Flame className="h-5 w-5 text-primary" />
-          Danger zone intel
+          {t('hotspots.title')}
         </CardTitle>
-        <CardDescription>Highest intensity heat within {radiusKm}km.</CardDescription>
+        <CardDescription>{t('hotspots.description', { radius: radiusKm })}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
         {!hasLocation && <p className="text-sm text-muted-foreground">{locationHint}</p>}
         {hasLocation && cells.length === 0 && (
-          <p className="text-sm text-muted-foreground">No active hotspots nearby. Tap the map to log a new signal.</p>
+          <p className="text-sm text-muted-foreground">{t('hotspots.empty')}</p>
         )}
         {cells.length > 0 && (
           <ScrollArea className="max-h-[280px] pr-2">
@@ -55,7 +58,7 @@ export function HotspotStatsPanel({ hasLocation, radiusKm, locationHint, cells }
                     className="mt-2 w-full justify-center gap-2 text-xs"
                     onClick={cell.onFocus}
                   >
-                    <MapPin className="h-3.5 w-3.5" /> Focus
+                    <MapPin className="h-3.5 w-3.5" /> {t('hotspots.focus')}
                   </Button>
                 </li>
               ))}

client/src/components/panels/OverviewPanel.tsx

@@ -1,15 +1,17 @@
 import { AlertCircle, Radio } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import type { FeedError } from '@/hooks/useHotspotFeed'
 
 interface OverviewPanelProps {
   nearbySignals: number
   uniqueContributors: number
   lastUpdatedLabel: string
   mySignalLabel: string | null
-  errorMessage: string | null
+  error: FeedError | null
   onReport: () => void
   onRetry: () => void
   isPosting: boolean
@@ -23,7 +25,7 @@ export function OverviewPanel({
   uniqueContributors,
   lastUpdatedLabel,
   mySignalLabel,
-  errorMessage,
+  error,
   onReport,
   onRetry,
   isPosting,
@@ -31,29 +33,32 @@ export function OverviewPanel({
   showLocationCta,
   disableReport,
 }: OverviewPanelProps) {
+  const { t } = useTranslation()
+  const errorMessage = error ? t(error.key, error.values) : null
+
   return (
     <Card>
       <CardHeader className="space-y-1">
         <CardTitle className="flex items-center gap-2">
           <Radio className="h-5 w-5 text-primary" />
-          Nearby coverage
+          {t('overview.title')}
         </CardTitle>
-        <CardDescription>Signals refresh automatically every few seconds.</CardDescription>
+        <CardDescription>{t('overview.description')}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="grid grid-cols-2 gap-3">
           <div className="rounded-2xl border border-border/60 bg-muted/50 p-3">
-            <span className="text-xs uppercase text-muted-foreground">Signals</span>
+            <span className="text-xs uppercase text-muted-foreground">{t('overview.stats.signals')}</span>
             <p className="text-xl font-semibold">{nearbySignals}</p>
           </div>
           <div className="rounded-2xl border border-border/60 bg-muted/50 p-3">
-            <span className="text-xs uppercase text-muted-foreground">Contributors</span>
+            <span className="text-xs uppercase text-muted-foreground">{t('overview.stats.contributors')}</span>
             <p className="text-xl font-semibold">{uniqueContributors}</p>
           </div>
         </div>
         {mySignalLabel && (
           <Badge variant="secondary" className="w-full justify-center rounded-full py-2 text-xs uppercase">
-            Your last signal {mySignalLabel}
+            {t('overview.badge', { time: mySignalLabel })}
           </Badge>
         )}
         {errorMessage ? (
@@ -62,7 +67,7 @@ export function OverviewPanel({
             <div className="space-y-2">
               <p>{errorMessage}</p>
               <Button variant="outline" size="sm" className="text-xs" onClick={onRetry}>
-                Try again
+                {t('overview.error.action')}
               </Button>
             </div>
           </div>
@@ -70,12 +75,16 @@ export function OverviewPanel({
           <p className="text-sm text-muted-foreground">{locationHint}</p>
         )}
         <Button className="w-full" onClick={onReport} disabled={isPosting || disableReport}>
-          {isPosting ? 'Sending…' : disableReport ? 'Waiting for location…' : 'Drop a signal manually'}
+          {isPosting
+            ? t('overview.cta.sending')
+            : disableReport
+              ? t('overview.cta.waiting')
+              : t('overview.cta.send')}
         </Button>
         {showLocationCta && !errorMessage && (
-          <p className="text-xs text-muted-foreground">Allow location permissions to personalise the feed.</p>
+          <p className="text-xs text-muted-foreground">{t('overview.locationPermission')}</p>
         )}
-        <p className="text-[11px] uppercase text-muted-foreground">Last synced {lastUpdatedLabel}</p>
+        <p className="text-[11px] uppercase text-muted-foreground">{t('overview.lastSynced', { time: lastUpdatedLabel })}</p>
       </CardContent>
     </Card>
   )