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

feat: add distance value object and ci workflows

Browse Source
This commit is contained in:
Bernard Ngandu
2025-10-10 16:13:48 +02:00
parent d3338e8901
commit 2ed7a48d36
44 changed files with 4263 additions and 1370 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/AppHeader.tsx
+40 -43
View File
@@ -1,28 +1,28 @@
import { ChevronDown, ChevronUp, Flame, Focus, LocateFixed, MapPin, RefreshCw } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { ChevronDown, ChevronUp, 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 { cn } from '@/lib/utils'
import type { FeedStatus } from '@/types/api'
import { LanguageToggle } from "@/components/layout/LanguageToggle";
import { ThemeToggle } from "@/components/layout/ThemeToggle";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
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
collapsed: boolean
onToggleCollapse: () => void
className?: string
status: FeedStatus;
statusLabel: string;
lastUpdatedLabel: string;
onRefresh: () => void;
onFocusHeat: () => void;
onLocateUser: () => void;
onFocusMySignal: () => void;
disableRefresh: boolean;
disableHeat: boolean;
disableLocate: boolean;
disableMySignal: boolean;
collapsed: boolean;
onToggleCollapse: () => void;
className?: string;
}
export function AppHeader({
@@ -41,21 +41,18 @@ export function AppHeader({
onToggleCollapse,
className,
}: AppHeaderProps) {
const { t } = useTranslation()
const isError = status === 'error'
const { t } = useTranslation();
const isError = status === "error";
const statusBadge = (
<Badge
variant="secondary"
className={cn(
'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',
collapsed && 'px-2 py-1 text-[11px] font-semibold',
"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",
collapsed && "px-2 py-1 text-[11px] font-semibold"
)}
>
<span
className={`flex items-center gap-2 ${isError ? 'text-destructive' : 'text-primary'}`}
aria-live="polite"
>
<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>
@@ -63,18 +60,18 @@ export function AppHeader({
</span>
{!collapsed && (
<span className="text-[10px] uppercase text-muted-foreground">
{t('header.badge.updated', { time: lastUpdatedLabel })}
{t("header.badge.updated", { time: lastUpdatedLabel })}
</span>
)}
</Badge>
)
);
return (
<header
className={cn(
'flex w-full max-w-[420px] flex-col gap-3 rounded-3xl border border-border/60 bg-background/90 p-4 text-sm shadow-xl backdrop-blur transition-all',
collapsed && 'max-w-[240px] bg-background/80 p-3',
className,
"flex w-full max-w-[420px] flex-col gap-3 rounded-3xl border border-border/60 bg-background/90 p-4 text-sm shadow-xl backdrop-blur transition-all",
collapsed && "max-w-[240px] bg-background/80 p-3",
className
)}
>
<div className="flex items-center justify-between gap-3">
@@ -83,15 +80,15 @@ export function AppHeader({
<Flame className="h-5 w-5" />
</span>
<div className="flex flex-col">
<span className="text-base font-semibold sm:text-lg">{t('app.name')}</span>
{!collapsed && <span className="text-xs text-muted-foreground sm:text-sm">{t('app.tagline')}</span>}
<span className="text-base font-semibold sm:text-lg">{t("app.name")}</span>
{!collapsed && <span className="text-xs text-muted-foreground sm:text-sm">{t("app.tagline")}</span>}
</div>
</div>
<Button
variant="ghost"
size="icon"
onClick={onToggleCollapse}
aria-label={collapsed ? t('header.actions.expand') : t('header.actions.collapse')}
aria-label={collapsed ? t("header.actions.expand") : t("header.actions.collapse")}
className="h-9 w-9 rounded-full border border-border/50 bg-muted/60 backdrop-blur hover:bg-muted"
>
{collapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
@@ -105,7 +102,7 @@ export function AppHeader({
size="icon"
onClick={onRefresh}
disabled={disableRefresh}
aria-label={t('header.actions.refresh')}
aria-label={t("header.actions.refresh")}
>
<RefreshCw className="h-4 w-4" />
</Button>
@@ -114,7 +111,7 @@ export function AppHeader({
size="icon"
onClick={onFocusHeat}
disabled={disableHeat}
aria-label={t('header.actions.focusHeat')}
aria-label={t("header.actions.focusHeat")}
>
<Focus className="h-4 w-4" />
</Button>
@@ -123,7 +120,7 @@ export function AppHeader({
size="icon"
onClick={onLocateUser}
disabled={disableLocate}
aria-label={t('header.actions.locate')}
aria-label={t("header.actions.locate")}
>
<LocateFixed className="h-4 w-4" />
</Button>
@@ -132,7 +129,7 @@ export function AppHeader({
size="icon"
onClick={onFocusMySignal}
disabled={disableMySignal}
aria-label={t('header.actions.mySignal')}
aria-label={t("header.actions.mySignal")}
>
<MapPin className="h-4 w-4" />
</Button>
@@ -141,5 +138,5 @@ export function AppHeader({
</div>
)}
</header>
)
);
}