feat(web): waypoint create/edit + geofences (design#114)

apps/web/public/i18n/locales/en/map.json

@@ -14,6 +14,7 @@
     "positionPrecision": "Show position precision",
     "traceroutes": "Show traceroutes",
     "waypoints": "Show waypoints",
+    "geofences": "Show geofences",
     "heatmap": "Show heatmap",
     "density": "Density"
   },
@@ -32,7 +33,71 @@
     "bearing": "Absolute bearing:",
     "lockedTo": "Locked by:",
     "latitude": "Latitude:",
-    "longitude": "Longitude:"
+    "longitude": "Longitude:",
+    "geofenceRadius": "Geofence radius:",
+    "notifications": "Alerts:",
+    "enter": "enter",
+    "exit": "exit",
+    "favoritesOnly": "favorites only",
+    "editGeofence": "Edit geofence",
+    "addGeofence": "Add geofence"
+  },
+  "waypointEdit": {
+    "title": "Edit waypoint – {{name}}",
+    "titleCreate": "New waypoint",
+    "name": "Name",
+    "description": "Description",
+    "icon": "Icon",
+    "latitude": "Latitude",
+    "longitude": "Longitude",
+    "expiresAt": "Expires",
+    "radius": "Geofence radius",
+    "radiusHint": "0 to disable the circular geofence.",
+    "boundingBox": "Bounding box",
+    "west": "West",
+    "south": "South",
+    "east": "East",
+    "north": "North",
+    "captureFromMap": "Use current map view",
+    "notifyOnEnter": "Alert on enter",
+    "notifyOnExit": "Alert on exit",
+    "notifyFavoritesOnly": "Favorites only",
+    "save": "Save & broadcast",
+    "saving": "Saving…",
+    "cancel": "Cancel",
+    "savedToast": "Waypoint saved: {{name}}",
+    "createdToast": "Waypoint created: {{name}}",
+    "errorToast": "Could not save waypoint",
+    "errorMissingName": "Waypoint needs a name",
+    "errorBadCoords": "Latitude and longitude are required",
+    "enterToast": "{{node}} entered {{waypoint}}",
+    "exitToast": "{{node}} left {{waypoint}}",
+    "viewOnMap": "View on map",
+    "newWaypointAria": "New waypoint",
+    "placementHint": "Click on the map to place your waypoint",
+    "drawHint": "Drag on the map to define the bounding box",
+    "drawBox": "Draw box",
+    "editBox": "Edit box",
+    "removeBox": "Remove box",
+    "radiusOff": "Off"
+  },
+  "unit": {
+    "meter": {
+      "one": "meter",
+      "plural": "meters"
+    },
+    "kilometer": {
+      "plural": "km"
+    },
+    "foot": {
+      "plural": "ft"
+    },
+    "mile": {
+      "plural": "mi"
+    },
+    "degree": {
+      "suffix": "°"
+    }
   },
   "myNode": {
     "tooltip": "This device"

apps/web/src/App.tsx

@@ -7,6 +7,7 @@ import { RegionSetupReminder } from "@components/RegionSetupReminder.tsx";
 import { Toaster } from "@components/Toaster.tsx";
 import { ErrorPage } from "@components/UI/ErrorPage.tsx";
 import Footer from "@components/UI/Footer.tsx";
+import { useGeofenceAlerts } from "@core/hooks/useGeofenceAlerts.ts";
 import { useTheme } from "@core/hooks/useTheme.ts";
 import { SidebarProvider, useAppStore, useDeviceStore } from "@core/stores";
 import { Connections } from "@pages/Connections/index.tsx";
@@ -15,6 +16,11 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { ErrorBoundary } from "react-error-boundary";
 import { MapProvider } from "react-map-gl/maplibre";
 
+const GeofenceAlertsBridge = () => {
+  useGeofenceAlerts();
+  return null;
+};
+
 export function App() {
   useTheme();
 
@@ -41,6 +47,7 @@ export function App() {
               {device ? (
                 <div className="h-full flex w-full">
                   <DialogManager />
+                  <GeofenceAlertsBridge />
                   <KeyBackupReminder />
                   <RegionSetupReminder />
                   <CommandPalette />

apps/web/src/components/Dialog/WaypointEditDialog.test.tsx

@@ -0,0 +1,232 @@
+import { create } from "@bufbuild/protobuf";
+import type { WaypointWithMetadata } from "@core/stores";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { Protobuf } from "@meshtastic/sdk";
+import type {
+  ButtonHTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+} from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { WaypointEditDialog } from "./WaypointEditDialog.tsx";
+
+const mockToast = vi.fn();
+vi.mock("@core/hooks/useToast.ts", () => ({
+  useToast: () => ({ toast: mockToast }),
+}));
+
+const sendWaypoint = vi.fn().mockResolvedValue(0);
+const addWaypoint = vi.fn();
+vi.mock("@core/stores", () => ({
+  useDevice: () => ({
+    hardware: { myNodeNum: 1 },
+    connection: { sendWaypoint },
+    addWaypoint,
+    // Metric device — matches the presets asserted below.
+    config: { display: { units: 0 } },
+  }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, opts?: Record<string, unknown>) =>
+      opts ? `${key} ${JSON.stringify(opts)}` : key,
+  }),
+}));
+
+vi.mock("@components/UI/Dialog.tsx", () => ({
+  Dialog: ({ open, children }: { open: boolean; children: ReactNode }) =>
+    open ? <div>{children}</div> : null,
+  DialogContent: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogHeader: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: ReactNode }) => <h1>{children}</h1>,
+  DialogDescription: ({ children }: { children: ReactNode }) => (
+    <p>{children}</p>
+  ),
+  DialogClose: () => null,
+  DialogFooter: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+vi.mock("@components/UI/Button.tsx", () => ({
+  Button: (props: ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button {...props} />
+  ),
+}));
+
+vi.mock("@components/UI/Input.tsx", () => ({
+  Input: (props: InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
+}));
+
+vi.mock("@components/UI/Label.tsx", () => ({
+  Label: ({ children, ...rest }: { children: ReactNode }) => (
+    <label {...rest}>{children}</label>
+  ),
+}));
+
+vi.mock("@components/UI/Switch.tsx", () => ({
+  Switch: ({
+    checked,
+    onCheckedChange,
+    id,
+  }: {
+    checked: boolean;
+    onCheckedChange: (v: boolean) => void;
+    id?: string;
+  }) => (
+    <input
+      type="checkbox"
+      role="switch"
+      id={id}
+      data-testid={id}
+      checked={checked}
+      onChange={(e) => onCheckedChange(e.target.checked)}
+    />
+  ),
+}));
+
+function makeWaypoint(
+  fields: Record<string, unknown> = {},
+): WaypointWithMetadata {
+  const wp = create(Protobuf.Mesh.WaypointSchema, fields as never);
+  return Object.assign(wp, {
+    metadata: { channel: 0, created: new Date(), from: 1 },
+  });
+}
+
+describe("WaypointEditDialog – geofence controls (design#114 compliance)", () => {
+  beforeEach(() => {
+    mockToast.mockClear();
+    sendWaypoint.mockClear();
+    addWaypoint.mockClear();
+  });
+
+  it("hides notify toggles until a radius or box is set", () => {
+    render(
+      <WaypointEditDialog
+        open
+        onOpenChange={() => {}}
+        waypoint={makeWaypoint({ id: 1, name: "Home" })}
+        initialLngLat={undefined}
+        channel={0}
+        mapRef={undefined}
+        onRequestBoundingBoxDraw={async () => undefined}
+      />,
+    );
+    expect(screen.queryByTestId("wp-notify-enter")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("wp-notify-exit")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("wp-notify-fav")).not.toBeInTheDocument();
+  });
+
+  it("reveals enter/exit toggles once a radius preset is selected; favorites-only revealed once enter is on", () => {
+    render(
+      <WaypointEditDialog
+        open
+        onOpenChange={() => {}}
+        waypoint={makeWaypoint({ id: 1, name: "Home" })}
+        initialLngLat={undefined}
+        channel={0}
+        mapRef={undefined}
+        onRequestBoundingBoxDraw={async () => undefined}
+      />,
+    );
+    // Metric locale (en-GB) → "500 meters"
+    const preset500 = screen.getByRole("button", {
+      name: /500 unit\.meter\.plural/i,
+    });
+    act(() => {
+      fireEvent.click(preset500);
+    });
+
+    expect(screen.getByTestId("wp-notify-enter")).toBeInTheDocument();
+    expect(screen.getByTestId("wp-notify-exit")).toBeInTheDocument();
+    // Favorites-only stays hidden until enter or exit is on
+    expect(screen.queryByTestId("wp-notify-fav")).not.toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(screen.getByTestId("wp-notify-enter"));
+    });
+    expect(screen.getByTestId("wp-notify-fav")).toBeInTheDocument();
+  });
+
+  it("draws box via the callback and shows Edit/Remove buttons afterwards", async () => {
+    const drawFn = vi.fn().mockResolvedValue({
+      west: -74.1,
+      south: 39.9,
+      east: -73.9,
+      north: 40.1,
+    });
+    render(
+      <WaypointEditDialog
+        open
+        onOpenChange={() => {}}
+        waypoint={makeWaypoint({ id: 1, name: "Home" })}
+        initialLngLat={undefined}
+        channel={0}
+        mapRef={{} as never}
+        onRequestBoundingBoxDraw={drawFn}
+      />,
+    );
+
+    await act(async () => {
+      fireEvent.click(
+        screen.getByRole("button", { name: /waypointEdit\.drawBox/i }),
+      );
+    });
+    expect(drawFn).toHaveBeenCalledOnce();
+    expect(
+      screen.getByRole("button", { name: /waypointEdit\.editBox/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /waypointEdit\.removeBox/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("save persists geofence fields on the outbound waypoint", async () => {
+    render(
+      <WaypointEditDialog
+        open
+        onOpenChange={() => {}}
+        waypoint={makeWaypoint({ id: 7, name: "Home" })}
+        initialLngLat={undefined}
+        channel={0}
+        mapRef={undefined}
+        onRequestBoundingBoxDraw={async () => undefined}
+      />,
+    );
+
+    // Pick 1 km preset (metric locale)
+    act(() => {
+      fireEvent.click(
+        screen.getByRole("button", { name: /1 unit\.kilometer\.plural/i }),
+      );
+    });
+    // Turn on enter alert
+    act(() => {
+      fireEvent.click(screen.getByTestId("wp-notify-enter"));
+    });
+    // Favorites-only
+    act(() => {
+      fireEvent.click(screen.getByTestId("wp-notify-fav"));
+    });
+
+    await act(async () => {
+      fireEvent.click(
+        screen.getByRole("button", { name: /waypointEdit\.save/i }),
+      );
+    });
+
+    expect(addWaypoint).toHaveBeenCalledOnce();
+    const [outbound] = addWaypoint.mock.calls[0]!;
+    expect(outbound.geofenceRadius).toBe(1000);
+    expect(outbound.notifyOnEnter).toBe(true);
+    expect(outbound.notifyOnExit).toBe(false);
+    expect(outbound.notifyFavoritesOnly).toBe(true);
+    expect(sendWaypoint).toHaveBeenCalledOnce();
+  });
+});