Feature: improve inspectorGui: add search, placeholder, see #2353

This commit is contained in:
Pieter Vander Vennet 2025-03-13 23:42:52 +01:00
parent 0a67668bec
commit 589909ba44
5 changed files with 123 additions and 51 deletions

View file

@ -3,29 +3,34 @@
* Shows all the location-results
*/
import Translations from "../i18n/Translations"
import { Store } from "../../Logic/UIEventSource"
import SidebarUnit from "../Base/SidebarUnit.svelte"
import Loading from "../Base/Loading.svelte"
import { default as GeocodeResultSvelte } from "./GeocodeResult.svelte"
import Tr from "../Base/Tr.svelte"
import DotMenu from "../Base/DotMenu.svelte"
import { CogIcon } from "@rgossiaux/svelte-heroicons/solid"
import { TrashIcon } from "@babeard/svelte-heroicons/mini"
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
import type { GeocodeResult } from "../../Logic/Search/GeocodingProvider"
import { WithSearchState } from "../../Models/ThemeViewState/WithSearchState"
import type { MapProperties } from "../../Models/MapProperties"
export let state: WithSearchState
export let state: {
searchState: {
searchTerm: UIEventSource<string>
suggestions: Store<GeocodeResult[]>
suggestionsSearchRunning: Store<boolean>
}, mapProperties: MapProperties
}
let searchTerm = state.searchState.searchTerm
let results = state.searchState.suggestions
let isSearching = state.searchState.suggestionsSearchRunning
let recentlySeen: Store<GeocodeResult[]> = state.userRelatedState.recentlyVisitedSearch.value
let isSearching = state.searchState.suggestionsSearchRunning ?? new ImmutableStore(false)
const t = Translations.t.general.search
</script>
{#if $searchTerm.length > 0}
<SidebarUnit>
<h3><Tr t={t.locations} /></h3>
<h3>
<Tr t={t.locations} />
</h3>
{#if $results?.length > 0}
{#each $results as entry (entry)}
@ -41,35 +46,12 @@
</div>
{/if}
{#if !$isSearching && $results.length === 0}
{#if !$isSearching && $results?.length === 0}
<b class="flex justify-center p-4">
<Tr t={t.nothingFor.Subs({ term: "<i>" + $searchTerm + "</i>" })} />
</b>
{/if}
</SidebarUnit>
{:else if $recentlySeen?.length > 0}
<SidebarUnit>
<div class="flex justify-between">
<h3 class="m-2">
<Tr t={t.recents} />
</h3>
<DotMenu>
<button
on:click={() => {
state.userRelatedState.recentlyVisitedSearch.clear()
}}
>
<TrashIcon />
<Tr t={t.deleteSearchHistory} />
</button>
<button on:click={() => state.guistate.openUsersettings("sync-visited-locations")}>
<CogIcon />
<Tr t={t.editSearchSyncSettings} />
</button>
</DotMenu>
</div>
{#each $recentlySeen as entry (entry)}
<GeocodeResultSvelte {entry} {state} on:select />
{/each}
</SidebarUnit>
{:else}
<slot name="if-no-results" />
{/if}