From bed48c3d7e49b1736d50ce42d92bb6c18cf02504 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Mon, 22 Dec 2025 22:06:06 +0100
Subject: Refactor arrivals handling and improve type definitions; reorganise
 components

---
 src/frontend/app/components/Stops/ArrivalCard.css  | 17 -----
 src/frontend/app/components/Stops/ArrivalCard.tsx  | 72 ---------------------
 src/frontend/app/components/Stops/ArrivalList.tsx  | 25 --------
 .../app/components/arrivals/ArrivalCard.css        | 17 +++++
 .../app/components/arrivals/ArrivalCard.tsx        | 74 ++++++++++++++++++++++
 .../app/components/arrivals/ArrivalList.tsx        | 25 ++++++++
 .../app/components/map/StopSummarySheet.tsx        |  2 +-
 7 files changed, 117 insertions(+), 115 deletions(-)
 delete mode 100644 src/frontend/app/components/Stops/ArrivalCard.css
 delete mode 100644 src/frontend/app/components/Stops/ArrivalCard.tsx
 delete mode 100644 src/frontend/app/components/Stops/ArrivalList.tsx
 create mode 100644 src/frontend/app/components/arrivals/ArrivalCard.css
 create mode 100644 src/frontend/app/components/arrivals/ArrivalCard.tsx
 create mode 100644 src/frontend/app/components/arrivals/ArrivalList.tsx

(limited to 'src/frontend/app/components')

