fix: update default formatter to Prettier and enhance ETA display logic in ConsolidatedCirculationCard

3 files changed, 35 insertions, 12 deletions

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 360b8b3..de4eaf6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "prettier.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "explicit"
@@ -34,10 +34,8 @@
   ],
   "typescript.tsdk": "src/frontend/node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "css.customData": [
-    ".vscode/tailwind.json"
-  ],
+  "css.customData": [".vscode/tailwind.json"],
   "[typescriptreact]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features"
+    "editor.defaultFormatter": "prettier.prettier-vscode"
   }
 }
diff --git a/src/frontend/app/components/StopSummarySheet.tsx b/src/frontend/app/components/StopSummarySheet.tsx
index 55cbbd8..c2d6ffe 100644
--- a/src/frontend/app/components/StopSummarySheet.tsx
+++ b/src/frontend/app/components/StopSummarySheet.tsx
@@ -158,6 +158,7 @@ export const StopSheet: React.FC<StopSheetProps> = ({
                   ) : (
                     <ConsolidatedCirculationList
                       data={data.slice(0, 4)}
+                      driver={stop.stopId.split(":")[0]}
                       reduced
                     />
                   )}
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
index 3fa984b..425cf7b 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
@@ -137,9 +137,31 @@ export const ConsolidatedCirculationCard: React.FC<
 
   const etaMinutes =
     estimate.realTime?.minutes ?? estimate.schedule?.minutes ?? null;
-  const etaValue =
-    etaMinutes === null ? "--" : Math.max(0, Math.round(etaMinutes)).toString();
-  const etaUnit = t("estimates.minutes", "min");
+
+  let etaValue: string;
+  let etaUnit: string;
+
+  if (etaMinutes === null) {
+    etaValue = "--";
+    etaUnit = t("estimates.minutes", "min");
+  } else {
+    const isRenfe = driver === "renfe";
+    const isLongWait = etaMinutes > 60;
+
+    if (isRenfe || isLongWait) {
+      const now = new Date();
+      const arrivalTime = new Date(now.getTime() + etaMinutes * 60 * 1000);
+      etaValue = arrivalTime.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      });
+      etaUnit = "";
+    } else {
+      etaValue = Math.max(0, Math.round(etaMinutes)).toString();
+      etaUnit = t("estimates.minutes", "min");
+    }
+  }
 
   const timeClass = useMemo(() => {
     if (estimate.realTime && estimate.schedule?.running) {
@@ -291,7 +313,7 @@ export const ConsolidatedCirculationCard: React.FC<
         `.trim()}
         {...interactiveProps}
       >
-        <div className="shrink-0 w-[7ch]">
+        <div className="shrink-0 min-w-[7ch]">
           <LineIcon line={estimate.line} mode="pill" />
         </div>
         <div className="flex-1 min-w-0 flex flex-col gap-1">
@@ -301,7 +323,7 @@ export const ConsolidatedCirculationCard: React.FC<
                 {estimate.schedule.tripId}
               </span>
             )}
-            {estimate.route}
+            {driver === "renfe" ? estimate.route.toUpperCase() : estimate.route}
           </strong>
           {metaChips.length > 0 && (
             <div className="flex items-center gap-1.5 flex-wrap">
@@ -395,13 +417,15 @@ export const ConsolidatedCirculationCard: React.FC<
             <LineIcon line={estimate.line} mode="pill" />
           </div>
           <div className="route-info">
-            <strong className="uppercase">
+            <strong>
               {driver === "renfe" && estimate.schedule?.tripId && (
                 <span className="font-mono text-slate-500 mr-2 text-[0.9em]">
                   {estimate.schedule.tripId}
                 </span>
               )}
-              {estimate.route}
+              {driver === "renfe"
+                ? estimate.route.toUpperCase()
+                : estimate.route}
             </strong>
             {estimate.nextStreets && estimate.nextStreets.length > 0 && (
               <AutoMarquee text={estimate.nextStreets.join(" — ")} />