From e0220a9c898ac3f7faa706bd207ead7a098cba48 Mon Sep 17 00:00:00 2001
From: "Morten V. Christiansen" <mvoetmann@gmail.com>
Date: Tue, 7 Apr 2026 16:22:54 +0200
Subject: [PATCH] Highlight off-map indicator selection

---
 kort7/app.js              | 10 ++++++++++
 kort7/kort7.html          |  9 ++++++++-
 kort7/tests/kort7.spec.js |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/kort7/app.js b/kort7/app.js
index 4c89a29..5aa77bc 100644
--- a/kort7/app.js
+++ b/kort7/app.js
@@ -151,6 +151,8 @@ function renderSelectedVehicleInfo(selection) {
     Usikkerhed: ${selection.state.current.uncertaintyM} m<br>
     Status: ${selection.state.presenceStateLabel}
   `;
+
+  selectedVehicleInfoEl.scrollIntoView({ block: "nearest" });
 }
 
 function createView({ id, label, positionKey, alertsEl, indicatorsId }) {
@@ -353,6 +355,13 @@ function updateVehicleDisplay(view, v) {
   syncUncertaintyCircle(view, v);
 }
 
+function setActiveIndicator(view, vehicleName) {
+  const buttons = view.indicatorsEl.querySelectorAll('.offmap-indicator');
+  buttons.forEach((button) => {
+    button.classList.toggle('active', button.dataset.vehicle === vehicleName);
+  });
+}
+
 function updateViewAlerts(view) {
   const alertVehicles = vehicleNames.map(name => view.vehicles[name]).filter(v => v.presenceState === "possible" || v.presenceState === "covers");
   if (alertVehicles.length === 0) {
@@ -462,6 +471,7 @@ for (const view of views) {
     const button = event.target.closest(".offmap-indicator");
     if (!button) return;
     const v = view.vehicles[button.dataset.vehicle];
+    setActiveIndicator(view, v.name);
     renderSelectedVehicleInfo({
       name: v.name,
       viewLabel: view.label,
diff --git a/kort7/kort7.html b/kort7/kort7.html
index 4ff89b7..48651ac 100644
--- a/kort7/kort7.html
+++ b/kort7/kort7.html
@@ -107,11 +107,18 @@
       pointer-events: auto;
       cursor: pointer;
       text-align: left;
+      transition: transform 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
+    }
+
+    .offmap-indicator:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 8px 22px rgba(0,0,0,0.28);
     }
 
     .offmap-indicator.active {
-      outline: 2px solid rgba(255,255,255,0.9);
+      outline: 3px solid rgba(255,255,255,0.98);
       outline-offset: 2px;
+      transform: translateY(-1px) scale(1.02);
     }
 
     .offmap-indicator.covers {
diff --git a/kort7/tests/kort7.spec.js b/kort7/tests/kort7.spec.js
index e8ec00b..049af8d 100644
--- a/kort7/tests/kort7.spec.js
+++ b/kort7/tests/kort7.spec.js
@@ -37,6 +37,7 @@ test.describe('kort7 dual map demo', () => {
     await expect(selection).toContainText('Bil 9');
     await expect(selection).toContainText('Tilnærmet position');
     await expect(selection).toContainText('hjørneindikator');
+    await expect(indicator).toHaveClass(/active/);
   });
 
   test('renders uncertainty circles on the maps', async ({ page }) => {