1 files changed, 136 insertions, 0 deletions
diff --git a/src/frontend/app/components/journey/ActiveJourneyBanner.tsx b/src/frontend/app/components/journey/ActiveJourneyBanner.tsx
new file mode 100644
index 0000000..df853ca
--- /dev/null
+++ b/src/frontend/app/components/journey/ActiveJourneyBanner.tsx
@@ -0,0 +1,136 @@
+import { Bell, Map, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import RouteIcon from "~/components/RouteIcon";
+import { useJourney } from "~/contexts/JourneyContext";
+import { useStopArrivals } from "~/hooks/useArrivals";
+
+/**
+ * A sticky banner rendered at the bottom of the AppShell (above the nav bar)
+ * while a journey is being tracked. Shows live minutes-remaining count and
+ * lets the user cancel tracking.
+ */
+export function ActiveJourneyBanner() {
+  const { t } = useTranslation();
+  const { activeJourney, stopJourney } = useJourney();
+
+  const { data } = useStopArrivals(
+    activeJourney?.stopId ?? "",
+    false,
+    !!activeJourney
+  );
+
+  const [permissionState, setPermissionState] = useState<
+    NotificationPermission | "unsupported"
+  >(() => {
+    if (typeof Notification === "undefined") return "unsupported";
+    return Notification.permission;
+  });
+
+  // Request notification permission the first time a journey starts
+  const hasRequestedRef = useRef(false);
+  useEffect(() => {
+    if (!activeJourney || hasRequestedRef.current) return;
+    if (
+      typeof Notification === "undefined" ||
+      Notification.permission !== "default"
+    )
+      return;
+
+    hasRequestedRef.current = true;
+    Notification.requestPermission().then((perm) => {
+      setPermissionState(perm);
+    });
+  }, [activeJourney]);
+
+  if (!activeJourney) return null;
+
+  const liveArrival = data?.arrivals.find(
+    (a) => a.tripId === activeJourney.tripId
+  );
+
+  const minutes = liveArrival?.estimate.minutes;
+  const precision = liveArrival?.estimate.precision;
+
+  const minutesLabel =
+    minutes == null
+      ? "–"
+      : minutes <= 0
+        ? t("journey.arriving_now", "¡Llegando!")
+        : t("journey.minutes_away", {
+            defaultValue: "{{minutes}} min",
+            minutes,
+          });
+
+  const isApproaching =
+    minutes != null &&
+    minutes <= activeJourney.notifyAtMinutes &&
+    precision !== "past";
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={`relative mx-3 mb-2 rounded-2xl shadow-lg overflow-hidden border transition-colors ${
+        isApproaching
+          ? "bg-primary-400 border-primary-500"
+          : "bg-primary-600 border-primary-700"
+      }`}
+    >
+      {/* Clickable body — navigates to the stop and opens the map for the tracked trip */}
+      <Link
+        to={`/stops/${activeJourney.stopId}`}
+        state={{
+          openMap: true,
+          selectedTripId: activeJourney.tripId,
+        }}
+        aria-label={t("journey.view_on_map", "View on map")}
+        className="flex items-center gap-3 px-4 py-2.5 pr-14 text-sm text-white w-full"
+      >
+        <RouteIcon
+          line={activeJourney.routeShortName}
+          colour={activeJourney.routeColour}
+          textColour={activeJourney.routeTextColour}
+          mode="pill"
+        />
+
+        <div className="flex-1 min-w-0">
+          <p className="font-semibold leading-tight truncate">
+            {activeJourney.headsignDestination ??
+              t("journey.tracking_bus", "Siguiendo autobús")}
+          </p>
+          <p className="text-xs opacity-80 truncate">
+            {activeJourney.stopName}
+            {" · "}
+            {minutesLabel}
+          </p>
+        </div>
+
+        {permissionState === "denied" && (
+          <span
+            title={t(
+              "journey.notifications_blocked",
+              "Notificaciones bloqueadas"
+            )}
+            className="opacity-60 shrink-0"
+          >
+            <Bell size={16} className="line-through" />
+          </span>
+        )}
+
+        <Map size={16} className="opacity-60 shrink-0" />
+      </Link>
+
+      {/* Cancel button — absolutely positioned so it doesn't nest inside the Link */}
+      <button
+        type="button"
+        onClick={stopJourney}
+        aria-label={t("journey.stop_tracking", "Detener seguimiento")}
+        className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full text-white hover:bg-white/20 transition-colors shrink-0"
+      >
+        <X size={18} />
+      </button>
+    </div>
+  );
+}