Refactor StopMap and Settings components; replace region config usage with REGION_DATA, update StopDataProvider calls, and improve UI elements. Remove unused timetable files and add Tailwind CSS support.

2 files changed, 15 insertions, 66 deletions

diff --git a/src/frontend/app/contexts/MapContext.tsx b/src/frontend/app/contexts/MapContext.tsx
index b47b67f..af13bb7 100644
--- a/src/frontend/app/contexts/MapContext.tsx
+++ b/src/frontend/app/contexts/MapContext.tsx
@@ -1,13 +1,12 @@
 import { type LngLatLike } from "maplibre-gl";
 import {
-    createContext,
-    useContext,
-    useEffect,
-    useState,
-    type ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
 } from "react";
-import { getRegionConfig } from "../config/RegionConfig";
-import { useSettings } from "./SettingsContext";
+import { REGION_DATA } from "~/config/RegionConfig";
 
 interface MapState {
   center: LngLatLike;
@@ -28,9 +27,6 @@ interface MapContextProps {
 const MapContext = createContext<MapContextProps | undefined>(undefined);
 
 export const MapProvider = ({ children }: { children: ReactNode }) => {
-  const { region } = useSettings();
-  const [prevRegion, setPrevRegion] = useState(region);
-
   const [mapState, setMapState] = useState<MapState>(() => {
     const savedMapState = localStorage.getItem("mapState");
     if (savedMapState) {
@@ -39,10 +35,9 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
         // Validate that the saved center is valid if needed, or just trust it.
         // We might want to ensure we have a fallback if the region changed while the app was closed?
         // But for now, let's stick to the existing logic.
-        const regionConfig = getRegionConfig(region);
         return {
-          center: parsed.center || regionConfig.defaultCenter,
-          zoom: parsed.zoom || regionConfig.defaultZoom,
+          center: parsed.center || REGION_DATA.defaultCenter,
+          zoom: parsed.zoom || REGION_DATA.defaultZoom,
           userLocation: parsed.userLocation || null,
           hasLocationPermission: parsed.hasLocationPermission || false,
         };
@@ -50,10 +45,9 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
         console.error("Error parsing saved map state", e);
       }
     }
-    const regionConfig = getRegionConfig(region);
     return {
-      center: regionConfig.defaultCenter,
-      zoom: regionConfig.defaultZoom,
+      center: REGION_DATA.defaultCenter,
+      zoom: REGION_DATA.defaultZoom,
       userLocation: null,
       hasLocationPermission: false,
     };
@@ -99,15 +93,6 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
     });
   };
 
-  // Sync map state when region changes
-  useEffect(() => {
-    if (region !== prevRegion) {
-      const regionConfig = getRegionConfig(region);
-      updateMapState(regionConfig.defaultCenter, regionConfig.defaultZoom);
-      setPrevRegion(region);
-    }
-  }, [region, prevRegion]);
-
   // Try to get user location on load if permission was granted
   useEffect(() => {
     if (mapState.hasLocationPermission && !mapState.userLocation) {
diff --git a/src/frontend/app/contexts/SettingsContext.tsx b/src/frontend/app/contexts/SettingsContext.tsx
index a273008..5f6ff46 100644
--- a/src/frontend/app/contexts/SettingsContext.tsx
+++ b/src/frontend/app/contexts/SettingsContext.tsx
@@ -1,16 +1,11 @@
 import {
-    createContext,
-    useContext,
-    useEffect,
-    useState,
-    type ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
 } from "react";
 import { APP_CONFIG } from "../config/AppConfig";
-import {
-    DEFAULT_REGION,
-    isValidRegion,
-    type RegionId
-} from "../config/RegionConfig";
 
 export type Theme = "light" | "dark" | "system";
 export type TableStyle = "regular" | "grouped" | "experimental_consolidated";
@@ -21,15 +16,8 @@ interface SettingsContextProps {
   setTheme: React.Dispatch<React.SetStateAction<Theme>>;
   toggleTheme: () => void;
 
-  tableStyle: TableStyle;
-  setTableStyle: React.Dispatch<React.SetStateAction<TableStyle>>;
-  toggleTableStyle: () => void;
-
   mapPositionMode: MapPositionMode;
   setMapPositionMode: (mode: MapPositionMode) => void;
-
-  region: RegionId;
-  setRegion: (region: RegionId) => void;
   resolvedTheme: "light" | "dark";
 }
 
@@ -151,38 +139,14 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
   }, [mapPositionMode]);
   //#endregion
 
-  //#region Region
-  const [region, setRegionState] = useState<RegionId>(() => {
-    const savedRegion = localStorage.getItem("region");
-    if (savedRegion && isValidRegion(savedRegion)) {
-      return savedRegion;
-    }
-    return DEFAULT_REGION;
-  });
-
-  const setRegion = (newRegion: RegionId) => {
-    setRegionState(newRegion);
-    localStorage.setItem("region", newRegion);
-  };
-
-  useEffect(() => {
-    localStorage.setItem("region", region);
-  }, [region]);
-  //#endregion
-
   return (
     <SettingsContext.Provider
       value={{
         theme,
         setTheme,
         toggleTheme,
-        tableStyle,
-        setTableStyle,
-        toggleTableStyle,
         mapPositionMode,
         setMapPositionMode,
-        region,
-        setRegion,
         resolvedTheme,
       }}
     >