From ee2b3ce3298b4edb7dea7bdb13ed2f93eb05fafb Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 6 Sep 2024 23:01:00 +0200
Subject: [PATCH] Search results: add menu, update searchers

---
 .../TiledFeatureSource/SummaryTileSource.ts   |  3 --
 src/Logic/Geocoding/RecentSearch.ts           |  5 +--
 src/Logic/State/SearchState.ts                | 16 ++++++----
 src/Models/Constants.ts                       |  4 +--
 src/Models/ThemeViewState.ts                  |  5 ++-
 src/UI/Base/DotMenu.svelte                    | 27 ++++++++++++++++
 src/UI/Base/SidebarUnit.svelte                |  8 ++---
 src/UI/BigComponents/MenuDrawer.svelte        |  4 +--
 src/UI/Search/SearchResults.svelte            | 32 +++++++++++++------
 src/UI/Search/ThemeResult.svelte              | 25 ++++++++-------
 10 files changed, 88 insertions(+), 41 deletions(-)
 create mode 100644 src/UI/Base/DotMenu.svelte

diff --git a/src/Logic/FeatureSource/TiledFeatureSource/SummaryTileSource.ts b/src/Logic/FeatureSource/TiledFeatureSource/SummaryTileSource.ts
index c0dcb8bb7..fcdf7e819 100644
--- a/src/Logic/FeatureSource/TiledFeatureSource/SummaryTileSource.ts
+++ b/src/Logic/FeatureSource/TiledFeatureSource/SummaryTileSource.ts
@@ -78,9 +78,6 @@ export class SummaryTileSource extends DynamicTileSource {
             isActive?: Store<boolean>
         }
     ) {
-        if(layers.length === 0){
-            return
-        }
         const layersSummed = layers.join("+")
         const zDiff = 2
         super(
diff --git a/src/Logic/Geocoding/RecentSearch.ts b/src/Logic/Geocoding/RecentSearch.ts
index f9f7732ed..3a2a13041 100644
--- a/src/Logic/Geocoding/RecentSearch.ts
+++ b/src/Logic/Geocoding/RecentSearch.ts
@@ -61,6 +61,7 @@ export class RecentSearch {
             const [lon, lat] = GeoOperations.centerpointCoordinates(selected)
             const entry = <GeocodeResult>{
                 feature: selected,
+                display_name: selected.properties.name ?? selected.properties.alt_name ?? selected.properties.local_name,
                 osm_id, osm_type,
                 lon, lat,
             }
@@ -70,9 +71,9 @@ export class RecentSearch {
     }
 
     addSelected(entry: GeocodeResult) {
-        const id = entry.osm_type+entry.osm_id
+        const id = entry.osm_type + entry.osm_id
         const arr = [...(this.seenThisSession.data.reverse() ?? []).slice(0, 5)]
-            .filter(e => e.osm_type+e.osm_id !== id)
+            .filter(e => e.osm_type + e.osm_id !== id)
 
         this.seenThisSession.set([entry, ...arr])
     }
diff --git a/src/Logic/State/SearchState.ts b/src/Logic/State/SearchState.ts
index 57e0c7ebe..7d9b6a1ec 100644
--- a/src/Logic/State/SearchState.ts
+++ b/src/Logic/State/SearchState.ts
@@ -138,20 +138,24 @@ export default class SearchState {
         if (query === "") {
             return
         }
+
+
+
         const geolocationState = this.state.geolocation.geolocationState
-        const searcher = this.state.searchState.geosearch
         const bounds = this.state.mapProperties.bounds
         const bbox = this.state.mapProperties.bounds.data
         try {
             this.isSearching.set(true)
             geolocationState?.allowMoving.setData(true)
             geolocationState?.requestMoment.setData(undefined) // If the GPS is still searching for a fix, we say that we don't want tozoom to it anymore
-            const result = await searcher.search(query, { bbox })
-            if (result.length == 0) {
-                this.feedback.set(Translations.t.general.search.nothing)
-                return false
+            let poi: SearchResult
+            if(this.suggestions.data){
+                poi = this.suggestions.data[0]
+            }else{
+                const results = GeocodingUtils.mergeSimilarResults([].concat(...await Promise.all(this.locationSearchers.map(ls => ls.search(query, { bbox: bounds.data })))))
+                poi = results[0]
             }
-            const poi = result[0]
+
             if (poi.category === "theme") {
                 const theme = <MinimalLayoutInformation>poi.payload
                 const url = MoreScreen.createUrlFor(theme)
diff --git a/src/Models/Constants.ts b/src/Models/Constants.ts
index ed02d1d00..cbadf5f5a 100644
--- a/src/Models/Constants.ts
+++ b/src/Models/Constants.ts
@@ -26,7 +26,6 @@ export default class Constants {
         "last_click",
         "favourite",
         "summary",
-        "search"
     ] as const
     /**
      * Special layers which are not included in a theme by default
@@ -39,7 +38,8 @@ export default class Constants {
         "import_candidate",
         "usersettings",
         "icons",
-        "filters"
+        "filters",
+        "search"
     ] as const
     /**
      * Layer IDs of layers which have special properties through built-in hooks
diff --git a/src/Models/ThemeViewState.ts b/src/Models/ThemeViewState.ts
index 0bff70de7..9d2f8d2aa 100644
--- a/src/Models/ThemeViewState.ts
+++ b/src/Models/ThemeViewState.ts
@@ -554,6 +554,10 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 this.previewedImage.setData(undefined)
                 return
             }
+            if(this.selectedElement.data){
+                this.selectedElement.setData(undefined)
+                return
+            }
             if (this.searchState.showSearchDrawer.data){
                 this.searchState.showSearchDrawer.set(false)
                 return
@@ -561,7 +565,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
             if (this.guistate.closeAll()){
                return
             }
-            this.selectedElement.setData(undefined)
             Zoomcontrol.resetzoom()
             this.focusOnMap()
         })
diff --git a/src/UI/Base/DotMenu.svelte b/src/UI/Base/DotMenu.svelte
new file mode 100644
index 000000000..fde781970
--- /dev/null
+++ b/src/UI/Base/DotMenu.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import DotsCircleHorizontal from "@rgossiaux/svelte-heroicons/solid/DotsCircleHorizontal"
+  import { Dropdown } from "flowbite-svelte"
+  import { TrashIcon } from "@babeard/svelte-heroicons/mini"
+  import SidebarUnit from "./SidebarUnit.svelte"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+
+  /**
+   * A menu, opened by a dot
+   */
+  export let dotColor = "var(--background-interactive)"
+  export let placement: "left" | "right" | "top" | "bottom" = "left"
+
+  export let isOpen : UIEventSource<boolean> = new UIEventSource<boolean>(false)
+  let _isOpen = isOpen.data
+  $: {
+    console.log("is open?", _isOpen)
+    isOpen.set(_isOpen)
+  }
+</script>
+
+<DotsCircleHorizontal class="w-6 h-6 dots-menu-themes transition-colors"  color={$isOpen ? "black": "var(--interactive-background)"} />
+<Dropdown placement="left" bind:open={_isOpen} triggeredBy=".dots-menu-themes" containerClass="p-1 border border-2 border-gray button-unstyled">
+  <SidebarUnit>
+    <slot />
+  </SidebarUnit>
+</Dropdown>
diff --git a/src/UI/Base/SidebarUnit.svelte b/src/UI/Base/SidebarUnit.svelte
index 97f43e19b..aa1b8fcdc 100644
--- a/src/UI/Base/SidebarUnit.svelte
+++ b/src/UI/Base/SidebarUnit.svelte
@@ -18,7 +18,7 @@
         padding: 0.25rem;
     }
 
-    :global(.sidebar-button svg, .sidebar-button img) {
+    :global(.sidebar-button svg, .sidebar-button img, .sidebar-unit > button img, .sidebar-unit > button svg) {
         width: 1.5rem;
         height: 1.5rem;
         margin-right: 0.5rem;
@@ -32,7 +32,7 @@
     }
 
 
-    :global(.sidebar-button, .sidebar-unit > a) {
+    :global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
         display: flex;
         align-items: center;
         border-radius: 0.25rem !important;
@@ -42,12 +42,12 @@
         text-align: start;
     }
 
-    :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit > a img, .sidebar-unit > a svg) {
+    :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit > a img, .sidebar-unit > a svg, .sidebar-unit > button svg, .sidebar-unit > button img) {
         margin-right: 0.5rem;
         flex-shrink: 0;
     }
 
-    :global(.sidebar-button:hover, .sidebar-unit > a:hover) {
+    :global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
         background: var(--low-interaction-background) !important;
     }
 
diff --git a/src/UI/BigComponents/MenuDrawer.svelte b/src/UI/BigComponents/MenuDrawer.svelte
index c7ce90b7d..b9c27b660 100644
--- a/src/UI/BigComponents/MenuDrawer.svelte
+++ b/src/UI/BigComponents/MenuDrawer.svelte
@@ -158,11 +158,11 @@
 
     <Page {onlyLink} shown={pg.about_theme}>
       <svelte:fragment slot="link">
-        <Marker icons={layout.icon} />
+        <Marker size="h-6 w-6 mr-2" icons={layout.icon} />
         <Tr t={t.showIntroduction} />
       </svelte:fragment>
       <svelte:fragment slot="header">
-        <Marker size="h-6 w-6 mr-2"  icons={layout.icon} />
+        <Marker size="h-8 w-8 mr-3" icons={layout.icon} />
         <Tr t={layout.title} />
       </svelte:fragment>
       <ThemeIntroPanel {state} />
diff --git a/src/UI/Search/SearchResults.svelte b/src/UI/Search/SearchResults.svelte
index 8c5d0e9ce..201fdc1b9 100644
--- a/src/UI/Search/SearchResults.svelte
+++ b/src/UI/Search/SearchResults.svelte
@@ -15,6 +15,10 @@
   import ThemeResult from "./ThemeResult.svelte"
   import SidebarUnit from "../Base/SidebarUnit.svelte"
   import { TrashIcon } from "@babeard/svelte-heroicons/mini"
+  import { Dropdown, DropdownItem } from "flowbite-svelte"
+  import DotsCircleHorizontal from "@rgossiaux/svelte-heroicons/solid/DotsCircleHorizontal"
+  import DotMenu from "../Base/DotMenu.svelte"
+  import { CogIcon } from "@rgossiaux/svelte-heroicons/solid"
 
   export let state: ThemeViewState
   let activeFilters: Store<ActiveFilter[]> = state.layerState.activeFilters.map(fs => fs.filter(f => Constants.priviliged_layers.indexOf(<any>f.layer.id) < 0))
@@ -90,11 +94,11 @@
       <h3 class="m-2">
         <Tr t={Translations.t.general.search.recents} />
       </h3>
-      {#each $recentlySeen as entry}
+      {#each $recentlySeen as entry (entry)}
         <SearchResultSvelte {entry} {state} on:select />
       {/each}
       <button class="as-link flex self-end" on:click={() => {recentlySeen.set([])}}>
-        <TrashIcon class="w-4 h-4"/>
+        <TrashIcon class="w-4 h-4" />
         Delete history
       </button>
     </SidebarUnit>
@@ -102,19 +106,29 @@
 
   {#if $searchTerm.length === 0 && $recentThemes?.length > 0 && $allowOtherThemes}
     <SidebarUnit>
-      <h3 class="m-2">
-        <Tr t={Translations.t.general.search.recentThemes} />
-      </h3>
+      <div class="flex w-full justify-between">
+
+        <h3 class="m-2">
+          <Tr t={Translations.t.general.search.recentThemes} />
+        </h3>
+        <DotMenu>
+          <button on:click={() => {state.userRelatedState.recentlyVisitedThemes.set([])}}>
+            <TrashIcon />
+            Delete earlier visited themes
+          </button>
+          <button>
+            <CogIcon/>
+            Edit sync settings
+          </button>
+        </DotMenu>
+      </div>
       {#each $recentThemes as themeId (themeId)}
         <SearchResultSvelte
           entry={{payload: MoreScreen.officialThemesById.get(themeId), osm_id: themeId, category: "theme"}}
           {state}
           on:select />
       {/each}
-      <button class="as-link flex self-end" on:click={() => {state.userRelatedState.recentlyVisitedThemes.set([])}}>
-        <TrashIcon class="w-4 h-4"/>
-        Delete history
-      </button>
+
     </SidebarUnit>
   {/if}
 
diff --git a/src/UI/Search/ThemeResult.svelte b/src/UI/Search/ThemeResult.svelte
index 335593251..389dd36bb 100644
--- a/src/UI/Search/ThemeResult.svelte
+++ b/src/UI/Search/ThemeResult.svelte
@@ -5,18 +5,19 @@
   import Icon from "../Map/Icon.svelte"
   import Tr from "../Base/Tr.svelte"
 
-  export let entry:   MinimalLayoutInformation
+  export let entry: MinimalLayoutInformation
   let otherTheme = entry
 </script>
+{#if entry}
+  <a href={MoreScreen.createUrlFor(otherTheme)}
+     class="flex items-center p-2 w-full gap-y-2 rounded-xl searchresult">
 
-<a href={MoreScreen.createUrlFor(otherTheme, false)}
-   class="flex items-center p-2 w-full gap-y-2 rounded-xl searchresult">
-
-  <Icon icon={otherTheme.icon} clss="w-6 h-6 m-1" />
-  <div class="flex flex-col">
-    <b>
-      <Tr t={new Translation(otherTheme.title)} />
-    </b>
-    <!--<Tr t={new Translation(otherTheme.shortDescription)} /> -->
-  </div>
-</a>
+    <Icon icon={otherTheme.icon} clss="w-6 h-6 m-1" />
+    <div class="flex flex-col">
+      <b>
+        <Tr t={new Translation(otherTheme.title)} />
+      </b>
+      <!--<Tr t={new Translation(otherTheme.shortDescription)} /> -->
+    </div>
+  </a>
+{/if}