chore: automated housekeeping...

src/UI/BigComponents/FilterPanel.svelte

@@ -53,31 +53,28 @@
     <Tr t={Translations.t.general.menu.filter} />
   </div>
 
-    {#each layout.layers as layer}
-      <Filterview
-        zoomlevel={state.mapProperties.zoom}
-        filteredLayer={state.layerState.filteredLayers.get(layer.id)}
-        highlightedLayer={state.guistate.highlightedLayerInFilters}
-      />
-    {/each}
-    <div class="mt-1 flex self-end">
-      <button class="small" class:disabled={allEnabled} on:click={() => enableAll(true)}>
-        <Tr t={Translations.t.general.filterPanel.enableAll} />
-      </button>
-      <button class="small" class:disabled={allDisabled} on:click={() => enableAll(false)}>
-        <Tr t={Translations.t.general.filterPanel.disableAll} />
-      </button>
-    </div>
-
-    {#each layout.tileLayerSources as tilesource}
-      <OverlayToggle
-        layerproperties={tilesource}
-        state={state.overlayLayerStates.get(tilesource.id)}
-        highlightedLayer={state.guistate.highlightedLayerInFilters}
-        zoomlevel={state.mapProperties.zoom}
-      />
-    {/each}
+  {#each layout.layers as layer}
+    <Filterview
+      zoomlevel={state.mapProperties.zoom}
+      filteredLayer={state.layerState.filteredLayers.get(layer.id)}
+      highlightedLayer={state.guistate.highlightedLayerInFilters}
+    />
+  {/each}
+  <div class="mt-1 flex self-end">
+    <button class="small" class:disabled={allEnabled} on:click={() => enableAll(true)}>
+      <Tr t={Translations.t.general.filterPanel.enableAll} />
+    </button>
+    <button class="small" class:disabled={allDisabled} on:click={() => enableAll(false)}>
+      <Tr t={Translations.t.general.filterPanel.disableAll} />
+    </button>
+  </div>
 
+  {#each layout.tileLayerSources as tilesource}
+    <OverlayToggle
+      layerproperties={tilesource}
+      state={state.overlayLayerStates.get(tilesource.id)}
+      highlightedLayer={state.guistate.highlightedLayerInFilters}
+      zoomlevel={state.mapProperties.zoom}
+    />
+  {/each}
 </TitledPanel>
-
-

src/UI/BigComponents/Filterview.svelte

@@ -43,13 +43,10 @@
 {#if filteredLayer.layerDef.name}
   <div class:focus={$highlightedLayer === filteredLayer.layerDef.id} class="mb-1.5">
     <Checkbox selected={isDisplayed}>
-      <div class="block h-6 w-6 no-image-background" class:opacity-50={!$isDisplayed}>
-        <ToSvelte
-          construct={() => layer.defaultIcon()}
-        />
+      <div class="no-image-background block h-6 w-6" class:opacity-50={!$isDisplayed}>
+        <ToSvelte construct={() => layer.defaultIcon()} />
       </div>
 
-
       <Tr t={filteredLayer.layerDef.name} />
 
       {#if $zoomlevel < layer.minzoom}

src/UI/BigComponents/HotkeyTable.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-
   import Hotkeys from "../Base/Hotkeys"
   import { Translation } from "../i18n/Translation"
   import { Utils } from "../../Utils"
@@ -10,14 +9,13 @@
   let keys = Hotkeys._docs
   const t = Translations.t.hotkeyDocumentation
 
-
   let byKey = Hotkeys.prepareDocumentation($keys)
   $: {
     byKey = Hotkeys.prepareDocumentation($keys)
   }
 </script>
-<AccordionSingle>
 
+<AccordionSingle>
   <div slot="header">
     <Tr t={t.title} />
   </div>
@@ -25,30 +23,27 @@
   <table>
     <tr>
       <th>
-    <Tr t={t.key}></Tr>
-    </th>
-    <th>
-      <Tr t={t.action} />
-    </th>
+        <Tr t={t.key} />
+      </th>
+      <th>
+        <Tr t={t.action} />
+      </th>
     </tr>
-    {#each byKey as [key, doc, alsoTriggeredBy] }
+    {#each byKey as [key, doc, alsoTriggeredBy]}
       <tr>
         <td class="flex items-center justify-center">
           {#if alsoTriggeredBy}
             <div class="flex items-center justify-center gap-x-1">
-
-              <div class="literal-code w-fit h-fit">{key}</div>
-              <div class="literal-code w-fit h-fit">{alsoTriggeredBy}</div>
-
+              <div class="literal-code h-fit w-fit">{key}</div>
+              <div class="literal-code h-fit w-fit">{alsoTriggeredBy}</div>
             </div>
-
           {:else}
-            <div class="literal-code w-fit h-fit flex items-center w-full">{key}</div>
+            <div class="literal-code flex h-fit w-fit w-full items-center">{key}</div>
           {/if}
         </td>
         <td>
-      <Tr t={doc} />
-      </td>
+          <Tr t={doc} />
+        </td>
       </tr>
     {/each}
   </table>

src/UI/BigComponents/SearchField.svelte

@@ -9,22 +9,19 @@
   import { ariaLabel } from "../../Utils/ariaLabel"
   import { Translation } from "../i18n/Translation"
 
-
-  const dispatch = createEventDispatcher<{search: string}>()
+  const dispatch = createEventDispatcher<{ search: string }>()
 
   export let searchValue: UIEventSource<string>
   export let placeholderText: Translation = Translations.t.general.search.search
   export let feedback = new UIEventSource<string>(undefined)
 
-
   let isRunning: boolean = false
 
   let inputElement: HTMLInputElement
 
-  function _performSearch(){
+  function _performSearch() {
     dispatch("search", searchValue.data)
   }
-
 </script>
 
 <div class="normal-background flex justify-between rounded-full">
@@ -32,21 +29,24 @@
     {#if isRunning}
       <Loading>{Translations.t.general.search.searching}</Loading>
     {:else}
-      <div class="flex w-full border border-gray-300 rounded-full">
-
-      <input
-        type="search"
-        class="w-full outline-none mx-2"
-        bind:this={inputElement}
-        on:keypress={(keypr) => {
-          feedback.set(undefined)
-          return keypr.key === "Enter" ? _performSearch() : undefined
-        }}
-        bind:value={$searchValue}
-        use:placeholder={placeholderText}
-        use:ariaLabel={Translations.t.general.search.search}
-      />
-  <SearchIcon aria-hidden="true" class="h-6 w-6 self-end" on:click={event => _performSearch()} />
+      <div class="flex w-full rounded-full border border-gray-300">
+        <input
+          type="search"
+          class="mx-2 w-full outline-none"
+          bind:this={inputElement}
+          on:keypress={(keypr) => {
+            feedback.set(undefined)
+            return keypr.key === "Enter" ? _performSearch() : undefined
+          }}
+          bind:value={$searchValue}
+          use:placeholder={placeholderText}
+          use:ariaLabel={Translations.t.general.search.search}
+        />
+        <SearchIcon
+          aria-hidden="true"
+          class="h-6 w-6 self-end"
+          on:click={(event) => _performSearch()}
+        />
       </div>
       {#if $feedback !== undefined}
         <!-- The feedback is _always_ shown for screenreaders and to make sure that the searchfield can still be selected by tabbing-->

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -73,7 +73,7 @@
   </div>
   <slot name="close-button">
     <div
-      class="mt-2 h-fit shrink-0 rounded-full border-none p-0 cursor-pointer"
+      class="mt-2 h-fit shrink-0 cursor-pointer rounded-full border-none p-0"
       on:click={() => state.selectedElement.setData(undefined)}
       style="border: 0 !important; padding: 0 !important;"
       use:ariaLabel={Translations.t.general.backToMap}

src/UI/BigComponents/SelectedElementView.svelte

@@ -22,7 +22,9 @@
     selectedElement.properties.id
   )
 
-  let isAddNew = tags.mapD(t => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false)
+  let isAddNew = tags.mapD(
+    (t) => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false
+  )
 
   function getLayer(properties: Record<string, string>) {
     if (properties.id === "settings") {
@@ -81,7 +83,6 @@
     class="selected-element-view flex h-full w-full flex-col gap-y-1 overflow-y-auto"
     class:p1={!$isAddNew}
     class:px-4={!$isAddNew}
-
     tabindex="-1"
   >
     {#each $knownTagRenderings as config (config.id)}