From c2051a665b053b8e3a82ab6ebfeb0f2653741be9 Mon Sep 17 00:00:00 2001
From: hermes-explorigin <tim+hermes@thecookiejar.me>
Date: Mon, 10 Aug 2026 21:21:12 +0000
Subject: [PATCH] feat(ui): add explicit X close buttons to context dialog,
 Preferences dialog, and Directions panel

---
 src/lib/components/DirectionsPanel.svelte | 18 +++++++++++++++---
 src/lib/components/LocationDialog.svelte  |  9 ++++++++-
 src/lib/components/MapView.svelte         | 14 ++++++++++++--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/DirectionsPanel.svelte b/src/lib/components/DirectionsPanel.svelte
index 121f1d8..d64d121 100644
--- a/src/lib/components/DirectionsPanel.svelte
+++ b/src/lib/components/DirectionsPanel.svelte
@@ -37,6 +37,8 @@
 		destination: { lat: number; lon: number; label?: string } | null;
 		/** Called whenever the destination should change. */
 		onDestinationChange: (d: { lat: number; lon: number; label?: string } | null) => void;
+		/** Called when the user closes the panel (X button). */
+		onClose: () => void;
 	}
 
 	let {
@@ -52,7 +54,8 @@
 		runRoute,
 		savedPoints = [],
 		destination = null,
-		onDestinationChange
+		onDestinationChange,
+		onClose
 	}: Props = $props();
 
 	// --- destination ---
@@ -231,7 +234,10 @@
 </script>
 
 <div class="dirs" role="dialog" aria-label="Directions">
-	<div class="dir-head">Directions</div>
+	<div class="dir-head-row">
+		<div class="dir-head">Directions</div>
+		<button class="dir-x" aria-label="Close directions" onclick={() => onClose()}>×</button>
+	</div>
 
 	<!-- Origin (already selected) -->
 	<div class="point"><span class="dot a"></span> A · {origin.label || `${origin.lat.toFixed(4)}, ${origin.lon.toFixed(4)}`}</div>
@@ -374,7 +380,13 @@
 		padding: 12px; min-width: 240px; max-width: 340px; font: 0.8rem system-ui, sans-serif; color: #0f172a;
 		box-sizing: border-box; max-height: 100%; overflow-y: auto;
 	}
-	.dir-head { font-weight: 700; margin-bottom: 8px; }
+	.dir-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+	.dir-head { font-weight: 700; margin: 0; }
+	.dir-x {
+		width: 26px; height: 26px; border: none; background: none; cursor: pointer;
+		font-size: 20px; line-height: 1; color: #64748b; border-radius: 6px; text-align: center; padding: 0; flex: none;
+	}
+	.dir-x:hover { background: #f1f5f9; color: #0f172a; }
 	.point { padding: 6px 8px; background: #f1f5f9; border-radius: 6px; margin: 4px 0; display: flex; align-items: center; gap: 6px; }
 	.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
 	.dot.a { background: #16a34a; } .dot.b { background: #dc2626; }
diff --git a/src/lib/components/LocationDialog.svelte b/src/lib/components/LocationDialog.svelte
index 0d43b43..919fc26 100644
--- a/src/lib/components/LocationDialog.svelte
+++ b/src/lib/components/LocationDialog.svelte
@@ -61,6 +61,7 @@
 	<button class="ctx-backdrop" aria-label="Close" onclick={() => onClose()}></button>
 	<div class="ctx" role="dialog" aria-label="Location" tabindex="-1" style="left:{LEFT}px; top:{TOP}px" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
 	<div class="ctx-arrow" style="left:{Math.min(Math.max(x - LEFT, 10), 268)}px"></div>
+	<button class="ctx-x" aria-label="Close" onclick={() => onClose()}>×</button>
 
 	{#if isPoint}
 		<div class="ctx-title">{title}</div>
@@ -132,7 +133,13 @@
 		position: absolute; top: -8px; width: 16px; height: 16px; background: #fff;
 		transform: translateX(-50%) rotate(45deg); border-radius: 3px; box-shadow: -2px -2px 6px rgba(0,0,0,.08);
 	}
-	.ctx-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
+	.ctx-x {
+		position: absolute; top: 6px; right: 8px; width: 24px; height: 24px;
+		border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1;
+		color: #64748b; border-radius: 6px; text-align: center; padding: 0;
+	}
+	.ctx-x:hover { background: #f1f5f9; color: #0f172a; }
+	.ctx-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; padding-right: 20px; }
 	.ctx-coords { color: #94a3b8; font-size: 0.72rem; margin-bottom: 8px; }
 	.ctx-id { color: #8b5cf6; font-size: 0.7rem; font-weight: 600; margin-bottom: 6px; }
 	.ctx-note { color: #64748b; font-size: 0.75rem; margin-bottom: 8px; }
diff --git a/src/lib/components/MapView.svelte b/src/lib/components/MapView.svelte
index f5c9943..a199cc9 100644
--- a/src/lib/components/MapView.svelte
+++ b/src/lib/components/MapView.svelte
@@ -632,6 +632,7 @@
 				savedPoints={savedPointsList}
 				destination={destination}
 				onDestinationChange={(d) => (destination = d)}
+				onClose={() => (showDirections = false)}
 				progress={routeProgress}
 				computing={computingRoute}
 				{runRoute}
@@ -645,7 +646,10 @@
 			onclick={() => (showPrefs = false)}
 			onkeydown={(e) => { if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); showPrefs = false; } }}>
 			<div class="pref-dialog" role="dialog" aria-label="Preferences" tabindex="-1" onclick={(e) => e.stopPropagation()}>
-				<div class="pref-title">Preferences</div>
+				<div class="pref-title-row">
+					<div class="pref-title">Preferences</div>
+					<button class="pref-x" aria-label="Close preferences" onclick={() => (showPrefs = false)}>×</button>
+				</div>
 				<div class="pref-row">
 					<span class="pref-label">Unit system</span>
 					<select bind:value={$prefs.system}>
@@ -769,7 +773,13 @@
 		box-shadow: 0 12px 40px rgba(0,0,0,.35); width: 300px; max-width: 90vw;
 		padding: 18px 20px; font-family: system-ui, sans-serif;
 	}
-	.pref-title { font-weight: 700; font-size: 1rem; margin-bottom: 12px; }
+	.pref-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+	.pref-title { font-weight: 700; font-size: 1rem; margin-bottom: 0; }
+	.pref-x {
+		width: 26px; height: 26px; border: none; background: none; cursor: pointer;
+		font-size: 20px; line-height: 1; color: #64748b; border-radius: 6px; text-align: center; padding: 0;
+	}
+	.pref-x:hover { background: #f1f5f9; color: #0f172a; }
 	.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
 	.pref-label { font-size: 0.82rem; color: #475569; }
 	.pref-row select {