Basic push notification system for service alerts

Co-authored-by: Copilot <copilot@github.com>

9 files changed, 439 insertions, 20 deletions

diff --git a/src/frontend/app/api/schema.ts b/src/frontend/app/api/schema.ts
index 20daede..40358a6 100644
--- a/src/frontend/app/api/schema.ts
+++ b/src/frontend/app/api/schema.ts
@@ -110,6 +110,7 @@ export const RouteSchema = z.object({
   textColor: z.string().nullable(),
   sortOrder: z.number().nullable(),
   agencyName: z.string().nullable().optional(),
+  agencyId: z.string().nullable().optional(),
   tripCount: z.number(),
 });
 
diff --git a/src/frontend/app/components/PushNotificationSettings.tsx b/src/frontend/app/components/PushNotificationSettings.tsx
new file mode 100644
index 0000000..af3206a
--- /dev/null
+++ b/src/frontend/app/components/PushNotificationSettings.tsx
@@ -0,0 +1,198 @@
+import { BellOff, BellRing, Loader } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { writeFavorites } from "~/utils/idb";
+
+/** Convert a base64url string (as returned by the VAPID endpoint) to a Uint8Array. */
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  const rawData = atob(base64);
+  return Uint8Array.from([...rawData].map((c) => c.charCodeAt(0)));
+}
+
+/** Sync all three favourites lists from localStorage to IndexedDB. */
+async function syncFavouritesToIdb() {
+  const keys = [
+    "favouriteStops",
+    "favouriteRoutes",
+    "favouriteAgencies",
+  ] as const;
+  await Promise.all(
+    keys.map((key) => {
+      const raw = localStorage.getItem(key);
+      const ids: string[] = raw ? JSON.parse(raw) : [];
+      return writeFavorites(key, ids);
+    })
+  );
+}
+
+type Status =
+  | "loading" // checking current state
+  | "unsupported" // browser does not support Push API
+  | "denied" // permission was explicitly blocked
+  | "subscribed" // user is actively subscribed
+  | "unsubscribed"; // user is not subscribed (or permission not yet granted)
+
+export function PushNotificationSettings() {
+  const { t } = useTranslation();
+  const [status, setStatus] = useState<Status>("loading");
+  const [working, setWorking] = useState(false);
+
+  useEffect(() => {
+    checkStatus().then(setStatus);
+  }, []);
+
+  async function checkStatus(): Promise<Status> {
+    if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
+      return "unsupported";
+    }
+    if (Notification.permission === "denied") return "denied";
+
+    try {
+      const reg = await navigator.serviceWorker.ready;
+      const sub = await reg.pushManager.getSubscription();
+      return sub ? "subscribed" : "unsubscribed";
+    } catch {
+      return "unsubscribed";
+    }
+  }
+
+  async function subscribe() {
+    setWorking(true);
+    try {
+      const permission = await Notification.requestPermission();
+      if (permission !== "granted") {
+        setStatus("denied");
+        return;
+      }
+
+      // Fetch the VAPID public key
+      const res = await fetch("/api/push/vapid-public-key");
+      if (!res.ok) {
+        console.error("Push notifications not configured on this server.");
+        return;
+      }
+      const { publicKey } = await res.json();
+
+      const reg = await navigator.serviceWorker.ready;
+      const subscription = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(publicKey),
+      });
+
+      // Mirror favourites to IDB before registering so the SW has them from day 1
+      await syncFavouritesToIdb();
+
+      const json = subscription.toJSON();
+      await fetch("/api/push/subscribe", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          endpoint: json.endpoint,
+          p256Dh: json.keys?.p256dh,
+          auth: json.keys?.auth,
+        }),
+      });
+
+      setStatus("subscribed");
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  async function unsubscribe() {
+    setWorking(true);
+    try {
+      const reg = await navigator.serviceWorker.ready;
+      const sub = await reg.pushManager.getSubscription();
+      if (sub) {
+        const endpoint = sub.endpoint;
+        await sub.unsubscribe();
+        await fetch("/api/push/unsubscribe", {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ endpoint }),
+        });
+      }
+      setStatus("unsubscribed");
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  return (
+    <section className="mb-8">
+      <h2 className="text-xl font-semibold mb-2 text-text">
+        {t("settings.push_title", "Notificaciones")}
+      </h2>
+      <p className="text-sm text-muted mb-4">
+        {t(
+          "settings.push_description",
+          "Recibe notificaciones cuando haya alertas de servicio relevantes para tus paradas, líneas o operadores favoritos."
+        )}
+      </p>
+
+      {status === "loading" && (
+        <div className="flex items-center gap-2 text-muted text-sm">
+          <Loader className="w-4 h-4 animate-spin" />
+          {t("common.loading", "Cargando...")}
+        </div>
+      )}
+
+      {status === "unsupported" && (
+        <p className="text-sm text-muted p-4 rounded-lg border border-border bg-surface">
+          {t(
+            "settings.push_unsupported",
+            "Tu navegador no soporta notificaciones push. Prueba con Chrome, Edge o Firefox."
+          )}
+        </p>
+      )}
+
+      {status === "denied" && (
+        <p className="text-sm text-muted p-4 rounded-lg border border-amber-300 bg-amber-50 dark:bg-amber-950 dark:border-amber-700">
+          {t(
+            "settings.push_permission_denied",
+            "Has bloqueado los permisos de notificación en este navegador. Para activarlos, ve a la configuración del sitio y permite las notificaciones."
+          )}
+        </p>
+      )}
+
+      {(status === "subscribed" || status === "unsubscribed") && (
+        <label className="flex items-center justify-between p-4 rounded-lg border border-border bg-surface cursor-pointer hover:bg-surface/50 transition-colors">
+          <span className="flex items-center gap-2 text-text font-medium">
+            {status === "subscribed" ? (
+              <BellRing className="w-5 h-5 text-primary" />
+            ) : (
+              <BellOff className="w-5 h-5 text-muted" />
+            )}
+            {status === "subscribed"
+              ? t("settings.push_subscribed", "Notificaciones activadas")
+              : t(
+                  "settings.push_subscribe",
+                  "Activar notificaciones de alertas"
+                )}
+          </span>
+          <button
+            onClick={status === "subscribed" ? unsubscribe : subscribe}
+            disabled={working}
+            aria-pressed={status === "subscribed"}
+            className={`
+              relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200
+              focus:outline-none focus:ring-2 focus:ring-primary/50
+              disabled:opacity-50
+              ${status === "subscribed" ? "bg-primary" : "bg-border"}
+            `}
+          >
+            <span
+              className={`
+                inline-block h-4 w-4 rounded-full bg-white shadow transition-transform duration-200
+                ${status === "subscribed" ? "translate-x-6" : "translate-x-1"}
+              `}
+            />
+          </button>
+        </label>
+      )}
+    </section>
+  );
+}
diff --git a/src/frontend/app/components/ServiceAlerts.tsx b/src/frontend/app/components/ServiceAlerts.tsx
index a6a1ee8..168ea83 100644
--- a/src/frontend/app/components/ServiceAlerts.tsx
+++ b/src/frontend/app/components/ServiceAlerts.tsx
@@ -1,22 +1,117 @@
+import { useQuery } from "@tanstack/react-query";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import "./ServiceAlerts.css";
 
