feat: client-side trip tracking with browser notifications (#151)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>

2 files changed, 51 insertions, 3 deletions

diff --git a/src/frontend/app/components/arrivals/ArrivalCard.tsx b/src/frontend/app/components/arrivals/ArrivalCard.tsx
index bdd20a5..9c68a97 100644
--- a/src/frontend/app/components/arrivals/ArrivalCard.tsx
+++ b/src/frontend/app/components/arrivals/ArrivalCard.tsx
@@ -1,4 +1,4 @@
-import { AlertTriangle, BusFront, LocateIcon } from "lucide-react";
+import { AlertTriangle, BusFront, LocateIcon, Navigation } from "lucide-react";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import Marquee from "react-fast-marquee";
 import { useTranslation } from "react-i18next";
@@ -9,6 +9,8 @@ import "./ArrivalCard.css";
 interface ArrivalCardProps {
   arrival: Arrival;
   onClick?: () => void;
+  onTrack?: () => void;
+  isTracked?: boolean;
 }
 
 const AutoMarquee = ({ text }: { text: string }) => {
@@ -57,6 +59,8 @@ const AutoMarquee = ({ text }: { text: string }) => {
 export const ArrivalCard: React.FC<ArrivalCardProps> = ({
   arrival,
   onClick,
+  onTrack,
+  isTracked = false,
 }) => {
   const { t } = useTranslation();
   const {
@@ -287,6 +291,43 @@ export const ArrivalCard: React.FC<ArrivalCardProps> = ({
             </span>
           );
         })}
+
+        {onTrack && estimate.precision !== "past" && (
+          // Use a <span> instead of a <button> here because this element can
+          // be rendered inside a <button> (when isClickable=true), and nested
+          // <button> elements are invalid HTML.
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation();
+              onTrack();
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                onTrack();
+              }
+            }}
+            aria-label={
+              isTracked
+                ? t("journey.stop_tracking", "Detener seguimiento")
+                : t("journey.track_bus", "Seguir este autobús")
+            }
+            aria-pressed={isTracked}
+            className={`ml-auto text-xs px-2.5 py-0.5 rounded-full flex items-center gap-1 shrink-0 font-medium tracking-wide transition-colors cursor-pointer select-none ${
+              isTracked
+                ? "bg-blue-600 text-white hover:bg-blue-700"
+                : "bg-black/[0.04] dark:bg-white/[0.08] text-slate-500 dark:text-slate-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:text-blue-600 dark:hover:text-blue-400"
+            }`}
+          >
+            <Navigation className="w-3 h-3" />
+            {isTracked
+              ? t("journey.tracking", "Siguiendo")
+              : t("journey.track", "Seguir")}
+          </span>
+        )}
       </div>
     </Tag>
   );
diff --git a/src/frontend/app/components/arrivals/ArrivalList.tsx b/src/frontend/app/components/arrivals/ArrivalList.tsx
index 83eb4f0..18885c8 100644
--- a/src/frontend/app/components/arrivals/ArrivalList.tsx
+++ b/src/frontend/app/components/arrivals/ArrivalList.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { type Arrival } from "../../api/schema";
 import { ArrivalCard } from "./ArrivalCard";
 import { ReducedArrivalCard } from "./ReducedArrivalCard";
@@ -7,21 +8,25 @@ interface ArrivalListProps {
   arrivals: Arrival[];
   reduced?: boolean;
   onArrivalClick?: (arrival: Arrival) => void;
+  onTrackArrival?: (arrival: Arrival) => void;
+  trackedTripId?: string;
 }
 
 export const ArrivalList: React.FC<ArrivalListProps> = ({
   arrivals,
   reduced,
   onArrivalClick,
+  onTrackArrival,
+  trackedTripId,
 }) => {
+  const { t } = useTranslation();
   const clickable = Boolean(onArrivalClick);
 
   return (
     <div className="flex flex-col flex-1 gap-3">
       {arrivals.length === 0 && (
         <div className="text-center text-muted mt-16">
-          {/* TOOD i18n */}
-          No hay llegadas próximas disponibles para esta parada.
+          {t("estimates.none", "No hay llegadas próximas disponibles para esta parada.")}
         </div>
       )}
       {arrivals.map((arrival, index) =>
@@ -36,6 +41,8 @@ export const ArrivalList: React.FC<ArrivalListProps> = ({
             key={`${arrival.tripId}-${index}`}
             arrival={arrival}
             onClick={clickable ? () => onArrivalClick?.(arrival) : undefined}
+            onTrack={onTrackArrival ? () => onTrackArrival(arrival) : undefined}
+            isTracked={trackedTripId === arrival.tripId}
           />
         )
       )}