switches to nominatim

web/src/lib/components/base/multi_select.svelte

@@ -8,7 +8,7 @@
         label?: string;
         name?: string;
         placeholder?: string;
-        onchange?: (value: SelectItem[]) => void
+        onchange?: (value: SelectItem[]) => void;
     }
 
     let {
@@ -17,7 +17,7 @@
         label = "",
         name = "",
         placeholder = "",
-        onchange
+        onchange,
     }: Props = $props();
 
     let showDropdown = $state(false);
@@ -51,7 +51,7 @@
     {/if}
     <div
         role="presentation"
-        class="min-w-44 w-full flex flex-wrap items-center gap-2 border border-input-border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
+        class="relative min-w-44 w-full flex flex-wrap items-center gap-2 border border-input-border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 cursor-pointer pr-6"
         onclick={() => (showDropdown = !showDropdown)}
     >
         {#if value.length === 0}
@@ -71,13 +71,17 @@
                 </button>
             </div>
         {/each}
+        <i
+            class="fa fa-caret-down absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 transition-transform"
+            class:rotate-180={showDropdown}
+        ></i>
     </div>
 
     <!-- Dropdown menu -->
     {#if showDropdown}
         <div
             bind:this={dropdownRef}
-            class="absolute z-10 mt-1 w-full bg-menu-background border border-input-border rounded-md max-h-40 overflow-y-auto"
+            class="absolute z-10 mt-1 w-full bg-menu-background border border-input-border rounded-md max-h-40 overflow-y-auto shadow-lg"
         >
             {#each items as item}
                 <button

web/src/lib/components/base/search.svelte

@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script module lang="ts">
     export type SearchItem = {
         text: string;
@@ -38,14 +37,16 @@
         clearAfterSelect = true,
         prepend,
         onupdate,
-        onclick
+        onclick,
     }: Props = $props();
 
     let lastSearch: string = "";
     let searching: boolean = $state(false);
     let typingTimer!: any;
 
-    let dropDownOpen = $derived(value.length > 0 && items.length > 0 && searching);
+    let dropDownOpen = $derived(
+        value.length > 0 && items.length > 0 && searching,
+    );
 
     function onSearchType() {
         clearTimeout(typingTimer);
@@ -131,8 +132,8 @@
                     onmousedown={(e) => handleItemClick(e, item)}
                     onkeydown={(e) => handleItemClick(e, item)}
                 >
-                    {#if prepend}{@render prepend({ item, })}{:else}
-                        <i class="fa fa-{item.icon} mr-6"></i>
+                    {#if prepend}{@render prepend({ item })}{:else}
+                        <i class="fa fa-{item.icon} basis-8 shrink-0"></i>
                     {/if}
 
                     <div>

web/src/lib/components/trail/trail_filter_panel.svelte

@@ -15,6 +15,8 @@
     import Slider from "../base/slider.svelte";
     import UserSearch from "../user_search.svelte";
     import { pb } from "$lib/pocketbase";
+    import { searchLocations } from "$lib/stores/search_store";
+    import { getIconForLocation } from "$lib/util/icon_util";
 
     interface Props {
         categories: Category[];
@@ -114,19 +116,13 @@
 
             return;
         }
-        const r = await fetch("/api/v1/search/cities500", {
-            method: "POST",
-            body: JSON.stringify({ q: q, options: { limit: 5 } }),
-        });
-        const result = await r.json();
+        const r = await searchLocations(q, 5);
 
-        searchDropdownItems = result.hits.map((h: Record<string, any>) => ({
+        searchDropdownItems = r.map((h) => ({
             text: h.name,
-            description: `${h.division ? `${h.division} | ` : ""}${
-                country_codes[h["country code"] as keyof typeof country_codes]
-            }`,
+            description: h.description,
             value: h,
-            icon: "city",
+            icon: getIconForLocation(h),
         }));
     }
 
@@ -221,7 +217,7 @@
                     <Search
                         items={searchDropdownItems}
                         label={$_("near")}
-                        placeholder="{$_('search-cities')}..."
+                        placeholder="{$_('search-places')}..."
                         clearAfterSelect={false}
                         bind:value={citySearchQuery}
                         onupdate={(q) => searchCities(q)}