From faf3734d161752758423e53fd12be990ebcf192e Mon Sep 17 00:00:00 2001
From: Ned Cutler <nedcut@gmail.com>
Date: Sat, 11 Jul 2026 16:23:55 -0400
Subject: [PATCH] Calm overview map markers

---
 components/DaySidebar.tsx    |  2 ++
 components/TripLayers.tsx    | 18 +++++++++------
 components/map-overrides.css | 32 ++++++++++++++++++++++----
 e2e/trip.spec.ts             |  8 +++++--
 lib/map-presentation.test.ts | 44 ++++++++++++++++++++++++++++++++++++
 lib/map-presentation.ts      | 25 ++++++++++++++++++++
 6 files changed, 116 insertions(+), 13 deletions(-)
 create mode 100644 lib/map-presentation.test.ts
 create mode 100644 lib/map-presentation.ts

diff --git a/components/DaySidebar.tsx b/components/DaySidebar.tsx
index b98fa70..c183a64 100644
--- a/components/DaySidebar.tsx
+++ b/components/DaySidebar.tsx
@@ -153,6 +153,7 @@ export function DayList({ days, dayStats, selectedDayId, onSelectDay, onStepDay,
       <div className="space-y-2">
         <button
           onClick={() => onSelectDay(null)}
+          aria-pressed={selectedDayId === null}
           className={cn(
             "w-full rounded-xl border px-4 py-3 text-left transition-all duration-150 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-teal-700/20",
             selectedDayId === null ? "border-teal-700/35 bg-teal-50 shadow-sm" : "border-stone-200 bg-white/75 hover:border-stone-300 hover:bg-white",
@@ -170,6 +171,7 @@ export function DayList({ days, dayStats, selectedDayId, onSelectDay, onStepDay,
             <div key={day.id} className="group relative">
               <button
                 onClick={() => onSelectDay(day.id)}
+                aria-pressed={selectedDayId === day.id}
                 className={cn(
                   "w-full rounded-xl border px-4 py-3 text-left transition-all duration-150 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-teal-700/20",
                   canPlay && "pr-14",
diff --git a/components/TripLayers.tsx b/components/TripLayers.tsx
index 74fae48..d80f92e 100644
--- a/components/TripLayers.tsx
+++ b/components/TripLayers.tsx
@@ -4,6 +4,7 @@ import mapboxgl from "mapbox-gl";
 import { useEffect, useMemo, useRef } from "react";
 import { friendlyPersonName } from "@/lib/display-name";
 import { noteFeatureCollection, photoFeatureCollection, placeFeatureCollection, routeFeatureCollection } from "@/lib/geo";
+import { PHOTO_CLUSTER_MAX_ZOOM, PHOTO_CLUSTER_RADIUS, photoMarkerPresentation } from "@/lib/map-presentation";
 import { formatDateTime } from "@/lib/utils";
 import type { Note, Photo, Place, RouteSegment } from "@/types/trip";
 
@@ -104,8 +105,8 @@ export function TripLayers({ map, routes, photos, notes, places, visibility, cur
           type: "geojson",
           data: photoData,
           cluster: true,
-          clusterMaxZoom: 17,
-          clusterRadius: 64,
+          clusterMaxZoom: PHOTO_CLUSTER_MAX_ZOOM,
+          clusterRadius: PHOTO_CLUSTER_RADIUS,
         });
         // This transparent layer gives queryRenderedFeatures a viewport-aware
         // view of both clusters and individual photos. The visible markers are
@@ -248,10 +249,10 @@ export function TripLayers({ map, routes, photos, notes, places, visibility, cur
       return closest;
     }
 
-    function createMarkerElement(photo: Photo, count: number) {
+    function createMarkerElement(photo: Photo, count: number, zoom: number) {
       const element = document.createElement("button");
       element.type = "button";
-      element.className = `lofoten-photo-marker${count > 1 ? " lofoten-photo-marker-cluster" : ""}`;
+      element.className = photoMarkerPresentation(zoom, count).className;
       const mediaNoun = photo.media_type === "video" ? "video" : "photo";
       element.setAttribute("aria-label", count > 1 ? `View cluster of ${count} media items` : `View ${photo.caption || `trip ${mediaNoun}`}`);
       const imageUrl = photo.media_type === "video" ? photo.thumbnail_url : (photo.thumbnail_url || photo.image_url);
@@ -286,6 +287,7 @@ export function TripLayers({ map, routes, photos, notes, places, visibility, cur
       const features = activeMap.queryRenderedFeatures({ layers: ["photos-hit"] });
       const seen = new Set<string>();
       const canvas = activeMap.getCanvas();
+      const zoom = activeMap.getZoom();
       for (const feature of features) {
         if (!feature.geometry || feature.geometry.type !== "Point") continue;
         const coordinates = feature.geometry.coordinates as [number, number];
@@ -306,7 +308,7 @@ export function TripLayers({ map, routes, photos, notes, places, visibility, cur
 
         if (!markers.has(key)) {
           const count = isCluster ? Number(feature.properties?.point_count) : 1;
-          const element = createMarkerElement(photo, count);
+          const element = createMarkerElement(photo, count, zoom);
           element.addEventListener("click", (event) => {
             event.stopPropagation();
             if (!isCluster) {
@@ -339,8 +341,10 @@ export function TripLayers({ map, routes, photos, notes, places, visibility, cur
           // genuine controls, so restore the button semantics after creation.
           element.setAttribute("role", "button");
           markers.set(key, marker);
-        } else if (key !== draggingKey) {
-          markers.get(key)?.setLngLat(coordinates);
+        } else {
+          const marker = markers.get(key);
+          marker?.getElement().classList.toggle("lofoten-photo-marker-overview", photoMarkerPresentation(zoom, isCluster ? Number(feature.properties?.point_count) : 1).isOverview);
+          if (key !== draggingKey) marker?.setLngLat(coordinates);
         }
       }
 
diff --git a/components/map-overrides.css b/components/map-overrides.css
index 9b6cb61..ebd2d28 100644
--- a/components/map-overrides.css
+++ b/components/map-overrides.css
@@ -43,8 +43,8 @@
 .mapboxgl-ctrl button { color: #1c1917 !important; }
 
 .lofoten-photo-marker {
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
   cursor: pointer;
   overflow: visible;
   border: 3px solid #fffdf6;
@@ -75,8 +75,8 @@
 }
 
 .lofoten-photo-marker-cluster {
-  width: 56px;
-  height: 56px;
+  width: 52px;
+  height: 52px;
 }
 
 .lofoten-photo-marker-cluster::before {
@@ -96,6 +96,30 @@
   background: #dbe7df;
 }
 
+/* At the whole-trip zoom, retain a 44px control while visually quieting the
+   thumbnail within it. Clusters use the same compact footprint, so a rich
+   archive reads as a handful of places rather than a wall of cards. */
+.lofoten-photo-marker-overview {
+  width: 44px;
+  height: 44px;
+  padding: 2px;
+  box-shadow:
+    0 2px 4px rgba(28, 25, 23, 0.16),
+    0 7px 15px rgba(46, 61, 54, 0.15);
+}
+
+.lofoten-photo-marker-overview img {
+  border-radius: 7px;
+}
+
+.lofoten-photo-marker-cluster.lofoten-photo-marker-overview::before {
+  transform: translate(3px, -3px) rotate(5deg);
+}
+
+.lofoten-photo-marker-cluster.lofoten-photo-marker-overview::after {
+  transform: translate(-3px, 3px) rotate(-4deg);
+}
+
 /* Pulsing ring around the photo currently open in the editor. The outer div is
    positioned by Mapbox (inline transform), so the animation lives on a child. */
 .lofoten-photo-highlight {
diff --git a/e2e/trip.spec.ts b/e2e/trip.spec.ts
index 87ed8ee..def4706 100644
--- a/e2e/trip.spec.ts
+++ b/e2e/trip.spec.ts
@@ -15,12 +15,16 @@ test.describe("desktop", { tag: "@desktop" }, () => {
 
   test("selecting a day filters and round-trips through the URL", async ({ page }) => {
     await page.goto("/");
-    await page.getByRole("button", { name: /Day 2: Kjerkfjorden hike/ }).click();
+    const dayTwo = page.getByRole("button", { name: /Day 2: Kjerkfjorden hike/ }).first();
+    const allDays = page.getByRole("button", { name: /All days/ }).first();
+    await dayTwo.click();
     await expect(page).toHaveURL(/day=/);
+    await expect(dayTwo).toHaveAttribute("aria-pressed", "true");
+    await expect(allDays).toHaveAttribute("aria-pressed", "false");
 
     // A reload of the shared URL must restore the same selection.
     await page.reload();
-    await expect(page.getByRole("button", { name: /Day 2: Kjerkfjorden hike/ })).toBeVisible();
+    await expect(page.getByRole("button", { name: /Day 2: Kjerkfjorden hike/ }).first()).toHaveAttribute("aria-pressed", "true");
   });
 
   test("day stepper walks from All days into day 1", async ({ page }) => {
diff --git a/lib/map-presentation.test.ts b/lib/map-presentation.test.ts
new file mode 100644
index 0000000..4d9bf4b
--- /dev/null
+++ b/lib/map-presentation.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import {
+  PHOTO_CLUSTER_MAX_ZOOM,
+  PHOTO_CLUSTER_RADIUS,
+  PHOTO_MARKER_OVERVIEW_ZOOM,
+  photoMarkerPresentation,
+} from "./map-presentation";
+
+describe("photo marker presentation", () => {
+  it("uses the calmer overview treatment below the detail threshold", () => {
+    const presentation = photoMarkerPresentation(PHOTO_MARKER_OVERVIEW_ZOOM - 0.01, 1);
+    expect(presentation).toEqual({
+      isCluster: false,
+      isOverview: true,
+      className: "lofoten-photo-marker lofoten-photo-marker-overview",
+    });
+  });
+
+  it("switches to the detail treatment at the threshold", () => {
+    expect(photoMarkerPresentation(PHOTO_MARKER_OVERVIEW_ZOOM, 1).isOverview).toBe(false);
+  });
+
+  it("distinguishes clusters without making their class depend on count size", () => {
+    expect(photoMarkerPresentation(10, 2).className).toBe(
+      "lofoten-photo-marker lofoten-photo-marker-cluster lofoten-photo-marker-overview",
+    );
+    expect(photoMarkerPresentation(10, 10_000).className).toBe(
+      "lofoten-photo-marker lofoten-photo-marker-cluster lofoten-photo-marker-overview",
+    );
+  });
+
+  it("falls back to the detail treatment for invalid zoom and a single marker for invalid count", () => {
+    expect(photoMarkerPresentation(Number.NaN, Number.NaN)).toEqual({
+      isCluster: false,
+      isOverview: false,
+      className: "lofoten-photo-marker",
+    });
+  });
+
+  it("keeps the shared Mapbox cluster settings deliberate", () => {
+    expect(PHOTO_CLUSTER_RADIUS).toBe(80);
+    expect(PHOTO_CLUSTER_MAX_ZOOM).toBe(17);
+  });
+});
diff --git a/lib/map-presentation.ts b/lib/map-presentation.ts
new file mode 100644
index 0000000..aeb8c51
--- /dev/null
+++ b/lib/map-presentation.ts
@@ -0,0 +1,25 @@
+export const PHOTO_CLUSTER_RADIUS = 80;
+export const PHOTO_CLUSTER_MAX_ZOOM = 17;
+export const PHOTO_MARKER_OVERVIEW_ZOOM = 12;
+
+export type PhotoMarkerPresentation = {
+  isCluster: boolean;
+  isOverview: boolean;
+  className: string;
+};
+
+// Keep the zoom-dependent marker decision outside the Mapbox effect so the
+// overview/detail boundary remains explicit and independently testable.
+export function photoMarkerPresentation(zoom: number, count: number): PhotoMarkerPresentation {
+  const isCluster = Number.isFinite(count) && count > 1;
+  const isOverview = Number.isFinite(zoom) && zoom < PHOTO_MARKER_OVERVIEW_ZOOM;
+  return {
+    isCluster,
+    isOverview,
+    className: [
+      "lofoten-photo-marker",
+      isCluster ? "lofoten-photo-marker-cluster" : null,
+      isOverview ? "lofoten-photo-marker-overview" : null,
+    ].filter(Boolean).join(" "),
+  };
+}