{t("app.name")}
{!collapsed &&
{t("app.tagline")}}
diff --git a/client/src/components/layout/LanguageToggle.tsx b/client/src/components/layout/language-toggle.tsx
similarity index 100%
rename from client/src/components/layout/LanguageToggle.tsx
rename to client/src/components/layout/language-toggle.tsx
diff --git a/client/src/components/layout/ThemeToggle.tsx b/client/src/components/layout/theme-toggle.tsx
similarity index 93%
rename from client/src/components/layout/ThemeToggle.tsx
rename to client/src/components/layout/theme-toggle.tsx
index c23f8c9..a142fea 100644
--- a/client/src/components/layout/ThemeToggle.tsx
+++ b/client/src/components/layout/theme-toggle.tsx
@@ -2,7 +2,7 @@ import { Moon, Sun } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
-import { useTheme } from "@/hooks/useTheme";
+import { useTheme } from "@/hooks/use-theme";
export function ThemeToggle() {
const { toggleTheme, isDark } = useTheme();
diff --git a/client/src/components/map/MapViewport.tsx b/client/src/components/map/map-viewport.tsx
similarity index 78%
rename from client/src/components/map/MapViewport.tsx
rename to client/src/components/map/map-viewport.tsx
index 5dca1de..01b97ed 100644
--- a/client/src/components/map/MapViewport.tsx
+++ b/client/src/components/map/map-viewport.tsx
@@ -1,11 +1,11 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils";
interface MapViewportProps {
- containerRef: MutableRefObject
;
+ containerRef: RefObject;
isPosting: boolean;
isLoading: boolean;
confirmationHint?: string | null;
@@ -18,8 +18,6 @@ export function MapViewport({ containerRef, isPosting, isLoading, confirmationHi
return (
-
-
{(isPosting || isLoading) && (
diff --git a/client/src/components/panels/ActivityPanel.tsx b/client/src/components/panels/activity-panel.tsx
similarity index 100%
rename from client/src/components/panels/ActivityPanel.tsx
rename to client/src/components/panels/activity-panel.tsx
diff --git a/client/src/components/panels/HotspotStatsPanel.tsx b/client/src/components/panels/hotspot-stats-panel.tsx
similarity index 100%
rename from client/src/components/panels/HotspotStatsPanel.tsx
rename to client/src/components/panels/hotspot-stats-panel.tsx
diff --git a/client/src/components/panels/map-tiles-panel.tsx b/client/src/components/panels/map-tiles-panel.tsx
new file mode 100644
index 0000000..e6dade6
--- /dev/null
+++ b/client/src/components/panels/map-tiles-panel.tsx
@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+
+import { Layers } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { TileProvider } from "@/hooks/use-leaflet-heatmap";
+
+interface MapTilesPanelProps {
+ tileProvider: TileProvider;
+ setTileProvider: (provider: TileProvider) => void;
+}
+
+export function MapTilesPanel({ tileProvider, setTileProvider }: MapTilesPanelProps) {
+ const { t } = useTranslation();
+ const tileOptions = useMemo(
+ () => [
+ { value: "openstreetmap" as TileProvider, label: t("map.tiles.openstreetmap") },
+ { value: "mapbox" as TileProvider, label: t("map.tiles.mapbox") },
+ ],
+ [t]
+ );
+
+ return (
+
+
+
+
+ {t("map.tiles.title")}
+
+ {t("map.tiles.subtitle")}
+
+
+
+ {tileOptions.map(option => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/client/src/components/panels/OverviewPanel.tsx b/client/src/components/panels/overview-panel.tsx
similarity index 83%
rename from client/src/components/panels/OverviewPanel.tsx
rename to client/src/components/panels/overview-panel.tsx
index 2c18a05..ecd52f1 100644
--- a/client/src/components/panels/OverviewPanel.tsx
+++ b/client/src/components/panels/overview-panel.tsx
@@ -1,10 +1,12 @@
-import { AlertCircle, Radio } from "lucide-react";
+import { AlertCircleIcon, 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 type { FeedError } from "@/hooks/use-hotsop-feed";
+
+import { Alert, AlertTitle } from "../ui/alert";
interface OverviewPanelProps {
nearbySignals: number;
@@ -62,15 +64,10 @@ export function OverviewPanel({
)}
{errorMessage ? (
-
-
-
-
{errorMessage}
-
-
-
{locationHint}
)}
diff --git a/client/src/components/ui/alert-dialog.tsx b/client/src/components/ui/alert-dialog.tsx
index fccd9a0..46078e0 100644
--- a/client/src/components/ui/alert-dialog.tsx
+++ b/client/src/components/ui/alert-dialog.tsx
@@ -2,105 +2,105 @@ import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
-const AlertDialog = AlertDialogPrimitive.Root;
+function AlertDialog({ ...props }: React.ComponentProps) {
+ return ;
+}
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+function AlertDialogTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
+function AlertDialogPortal({ ...props }: React.ComponentProps) {
+ return ;
+}
-const AlertDialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
- ) {
+ return (
+
-
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+ );
+}
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
-
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
+function AlertDialogContent({ className, ...props }: React.ComponentProps) {
+ return (
+
+
+
+
+ );
+}
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
-
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const AlertDialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const AlertDialogDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+function AlertDialogTitle({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
-const AlertDialogAction = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+function AlertDialogDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
-const AlertDialogCancel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+function AlertDialogAction({ className, ...props }: React.ComponentProps) {
+ return ;
+}
+
+function AlertDialogCancel({ className, ...props }: React.ComponentProps) {
+ return ;
+}
export {
AlertDialog,
+ AlertDialogPortal,
+ AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
diff --git a/client/src/components/ui/alert.tsx b/client/src/components/ui/alert.tsx
new file mode 100644
index 0000000..a98c09a
--- /dev/null
+++ b/client/src/components/ui/alert.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+);
+
+function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps) {
+ return ;
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/client/src/components/ui/badge.tsx b/client/src/components/ui/badge.tsx
index 7bc17d4..69e7586 100644
--- a/client/src/components/ui/badge.tsx
+++ b/client/src/components/ui/badge.tsx
@@ -1,20 +1,20 @@
import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
- "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
- default: "border-transparent bg-primary/15 text-primary",
- secondary: "border-transparent bg-secondary text-secondary-foreground",
- destructive: "border-transparent bg-destructive/15 text-destructive",
- outline: "text-foreground",
- success: "border-transparent bg-emerald-500/15 text-emerald-300",
- muted: "border-transparent bg-muted/60 text-muted-foreground",
+ default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+ secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ destructive:
+ "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},
},
defaultVariants: {
@@ -23,11 +23,15 @@ const badgeVariants = cva(
}
);
-export interface BadgeProps extends React.HTMLAttributes, VariantProps {}
+function Badge({
+ className,
+ variant,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span";
-const Badge = React.forwardRef(({ className, variant, ...props }, ref) => (
-
-));
-Badge.displayName = "Badge";
+ return ;
+}
-export { Badge };
+export { Badge, badgeVariants };
diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index c9259ea..8f55d39 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -6,21 +6,26 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
- "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-offset-background",
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground shadow-sm",
- destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
+ ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
},
size: {
- default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-5 text-base",
- icon: "h-10 w-10",
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ "icon-sm": "size-8",
+ "icon-lg": "size-10",
},
},
defaultVariants: {
@@ -30,16 +35,19 @@ const buttonVariants = cva(
}
);
-export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean;
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "button";
+
+ return ;
}
-export const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button";
- return ;
- }
-);
-Button.displayName = "Button";
+export { Button, buttonVariants };
diff --git a/client/src/components/ui/card.tsx b/client/src/components/ui/card.tsx
index 6721835..9939da8 100644
--- a/client/src/components/ui/card.tsx
+++ b/client/src/components/ui/card.tsx
@@ -2,49 +2,55 @@ import * as React from "react";
import { cn } from "@/lib/utils";
-const Card = React.forwardRef>(({ className, ...props }, ref) => (
-
-));
-Card.displayName = "Card";
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const CardHeader = React.forwardRef>(
- ({ className, ...props }, ref) => (
-
- )
-);
-CardHeader.displayName = "CardHeader";
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const CardTitle = React.forwardRef>(
- ({ className, ...props }, ref) => (
-
- )
-);
-CardTitle.displayName = "CardTitle";
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return ;
+}
-const CardDescription = React.forwardRef>(
- ({ className, ...props }, ref) => (
-
- )
-);
-CardDescription.displayName = "CardDescription";
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return ;
+}
-const CardContent = React.forwardRef>(
- ({ className, ...props }, ref) =>
-);
-CardContent.displayName = "CardContent";
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const CardFooter = React.forwardRef>(
- ({ className, ...props }, ref) => (
-
- )
-);
-CardFooter.displayName = "CardFooter";
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return ;
+}
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/client/src/components/ui/input.tsx b/client/src/components/ui/input.tsx
new file mode 100644
index 0000000..868dec6
--- /dev/null
+++ b/client/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
+
+export { Input };
diff --git a/client/src/components/ui/scroll-area.tsx b/client/src/components/ui/scroll-area.tsx
index 1198835..f7c4935 100644
--- a/client/src/components/ui/scroll-area.tsx
+++ b/client/src/components/ui/scroll-area.tsx
@@ -4,36 +4,44 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { cn } from "@/lib/utils";
-const ScrollArea = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
- {children}
-
-
-
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+function ScrollArea({ className, children, ...props }: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+
+
+ );
+}
-const ScrollBar = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, orientation = "vertical", ...props }, ref) => (
-
-
-
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ );
+}
export { ScrollArea, ScrollBar };
diff --git a/client/src/components/ui/separator.tsx b/client/src/components/ui/separator.tsx
index 7625a29..0ea9ef0 100644
--- a/client/src/components/ui/separator.tsx
+++ b/client/src/components/ui/separator.tsx
@@ -1,18 +1,29 @@
+"use client";
+
import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
import { cn } from "@/lib/utils";
-const Separator = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & { orientation?: "horizontal" | "vertical" }
->(({ className, orientation = "horizontal", ...props }, ref) => (
-
-));
-Separator.displayName = "Separator";
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
export { Separator };
diff --git a/client/src/components/ui/sheet.tsx b/client/src/components/ui/sheet.tsx
index 82ed994..414e610 100644
--- a/client/src/components/ui/sheet.tsx
+++ b/client/src/components/ui/sheet.tsx
@@ -1,106 +1,104 @@
+"use client";
+
import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { useTranslation } from "react-i18next";
+import { XIcon } from "lucide-react";
import { cn } from "@/lib/utils";
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-type SheetSide = "top" | "bottom" | "left" | "right";
-
-interface SheetContentProps extends React.ComponentPropsWithoutRef {
- side?: SheetSide;
+function Sheet({ ...props }: React.ComponentProps) {
+ return ;
}
-const SheetContent = React.forwardRef, SheetContentProps>(
- ({ side = "bottom", className, children, ...props }, ref) => {
- const { t } = useTranslation();
+function SheetTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
- return (
-
-
-
- {children}
-
- {t("common.actions.close")}
- {t("common.aria.sheet.close")}
-
-
-
- );
- }
-);
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+function SheetClose({ ...props }: React.ComponentProps) {
+ return ;
+}
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
-
-);
-SheetHeader.displayName = "SheetHeader";
+function SheetPortal({ ...props }: React.ComponentProps) {
+ return ;
+}
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
-
-);
-SheetFooter.displayName = "SheetFooter";
+function SheetOverlay({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
-const SheetTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
+function SheetContent({
+ className,
+ children,
+ side = "right",
+ ...props
+}: React.ComponentProps & {
+ side?: "top" | "right" | "bottom" | "left";
+}) {
+ return (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+ );
+}
-const SheetDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return ;
+}
-export {
- Sheet,
- SheetPortal,
- SheetOverlay,
- SheetTrigger,
- SheetClose,
- SheetContent,
- SheetHeader,
- SheetFooter,
- SheetTitle,
- SheetDescription,
-};
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return ;
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
diff --git a/client/src/components/ui/sidebar.tsx b/client/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..baeb082
--- /dev/null
+++ b/client/src/components/ui/sidebar.tsx
@@ -0,0 +1,678 @@
+"use client";
+
+import * as React from "react";
+
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "23rem";
+const SIDEBAR_WIDTH_MOBILE = "23rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+ state: "expanded" | "collapsed";
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ openMobile: boolean;
+ setOpenMobile: (open: boolean) => void;
+ isMobile: boolean;
+ toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext(null);
+
+function useSidebar() {
+ const context = React.useContext(SidebarContext);
+ if (!context) {
+ throw new Error("useSidebar must be used within a SidebarProvider.");
+ }
+
+ return context;
+}
+
+function SidebarProvider({
+ defaultOpen = true,
+ open: openProp,
+ onOpenChange: setOpenProp,
+ className,
+ style,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ defaultOpen?: boolean;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+}) {
+ const isMobile = useIsMobile();
+ const [openMobile, setOpenMobile] = React.useState(false);
+
+ // This is the internal state of the sidebar.
+ // We use openProp and setOpenProp for control from outside the component.
+ const [_open, _setOpen] = React.useState(defaultOpen);
+ const open = openProp ?? _open;
+ const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === "function" ? value(open) : value;
+ if (setOpenProp) {
+ setOpenProp(openState);
+ } else {
+ _setOpen(openState);
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+ },
+ [setOpenProp, open]
+ );
+
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);
+ }, [isMobile, setOpen, setOpenMobile]);
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+ event.preventDefault();
+ toggleSidebar();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [toggleSidebar]);
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? "expanded" : "collapsed";
+
+ const contextValue = React.useMemo(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+ );
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+function Sidebar({
+ side = "left",
+ variant = "sidebar",
+ collapsible = "offcanvas",
+ className,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ side?: "left" | "right";
+ variant?: "sidebar" | "floating" | "inset";
+ collapsible?: "offcanvas" | "icon" | "none";
+}) {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+ if (collapsible === "none") {
+ return (
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+
+
+
+ Sidebar
+ Displays the mobile sidebar.
+
+ {children}
+
+
+ );
+ }
+
+ return (
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+
+ {showIcon && }
+
+
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+ );
+}
+
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
+ return (
+
+ );
+}
+
+function SidebarMenuSubButton({
+ asChild = false,
+ size = "md",
+ isActive = false,
+ className,
+ ...props
+}: React.ComponentProps<"a"> & {
+ asChild?: boolean;
+ size?: "sm" | "md";
+ isActive?: boolean;
+}) {
+ const Comp = asChild ? Slot : "a";
+
+ return (
+ svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+ "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+ size === "sm" && "text-xs",
+ size === "md" && "text-sm",
+ "group-data-[collapsible=icon]:hidden",
+ className
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar,
+};
diff --git a/client/src/components/ui/skeleton.tsx b/client/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..ffe4fd1
--- /dev/null
+++ b/client/src/components/ui/skeleton.tsx
@@ -0,0 +1,7 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return ;
+}
+
+export { Skeleton };
diff --git a/client/src/components/ui/sonner.tsx b/client/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..59f9447
--- /dev/null
+++ b/client/src/components/ui/sonner.tsx
@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme();
+
+ return (
+
+ );
+};
+
+export { Toaster };
diff --git a/client/src/components/ui/tabs.tsx b/client/src/components/ui/tabs.tsx
index 856bab2..62c8fe1 100644
--- a/client/src/components/ui/tabs.tsx
+++ b/client/src/components/ui/tabs.tsx
@@ -1,54 +1,43 @@
+"use client";
+
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils";
-const Tabs = TabsPrimitive.Root;
+function Tabs({ className, ...props }: React.ComponentProps) {
+ return ;
+}
-const TabsList = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
+function TabsList({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
-const TabsTrigger = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+function TabsTrigger({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
-const TabsContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+function TabsContent({ className, ...props }: React.ComponentProps) {
+ return ;
+}
export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/client/src/components/ui/toast.tsx b/client/src/components/ui/toast.tsx
deleted file mode 100644
index 035e6f6..0000000
--- a/client/src/components/ui/toast.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import * as React from "react";
-
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
- "group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-2xl border border-border bg-background p-4 shadow-lg transition-all",
- {
- variants: {
- variant: {
- default: "bg-background text-foreground",
- destructive: "border-destructive/60 bg-destructive text-destructive-foreground",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-);
-
-const Toast = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & VariantProps
->(({ className, variant, ...props }, ref) => {
- return (
-
- {props.children}
-
- );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-export type ToastProps = React.ComponentPropsWithoutRef;
-export type ToastActionElement = React.ReactElement;
-
-export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction };
diff --git a/client/src/components/ui/toaster.tsx b/client/src/components/ui/toaster.tsx
deleted file mode 100644
index 348b4ba..0000000
--- a/client/src/components/ui/toaster.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast";
-import { useToast } from "@/components/ui/use-toast";
-
-export function Toaster() {
- const { toasts, dismiss } = useToast();
-
- return (
-
- {toasts.map(({ id, title, description, action, ...props }) => (
- {
- if (!open) {
- dismiss(id);
- }
- }}
- >
-
- {title ? {title} : null}
- {description ? {description} : null}
-
- {action}
-
-
- ))}
-
-
- );
-}
diff --git a/client/src/components/ui/tooltip.tsx b/client/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..157d987
--- /dev/null
+++ b/client/src/components/ui/tooltip.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) {
+ return ;
+}
+
+function Tooltip({ ...props }: React.ComponentProps) {
+ return (
+
+
+
+ );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+
+ );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/client/src/components/ui/use-toast.ts b/client/src/components/ui/use-toast.ts
deleted file mode 100644
index 4b2daf8..0000000
--- a/client/src/components/ui/use-toast.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
-
-type ToasterToast = ToastProps & {
- id: string;
- title?: React.ReactNode;
- description?: React.ReactNode;
- action?: ToastActionElement;
-};
-
-type ToastState = {
- toasts: ToasterToast[];
-};
-
-type ToastAction =
- | { type: "ADD_TOAST"; toast: ToasterToast }
- | { type: "UPDATE_TOAST"; toast: Partial & { id: string } }
- | { type: "DISMISS_TOAST"; toastId?: string }
- | { type: "REMOVE_TOAST"; toastId?: string };
-
-const TOAST_LIMIT = 5;
-const TOAST_REMOVE_DELAY = 1000;
-
-const toastTimeouts = new Map>();
-
-const listeners = new Set<(state: ToastState) => void>();
-
-let memoryState: ToastState = { toasts: [] };
-
-function dispatch(action: ToastAction) {
- memoryState = reducer(memoryState, action);
- listeners.forEach(listener => {
- listener(memoryState);
- });
-}
-
-function reducer(state: ToastState, action: ToastAction): ToastState {
- switch (action.type) {
- case "ADD_TOAST": {
- return {
- ...state,
- toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
- };
- }
- case "UPDATE_TOAST": {
- return {
- ...state,
- toasts: state.toasts.map(toast => (toast.id === action.toast.id ? { ...toast, ...action.toast } : toast)),
- };
- }
- case "DISMISS_TOAST": {
- const { toastId } = action;
- if (toastId) {
- addToRemoveQueue(toastId);
- } else {
- state.toasts.forEach(toast => {
- addToRemoveQueue(toast.id);
- });
- }
-
- return {
- ...state,
- toasts: state.toasts.map(toast =>
- toast.id === toastId || toastId === undefined ? { ...toast, open: false } : toast
- ),
- };
- }
- case "REMOVE_TOAST": {
- if (action.toastId === undefined) {
- return { ...state, toasts: [] };
- }
- return {
- ...state,
- toasts: state.toasts.filter(toast => toast.id !== action.toastId),
- };
- }
- default:
- return state;
- }
-}
-
-function addToRemoveQueue(toastId: string) {
- if (toastTimeouts.has(toastId)) {
- return;
- }
-
- const timeout = setTimeout(() => {
- toastTimeouts.delete(toastId);
- dispatch({ type: "REMOVE_TOAST", toastId });
- }, TOAST_REMOVE_DELAY);
-
- toastTimeouts.set(toastId, timeout);
-}
-
-function genId() {
- return Math.random().toString(36).slice(2, 10);
-}
-
-export function useToast() {
- const [state, setState] = React.useState(memoryState);
-
- React.useEffect(() => {
- listeners.add(setState);
- return () => {
- listeners.delete(setState);
- };
- }, []);
-
- return {
- ...state,
- toast: (props: Omit) => {
- const id = genId();
- dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true } });
- return id;
- },
- dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
- };
-}
-
-export const toast = (props: Omit) => {
- const id = genId();
- dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true } });
- return id;
-};
diff --git a/client/src/hooks/useHotspotFeed.ts b/client/src/hooks/use-hotsop-feed.ts
similarity index 92%
rename from client/src/hooks/useHotspotFeed.ts
rename to client/src/hooks/use-hotsop-feed.ts
index 350e1a1..9170a5c 100644
--- a/client/src/hooks/useHotspotFeed.ts
+++ b/client/src/hooks/use-hotsop-feed.ts
@@ -1,12 +1,12 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { distanceInKm } from "@/lib/utils";
-import type { ApiDensityCell, ApiPoint, ApiSnapshot, FeedStatus, Point, SnapshotEventPayload } from "@/types/api";
+import type { SignalDensityCell, Signal, Snapshot, FeedStatus, Point, SnapshotEventPayload } from "@/types/api";
const API_BASE = import.meta.env.VITE_API_BASE ?? "http://localhost:8000/api/signals";
-const SNAPSHOT_LIMIT = 750;
const MERCURE_HUB = import.meta.env.VITE_MERCURE_HUB ?? "http://localhost:3000/.well-known/mercure";
const MERCURE_TOPIC = import.meta.env.VITE_MERCURE_TOPIC ?? "https://points-of-interest.local/signals";
+const SNAPSHOT_LIMIT = 750;
const VISIBLE_RADIUS_KM = 1;
type ProblemDetails = {
@@ -48,9 +48,9 @@ export function useHotspotFeed({
}: UseHotspotFeedOptions) {
const [status, setStatus] = useState("loading");
const [error, setError] = useState(null);
- const [rawPoints, setRawPoints] = useState([]);
- const [rawDensity, setRawDensity] = useState([]);
- const [rawLatestByUser, setRawLatestByUser] = useState([]);
+ const [rawPoints, setRawPoints] = useState([]);
+ const [rawDensity, setRawDensity] = useState([]);
+ const [rawLatestByUser, setRawLatestByUser] = useState([]);
const [clientKey, setClientKey] = useState(null);
const [lastUpdated, setLastUpdated] = useState(null);
@@ -64,7 +64,7 @@ export function useHotspotFeed({
}, []);
const applySnapshot = useCallback(
- (snapshot: ApiSnapshot, options?: { preserveClientKey?: boolean }) => {
+ (snapshot: Snapshot, options?: { preserveClientKey?: boolean }) => {
setRawPoints(snapshot.points);
setRawDensity(snapshot.density);
setRawLatestByUser(snapshot.latestByUser);
@@ -109,7 +109,7 @@ export function useHotspotFeed({
return;
}
- const data: ApiSnapshot = await response.json();
+ const data: Snapshot = await response.json();
applySnapshot(data);
} catch (error) {
const detail = error instanceof Error && error.message ? error.message : null;
@@ -227,14 +227,14 @@ export function useHotspotFeed({
const hasClientKey = Boolean(clientKey);
- const filterDensityWithinRadius = useCallback((collection: ApiDensityCell[], origin: Point | null) => {
+ const filterDensityWithinRadius = useCallback((collection: SignalDensityCell[], origin: Point | null) => {
if (!origin) {
return collection;
}
return collection.filter(item => distanceInKm(origin, item) <= VISIBLE_RADIUS_KM);
}, []);
- const filterPointsWithinRadius = useCallback((collection: ApiPoint[], origin: Point | null) => {
+ const filterPointsWithinRadius = useCallback((collection: Signal[], origin: Point | null) => {
if (!origin) {
return collection;
}
diff --git a/client/src/hooks/useLeafletHeatmap.ts b/client/src/hooks/use-leaflet-heatmap.ts
similarity index 94%
rename from client/src/hooks/useLeafletHeatmap.ts
rename to client/src/hooks/use-leaflet-heatmap.ts
index 03fa186..8f7224c 100644
--- a/client/src/hooks/useLeafletHeatmap.ts
+++ b/client/src/hooks/use-leaflet-heatmap.ts
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef } from "react";
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
import L, {
type LeafletMouseEvent,
@@ -10,7 +10,7 @@ import L, {
} from "leaflet";
import "leaflet.heat";
-import type { ApiDensityCell, Point } from "@/types/api";
+import type { SignalDensityCell, Point } from "@/types/api";
type HeatPoint = [number, number, number?];
@@ -24,14 +24,14 @@ type LeafletWithHeat = typeof L & {
};
interface UseLeafletHeatmapParams {
- heatCells: ApiDensityCell[];
+ heatCells: SignalDensityCell[];
userLocation: Point | null;
onRequestSpot?: (position: Point) => void;
tileProvider: TileProvider;
}
interface UseLeafletHeatmapResult {
- mapContainerRef: MutableRefObject;
+ mapContainerRef: RefObject;
focusOn: (position: Point, zoom?: number) => void;
fitToHeat: () => void;
map: LeafletMap | null;
@@ -61,7 +61,7 @@ const TILE_SOURCES = {
export type TileProvider = keyof typeof TILE_SOURCES;
const INITIAL_VIEW: Point = { lat: 20, lng: 0 };
-const DEFAULT_ZOOM = 3;
+const DEFAULT_ZOOM = 17;
export function useLeafletHeatmap({
heatCells,
@@ -85,7 +85,7 @@ export function useLeafletHeatmap({
return leaflet.tileLayer(source.url, {
attribution: source.attribution,
crossOrigin: true,
- maxZoom: 19,
+ maxZoom: 20,
...options,
});
}, []);
@@ -101,7 +101,7 @@ export function useLeafletHeatmap({
const map = leaflet
.map(container, {
worldCopyJump: true,
- minZoom: 2,
+ minZoom: 4,
zoomControl: false,
attributionControl: false,
})
@@ -249,12 +249,12 @@ export function useLeafletHeatmap({
}).addTo(userLayer);
if (!hasCenteredOnUserRef.current) {
- map.setView([userLocation.lat, userLocation.lng], 13, { animate: true });
+ map.setView([userLocation.lat, userLocation.lng], 17, { animate: true });
hasCenteredOnUserRef.current = true;
}
}, [userLocation]);
- const focusOn = useCallback((position: Point, zoom = 14) => {
+ const focusOn = useCallback((position: Point, zoom = 17) => {
const map = mapRef.current;
if (!map) {
return;
diff --git a/client/src/hooks/use-mobile.ts b/client/src/hooks/use-mobile.ts
new file mode 100644
index 0000000..502fd32
--- /dev/null
+++ b/client/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState(undefined);
+
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+ };
+ mql.addEventListener("change", onChange);
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+ return () => mql.removeEventListener("change", onChange);
+ }, []);
+
+ return !!isMobile;
+}
diff --git a/client/src/hooks/useTheme.ts b/client/src/hooks/use-theme.ts
similarity index 100%
rename from client/src/hooks/useTheme.ts
rename to client/src/hooks/use-theme.ts
diff --git a/client/src/hooks/useUserLocation.ts b/client/src/hooks/use-user-location.ts
similarity index 98%
rename from client/src/hooks/useUserLocation.ts
rename to client/src/hooks/use-user-location.ts
index 0c7fa0c..b0bf043 100644
--- a/client/src/hooks/useUserLocation.ts
+++ b/client/src/hooks/use-user-location.ts
@@ -1,6 +1,6 @@
import { useCallback, useEffect, useRef } from "react";
-import { useAppStore } from "@/store/useAppStore";
+import { useAppStore } from "@/store/use-app-store";
import type { Point } from "@/types/api";
function geolocationErrorMessage(error: GeolocationPositionError): string {
diff --git a/client/src/index.css b/client/src/index.css
index e1f5cdd..154c8e8 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,78 +1,129 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+@import "tailwindcss";
+@import "tw-animate-css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@custom-variant dark (&:is(.dark *));
+
+:root {
+ --radius: 0.625rem;
+ /* Sidebar width used by layout when open */
+ --sidebar-width: 23rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --warning: oklch(0.84 0.16 84);
+ --warning-foreground: oklch(0.28 0.07 46);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --warning: oklch(0.41 0.11 46);
+ --warning-foreground: oklch(0.99 0.02 95);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-warning: var(--warning);
+ --color-warning-foreground: var(--warning-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
@layer base {
- :root {
- --background: 0 0% 100%;
- --foreground: 222.2 84% 4.9%;
- --card: 0 0% 100%;
- --card-foreground: 222.2 84% 4.9%;
- --popover: 0 0% 100%;
- --popover-foreground: 222.2 84% 4.9%;
- --primary: 200 98% 39%;
- --primary-foreground: 210 40% 98%;
- --secondary: 210 40% 96%;
- --secondary-foreground: 222.2 47.4% 11.2%;
- --muted: 210 40% 96.1%;
- --muted-foreground: 215.4 16.3% 46.9%;
- --accent: 200 98% 39%;
- --accent-foreground: 210 40% 98%;
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 210 40% 98%;
- --border: 214.3 31.8% 91.4%;
- --input: 214.3 31.8% 91.4%;
- --ring: 200 98% 39%;
- --radius: 0.9rem;
+ * {
+ @apply border-border outline-ring/50;
}
-
- .dark {
- color-scheme: dark;
- --background: 224 47% 8%;
- --foreground: 210 40% 98%;
- --card: 222.2 84% 6.5%;
- --card-foreground: 210 40% 96%;
- --popover: 222.2 84% 6.5%;
- --popover-foreground: 210 40% 96%;
- --primary: 199 89% 62%;
- --primary-foreground: 222.2 47.4% 11.2%;
- --secondary: 217.2 32.6% 17.5%;
- --secondary-foreground: 210 40% 96%;
- --muted: 223 47% 10%;
- --muted-foreground: 215 20.2% 65.1%;
- --accent: 199 89% 62%;
- --accent-foreground: 222.2 47.4% 11.2%;
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 210 40% 98%;
- --border: 217 33% 18%;
- --input: 217 33% 18%;
- --ring: 199 89% 62%;
- }
-
- *,
- *::before,
- *::after {
- @apply border-border;
- }
-
body {
- font-family:
- "Inter",
- system-ui,
- -apple-system,
- BlinkMacSystemFont,
- "Segoe UI",
- sans-serif;
- @apply min-h-screen bg-background text-foreground antialiased;
- background-image:
- radial-gradient(circle at top, hsla(var(--primary) / 0.1), transparent 45%),
- radial-gradient(circle at bottom, hsla(var(--destructive) / 0.08), transparent 55%);
- }
-
- #root {
- @apply min-h-screen;
+ @apply bg-background text-foreground;
}
}
@@ -110,6 +161,6 @@
border-radius: 9999px;
border: 1px solid currentColor;
opacity: 0.35;
- animation: status-pulse 2.4s ease-out infinite;
+ animation: animate-pulse 2.4s ease-out infinite;
}
}
diff --git a/client/src/locales/en/common.json b/client/src/locales/en/common.json
index 65394a8..447e2a6 100644
--- a/client/src/locales/en/common.json
+++ b/client/src/locales/en/common.json
@@ -1,6 +1,6 @@
{
"app": {
- "name": "SignalMap",
+ "name": "Signals",
"tagline": "Crowd signals around your route"
},
"status": {
@@ -35,7 +35,7 @@
"action": "Try again"
},
"cta": {
- "send": "Drop a signal manually",
+ "send": "Send a signal",
"sending": "Sending…",
"waiting": "Waiting for location…"
},
diff --git a/client/src/locales/fr/common.json b/client/src/locales/fr/common.json
index 21bc045..64ee6ef 100644
--- a/client/src/locales/fr/common.json
+++ b/client/src/locales/fr/common.json
@@ -1,6 +1,6 @@
{
"app": {
- "name": "SignalMap",
+ "name": "Signals",
"tagline": "Alertes de la communauté sur votre itinéraire"
},
"status": {
@@ -35,7 +35,7 @@
"action": "Réessayer"
},
"cta": {
- "send": "Déposer un signal manuellement",
+ "send": "Signaler",
"sending": "Envoi…",
"waiting": "En attente de la localisation…"
},
diff --git a/client/src/store/useAppStore.ts b/client/src/store/use-app-store.ts
similarity index 100%
rename from client/src/store/useAppStore.ts
rename to client/src/store/use-app-store.ts
diff --git a/client/src/types/api.ts b/client/src/types/api.ts
index 3c5a6d1..6fc1fad 100644
--- a/client/src/types/api.ts
+++ b/client/src/types/api.ts
@@ -5,24 +5,24 @@ export interface Point {
lng: number;
}
-export interface ApiPoint {
+export interface Signal {
id: string;
signalLocation: Point;
createdAt: string;
userKey: string;
}
-export interface ApiDensityCell {
+export interface SignalDensityCell {
lat: number;
lng: number;
intensity: number;
}
-export interface ApiSnapshot {
+export interface Snapshot {
clientKey?: string;
- points: ApiPoint[];
- density: ApiDensityCell[];
- latestByUser: ApiPoint[];
+ points: Signal[];
+ density: SignalDensityCell[];
+ latestByUser: Signal[];
totals: {
points: number;
contributors: number;
@@ -32,5 +32,5 @@ export interface ApiSnapshot {
export interface SnapshotEventPayload {
type: "snapshot";
- payload: ApiSnapshot;
+ payload: Snapshot;
}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
deleted file mode 100644
index a80fb37..0000000
--- a/client/tailwind.config.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
- darkMode: ["class"],
- content: ["./index.html", "./src/**/*.{ts,tsx}"],
- theme: {
- extend: {
- backgroundImage: {
- "radial-signal":
- "radial-gradient(circle at top, rgba(56,189,248,0.15), transparent 45%), radial-gradient(circle at bottom, rgba(248,113,113,0.12), transparent 55%)",
- },
- colors: {
- border: "hsl(var(--border))",
- input: "hsl(var(--input))",
- ring: "hsl(var(--ring))",
- background: "hsl(var(--background))",
- foreground: "hsl(var(--foreground))",
- primary: {
- DEFAULT: "hsl(var(--primary))",
- foreground: "hsl(var(--primary-foreground))",
- },
- secondary: {
- DEFAULT: "hsl(var(--secondary))",
- foreground: "hsl(var(--secondary-foreground))",
- },
- destructive: {
- DEFAULT: "hsl(var(--destructive))",
- foreground: "hsl(var(--destructive-foreground))",
- },
- muted: {
- DEFAULT: "hsl(var(--muted))",
- foreground: "hsl(var(--muted-foreground))",
- },
- accent: {
- DEFAULT: "hsl(var(--accent))",
- foreground: "hsl(var(--accent-foreground))",
- },
- popover: {
- DEFAULT: "hsl(var(--popover))",
- foreground: "hsl(var(--popover-foreground))",
- },
- card: {
- DEFAULT: "hsl(var(--card))",
- foreground: "hsl(var(--card-foreground))",
- },
- },
- borderRadius: {
- lg: "var(--radius)",
- md: "calc(var(--radius) - 2px)",
- sm: "calc(var(--radius) - 4px)",
- },
- keyframes: {
- "status-pulse": {
- "0%": { transform: "scale(0.7)", opacity: "0.6" },
- "70%": { transform: "scale(1.4)", opacity: "0" },
- "100%": { transform: "scale(0.7)", opacity: "0" },
- },
- },
- animation: {
- "status-pulse": "status-pulse 2.4s ease-out infinite",
- },
- },
- },
- plugins: [require("tailwindcss-animate")],
-};
diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json
index 6a3a5b2..caa410f 100644
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -7,15 +7,17 @@
"module": "ESNext",
"types": ["vite/client"],
"skipLibCheck": true,
- "baseUrl": "./",
+ "baseUrl": ".",
"paths": {
- "@/*": ["src/*"]
+ "@/*": [
+ "./src/*"
+ ]
},
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
- "verbatimModuleSyntax": true,
+ "verbatimModuleSyntax": false,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
diff --git a/client/tsconfig.json b/client/tsconfig.json
index d32ff68..dae5069 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,4 +1,13 @@
{
"files": [],
- "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ],
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
}
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 98e692c..7ce8b57 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,6 +1,7 @@
+import path from "path";
+import tailwindcss from "@tailwindcss/vite"
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
-import { fileURLToPath, URL } from "node:url";
// https://vite.dev/config/
export default defineConfig({
@@ -10,10 +11,11 @@ export default defineConfig({
plugins: [["babel-plugin-react-compiler"]],
},
}),
+ tailwindcss()
],
resolve: {
alias: {
- "@": fileURLToPath(new URL("./src", import.meta.url)),
+ "@": path.resolve(__dirname, "./src"),
},
},
});