feat(map): simplify search UX/UI

package.json

@@ -37,8 +37,6 @@
 		"@nazka/map-gl-js-spiderfy": "^2.0.0",
 		"@tanstack/match-sorter-utils": "^8.19.4",
 		"@tanstack/svelte-table": "^8.21.3",
-		"@turf/convex": "^7.3.5",
-		"@turf/helpers": "^7.3.5",
 		"@zerodevx/svelte-toast": "^0.9.6",
 		"axios": "^1.15.0",
 		"axios-retry": "^4.5.0",

src/components/CollapseButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import Icon from "$components/Icon.svelte";
+
+// Collapse caret used by the bottom drawers/sheets (merchant drawer, search
+// sheet). A round light background makes it read as a button. pointerdown is
+// stopped so pressing it never starts a sheet drag.
+export let onClick: () => void;
+export let ariaLabel: string;
+let className = "";
+
+export { className as class };
+</script>
+
+<button
+	type="button"
+	on:pointerdown|stopPropagation
+	on:click={onClick}
+	class="grid h-8 w-8 touch-auto place-items-center rounded-full bg-gray-100 text-primary transition-colors hover:bg-gray-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 {className}"
+	aria-label={ariaLabel}
+	{...$$restProps}
+>
+	<Icon w="20" h="20" icon="keyboard_arrow_down" type="material" />
+</button>

src/components/LoadingIndicator.svelte

@@ -6,14 +6,17 @@ import LoadingSpinner from "$components/LoadingSpinner.svelte";
 export let visible = false;
 export let status = "";
 export let progress: number | undefined = undefined;
