From 3227c7bc6bd233c92b1cf54bec689f0582dca547 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Mon, 1 Dec 2025 22:25:56 +0100
Subject: refactor: replace StopSheet with StopSummarySheet and update related
 components

- Deleted StopSheet and StopSheetSkeleton components.
- Introduced StopSummarySheet and StopSummarySheetSkeleton components.
- Updated ConsolidatedCirculationCard to support a reduced view.
- Modified ConsolidatedCirculationList to accept a reduced prop.
- Adjusted map route to use StopSummarySheet.
- Cleaned up CSS styles related to the stop sheet components.
- Enhanced error handling and loading states in the new summary sheet.
- Updated stop report logic to filter out empty next streets.
---
 src/frontend/app/routes/map.tsx       |  2 +-
 src/frontend/app/routes/stops-$id.css | 14 ------
 src/frontend/app/routes/stops-$id.tsx | 88 ++++++++++++++++-------------------
 3 files changed, 40 insertions(+), 64 deletions(-)

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

diff --git a/src/frontend/app/routes/map.tsx b/src/frontend/app/routes/map.tsx
index 343cf91..461e891 100644
--- a/src/frontend/app/routes/map.tsx
+++ b/src/frontend/app/routes/map.tsx
@@ -14,7 +14,7 @@ import Map, {
   type MapRef,
   type StyleSpecification
 } from "react-map-gl/maplibre";
-import { StopSheet } from "~/components/StopSheet";
+import { StopSheet } from "~/components/StopSummarySheet";
 import { REGION_DATA } from "~/config/RegionConfig";
 import { usePageTitle } from "~/contexts/PageTitleContext";
 import { useApp } from "../AppContext";
diff --git a/src/frontend/app/routes/stops-$id.css b/src/frontend/app/routes/stops-$id.css
index 1144584..fa29833 100644
--- a/src/frontend/app/routes/stops-$id.css
+++ b/src/frontend/app/routes/stops-$id.css
@@ -53,20 +53,6 @@
   gap: 1rem;
 }
 
-.stops-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-shrink: 0;
-}
-
-.stops-header > div:first-child {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
 .star-icon,
 .edit-icon {
   cursor: pointer;
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index 25aa3e7..32152f9 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -1,4 +1,4 @@
-import { Edit2, RefreshCw, Star } from "lucide-react";
+import { Eye, EyeClosed, RefreshCw, Star } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router";
@@ -88,6 +88,7 @@ export default function Estimates() {
   const [favourited, setFavourited] = useState(false);
   const [isManualRefreshing, setIsManualRefreshing] = useState(false);
   const [isMapModalOpen, setIsMapModalOpen] = useState(false);
+  const [isReducedView, setIsReducedView] = useState(false);
   const [selectedCirculationId, setSelectedCirculationId] = useState<
     string | undefined
   >(undefined);
@@ -185,49 +186,9 @@ export default function Estimates() {
     }
   };
 
-  const handleRename = () => {
-    const current = getStopDisplayName();
-    const input = window.prompt("Custom name for this stop:", current);
-    if (input === null) return; // cancelled
-    const trimmed = input.trim();
-    if (trimmed === "") {
-      StopDataProvider.removeCustomName(stopIdNum);
-      setCustomName(undefined);
-    } else {
-      StopDataProvider.setCustomName(stopIdNum, trimmed);
-      setCustomName(trimmed);
-    }
-  };
-
   return (
     <PullToRefresh onRefresh={handleManualRefresh}>
       <div className="page-container stops-page">
-        <div className="stops-header">
-          <div>
-            <Star
-              className={`star-icon ${favourited ? "active" : ""}`}
-              onClick={toggleFavourite}
-              width={20}
-            />
-            <Edit2
-              className="edit-icon"
-              onClick={handleRename}
-              width={20}
-            />
-          </div>
-
-          <button
-            className="manual-refresh-button"
-            onClick={handleManualRefresh}
-            disabled={isManualRefreshing || dataLoading}
-            title={t("estimates.reload", "Recargar estimaciones")}
-          >
-            <RefreshCw
-              className={`refresh-icon ${isManualRefreshing ? "spinning" : ""}`}
-            />
-          </button>
-        </div>
-
         {stopData && stopData.lines && stopData.lines.length > 0 && (
           <div className={`estimates-lines-container scrollable`}>
             {stopData.lines.map((line) => (
@@ -253,14 +214,43 @@ export default function Estimates() {
               )}
             />
           ) : data ? (
-            <ConsolidatedCirculationList
-              data={data}
-              dataDate={dataDate}
-              onCirculationClick={(estimate, idx) => {
-                setSelectedCirculationId(getCirculationId(estimate));
-                setIsMapModalOpen(true);
-              }}
-            />
+            <>
+              <div className="flex items-center justify-between py-2">
+                <div className="flex items-center gap-4">
+                  <Star
+                    className={`text-slate-500 ${favourited ? "active" : ""}`}
+                    onClick={toggleFavourite}
+                  />
+
+                  <RefreshCw
+                    className={`text-slate-500 ${isManualRefreshing ? "spinning" : ""}`}
+                    onClick={handleManualRefresh}
+                  />
+                </div>
+
+                <div className="consolidated-circulation-caption">
+                  {t("estimates.caption", "Estimaciones de llegadas a las {{time}}", {
+                    time: dataDate?.toLocaleTimeString(),
+                  })}
+                </div>
+
+                <div>
+                  {isReducedView ? (
+                    <EyeClosed className="text-slate-500" onClick={() => setIsReducedView(false)} />
+                  ) : (
+                    <Eye className="text-slate-500" onClick={() => setIsReducedView(true)} />
+                  )}
+                </div>
+              </div>
+              <ConsolidatedCirculationList
+                data={data}
+                reduced={isReducedView}
+                onCirculationClick={(estimate, idx) => {
+                  setSelectedCirculationId(getCirculationId(estimate));
+                  setIsMapModalOpen(true);
+                }}
+              />
+            </>
           ) : null}
         </div>
 
-- 
cgit v1.3