From d3a836ee6032252f6e9fa4ff6772c276ee070282 Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Mon, 2 Feb 2026 20:43:34 +0100
Subject: [PATCH] feat(map): make zoom-in message clickable

---
 src/routes/map/+page.svelte                   | 22 +++++++++++++++++++
 .../map/components/MerchantListPanel.svelte   | 18 ++++++++-------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte
index ec97a29e9..51a88d75d 100644
--- a/src/routes/map/+page.svelte
+++ b/src/routes/map/+page.svelte
@@ -20,6 +20,7 @@
 		CLUSTERING_DISABLED_ZOOM,
 		BOOSTED_CLUSTERING_MAX_ZOOM,
 		MERCHANT_LIST_LOW_ZOOM,
+		MERCHANT_LIST_MIN_ZOOM,
 		MERCHANT_LIST_MAX_ITEMS,
 		NEARBY_RADIUS_MULTIPLIER,
 		MAX_LOADED_MARKERS,
@@ -877,6 +878,26 @@
 		navigateToPlace(place, { targetZoom: 19 });
 	};
 
+	// Zoom to nearby level (when user clicks "zoom in" message)
+	const zoomToNearbyLevel = () => {
+		if (!map || !browser) return;
+
+		trackEvent('zoom_in_click');
+
+		// Get current map center and zoom to MERCHANT_LIST_MIN_ZOOM (15)
+		const currentCenter = map.getCenter();
+		const { visibleCenterX, mapSize } = getPanelOffset();
+
+		// Calculate offset at target zoom level
+		const offsetX = mapSize.x / 2 - visibleCenterX;
+		const targetPoint = map.project([currentCenter.lat, currentCenter.lng], MERCHANT_LIST_MIN_ZOOM);
+		const offsetPoint = leaflet.point(targetPoint.x + offsetX, targetPoint.y);
+		const offsetLatLng = map.unproject(offsetPoint, MERCHANT_LIST_MIN_ZOOM);
+
+		// Animate to the new view with panel offset compensation
+		map.setView(offsetLatLng, MERCHANT_LIST_MIN_ZOOM, { animate: true, duration: 0.3 });
+	};
+
 	const initializeElements = async () => {
 		if (elementsLoaded) {
 			return;
@@ -1347,6 +1368,7 @@
 	<MerchantListPanel
 		onPanToNearbyMerchant={panToNearbyMerchant}
 		onZoomToSearchResult={zoomToSearchResult}
+		onZoomToNearbyLevel={zoomToNearbyLevel}
 		onFitSearchResultBounds={fitBoundsToSearchResults}
 		onHoverStart={(place) => highlightMarker(loadedMarkers, place.id)}
 		onHoverEnd={(place) => {
diff --git a/src/routes/map/components/MerchantListPanel.svelte b/src/routes/map/components/MerchantListPanel.svelte
index 715be7614..f0e81b837 100644
--- a/src/routes/map/components/MerchantListPanel.svelte
+++ b/src/routes/map/components/MerchantListPanel.svelte
@@ -27,6 +27,8 @@
 	export let onPanToNearbyMerchant: ((place: Place) => void) | undefined = undefined;
 	// Callback to zoom to a search result (may be far away, need to fly there)
 	export let onZoomToSearchResult: ((place: Place) => void) | undefined = undefined;
+	// Callback to zoom to nearby level (when user clicks "zoom in" message)
+	export let onZoomToNearbyLevel: (() => void) | undefined = undefined;
 	// Callbacks for hover highlighting
 	export let onHoverStart: ((place: Place) => void) | undefined = undefined;
 	export let onHoverEnd: ((place: Place) => void) | undefined = undefined;
@@ -456,15 +458,15 @@
 					</ul>
 				{/if}
 			{:else if showZoomInMessage}
-				<!-- Nearby mode: zoom in message -->
+				<!-- Nearby mode: zoom in message (only icon is clickable) -->
 				<div class="flex flex-col items-center justify-center gap-3 px-4 py-12 text-center">
-					<Icon
-						w="48"
-						h="48"
-						icon="zoom_in"
-						type="material"
-						class="text-gray-300 dark:text-white/30"
-					/>
+					<button
+						on:click={onZoomToNearbyLevel}
+						class="rounded-full p-2 transition-colors hover:bg-gray-100 focus:ring-2 focus:ring-primary/20 focus:outline-none dark:hover:bg-white/10"
+						aria-label="Zoom in to see nearby merchants"
+					>
+						<Icon w="48" h="48" icon="zoom_in" type="material" class="text-link dark:text-white" />
+					</button>
 					<div>
 						<p class="text-sm font-medium text-primary dark:text-white">
 							Zoom in to see nearby merchants