Feature: moving a point due to relocatoin now shows a searchbar (again)

src/UI/Base/Searchbar.svelte

@@ -46,7 +46,7 @@
   <label
     class="neutral-label normal-background box-shadow flex w-full items-center rounded-full border border-black"
   >
-    <SearchIcon aria-hidden="true" class="ml-2 h-8 w-8" />
+    <SearchIcon aria-hidden="true" class="ml-2 h-6 w-6 shrink-0" />
 
     <input
       bind:this={inputElement}
@@ -59,8 +59,11 @@
       type="search"
       style=" --tw-ring-color: rgb(0 0 0 / 0) !important;"
       class="ml-1 w-full border-none px-0 outline-none"
-      on:keypress={(keypr) => {
-        return keypr.key === "Enter" ? dispatch("search") : undefined
+      on:keypress={(event) => {
+        if( event.key === "Enter"){
+          dispatch("search")
+          event.preventDefault()
+        }
       }}
       bind:value={_value}
       use:set_placeholder={placeholder}
@@ -79,5 +82,6 @@
     {:else}
       <div class="mr-3 w-6" />
     {/if}
+    <slot name="button-right" />
   </label>
 </form>

src/UI/BigComponents/NewPointLocationInput.svelte

@@ -64,7 +64,7 @@
     undefined
   )
 
-  const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
+  export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
   export let mapProperties: Partial<MapProperties> & { location } = {
     zoom: new UIEventSource<number>(19),
     maxbounds: new UIEventSource(undefined),

src/UI/Popup/MoveWizard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import type { MoveReason } from "./MoveWizardState"
   import { MoveWizardState } from "./MoveWizardState"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
@@ -15,11 +15,18 @@
   import Constants from "../../Models/Constants"
   import LoginToggle from "../Base/LoginToggle.svelte"
   import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
+
+
   import ChevronLeft from "@babeard/svelte-heroicons/solid/ChevronLeft"
   import ThemeViewState from "../../Models/ThemeViewState"
   import Icon from "../Map/Icon.svelte"
   import NewPointLocationInput from "../BigComponents/NewPointLocationInput.svelte"
   import type { WayId } from "../../Models/OsmFeature"
+  import Searchbar from "../Base/Searchbar.svelte"
+  import { NominatimGeocoding } from "../../Logic/Search/NominatimGeocoding"
+  import Loading from "../Base/Loading.svelte"
+  import { Map as MlMap } from "maplibre-gl"
+  import type { GeocodeResult } from "../../Logic/Search/GeocodingProvider"
 
   export let state: ThemeViewState
 
@@ -37,8 +44,8 @@
 
   let snappedTo = new UIEventSource<WayId | undefined>(undefined)
 
-  function initMapProperties(reason: MoveReason) {
-    return <any>{
+  function initMapProperties(reason: MoveReason): Partial<MapProperties> & { location } {
+    return {
       allowMoving: new UIEventSource(true),
       allowRotating: new UIEventSource(false),
       allowZooming: new UIEventSource(true),
@@ -55,7 +62,30 @@
     reason.setData(moveWizardState.reasons[0])
   }
   let notAllowed = moveWizardState.moveDisallowedReason
-  let currentMapProperties: MapProperties = undefined
+  let currentMapProperties: Store<Partial<MapProperties> & { location }> = reason.mapD(r => initMapProperties(r))
+  let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
+
+
+  let searchValue = new UIEventSource<string>("")
+  let isSearching = new UIEventSource<boolean>(false)
+  const searcher = new NominatimGeocoding(1)
+
+
+  async function searchPressed() {
+    const v = searchValue.data
+    console.log("Search is pressed", v)
+    isSearching.set(true)
+    const result: GeocodeResult[] = await searcher.search(v)
+    isSearching.set(false)
+    if (result.length == 0 || currentMapProperties.data === undefined) {
+      return
+    }
+
+    const loc = result[0]
+    console.log("Found", result, "flying")
+    map.data.flyTo({ zoom: 18, center: [loc.lon, loc.lat] })
+  }
+
 </script>
 
 {#if moveWizardState.reasons.length > 0}
@@ -94,9 +124,23 @@
               </button>
             {/each}
           {:else if currentStep === "pick_location" || currentStep === "reason"}
+             {#if $reason.includeSearch}
+                <Searchbar value={searchValue} on:search={() => searchPressed()}>
+                  <svelte:fragment slot="button-right">
+                  {#if $isSearching}
+                      <Loading />
+                  {:else}
+                    <button class="primary" class:disabled={$searchValue.length === 0} on:click={() => searchPressed()}>
+                      <Tr t={Translations.t.general.search.searchShort} />
+                    </button>
+                  {/if}
+                  </svelte:fragment>
+                </Searchbar>
+             {/if}
             <div class="relative h-64 w-full">
               <NewPointLocationInput
-                mapProperties={(currentMapProperties = initMapProperties($reason))}
+                {map}
+                mapProperties={$currentMapProperties}
                 value={newLocation}
                 {state}
                 coordinate={{ lon, lat }}
@@ -112,13 +156,9 @@
               </div>
             </div>
 
-            {#if $reason.includeSearch}
-              <!-- TODO -->
-            {/if}
-
             <div class="flex flex-wrap">
               <If
-                condition={currentMapProperties.zoom.mapD(
+                condition={$currentMapProperties.zoom.mapD(
                   (zoom) => zoom >= Constants.minZoomLevelToAddNewPoint
                 )}
               >