-const ServiceAlerts: React.FC = () => {
-  const { t } = useTranslation();
+interface ServiceAlert {
+  id: string;
+  version: number;
+  phase: string;
+  cause: string;
+  effect: string;
+  header: Record<string, string>;
+  description: Record<string, string>;
+  selectors: string[];
+  infoUrls: string[];
+  eventStartDate: string;
+  eventEndDate: string;
+}
+
+/** Maps an alert effect to one of the three CSS severity classes. */
+function effectToSeverity(effect: string): "info" | "warning" | "error" {
+  if (["NoService", "SignificantDelays", "AccessibilityIssue"].includes(effect))
+    return "error";
+  if (
+    ["ReducedService", "Detour", "ModifiedService", "StopMoved"].includes(
+      effect
+    )
+  )
+    return "warning";
+  return "info";
+}
+
+/** Maps an effect to an emoji icon. */
+function effectToIcon(effect: string): string {
+  const map: Record<string, string> = {
+    NoService: "🚫",
+    ReducedService: "⚠️",
+    SignificantDelays: "🕐",
+    Detour: "↩️",
+    AdditionalService: "➕",
+    ModifiedService: "🔄",
+    StopMoved: "📍",
+    AccessibilityIssue: "♿",
+  };
+  return map[effect] ?? "ℹ️";
+}
+
+interface ServiceAlertsProps {
+  /** If provided, only alerts whose selectors overlap with this list are shown. */
+  selectorFilter?: string[];
+}
+
+const ServiceAlerts: React.FC<ServiceAlertsProps> = ({ selectorFilter }) => {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language.slice(0, 2);
+
+  const { data: alerts, isLoading } = useQuery<ServiceAlert[]>({
+    queryKey: ["service-alerts"],
+    queryFn: () => fetch("/api/alerts").then((r) => r.json()),
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  if (isLoading || !alerts) return null;
+
+  const visible = alerts.filter((alert) => {
+    if (!selectorFilter || selectorFilter.length === 0) return true;
+    return alert.selectors.some((s) => selectorFilter.includes(s));
+  });
+
+  if (visible.length === 0) return null;
 
   return (
     <div className="service-alerts-container stoplist-section">
       <h2 className="page-subtitle">{t("stoplist.service_alerts")}</h2>
-      <div className="service-alert info">
-        <div className="alert-icon">ℹ️</div>
-        <div className="alert-content">
-          <div className="alert-title">{t("stoplist.alerts_coming_soon")}</div>
-          <div className="alert-message">
-            {t("stoplist.alerts_description")}
+      {visible.map((alert) => {
+        const severity = effectToSeverity(alert.effect);
+        const icon = effectToIcon(alert.effect);
+        const title =
+          alert.header[lang] ??
+          alert.header["es"] ??
+          Object.values(alert.header)[0] ??
+          "";
+        const body =
+          alert.description[lang] ??
+          alert.description["es"] ??
+          Object.values(alert.description)[0] ??
+          "";
+
+        return (
+          <div key={alert.id} className={`service-alert ${severity}`}>
+            <div className="alert-icon">{icon}</div>
+            <div className="alert-content">
+              <div className="alert-title">{title}</div>
+              {body && <div className="alert-message">{body}</div>}
+              {alert.infoUrls.length > 0 && (
+                <div className="alert-message" style={{ marginTop: "0.25rem" }}>
+                  {alert.infoUrls.map((url, i) => (
+                    <a
+                      key={i}
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={{ display: "block" }}
+                    >
+                      {url}
+                    </a>
+                  ))}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      </div>
+        );
+      })}
     </div>
   );
 };
diff --git a/src/frontend/app/data/StopDataProvider.ts b/src/frontend/app/data/StopDataProvider.ts
index d8219c9..c60f9aa 100644
--- a/src/frontend/app/data/StopDataProvider.ts
+++ b/src/frontend/app/data/StopDataProvider.ts
@@ -1,3 +1,5 @@
+import { writeFavorites } from "~/utils/idb";
+
 export interface Stop {
   stopId: string;
   stopCode?: string;
@@ -168,6 +170,9 @@ function addFavourite(stopId: string | number) {
   if (!favouriteStops.includes(id)) {
     favouriteStops.push(id);
     localStorage.setItem(`favouriteStops`, JSON.stringify(favouriteStops));
+    writeFavorites("favouriteStops", favouriteStops).catch(() => {
+      /* best-effort */
+    });
   }
 }
 
@@ -183,6 +188,9 @@ function removeFavourite(stopId: string | number) {
 
   const newFavouriteStops = favouriteStops.filter((sid) => sid !== id);
   localStorage.setItem(`favouriteStops`, JSON.stringify(newFavouriteStops));
+  writeFavorites("favouriteStops", newFavouriteStops).catch(() => {
+    /* best-effort */
+  });
 }
 
 function isFavourite(stopId: string | number): boolean {
diff --git a/src/frontend/app/hooks/useFavorites.ts b/src/frontend/app/hooks/useFavorites.ts
index 962ac2d..0eceba9 100644
--- a/src/frontend/app/hooks/useFavorites.ts
+++ b/src/frontend/app/hooks/useFavorites.ts
@@ -1,7 +1,10 @@
 import { useState } from "react";
+import { writeFavorites } from "~/utils/idb";
 
 /**
  * A simple hook for managing favorite items in localStorage.
+ * Also mirrors changes to IndexedDB so the service worker can filter push
+ * notifications by favourites without access to localStorage.
  * @param key LocalStorage key to use
  * @returns [favorites, toggleFavorite, isFavorite]
  */
@@ -18,6 +21,9 @@ export function useFavorites(key: string) {
         ? prev.filter((item) => item !== id)
         : [...prev, id];
       localStorage.setItem(key, JSON.stringify(next));
+      writeFavorites(key, next).catch(() => {
+        /* best-effort */
+      });
       return next;
     });
   };
diff --git a/src/frontend/app/routes/favourites.tsx b/src/frontend/app/routes/favourites.tsx
index 3d786b6..1b1d09b 100644
--- a/src/frontend/app/routes/favourites.tsx
+++ b/src/frontend/app/routes/favourites.tsx
@@ -99,7 +99,10 @@ export default function Favourites() {
     return routes.reduce(
       (acc, route) => {
         const agency = route.agencyName || t("routes.unknown_agency", "Otros");
-        if (!isFavoriteAgency(agency)) {
+        // Match by the agency's own gtfsId (feedId:agencyId) — consistent with
+        // what routes.tsx stores and with the alert selector format.
+        const agencyId = route.agencyId ?? route.id.split(":")[0];
+        if (!isFavoriteAgency(agencyId)) {
           return acc;
         }
 
diff --git a/src/frontend/app/routes/routes.tsx b/src/frontend/app/routes/routes.tsx
index 57dfe00..f65adaa 100644
--- a/src/frontend/app/routes/routes.tsx
+++ b/src/frontend/app/routes/routes.tsx
@@ -63,16 +63,30 @@ export default function RoutesPage() {
 
   const sortedAgencyEntries = useMemo(() => {
     if (!routesByAgency) return [];
-    return Object.entries(routesByAgency).sort(([a], [b]) => {
+    return Object.entries(routesByAgency).sort(([a, routesA], [b, routesB]) => {
+      // Use the agency's own gtfsId (feedId:agencyId) as the stable key — this
+      // matches the "agency#feedId:agencyId" alert selector format and correctly
+      // handles feeds that contain multiple agencies.
+      const agencyIdA =
+        routesA?.[0]?.agencyId ??
+        routesA?.[0]?.id.split(":")[0] ??
+        a.toLowerCase();
+      const agencyIdB =
+        routesB?.[0]?.agencyId ??
+        routesB?.[0]?.id.split(":")[0] ??
+        b.toLowerCase();
+      const feedIdA = agencyIdA.split(":")[0];
+      const feedIdB = agencyIdB.split(":")[0];
+
       // First, sort by favorite status
-      const isFavA = isFavoriteAgency(a);
-      const isFavB = isFavoriteAgency(b);
+      const isFavA = isFavoriteAgency(agencyIdA);
+      const isFavB = isFavoriteAgency(agencyIdB);
       if (isFavA && !isFavB) return -1;
       if (!isFavA && isFavB) return 1;
 
       // Then by fixed order
-      const indexA = orderedAgencies.indexOf(a.toLowerCase());
-      const indexB = orderedAgencies.indexOf(b.toLowerCase());
+      const indexA = orderedAgencies.indexOf(feedIdA);
+      const indexB = orderedAgencies.indexOf(feedIdB);
       if (indexA === -1 && indexB === -1) {
         return a.localeCompare(b);
       }
@@ -156,10 +170,15 @@ export default function RoutesPage() {
         )}
 
         {sortedAgencyEntries.map(([agency, agencyRoutes]) => {
-          const isFav = isFavoriteAgency(agency);
+          // Use the agency's own gtfsId (feedId:agencyId) as the stable favourite key.
+          const agencyId =
+            agencyRoutes?.[0]?.agencyId ??
+            agencyRoutes?.[0]?.id.split(":")[0] ??
+            agency.toLowerCase();
+          const isFav = isFavoriteAgency(agencyId);
           const isExpanded = searchQuery
             ? true
-            : (expandedAgencies[agency] ?? false);
+            : (expandedAgencies[agency] ?? isFav);
 
           return (
             <div
@@ -190,7 +209,7 @@ export default function RoutesPage() {
                 </button>
                 <button
                   type="button"
-                  onClick={() => toggleFavoriteAgency(agency)}
+                  onClick={() => toggleFavoriteAgency(agencyId)}
                   className={`rounded-full p-2 transition-colors ${
                     isFav
                       ? "text-yellow-500"
diff --git a/src/frontend/app/routes/settings.tsx b/src/frontend/app/routes/settings.tsx
index 0497f34..a716030 100644
--- a/src/frontend/app/routes/settings.tsx
+++ b/src/frontend/app/routes/settings.tsx
@@ -2,6 +2,7 @@ import { Computer, Moon, Sun, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+import { PushNotificationSettings } from "~/components/PushNotificationSettings";
 import { usePageTitle } from "~/contexts/PageTitleContext";
 import { useApp, type Theme } from "../AppContext";
 import "../tailwind-full.css";
@@ -178,7 +179,7 @@ export default function Settings() {
           className="block text-lg font-medium text-text mb-3"
         >
           {t("about.language", "Idioma")}
-        </label>
+        </label>{" "}
         <select
           id="language"
           className="
@@ -197,6 +198,11 @@ export default function Settings() {
         </select>
       </section>
 
+      {/* Push Notifications */}
+      <div className="mt-8 pt-8 border-t border-border">
+        <PushNotificationSettings />
+      </div>
+
       {/* Privacy / Clear data */}
       <section className="mt-8 pt-8 border-t border-border">
         <h2 className="text-xl font-semibold mb-4 text-text">
diff --git a/src/frontend/app/utils/idb.ts b/src/frontend/app/utils/idb.ts
new file mode 100644
index 0000000..4d0aba7
--- /dev/null
+++ b/src/frontend/app/utils/idb.ts
@@ -0,0 +1,83 @@
+/**
+ * IndexedDB helpers for sharing data with the service worker.
+ *
+ * The service worker is a classic script and cannot import ES modules, so it
+ * contains its own equivalent implementation. Keep the schema (DB name, version,
+ * store names, and key shapes) in sync with the inline IDB code in pwa-worker.js.
+ *
+ * DB: "enmarcha-sw", version 1
+ *   Store "favorites"   — { key: string, ids: string[] }
+ *   Store "alertState"  — { alertId: string, silenced: boolean, lastVersion: number }
+ */
+
+const DB_NAME = "enmarcha-sw";
+const DB_VERSION = 1;
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains("favorites")) {
+        db.createObjectStore("favorites", { keyPath: "key" });
+      }
+      if (!db.objectStoreNames.contains("alertState")) {
+        db.createObjectStore("alertState", { keyPath: "alertId" });
+      }
+    };
+
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+/** Persist a favourites list to IndexedDB so the service worker can read it. */
+export async function writeFavorites(
+  key: string,
+  ids: string[]
+): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("favorites", "readwrite");
+    tx.objectStore("favorites").put({ key, ids });
+    tx.oncomplete = () => {
+      db.close();
+      resolve();
+    };
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+/** Read a favourites list from IndexedDB. */
+export async function readFavorites(key: string): Promise<string[]> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("favorites", "readonly");
+    const req = tx.objectStore("favorites").get(key);
+    req.onsuccess = () => {
+      db.close();
+      resolve(
+        (req.result as { key: string; ids: string[] } | undefined)?.ids ?? []
+      );
+    };
+    req.onerror = () => reject(req.error);
+  });
+}
+
+/** Persist per-alert notification state (silenced flag and last notified version). */
+export async function writeAlertState(
+  alertId: string,
+  state: { silenced: boolean; lastVersion: number }
+): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction("alertState", "readwrite");
+    tx.objectStore("alertState").put({ alertId, ...state });
+    tx.oncomplete = () => {
+      db.close();
+      resolve();
+    };
+    tx.onerror = () => reject(tx.error);
+  });
+}