From 8eec2d4ca40189922e644d7896628dbb396fc8b0 Mon Sep 17 00:00:00 2001
From: Arne Baeumler <arne@br0tkasten.de>
Date: Sat, 13 Jun 2026 08:31:33 +0200
Subject: [PATCH] feat: refine map control group states

---
 src/client/app.ts           |  2 ++
 src/server/app-assets.ts    | 27 +++++++++++++++++++++++----
 src/server/page-template.ts |  2 +-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/client/app.ts b/src/client/app.ts
index 9fc82bb..5cc0fa4 100644
--- a/src/client/app.ts
+++ b/src/client/app.ts
@@ -251,6 +251,7 @@ function setRouteVisible(visible) {
       route.addTo(map);
     }
     routeToggle.setAttribute("aria-label", "Hide route line");
+    routeToggle.setAttribute("aria-pressed", "true");
     routeToggleIcon.innerHTML =
       '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
       '<path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' +
@@ -262,6 +263,7 @@ function setRouteVisible(visible) {
       map.removeLayer(route);
     }
     routeToggle.setAttribute("aria-label", "Show route line");
+    routeToggle.setAttribute("aria-pressed", "false");
     routeToggleIcon.innerHTML =
       '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
       '<path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' +
diff --git a/src/server/app-assets.ts b/src/server/app-assets.ts
index 5471555..15bed40 100644
--- a/src/server/app-assets.ts
+++ b/src/server/app-assets.ts
@@ -291,7 +291,12 @@ export const APP_STYLES = `      :root {
         right: 16px;
         z-index: 900;
         display: grid;
-        gap: 8px;
+        gap: 2px;
+        padding: 4px;
+        background: var(--timeline-surface-soft);
+        border: 1px solid var(--timeline-border);
+        box-shadow: var(--shadow-soft);
+        backdrop-filter: blur(14px);
       }
 
       .route-toggle {
@@ -303,15 +308,29 @@ export const APP_STYLES = `      :root {
 
       .theme-toggle,
       .route-toggle {
-        background: var(--timeline-surface-soft);
+        background: transparent;
         color: var(--timeline-text);
-        border: 1px solid var(--timeline-border);
-        box-shadow: var(--shadow-soft);
+        border: 1px solid transparent;
+        box-shadow: none;
+        opacity: 0.78;
       }
 
       .theme-toggle:hover,
       .route-toggle:hover {
         background: var(--timeline-surface-strong);
+        border-color: var(--timeline-border);
+        opacity: 1;
+      }
+
+      .route-toggle[aria-pressed="true"] {
+        background: var(--timeline-surface-strong);
+        border-color: var(--timeline-border-strong);
+        color: var(--route-color);
+        opacity: 1;
+      }
+
+      .route-toggle[aria-pressed="false"] {
+        color: var(--timeline-text-muted);
       }
 
       .theme-toggle .button-icon,
diff --git a/src/server/page-template.ts b/src/server/page-template.ts
index c950e25..7b570b8 100644
--- a/src/server/page-template.ts
+++ b/src/server/page-template.ts
@@ -27,7 +27,7 @@ ${APP_STYLES}
           </svg>
         </span>
       </button>
-      <button class="secondary route-toggle" id="route-toggle" type="button" aria-label="Hide route line">
+      <button class="secondary route-toggle" id="route-toggle" type="button" aria-label="Hide route line" aria-pressed="true">
         <span class="button-icon" id="route-toggle-icon" aria-hidden="true">
           <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>