+// Bottom/left position classes — overridable so the map's tile indicator can
+// clear the anchored search sheet on mobile.
+export let positionClass = "bottom-6 left-2 md:bottom-8 md:left-4";
 </script>
 
 {#if visible}
 	<div
 		role="status"
 		aria-live="polite"
 		transition:fade={{ duration: 200 }}
-		class="pointer-events-none fixed bottom-6 left-2 z-[1000] flex items-center gap-1.5 rounded-md bg-white px-2 py-1.5 shadow-lg md:bottom-8 md:left-4 md:gap-2 md:rounded-lg md:px-3 md:py-2 dark:border dark:border-white/20 dark:bg-dark"
+		class="pointer-events-none fixed z-[1000] flex items-center gap-1.5 rounded-md bg-white px-2 py-1.5 shadow-lg md:gap-2 md:rounded-lg md:px-3 md:py-2 dark:border dark:border-white/20 dark:bg-dark {positionClass}"
 	>
 		<LoadingSpinner size="h-3 w-3 md:h-4 md:w-4" color="text-link" />
 		<span class="text-xs text-primary md:text-sm dark:text-white">

src/components/SearchInput.svelte

@@ -5,6 +5,9 @@ export let value: string = "";
 export let placeholder: string = "";
 export let ariaLabel: string = "Search";
 export let rounded: boolean = false;
+// Filled-field variant: gives the input a grey rounded surface so it reads
+// clearly as a tappable search field (used inside the merchant list panel)
+export let filled: boolean = false;
 
 let inputElement: HTMLInputElement;
 
@@ -30,10 +33,14 @@ export function focus() {
 		type="search"
 		{placeholder}
 		aria-label={ariaLabel}
-		class="w-full border-0 bg-transparent py-3 pr-10 pl-10 text-base text-primary outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-white/50 [&::-webkit-search-cancel-button]:hidden
-			{rounded ? 'rounded-lg' : ''}"
+		class="w-full border-0 py-3 pr-10 pl-10 text-base text-primary outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-white/50 [&::-webkit-search-cancel-button]:hidden
+			{rounded ? 'rounded-lg' : ''}
+			{filled ? 'rounded-xl bg-gray-100 dark:bg-white/5' : 'bg-transparent'}"
 	/>
-	<div class="absolute top-1/2 right-3 -translate-y-1/2">
+	<!-- pointer-events-none so passive content (count pill, spinner) doesn't
+	     block taps on the input underneath; interactive slotted buttons must
+	     re-enable with pointer-events-auto -->
+	<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
 		<slot name="trailing" />
 	</div>
 </div>

src/lib/analytics.ts

@@ -6,13 +6,14 @@ import { dev } from "$app/environment";
 
 const ANALYTICS_HOSTNAME = "btcmap.org";
 
-type EventName =
+export type EventName =
 	| "search_query"
 	| "search_input_focus"
+	| "search_sheet_swipe_expand"
+	| "search_sheet_swipe_collapse"
+	| "search_sheet_tap_expand"
 	| "category_filter"
 	| "boost_layer_toggle"
-	| "worldwide_mode_click"
-	| "nearby_mode_click"
 	| "home_button_click"
 	| "show_all_on_map_click"
 	| "merchant_list_item_click"

src/lib/constants.ts

@@ -42,7 +42,7 @@ export const MAP_FIT_BOUNDS_PADDING = 50;
 // MERCHANT LIST ZOOM BEHAVIOR:
 // ┌─────────────────────────────────────────────────────────────────────────┐
 // │ Zoom < 10  │ No data shown - "zoom in" message                          │
-// │ Zoom 10-14 │ API search (1.5x radius): nearest 99; "zoom in" if >750     │
+// │ Zoom 10-14 │ API search (1.5x radius): nearest 250; "zoom in" if >750    │
 // │ Zoom 15+   │ Use loaded markers with 1.5x bounds, names visible, enrich when open      │
 // └─────────────────────────────────────────────────────────────────────────┘
 // All zoom levels use 1.5x radius multiplier for consistent "nearby" count.
@@ -66,16 +66,18 @@ export const MERCHANT_LIST_MIN_ZOOM = 15;
 // matches exceed MERCHANT_LIST_FETCH_CEILING (a payload guard).
 export const MERCHANT_LIST_LOW_ZOOM = 10;
 
-// Max merchants to display in list and count shown on button
-// When count exceeds this, button shows ">99" and list shows 99 items
-export const MERCHANT_LIST_MAX_ITEMS = 99;
+// Max merchants to display in the nearby list and count shown on the badge.
+// When the count exceeds this, the badge shows ">250" and the list renders
+// the nearest 250 rows. (Worldwide search results are uncapped; this only
+// bounds the at-rest nearby browse list.)
+export const MERCHANT_LIST_MAX_ITEMS = 250;
 
 // Relevance/render guard for the low-zoom API search: above this many matches
 // we blank the list and show "zoom in" rather than render an unhelpfully dense
 // set. Applied client-side AFTER the full response is fetched, so it does not
 // reduce the download — a server-side distance-sorted limit would be needed for
 // that. Distinct from MERCHANT_LIST_MAX_ITEMS (the display/slice cap) and far
-// higher, so dense areas show the nearest 99 rather than blanking.
+// higher, so dense areas show the nearest 250 rather than blanking.
 export const MERCHANT_LIST_FETCH_CEILING = 750;
 
 // Radius multiplier for "nearby" search (extends beyond viewport for context)

src/lib/drawerConfig.ts

@@ -1,8 +1,15 @@
 // Drawer gesture configuration constants
 // These values control the behavior of the mobile drawer's swipe gestures
 
-// Drawer height states
-export const PEEK_HEIGHT = 140; // Collapsed state height - shows merchant name and quick info
+// Peek (collapsed) heights for the two bottom sheets.
+// Merchant drawer: bottom-anchored, full-width; shows name + payment/verify row
+// (snug — no trailing swipe hint).
+export const PEEK_HEIGHT = 110;
+// Search sheet: bottom-anchored, full-width (like the merchant drawer); peek
+// shows the grabber + single input. Rounded top corners at peek, square once
+// expanded. Tall enough that the input clears the bottom gesture bar / curved
+// corners on bezelled phones (the facade also adds a safe-area bottom inset).
+export const SEARCH_SHEET_PEEK_HEIGHT = 88;
 
 // Gesture thresholds
 export const VELOCITY_THRESHOLD = 0.5; // px/ms - minimum velocity for flick gesture detection