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>

1 files changed, 9 insertions, 2 deletions

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}
           />
         )
       )}