feat: add distance value object and ci workflows

client/src/components/panels/ActivityPanel.tsx

@@ -1,43 +1,43 @@
-import { Activity, ArrowRight } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { Activity, ArrowRight } 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 { ScrollArea } from '@/components/ui/scroll-area'
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 interface ActivityItem {
-  id: string | number
-  title: string
-  subtitle: string
-  timestampLabel: string
-  distanceLabel: string
-  onFocus: () => void
+  id: string | number;
+  title: string;
+  subtitle: string;
+  timestampLabel: string;
+  distanceLabel: string;
+  onFocus: () => void;
 }
 
 interface ActivityPanelProps {
-  items: ActivityItem[]
-  emptyMessage: string
+  items: ActivityItem[];
+  emptyMessage: string;
 }
 
 export function ActivityPanel({ items, emptyMessage }: ActivityPanelProps) {
-  const { t } = useTranslation()
+  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" />
-          {t('activity.title')}
+          {t("activity.title")}
         </CardTitle>
-        <CardDescription>{t('activity.description')}</CardDescription>
+        <CardDescription>{t("activity.description")}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
         {items.length === 0 && <p className="text-sm text-muted-foreground">{emptyMessage}</p>}
         {items.length > 0 && (
           <ScrollArea className="max-h-[280px] pr-2">
             <ul className="space-y-3">
-              {items.map((item) => (
+              {items.map(item => (
                 <li key={item.id} className="rounded-2xl border border-border/60 bg-muted/50 p-3">
                   <div className="flex items-center justify-between gap-3">
                     <div className="flex flex-col">
@@ -51,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}>
-                      {t('activity.view')}
+                      {t("activity.view")}
                       <ArrowRight className="h-3.5 w-3.5" />
                     </Button>
                   </div>
@@ -62,5 +62,5 @@ export function ActivityPanel({ items, emptyMessage }: ActivityPanelProps) {
         )}
       </CardContent>
     </Card>
-  )
+  );
 }

client/src/components/panels/HotspotStatsPanel.tsx

@@ -1,47 +1,45 @@
-import { Flame, MapPin } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { Flame, MapPin } 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 { ScrollArea } from '@/components/ui/scroll-area'
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 interface HotspotCellInfo {
-  id: string
-  title: string
-  subtitle: string
-  intensity: number
-  onFocus: () => void
+  id: string;
+  title: string;
+  subtitle: string;
+  intensity: number;
+  onFocus: () => void;
 }
 
 interface HotspotStatsPanelProps {
-  hasLocation: boolean
-  radiusKm: number
-  locationHint: string
-  cells: HotspotCellInfo[]
+  hasLocation: boolean;
+  radiusKm: number;
+  locationHint: string;
+  cells: HotspotCellInfo[];
 }
 
 export function HotspotStatsPanel({ hasLocation, radiusKm, locationHint, cells }: HotspotStatsPanelProps) {
-  const { t } = useTranslation()
+  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" />
-          {t('hotspots.title')}
+          {t("hotspots.title")}
         </CardTitle>
-        <CardDescription>{t('hotspots.description', { radius: radiusKm })}</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">{t('hotspots.empty')}</p>
-        )}
+        {hasLocation && cells.length === 0 && <p className="text-sm text-muted-foreground">{t("hotspots.empty")}</p>}
         {cells.length > 0 && (
           <ScrollArea className="max-h-[280px] pr-2">
             <ul className="space-y-3">
-              {cells.map((cell) => (
+              {cells.map(cell => (
                 <li key={cell.id} className="rounded-2xl border border-border/60 bg-muted/50 p-3">
                   <div className="flex items-center justify-between gap-3">
                     <div className="flex flex-col">
@@ -58,7 +56,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" /> {t('hotspots.focus')}
+                    <MapPin className="h-3.5 w-3.5" /> {t("hotspots.focus")}
                   </Button>
                 </li>
               ))}
@@ -67,5 +65,5 @@ export function HotspotStatsPanel({ hasLocation, radiusKm, locationHint, cells }
         )}
       </CardContent>
     </Card>
-  )
+  );
 }

client/src/components/panels/OverviewPanel.tsx

@@ -1,23 +1,23 @@
-import { AlertCircle, Radio } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+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'
+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
-  error: FeedError | null
-  onReport: () => void
-  onRetry: () => void
-  isPosting: boolean
-  locationHint: string
-  showLocationCta: boolean
-  disableReport: boolean
+  nearbySignals: number;
+  uniqueContributors: number;
+  lastUpdatedLabel: string;
+  mySignalLabel: string | null;
+  error: FeedError | null;
+  onReport: () => void;
+  onRetry: () => void;
+  isPosting: boolean;
+  locationHint: string;
+  showLocationCta: boolean;
+  disableReport: boolean;
 }
 
 export function OverviewPanel({
@@ -33,32 +33,32 @@ export function OverviewPanel({
   showLocationCta,
   disableReport,
 }: OverviewPanelProps) {
-  const { t } = useTranslation()
-  const errorMessage = error ? t(error.key, error.values) : null
+  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" />
-          {t('overview.title')}
+          {t("overview.title")}
         </CardTitle>
-        <CardDescription>{t('overview.description')}</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">{t('overview.stats.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">{t('overview.stats.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">
-            {t('overview.badge', { time: mySignalLabel })}
+            {t("overview.badge", { time: mySignalLabel })}
           </Badge>
         )}
         {errorMessage ? (
@@ -67,7 +67,7 @@ export function OverviewPanel({
             <div className="space-y-2">
               <p>{errorMessage}</p>
               <Button variant="outline" size="sm" className="text-xs" onClick={onRetry}>
-                {t('overview.error.action')}
+                {t("overview.error.action")}
               </Button>
             </div>
           </div>
@@ -75,17 +75,15 @@ export function OverviewPanel({
           <p className="text-sm text-muted-foreground">{locationHint}</p>
         )}
         <Button className="w-full" onClick={onReport} disabled={isPosting || disableReport}>
-          {isPosting
-            ? t('overview.cta.sending')
-            : disableReport
-              ? t('overview.cta.waiting')
-              : t('overview.cta.send')}
+          {isPosting ? t("overview.cta.sending") : disableReport ? t("overview.cta.waiting") : t("overview.cta.send")}
         </Button>
         {showLocationCta && !errorMessage && (
-          <p className="text-xs text-muted-foreground">{t('overview.locationPermission')}</p>
+          <p className="text-xs text-muted-foreground">{t("overview.locationPermission")}</p>
         )}
-        <p className="text-[11px] uppercase text-muted-foreground">{t('overview.lastSynced', { time: lastUpdatedLabel })}</p>
+        <p className="text-[11px] uppercase text-muted-foreground">
+          {t("overview.lastSynced", { time: lastUpdatedLabel })}
+        </p>
       </CardContent>
     </Card>
-  )
+  );
 }