From ee77f38cdb324cbcf12518490df77fc9e6b89282 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 6 Nov 2025 22:52:02 +0000
Subject: Improve gallery scroll indicators and format code

Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>
---
 src/frontend/app/routes/stoplist.tsx | 57 +++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 24 deletions(-)

(limited to 'src/frontend/app/routes/stoplist.tsx')

diff --git a/src/frontend/app/routes/stoplist.tsx b/src/frontend/app/routes/stoplist.tsx
index 80267ea..fe6d2f1 100644
--- a/src/frontend/app/routes/stoplist.tsx
+++ b/src/frontend/app/routes/stoplist.tsx
@@ -32,10 +32,11 @@ export default function StopList() {
   );
 
   const fuse = useMemo(
-    () => new Fuse(data || [], { 
-      threshold: 0.3, 
-      keys: ["name.original", "name.intersect", "stopId"] 
-    }),
+    () =>
+      new Fuse(data || [], {
+        threshold: 0.3,
+        keys: ["name.original", "name.intersect", "stopId"],
+      }),
     [data],
   );
 
@@ -77,7 +78,9 @@ export default function StopList() {
     const checkPermission = async () => {
       try {
         if (navigator.permissions?.query) {
-          permissionStatus = await navigator.permissions.query({ name: "geolocation" });
+          permissionStatus = await navigator.permissions.query({
+            name: "geolocation",
+          });
           if (permissionStatus.state === "granted") {
             requestUserLocation();
           }
@@ -109,7 +112,12 @@ export default function StopList() {
     }
 
     const toRadians = (value: number) => (value * Math.PI) / 180;
-    const getDistance = (lat1: number, lon1: number, lat2: number, lon2: number) => {
+    const getDistance = (
+      lat1: number,
+      lon1: number,
+      lat2: number,
+      lon2: number,
+    ) => {
       const R = 6371000; // meters
       const dLat = toRadians(lat2 - lat1);
       const dLon = toRadians(lon2 - lon1);
@@ -125,7 +133,10 @@ export default function StopList() {
 
     return data
       .map((stop) => {
-        if (typeof stop.latitude !== "number" || typeof stop.longitude !== "number") {
+        if (
+          typeof stop.latitude !== "number" ||
+          typeof stop.longitude !== "number"
+        ) {
           return { stop, distance: Number.POSITIVE_INFINITY };
         }
 
@@ -162,25 +173,24 @@ export default function StopList() {
 
       // Add favourite flags to stops
       const favouriteStopsIds = StopDataProvider.getFavouriteIds(region);
-      const stopsWithFavourites = stops.map(stop => ({
+      const stopsWithFavourites = stops.map((stop) => ({
         ...stop,
-        favourite: favouriteStopsIds.includes(stop.stopId)
+        favourite: favouriteStopsIds.includes(stop.stopId),
       }));
 
       setData(stopsWithFavourites);
 
       // Update favourite and recent stops with full data
-      const favStops = stopsWithFavourites.filter(stop =>
-        favouriteStopsIds.includes(stop.stopId)
+      const favStops = stopsWithFavourites.filter((stop) =>
+        favouriteStopsIds.includes(stop.stopId),
       );
       setFavouriteStops(favStops);
 
       const recIds = StopDataProvider.getRecent(region);
       const recStops = recIds
-        .map(id => stopsWithFavourites.find(stop => stop.stopId === id))
+        .map((id) => stopsWithFavourites.find((stop) => stop.stopId === id))
         .filter(Boolean) as Stop[];
       setRecentStops(recStops.reverse());
-
     } catch (error) {
       console.error("Failed to load stops:", error);
     } finally {
@@ -212,12 +222,12 @@ export default function StopList() {
 
       // Check if search query is a number (stop code search)
       const isNumericSearch = /^\d+$/.test(searchQuery.trim());
-      
+
       let items: Stop[];
       if (isNumericSearch) {
         // Direct match for stop codes
         const stopId = parseInt(searchQuery.trim(), 10);
-        const exactMatch = data.filter(stop => stop.stopId === stopId);
+        const exactMatch = data.filter((stop) => stop.stopId === stopId);
         if (exactMatch.length > 0) {
           items = exactMatch;
         } else {
@@ -230,14 +240,14 @@ export default function StopList() {
         const results = fuse.search(searchQuery);
         items = results.map((result) => result.item);
       }
-      
+
       setSearchResults(items);
     }, 300);
   };
 
   return (
     <div className="page-container stoplist-page">
-      <h1 className="page-title">BusUrbano  - {REGIONS[region].name}</h1>
+      <h1 className="page-title">BusUrbano - {REGIONS[region].name}</h1>
 
       <form className="search-form">
         <div className="form-group">
@@ -286,10 +296,9 @@ export default function StopList() {
 
       <div className="list-container">
         <h2 className="page-subtitle">
-          {userLocation 
-            ? t("stoplist.nearby_stops", "Nearby stops") 
-            : t("stoplist.all_stops", "Paradas")
-          }
+          {userLocation
+            ? t("stoplist.nearby_stops", "Nearby stops")
+            : t("stoplist.all_stops", "Paradas")}
         </h2>
 
         <ul className="list">
@@ -301,9 +310,9 @@ export default function StopList() {
             </>
           )}
           {!loading && data
-            ? (userLocation ? sortedAllStops.slice(0, 6) : sortedAllStops).map((stop) => (
-                <StopItem key={stop.stopId} stop={stop} />
-              ))
+            ? (userLocation ? sortedAllStops.slice(0, 6) : sortedAllStops).map(
+                (stop) => <StopItem key={stop.stopId} stop={stop} />,
+              )
             : null}
         </ul>
       </div>
-- 
cgit v1.3