Search: tweak search functions

src/UI/AllThemesGui.svelte

@@ -44,6 +44,8 @@
   let search: UIEventSource<string | undefined> = new UIEventSource<string>("")
   let searchStable = search.stabilized(100)
 
+  let searchIsFocused = new UIEventSource(true)
+
   const officialThemes: MinimalLayoutInformation[] = ThemeSearch.officialThemes.themes.filter(th => th.hideFromOverview === false)
   const hiddenThemes: MinimalLayoutInformation[] = ThemeSearch.officialThemes.themes.filter(th => th.hideFromOverview === true)
   let visitedHiddenThemes: Store<MinimalLayoutInformation[]> = UserRelatedState.initDiscoveredHiddenThemes(state.osmConnection)
@@ -135,7 +137,7 @@
       </div>
     </div>
 
-    <Searchbar value={search} placeholder={tr.searchForATheme} on:search={() => applySearch()}  />
+    <Searchbar value={search} placeholder={tr.searchForATheme} on:search={() => applySearch()} autofocus isFocused={searchIsFocussed} />
 
     <ThemesList {search} {state} themes={$officialSearched} />
 

src/UI/Base/Searchbar.svelte

@@ -20,6 +20,8 @@
   export let isFocused: UIEventSource<boolean> = undefined
   let inputElement: HTMLInputElement
 
+  export let autofocus = false
+
   isFocused?.addCallback(focussed => {
     if (focussed) {
       requestAnimationFrame(() => {
@@ -31,6 +33,10 @@
     }
   })
 
+  if(autofocus){
+    isFocused.set(true)
+  }
+
 </script>
 
 

src/UI/BigComponents/FilterPage.svelte

@@ -72,6 +72,7 @@
 
   {#each layout.layers as layer}
     <Filterview
+      {state}
       zoomlevel={state.mapProperties.zoom}
       filteredLayer={state.layerState.filteredLayers.get(layer.id)}
       highlightedLayer={state.guistate.highlightedLayerInFilters}

src/UI/BigComponents/Filterview.svelte

@@ -12,15 +12,17 @@
   import FilterviewWithFields from "./FilterviewWithFields.svelte"
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
-  import { Utils } from "../../Utils"
-  import Icon from "../Map/Icon.svelte"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
 
+  export let state: SpecialVisualizationState
   export let filteredLayer: FilteredLayer
   export let highlightedLayer: Store<string | undefined> = new ImmutableStore(undefined)
   export let zoomlevel: Store<number> = new ImmutableStore(22)
   let layer: LayerConfig = filteredLayer.layerDef
   let isDisplayed: UIEventSource<boolean> = filteredLayer.isDisplayed
 
+  let isDebugging = state.featureSwitches.featureSwitchIsDebugging
+
   /**
    * Gets a UIEventSource as boolean for the given option, to be used with a checkbox
    */
@@ -89,4 +91,8 @@
       </div>
     {/if}
   </div>
+{:else if $isDebugging}
+ <div class="code">
+  {layer.id} (no name)
+ </div>
 {/if}