From f030f1806255c66b86689489d24f8f5ad9b832ce Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 19 Nov 2025 23:54:49 +0100
Subject: feat: Implement StopMapModal component for displaying bus stop
 locations with live tracking; enhance styles and add interaction features

---
 src/frontend/app/routes/stops-$id.css | 24 ++++++++++++++++++++++++
 src/frontend/app/routes/stops-$id.tsx | 35 ++++++++++++++++++++++++-----------
 2 files changed, 48 insertions(+), 11 deletions(-)

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

diff --git a/src/frontend/app/routes/stops-$id.css b/src/frontend/app/routes/stops-$id.css
index 9ecac16..782d9a1 100644
--- a/src/frontend/app/routes/stops-$id.css
+++ b/src/frontend/app/routes/stops-$id.css
@@ -63,6 +63,30 @@
   flex-shrink: 0;
 }
 
+.stops-header > div:first-child {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.star-icon,
+.edit-icon {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--text-secondary);
+}
+
+.star-icon:hover,
+.edit-icon:hover {
+  color: var(--text-primary);
+  transform: scale(1.1);
+}
+
+.star-icon.active {
+  color: #fbbf24;
+  fill: #fbbf24;
+}
+
 .manual-refresh-button {
   display: flex;
   align-items: center;
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index f340009..a2b2da3 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -5,7 +5,7 @@ import { useParams } from "react-router";
 import { ErrorDisplay } from "~/components/ErrorDisplay";
 import LineIcon from "~/components/LineIcon";
 import { StopAlert } from "~/components/StopAlert";
-import { StopMap } from "~/components/StopMapSheet";
+import { StopMapModal } from "~/components/StopMapModal";
 import { ConsolidatedCirculationList } from "~/components/Stops/ConsolidatedCirculationList";
 import { ConsolidatedCirculationListSkeleton } from "~/components/Stops/ConsolidatedCirculationListSkeleton";
 import { type RegionId, getRegionConfig } from "~/config/RegionConfig";
@@ -77,6 +77,10 @@ export default function Estimates() {
 
   const [favourited, setFavourited] = useState(false);
   const [isManualRefreshing, setIsManualRefreshing] = useState(false);
+  const [isMapModalOpen, setIsMapModalOpen] = useState(false);
+  const [selectedCirculationIdx, setSelectedCirculationIdx] = useState<
+    number | undefined
+  >(undefined);
   const { region } = useApp();
   const regionConfig = getRegionConfig(region);
 
@@ -195,15 +199,16 @@ export default function Estimates() {
       <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} />
+            <Star
+              className={`star-icon ${favourited ? "active" : ""}`}
+              onClick={toggleFavourite}
+              width={20}
+            />
+            <Edit2
+              className="edit-icon"
+              onClick={handleRename}
+              width={20}
+            />
           </div>
 
           <button
@@ -247,12 +252,17 @@ export default function Estimates() {
               data={data}
               dataDate={dataDate}
               regionConfig={regionConfig}
+              onCirculationClick={(estimate, idx) => {
+                setSelectedCirculationIdx(idx);
+                setIsMapModalOpen(true);
+              }}
             />
           ) : null}
         </div>
 
+        {/* Map Modal - only render if we have stop data */}
         {stopData && (
-          <StopMap
+          <StopMapModal
             stop={stopData}
             region={region}
             circulations={(data ?? []).map((c) => ({
@@ -260,6 +270,9 @@ export default function Estimates() {
               route: c.route,
               currentPosition: c.currentPosition,
             }))}
+            isOpen={isMapModalOpen}
+            onClose={() => setIsMapModalOpen(false)}
+            selectedCirculationIndex={selectedCirculationIdx}
           />
         )}
       </div>
-- 
cgit v1.3