diff --git a/src/frontend/app/components/Stops/ArrivalCard.css b/src/frontend/app/components/Stops/ArrivalCard.css
deleted file mode 100644
index 5835352..0000000
--- a/src/frontend/app/components/Stops/ArrivalCard.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@import "../../tailwind.css";
-
-.time-running {
-  @apply bg-green-600/20 dark:bg-green-600/25 text-[#1a9e56] dark:text-[#22c55e];
-}
-
-.time-delayed {
-  @apply bg-orange-600/20 dark:bg-orange-600/25 text-[#d06100] dark:text-[#fb923c];
-}
-
-.time-past {
-  @apply bg-gray-600/20 dark:bg-gray-600/25 text-gray-600 dark:text-gray-400;
-}
-
-.time-scheduled {
-  @apply bg-blue-900/20 dark:bg-blue-600/25 text-[#0b3d91] dark:text-[#93c5fd];
-}
diff --git a/src/frontend/app/components/Stops/ArrivalCard.tsx b/src/frontend/app/components/Stops/ArrivalCard.tsx
deleted file mode 100644
index 96d0af0..0000000
--- a/src/frontend/app/components/Stops/ArrivalCard.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import LineIcon from "~/components/LineIcon";
-import { type Arrival } from "../../api/schema";
-import "./ArrivalCard.css";
-
-interface ArrivalCardProps {
-  arrival: Arrival;
-  reduced?: boolean;
-}
-
-export const ArrivalCard: React.FC<ArrivalCardProps> = ({
-  arrival,
-  reduced,
-}) => {
-  const { t } = useTranslation();
-  const { route, headsign, estimate } = arrival;
-
-  const etaValue = Math.max(0, Math.round(estimate.minutes)).toString();
-  const etaUnit = t("estimates.minutes", "min");
-
-  const timeClass = useMemo(() => {
-    switch (estimate.precission) {
-      case "confident":
-        return "time-running";
-      case "unsure":
-        return "time-delayed";
-      case "past":
-        return "time-past";
-      default:
-        return "time-scheduled";
-    }
-  }, [estimate.precission]);
-
-  return (
-    <div
-      className={`
-        flex-none flex items-center gap-2.5 min-h-12
-        bg-(--message-background-color) border border-(--border-color)
-        rounded-xl px-3 py-2.5 transition-all
-        ${reduced ? "reduced" : ""}
-      `.trim()}
-    >
-      <div className="shrink-0 min-w-[7ch]">
-        <LineIcon
-          line={route.shortName}
-          colour={route.colour}
-          textColour={route.textColour}
-          mode="pill"
-        />
-      </div>
-      <div className="flex-1 min-w-0 flex flex-col gap-1">
-        <strong className="text-base text-(--text-color) overflow-hidden text-ellipsis line-clamp-2 leading-tight">
-          {headsign.destination}
-        </strong>
-      </div>
-      <div
-        className={`
-          inline-flex items-center justify-center px-2 py-1.5 rounded-xl shrink-0
-          ${timeClass}
-        `.trim()}
-      >
-        <div className="flex flex-col items-center leading-none">
-          <span className="text-lg font-bold leading-none">{etaValue}</span>
-          <span className="text-[0.65rem] uppercase tracking-wider mt-0.5 opacity-90">
-            {etaUnit}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/frontend/app/components/Stops/ArrivalList.tsx b/src/frontend/app/components/Stops/ArrivalList.tsx
deleted file mode 100644
index a1210d5..0000000
--- a/src/frontend/app/components/Stops/ArrivalList.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { type Arrival } from "../../api/schema";
-import { ArrivalCard } from "./ArrivalCard";
-
-interface ArrivalListProps {
-  arrivals: Arrival[];
-  reduced?: boolean;
-}
-
-export const ArrivalList: React.FC<ArrivalListProps> = ({
-  arrivals,
-  reduced,
-}) => {
-  return (
-    <div className="flex flex-col gap-3">
-      {arrivals.map((arrival, index) => (
-        <ArrivalCard
-          key={`${arrival.route.shortName}-${index}`}
-          arrival={arrival}
-          reduced={reduced}
-        />
-      ))}
-    </div>
-  );
-};
diff --git a/src/frontend/app/components/arrivals/ArrivalCard.css b/src/frontend/app/components/arrivals/ArrivalCard.css
new file mode 100644
index 0000000..5835352
--- /dev/null
+++ b/src/frontend/app/components/arrivals/ArrivalCard.css
@@ -0,0 +1,17 @@
+@import "../../tailwind.css";
+
+.time-running {
+  @apply bg-green-600/20 dark:bg-green-600/25 text-[#1a9e56] dark:text-[#22c55e];
+}
+
+.time-delayed {
+  @apply bg-orange-600/20 dark:bg-orange-600/25 text-[#d06100] dark:text-[#fb923c];
+}
+
+.time-past {
+  @apply bg-gray-600/20 dark:bg-gray-600/25 text-gray-600 dark:text-gray-400;
+}
+
+.time-scheduled {
+  @apply bg-blue-900/20 dark:bg-blue-600/25 text-[#0b3d91] dark:text-[#93c5fd];
+}
diff --git a/src/frontend/app/components/arrivals/ArrivalCard.tsx b/src/frontend/app/components/arrivals/ArrivalCard.tsx
new file mode 100644
index 0000000..de4fcc7
--- /dev/null
+++ b/src/frontend/app/components/arrivals/ArrivalCard.tsx
@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import LineIcon from "~/components/LineIcon";
+import { type Arrival } from "../../api/schema";
+import "./ArrivalCard.css";
+
+interface ArrivalCardProps {
+  arrival: Arrival;
+  reduced?: boolean;
+}
+
+export const ArrivalCard: React.FC<ArrivalCardProps> = ({
+  arrival,
+  reduced,
+}) => {
+  const { t } = useTranslation();
+  const { route, headsign, estimate } = arrival;
+
+  const etaValue = estimate.minutes.toString();
+  const etaUnit = t("estimates.minutes", "min");
+
+  const timeClass = useMemo(() => {
+    switch (estimate.precision) {
+      case "confident":
+        return "time-running";
+      case "unsure":
+        return "time-delayed";
+      case "past":
+        return "time-past";
+      default:
+        return "time-scheduled";
+    }
+  }, [estimate.precision]);
+
+  return (
+    <div
+      className={`
+        flex-none flex items-center gap-2.5 min-h-12
+        bg-(--message-background-color) border border-(--border-color)
+        rounded-xl px-3 py-2.5 transition-all
+        ${reduced ? "reduced" : ""}
+      `.trim()}
+    >
+      <div className="shrink-0 min-w-[7ch]">
+        <LineIcon
+          line={route.shortName}
+          colour={route.colour}
+          textColour={route.textColour}
+          mode="pill"
+        />
+      </div>
+      <div className="flex-1 min-w-0 flex flex-col gap-1">
+        <strong
+          className={`text-base overflow-hidden text-ellipsis line-clamp-2 leading-tight ${estimate.precision == "past" ? "line-through" : ""}`}
+        >
+          {headsign.destination}
+        </strong>
+      </div>
+      <div
+        className={`
+          inline-flex items-center justify-center px-2 py-1.5 rounded-xl shrink-0
+          ${timeClass}
+        `.trim()}
+      >
+        <div className="flex flex-col items-center leading-none">
+          <span className="text-lg font-bold leading-none">{etaValue}</span>
+          <span className="text-[0.65rem] uppercase tracking-wider mt-0.5 opacity-90">
+            {etaUnit}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/frontend/app/components/arrivals/ArrivalList.tsx b/src/frontend/app/components/arrivals/ArrivalList.tsx
new file mode 100644
index 0000000..a1210d5
--- /dev/null
+++ b/src/frontend/app/components/arrivals/ArrivalList.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { type Arrival } from "../../api/schema";
+import { ArrivalCard } from "./ArrivalCard";
+
+interface ArrivalListProps {
+  arrivals: Arrival[];
+  reduced?: boolean;
+}
+
+export const ArrivalList: React.FC<ArrivalListProps> = ({
+  arrivals,
+  reduced,
+}) => {
+  return (
+    <div className="flex flex-col gap-3">
+      {arrivals.map((arrival, index) => (
+        <ArrivalCard
+          key={`${arrival.route.shortName}-${index}`}
+          arrival={arrival}
+          reduced={reduced}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/src/frontend/app/components/map/StopSummarySheet.tsx b/src/frontend/app/components/map/StopSummarySheet.tsx
index 16a9cbe..e318bee 100644
--- a/src/frontend/app/components/map/StopSummarySheet.tsx
+++ b/src/frontend/app/components/map/StopSummarySheet.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Sheet } from "react-modal-sheet";
 import { Link } from "react-router";
-import { ArrivalList } from "~/components/Stops/ArrivalList";
+import { ArrivalList } from "~/components/arrivals/ArrivalList";
 import { useStopArrivals } from "../../hooks/useArrivals";
 import { ErrorDisplay } from "../ErrorDisplay";
 import LineIcon from "../LineIcon";
-- 
cgit v1.3