bernard-ng/points-of-interest
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bilingual i18n UI and lighten component shadows

Browse Source
This commit is contained in:
Bernard Ngandu
2025-10-10 10:30:28 +02:00
parent 8f4b954af8
commit 0422becdd0
20 changed files with 622 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/AppHeader.tsx
+37 -7
View File
@@ -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>
client/src/components/layout/LanguageToggle.tsx
+28
View File
@@ -0,0 +1,28 @@
import { Globe } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
export function LanguageToggle() {
const { i18n, t } = useTranslation()
const current = i18n.language === 'fr' ? 'fr' : 'en'
const next = current === 'en' ? 'fr' : 'en'
const nextLabel = t(next === 'en' ? 'language.english' : 'language.french')
return (
<Button
variant="ghost"
size="sm"
onClick={() => {
i18n.changeLanguage(next).catch(() => undefined)
}}
aria-label={t('common.aria.language', { language: nextLabel })}
className="h-9 rounded-full border border-border/60 bg-background/80 px-3 backdrop-blur"
>
<span className="sr-only">{t('language.label')}</span>
<Globe className="h-4 w-4" />
<span className="ml-2 text-xs font-semibold uppercase text-muted-foreground">{current.toUpperCase()}</span>
</Button>
)
}
client/src/components/layout/ThemeToggle.tsx
+4 -1
View File
@@ -1,16 +1,19 @@
import { Moon, Sun } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { useTheme } from '@/hooks/useTheme'
export function ThemeToggle() {
const { toggleTheme, isDark } = useTheme()
const { t } = useTranslation()
return (
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
aria-label={isDark ? t('common.aria.theme.light') : t('common.aria.theme.dark')}
className="rounded-full border border-border/60 bg-background/80 backdrop-blur"
>
{isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
client/src/components/map/MapViewport.tsx
+5 -2
View File
@@ -1,4 +1,5 @@
import type { MutableRefObject } from 'react'
import { useTranslation } from 'react-i18next'
import { cn } from '@/lib/utils'
@@ -10,6 +11,8 @@ interface MapViewportProps {
}
export function MapViewport({ containerRef, isPosting, isLoading, confirmationHint }: MapViewportProps) {
const { t } = useTranslation()
return (
<div className="relative min-h-[360px] flex-1 overflow-hidden rounded-3xl border border-border/50 bg-muted/40 shadow-inner">
<div ref={containerRef} className={cn('absolute inset-0 z-0', 'leaflet-wrapper')} />
@@ -18,12 +21,12 @@ export function MapViewport({ containerRef, isPosting, isLoading, confirmationHi
{(isPosting || isLoading) && (
<div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
<span className="rounded-full border border-border/60 bg-background/80 px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground backdrop-blur">
{isPosting ? 'Sending your signal…' : 'Syncing map…'}
{isPosting ? t('map.posting') : t('map.loading')}
</span>
</div>
)}
{confirmationHint && (
<div className="pointer-events-none absolute bottom-6 left-1/2 z-20 w-[90%] max-w-sm -translate-x-1/2 rounded-full border border-border/70 bg-background/90 px-4 py-2 text-xs text-muted-foreground shadow">
<div className="pointer-events-none absolute bottom-6 left-1/2 z-20 w-[90%] max-w-sm -translate-x-1/2 rounded-full border border-border/70 bg-background/90 px-4 py-2 text-xs text-muted-foreground shadow-sm">
{confirmationHint}
</div>
)}
client/src/components/panels/ActivityPanel.tsx
+6 -3
View File
@@ -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
+7 -4
View File
@@ -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
+20 -11
View File
@@ -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>
)
client/src/components/ui/alert-dialog.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ const AlertDialogContent = React.forwardRef<
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] gap-4 border border-border/70 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] gap-4 border border-border/70 bg-background p-6 shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
className,
)}
{...props}
client/src/components/ui/card.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
<div
ref={ref}
className={cn(
'rounded-xl border border-border/60 bg-card/80 text-card-foreground shadow-xl shadow-black/30 backdrop-blur',
'rounded-xl border border-border/60 bg-card/80 text-card-foreground shadow-sm backdrop-blur',
className,
)}
{...props}
client/src/components/ui/sheet.tsx
+29 -24
View File
@@ -1,5 +1,6 @@
import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { useTranslation } from 'react-i18next'
import { cn } from '@/lib/utils'
@@ -35,30 +36,34 @@ interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetP
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = 'bottom', className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(
'fixed z-50 grid gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out',
side === 'bottom' && 'inset-x-0 bottom-0 rounded-t-2xl border-t',
side === 'top' && 'inset-x-0 top-0 rounded-b-2xl border-b',
side === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
side === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
className,
)}
data-side={side}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute right-6 top-6 rounded-full border border-border/50 bg-background/60 px-3 py-1 text-xs font-medium text-muted-foreground transition hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background">
Close
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
))
>(({ side = 'bottom', className, children, ...props }, ref) => {
const { t } = useTranslation()
return (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(
'fixed z-50 grid gap-4 bg-background p-6 shadow-sm transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out',
side === 'bottom' && 'inset-x-0 bottom-0 rounded-t-2xl border-t',
side === 'top' && 'inset-x-0 top-0 rounded-b-2xl border-b',
side === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
side === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
className,
)}
data-side={side}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute right-6 top-6 rounded-full border border-border/50 bg-background/60 px-3 py-1 text-xs font-medium text-muted-foreground transition hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background">
{t('common.actions.close')}
<span className="sr-only">{t('common.aria.sheet.close')}</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
)
})
SheetContent.displayName = SheetPrimitive.Content.displayName
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (