From 7b8594debceb93a1fa400d48fe1dcff943bd5af6 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 26 Jun 2025 23:44:25 +0200
Subject: Implement stop sheet modal for map stop interactions (#27)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>
Co-authored-by: Ariel Costas Guerrero <ariel@costas.dev>
---
 src/frontend/app/routes/settings.tsx | 192 ++++++++++++++++++++++-------------
 1 file changed, 124 insertions(+), 68 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 e657c03..c08b2c9 100644
--- a/src/frontend/app/routes/settings.tsx
+++ b/src/frontend/app/routes/settings.tsx
@@ -3,74 +3,130 @@ import "./settings.css";
 import { useTranslation } from "react-i18next";
 
 export default function Settings() {
-    const { t, i18n } = useTranslation();
-    const { theme, setTheme, tableStyle, setTableStyle, mapPositionMode, setMapPositionMode } = useApp();
+  const { t, i18n } = useTranslation();
+  const {
+    theme,
+    setTheme,
+    tableStyle,
+    setTableStyle,
+    mapPositionMode,
+    setMapPositionMode,
+  } = useApp();
 
-    return (
-        <div className="page-container">
-            <h1 className="page-title">{t('about.title')}</h1>
-            <p className="about-description">
-                {t('about.description')}
-            </p>
-            <section className="settings-section">
-                <h2>{t('about.settings')}</h2>
-                <div className="settings-content-inline">
-                    <label htmlFor="theme" className="form-label-inline">{t('about.theme')}</label>
-                    <select id="theme" className="form-select-inline" value={theme} onChange={(e) => setTheme(e.target.value as "light" | "dark")}> 
-                        <option value="light">{t('about.theme_light')}</option>
-                        <option value="dark">{t('about.theme_dark')}</option>
-                    </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")}> 
-                        <option value="regular">{t('about.table_style_regular')}</option>
-                        <option value="grouped">{t('about.table_style_grouped')}</option>
-                    </select>
-                </div>
-                <div className="settings-content-inline">
-                    <label htmlFor="mapPositionMode" className="form-label-inline">{t('about.map_position_mode')}</label>
-                    <select id="mapPositionMode" className="form-select-inline" value={mapPositionMode} onChange={e => setMapPositionMode(e.target.value as 'gps' | 'last')}> 
-                        <option value="gps">{t('about.map_position_gps')}</option>
-                        <option value="last">{t('about.map_position_last')}</option>
-                    </select>
-                </div>
-                <div className="settings-content-inline">
-                    <label htmlFor="language" className="form-label-inline">Idioma:</label>
-                    <select
-                        id="language"
-                        className="form-select-inline"
-                        value={i18n.language}
-                        onChange={e => i18n.changeLanguage(e.target.value)}
-                    >
-                        <option value="es-ES">Español</option>
-                        <option value="gl-ES">Galego</option>
-                        <option value="en-GB">English</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>
-                    </dl>
-                </details>
-            </section>
-            <h2>{t('about.credits')}</h2>
-            <p>
-                <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link" rel="nofollow noreferrer noopener">
-                    {t('about.github')}
-                </a> -
-                {t('about.developed_by')} <a href="https://www.costas.dev" className="about-link" rel="nofollow noreferrer noopener">
-                    Ariel Costas
-                </a>
-            </p>
-            <p>
-                {t('about.data_source_prefix')} <a href="https://datos.vigo.org" className="about-link" rel="nofollow noreferrer noopener">datos.vigo.org</a> {t('about.data_source_middle')} <a href="https://opendefinition.org/licenses/odc-by/" className="about-link" rel="nofollow noreferrer noopener">Open Data Commons Attribution License</a>
-            </p>
+  return (
+    <div className="page-container">
+      <h1 className="page-title">{t("about.title")}</h1>
+      <p className="about-description">{t("about.description")}</p>
+      <section className="settings-section">
+        <h2>{t("about.settings")}</h2>
+        <div className="settings-content-inline">
+          <label htmlFor="theme" className="form-label-inline">
+            {t("about.theme")}
+          </label>
+          <select
+            id="theme"
+            className="form-select-inline"
+            value={theme}
+            onChange={(e) => setTheme(e.target.value as "light" | "dark")}
+          >
+            <option value="light">{t("about.theme_light")}</option>
+            <option value="dark">{t("about.theme_dark")}</option>
+          </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")
+            }
+          >
+            <option value="regular">{t("about.table_style_regular")}</option>
+            <option value="grouped">{t("about.table_style_grouped")}</option>
+          </select>
+        </div>
+        <div className="settings-content-inline">
+          <label htmlFor="mapPositionMode" className="form-label-inline">
+            {t("about.map_position_mode")}
+          </label>
+          <select
+            id="mapPositionMode"
+            className="form-select-inline"
+            value={mapPositionMode}
+            onChange={(e) =>
+              setMapPositionMode(e.target.value as "gps" | "last")
+            }
+          >
+            <option value="gps">{t("about.map_position_gps")}</option>
+            <option value="last">{t("about.map_position_last")}</option>
+          </select>
+        </div>
+        <div className="settings-content-inline">
+          <label htmlFor="language" className="form-label-inline">
+            Idioma:
+          </label>
+          <select
+            id="language"
+            className="form-select-inline"
+            value={i18n.language}
+            onChange={(e) => i18n.changeLanguage(e.target.value)}
+          >
+            <option value="es-ES">Español</option>
+            <option value="gl-ES">Galego</option>
+            <option value="en-GB">English</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>
+          </dl>
+        </details>
+      </section>
+      <h2>{t("about.credits")}</h2>
+      <p>
+        <a
+          href="https://github.com/arielcostas/urbanovigo-web"
+          className="about-link"
+          rel="nofollow noreferrer noopener"
+        >
+          {t("about.github")}
+        </a>{" "}
+        -{t("about.developed_by")}{" "}
+        <a
+          href="https://www.costas.dev"
+          className="about-link"
+          rel="nofollow noreferrer noopener"
+        >
+          Ariel Costas
+        </a>
+      </p>
+      <p>
+        {t("about.data_source_prefix")}{" "}
+        <a
+          href="https://datos.vigo.org"
+          className="about-link"
+          rel="nofollow noreferrer noopener"
+        >
+          datos.vigo.org
+        </a>{" "}
+        {t("about.data_source_middle")}{" "}
+        <a
+          href="https://opendefinition.org/licenses/odc-by/"
+          className="about-link"
+          rel="nofollow noreferrer noopener"
+        >
+          Open Data Commons Attribution License
+        </a>
+      </p>
+    </div>
+  );
 }
-- 
cgit v1.3