From a68ba30716062b265f85c4be078a736c7135d7bc Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sun, 30 Nov 2025 20:49:48 +0100
Subject: 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.

---
 src/frontend/app/routes/settings.tsx | 132 +++++------------------------------
 1 file changed, 17 insertions(+), 115 deletions(-)

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

diff --git a/src/frontend/app/routes/settings.tsx b/src/frontend/app/routes/settings.tsx
index 351ccf0..faad5a6 100644
--- a/src/frontend/app/routes/settings.tsx
+++ b/src/frontend/app/routes/settings.tsx
@@ -1,76 +1,41 @@
-import { useState } from "react";
+import { Computer, Moon, Sun } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router";
 import { usePageTitle } from "~/contexts/PageTitleContext";
 import { type Theme, useApp } from "../AppContext";
-import { getAvailableRegions } from "../config/RegionConfig";
 import "./settings.css";
 
 export default function Settings() {
   const { t, i18n } = useTranslation();
   usePageTitle(t("navbar.settings", "Ajustes"));
-  const navigate = useNavigate();
   const {
     theme,
     setTheme,
-    tableStyle,
-    setTableStyle,
     mapPositionMode,
-    setMapPositionMode,
-    region,
-    setRegion,
+    setMapPositionMode
   } = useApp();
 
-  const regions = getAvailableRegions();
-  const [showModal, setShowModal] = useState(false);
-  const [pendingRegion, setPendingRegion] = useState<string | null>(null);
-
-  const handleRegionChange = (newRegion: string) => {
-    if (newRegion !== region) {
-      setPendingRegion(newRegion);
-      setShowModal(true);
-    }
-  };
-
-  const confirmRegionChange = () => {
-    if (pendingRegion) {
-      setRegion(pendingRegion as any);
-      setShowModal(false);
-      setPendingRegion(null);
-      navigate("/");
-    }
-  };
-
-  const cancelRegionChange = () => {
-    setShowModal(false);
-    setPendingRegion(null);
-  };
-
   return (
     <div className="page-container">
       <section className="settings-section">
         <h2>{t("about.settings")}</h2>
-        <div className="settings-content-inline">
-          <label htmlFor="region" className="form-label-inline">
-            Región:
-          </label>
-          <select
-            id="region"
-            className="form-select-inline"
-            value={region}
-            onChange={(e) => handleRegionChange(e.target.value)}
-          >
-            {regions.map((r) => (
-              <option key={r.id} value={r.id}>
-                {r.name}
-              </option>
-            ))}
-          </select>
-        </div>
+
         <div className="settings-content-inline">
           <label htmlFor="theme" className="form-label-inline">
             {t("about.theme")}
           </label>
+
+          <div className="flex">
+            <button onClick={() => setTheme("light")}>
+              <Sun />
+            </button>
+            <button onClick={() => setTheme("dark")}>
+              <Moon />
+            </button>
+            <button onClick={() => setTheme("system")}>
+              <Computer />
+            </button>
+          </div>
+
           <select
             id="theme"
             className="form-select-inline"
@@ -82,6 +47,7 @@ export default function Settings() {
             <option value="system">{t("about.theme_system")}</option>
           </select>
         </div>
+
         <div className="settings-content-inline">
           <label htmlFor="mapPositionMode" className="form-label-inline">
             {t("about.map_position_mode")}
@@ -114,71 +80,7 @@ export default function Settings() {
           </select>
         </div>
 
-        <div className="settings-content-inline">
-          <label htmlFor="tableStyle" className="form-label-inline">
-            {t("about.table_style")}
-          </label>
-          <select
-            id="tableStyle"
-            className="form-select-inline"
-            value={tableStyle}
-            onChange={(e) =>
-              setTableStyle(
-                e.target.value as
-                  | "regular"
-                  | "grouped"
-                  | "experimental_consolidated"
-              )
-            }
-          >
-            <option value="regular">{t("about.table_style_regular")}</option>
-            <option value="grouped">{t("about.table_style_grouped")}</option>
-            <option value="experimental_consolidated">
-              {t("about.table_style_experimental_consolidated")}
-            </option>
-          </select>
-        </div>
-        <details className="form-details">
-          <summary>{t("about.details_summary")}</summary>
-          <p>{t("about.details_table")}</p>
-          <dl>
-            <dt>{t("about.table_style_regular")}</dt>
-            <dd>{t("about.details_regular")}</dd>
-            <dt>{t("about.table_style_grouped")}</dt>
-            <dd>{t("about.details_grouped")}</dd>
-            <dt>{t("about.table_style_experimental_consolidated")}</dt>
-            <dd>{t("about.details_experimental_consolidated")}</dd>
-          </dl>
-        </details>
       </section>
-
-      {showModal && (
-        <div className="modal-overlay" onClick={cancelRegionChange}>
-          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
-            <h2>{t("about.region_change_title", "Cambiar región")}</h2>
-            <p>
-              {t(
-                "about.region_change_message",
-                "¿Estás seguro de que quieres cambiar la región? Serás redirigido a la lista de paradas."
-              )}
-            </p>
-            <div className="modal-buttons">
-              <button
-                className="modal-button modal-button-cancel"
-                onClick={cancelRegionChange}
-              >
-                {t("about.cancel", "Cancelar")}
-              </button>
-              <button
-                className="modal-button modal-button-confirm"
-                onClick={confirmRegionChange}
-              >
-                {t("about.confirm", "Confirmar")}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }
-- 
cgit v1.3