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>