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

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
                 )}
               >