Chore: run prettier

UI/Base/BackButton.svelte

@@ -14,7 +14,8 @@
 
 <SubtleButton
   on:click={() => dispatch("click")}
-  options={{ extraClasses: twMerge("flex items-center", clss) }}>
+  options={{ extraClasses: twMerge("flex items-center", clss) }}
+>
   <ChevronLeftIcon class="h-12 w-12" slot="image" />
   <slot slot="message" />
 </SubtleButton>

UI/Base/DragInvitation.svelte

@@ -15,7 +15,7 @@
   if (hideSignal) {
     onDestroy(
       hideSignal.addCallbackD(() => {
-        if(initTime + 1000 > Date.now()){
+        if (initTime + 1000 > Date.now()) {
           console.log("Ignoring hide signal")
           return
         }
@@ -32,7 +32,7 @@
   }
 </script>
 
-<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full pointer-events-none">
+<div bind:this={mainElem} class="pointer-events-none absolute bottom-0 right-0 h-full w-full">
   <div id="hand-container">
     <img src="./assets/svg/hand.svg" />
   </div>

UI/Base/MapControlButton.svelte

@@ -11,6 +11,7 @@
 
 <button
   on:click={(e) => dispatch("click", e)}
-  class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}>
+  class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}
+>
   <slot />
 </button>

UI/Base/NextButton.svelte

@@ -15,7 +15,8 @@
 
 <SubtleButton
   on:click={() => dispatch("click")}
-  options={{ extraClasses: twMerge("flex items-center", clss) }}>
+  options={{ extraClasses: twMerge("flex items-center", clss) }}
+>
   <slot name="image" slot="image" />
   <div class="flex w-full items-center justify-between" slot="message">
     <slot />

UI/Base/SubtleButton.svelte

@@ -17,7 +17,8 @@
 
 <button
   class={twMerge(options.extraClasses, "secondary no-image-background")}
-  on:click={(e) => dispatch("click", e)}>
+  on:click={(e) => dispatch("click", e)}
+>
   <slot name="image">
     {#if imageUrl !== undefined}
       {#if typeof imageUrl === "string"}

UI/Base/TabbedGroup.svelte

@@ -17,7 +17,7 @@
   }
 </script>
 
-<div class="tabbedgroup h-full flex w-full">
+<div class="tabbedgroup flex h-full w-full">
   <TabGroup
     class="flex h-full w-full flex-col"
     defaultIndex={1}
@@ -67,7 +67,7 @@
       </TabList>
       <slot name="post-tablist" />
     </div>
-    <div class="normal-background overflow-y-auto h-full">
+    <div class="normal-background h-full overflow-y-auto">
       <TabPanels class="tabpanels" defaultIndex={$tab}>
         <TabPanel class="tabpanel">
           <slot name="content0">
@@ -98,14 +98,13 @@
   }
 
   :global(.tabpanel) {
-    height:100%;
+    height: 100%;
   }
 
   :global(.tabpanels) {
-    height: calc( 100% - 2rem );
+    height: calc(100% - 2rem);
   }
 
-
   :global(.tab) {
     margin: 0.25rem;
     padding: 0.25rem;

UI/BigComponents/NewPointLocationInput.svelte

@@ -15,7 +15,7 @@
   import FeatureSourceMerger from "../../Logic/FeatureSource/Sources/FeatureSourceMerger"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import { Utils } from "../../Utils"
-  import {createEventDispatcher} from "svelte";
+  import { createEventDispatcher } from "svelte"
 
   /**
    * An advanced location input, which has support to:
@@ -45,7 +45,7 @@
     lat: number
   }>(undefined)
 
-  const dispatch = createEventDispatcher<{click: {lon: number, lat: number}}>()
+  const dispatch = createEventDispatcher<{ click: { lon: number; lat: number } }>()
 
   const xyz = Tiles.embedded_tile(coordinate.lat, coordinate.lon, 16)
   const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
@@ -109,7 +109,7 @@
 
 <LocationInput
   {map}
-  on:click={data => dispatch("click", data)}
+  on:click={(data) => dispatch("click", data)}
   mapProperties={initialMapProperties}
   value={preciseLocation}
   initialCoordinate={coordinate}

UI/BigComponents/OpenBackgroundSelectorButton.svelte

@@ -3,21 +3,19 @@
    * A mapcontrol button which allows the user to select a different background.
    * Even though the componenet is very small, it gets it's own class as it is often reused
    */
-  import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid";
+  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
-  import type {SpecialVisualizationState} from "../SpecialVisualization";
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import Translations from "../i18n/Translations";
+  import Translations from "../i18n/Translations"
-  import MapControlButton from "../Base/MapControlButton.svelte";
+  import MapControlButton from "../Base/MapControlButton.svelte"
-  import Tr from "../Base/Tr.svelte";
+  import Tr from "../Base/Tr.svelte"
 
   export let state: SpecialVisualizationState
   export let hideTooltip = false
 </script>
 
-<MapControlButton
+<MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
-        on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
+  <Square3Stack3dIcon class="h-6 w-6" />
->
-  <Square3Stack3dIcon class="h-6 w-6"/>
   {#if !hideTooltip}
-    <Tr cls="mx-2" t={Translations.t.general.backgroundSwitch}/>
+    <Tr cls="mx-2" t={Translations.t.general.backgroundSwitch} />
   {/if}
 </MapControlButton>

UI/BigComponents/StateIndicator.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import ThemeViewState from "../../Models/ThemeViewState";
+  import ThemeViewState from "../../Models/ThemeViewState"
-    import Translations from "../i18n/Translations";
+  import Translations from "../i18n/Translations"
-    import Tr from "../Base/Tr.svelte";
+  import Tr from "../Base/Tr.svelte"
-    import Loading from "../Base/Loading.svelte";
+  import Loading from "../Base/Loading.svelte"
 
   export let state: ThemeViewState
   /**
@@ -17,24 +17,25 @@
   currentState.data === ""
   const t = Translations.t.centerMessage
 </script>
+
 {#if $currentState === "has-visible-features"}
   <!-- don't show anything -->
 {:else if $currentState === "zoom-to-low"}
-    <div class="w-fit p-4 alert">
+  <div class="alert w-fit p-4">
-        <Tr t={t.zoomIn}/>
+    <Tr t={t.zoomIn} />
   </div>
 {:else if $currentState === "all-filtered-away"}
-    <div class="w-fit p-4 alert">
+  <div class="alert w-fit p-4">
-        <Tr t={t.allFilteredAway}/>
+    <Tr t={t.allFilteredAway} />
   </div>
 {:else if $dataIsLoading}
-    <div class="w-fit p-4 alert">
+  <div class="alert w-fit p-4">
     <Loading>
-            <Tr t={Translations.t.centerMessage.loadingData}/>
+      <Tr t={Translations.t.centerMessage.loadingData} />
     </Loading>
   </div>
 {:else if $currentState === "no-data"}
-    <div class="w-fit p-4 alert">
+  <div class="alert w-fit p-4">
-        <Tr t={t.noData}/>
+    <Tr t={t.noData} />
   </div>
 {/if}

UI/BigComponents/ThemeIntroPanel.svelte

@@ -8,10 +8,10 @@
   import ToSvelte from "../Base/ToSvelte.svelte"
   import ThemeViewState from "../../Models/ThemeViewState"
   import If from "../Base/If.svelte"
-    import {UIEventSource} from "../../Logic/UIEventSource"
+  import { UIEventSource } from "../../Logic/UIEventSource"
-    import {SearchIcon} from "@rgossiaux/svelte-heroicons/solid"
+  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
-    import {twJoin} from "tailwind-merge"
+  import { twJoin } from "tailwind-merge"
-    import {Utils} from "../../Utils";
+  import { Utils } from "../../Utils"
 
   /**
    * The theme introduction panel
@@ -29,7 +29,7 @@
     if (glstate.currentGPSLocation.data !== undefined) {
       const c: GeolocationCoordinates = glstate.currentGPSLocation.data
       state.guistate.themeIsOpened.setData(false)
-            const coor = {lon: c.longitude, lat: c.latitude}
+      const coor = { lon: c.longitude, lat: c.latitude }
       state.mapProperties.location.setData(coor)
     }
     if (glstate.permission.data !== "granted") {
@@ -39,34 +39,31 @@
   }
 </script>
 
-<div class="flex flex-col justify-between h-full">
+<div class="flex h-full flex-col justify-between">
-
   <div>
-
     <!-- Intro, description, ... -->
-        <Tr t={layout.description}/>
+    <Tr t={layout.description} />
-        <Tr t={Translations.t.general.welcomeExplanation.general}/>
+    <Tr t={Translations.t.general.welcomeExplanation.general} />
     {#if layout.layers.some((l) => l.presets?.length > 0)}
       <If condition={state.featureSwitches.featureSwitchAddNew}>
-                <Tr t={Translations.t.general.welcomeExplanation.addNew}/>
+        <Tr t={Translations.t.general.welcomeExplanation.addNew} />
       </If>
     {/if}
 
-        <Tr t={layout.descriptionTail}/>
+    <Tr t={layout.descriptionTail} />
-      
 
     <!-- Buttons: open map, go to location, search -->
     <NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
       <div class="flex w-full justify-center text-2xl">
-                <Tr t={Translations.t.general.openTheMap}/>
+        <Tr t={Translations.t.general.openTheMap} />
       </div>
     </NextButton>
 
     <div class="flex w-full flex-wrap sm:flex-nowrap">
       <IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
         <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
-                    <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")}/>
+          <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
-                    <Tr t={Translations.t.general.openTheMapAtGeolocation}/>
+          <Tr t={Translations.t.general.openTheMapAtGeolocation} />
         </button>
       </IfNot>
 
@@ -86,9 +83,10 @@
         </div>
         <button
           class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
-                        on:click={() => triggerSearch.ping()}>
+          on:click={() => triggerSearch.ping()}
-                    <Tr t={Translations.t.general.search.searchShort}/>
+        >
-                    <SearchIcon class="h-6 w-6"/>
+          <Tr t={Translations.t.general.search.searchShort} />
+          <SearchIcon class="h-6 w-6" />
         </button>
       </div>
     </div>
@@ -97,8 +95,8 @@
   <div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
     <!-- bottom buttons, a bit hidden away: switch layout -->
     <a class="flex" href={Utils.HomepageLink()}>
-      <img class="h-6 w-6" src="./assets/svg/add.svg"/>
+      <img class="h-6 w-6" src="./assets/svg/add.svg" />
-      <Tr t={Translations.t.general.backToIndex}/>
+      <Tr t={Translations.t.general.backToIndex} />
     </a>
   </div>
 </div>

UI/InputElement/Helpers/FloorSelector.svelte

@@ -127,7 +127,8 @@
       draggable="false"
       on:mousedown={click}
       src="./assets/svg/elevator.svg"
-      style={`top: ${top}px;`} />
+      style={`top: ${top}px;`}
+    />
   </div>
 </div>
 

UI/InputElement/Helpers/LocationInput.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-    import {Store, UIEventSource} from "../../../Logic/UIEventSource"
+  import { Store, UIEventSource } from "../../../Logic/UIEventSource"
-    import type {MapProperties} from "../../../Models/MapProperties"
+  import type { MapProperties } from "../../../Models/MapProperties"
-    import {Map as MlMap} from "maplibre-gl"
+  import { Map as MlMap } from "maplibre-gl"
-    import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
+  import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
   import MaplibreMap from "../../Map/MaplibreMap.svelte"
   import DragInvitation from "../../Base/DragInvitation.svelte"
-    import {GeoOperations} from "../../../Logic/GeoOperations"
+  import { GeoOperations } from "../../../Logic/GeoOperations"
   import ShowDataLayer from "../../Map/ShowDataLayer"
   import * as boundsdisplay from "../../../assets/layers/range/range.json"
   import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
   import * as turf from "@turf/turf"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-    import {createEventDispatcher, onDestroy} from "svelte"
+  import { createEventDispatcher, onDestroy } from "svelte"
 
   /**
    * A visualisation to pick a location on a map background
@@ -35,11 +35,11 @@
     mapProperties: MapProperties
   ) => void = undefined
 
-    const dispatch = createEventDispatcher<{ click: { lon: number, lat: number } }>()
+  const dispatch = createEventDispatcher<{ click: { lon: number; lat: number } }>()
 
   export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
   let mla = new MapLibreAdaptor(map, mapProperties)
-    mla.lastClickLocation.addCallbackAndRunD(lastClick => {
+  mla.lastClickLocation.addCallbackAndRunD((lastClick) => {
     dispatch("click", lastClick)
   })
   mapProperties.location.syncWith(value)
@@ -61,7 +61,7 @@
         // This is too far away - let's move back
         const correctLocation = GeoOperations.along(c, l, maxDistanceInMeters - 10)
         window.setTimeout(() => {
-                    mla.location.setData({lon: correctLocation[0], lat: correctLocation[1]})
+          mla.location.setData({ lon: correctLocation[0], lat: correctLocation[1] })
         }, 25)
 
         if (!rangeIsShown) {
@@ -70,7 +70,7 @@
             features: new StaticFeatureSource([
               turf.circle(c, maxDistanceInMeters, {
                 units: "meters",
-                                properties: {range: "yes", id: "0"},
+                properties: { range: "yes", id: "0" },
               }),
             ]),
           })
@@ -83,14 +83,14 @@
 
 <div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
   <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
-        <MaplibreMap {map}/>
+    <MaplibreMap {map} />
   </div>
 
   <div
     class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
   >
-        <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg"/>
+    <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
   </div>
 
-    <DragInvitation hideSignal={mla.location}/>
+  <DragInvitation hideSignal={mla.location} />
 </div>

UI/Popup/AddNewPoint/AddNewPoint.svelte

@@ -3,7 +3,7 @@
    * This component ties together all the steps that are needed to create a new point.
    * There are many subcomponents which help with that
    */
-    import type {SpecialVisualizationState} from "../../SpecialVisualization"
+  import type { SpecialVisualizationState } from "../../SpecialVisualization"
   import PresetList from "./PresetList.svelte"
   import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
@@ -12,26 +12,26 @@
   import FromHtml from "../../Base/FromHtml.svelte"
   import Translations from "../../i18n/Translations.js"
   import TagHint from "../TagHint.svelte"
-    import {And} from "../../../Logic/Tags/And.js"
+  import { And } from "../../../Logic/Tags/And.js"
   import LoginToggle from "../../Base/LoginToggle.svelte"
   import Constants from "../../../Models/Constants.js"
   import FilteredLayer from "../../../Models/FilteredLayer"
-    import {Store, UIEventSource} from "../../../Logic/UIEventSource"
+  import { Store, UIEventSource } from "../../../Logic/UIEventSource"
-    import {EyeIcon, EyeOffIcon} from "@rgossiaux/svelte-heroicons/solid"
+  import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid"
   import LoginButton from "../../Base/LoginButton.svelte"
   import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
   import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction"
-    import {OsmWay} from "../../../Logic/Osm/OsmObject"
+  import { OsmWay } from "../../../Logic/Osm/OsmObject"
-    import {Tag} from "../../../Logic/Tags/Tag"
+  import { Tag } from "../../../Logic/Tags/Tag"
-    import type {WayId} from "../../../Models/OsmFeature"
+  import type { WayId } from "../../../Models/OsmFeature"
   import Loading from "../../Base/Loading.svelte"
-    import type {GlobalFilter} from "../../../Models/GlobalFilter"
+  import type { GlobalFilter } from "../../../Models/GlobalFilter"
-    import {onDestroy} from "svelte"
+  import { onDestroy } from "svelte"
   import NextButton from "../../Base/NextButton.svelte"
   import BackButton from "../../Base/BackButton.svelte"
   import ToSvelte from "../../Base/ToSvelte.svelte"
   import Svg from "../../../Svg"
-    import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
+  import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
   import { twJoin } from "tailwind-merge"
 
   export let coordinate: { lon: number; lat: number }
@@ -149,17 +149,17 @@
       2. What do we want to add?
       3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) -->
   <LoginButton osmConnection={state.osmConnection} slot="not-logged-in">
-        <Tr slot="message" t={Translations.t.general.add.pleaseLogin}/>
+    <Tr slot="message" t={Translations.t.general.add.pleaseLogin} />
   </LoginButton>
   {#if $isLoading}
     <div class="alert">
       <Loading>
-                <Tr t={Translations.t.general.add.stillLoading}/>
+        <Tr t={Translations.t.general.add.stillLoading} />
       </Loading>
     </div>
   {:else if $zoom < Constants.minZoomLevelToAddNewPoint}
     <div class="alert">
-            <Tr t={Translations.t.general.add.zoomInFurther}/>
+      <Tr t={Translations.t.general.add.zoomInFurther} />
     </div>
   {:else if selectedPreset === undefined}
     <!-- First, select the correct preset -->
@@ -172,7 +172,7 @@
   {:else if !$layerIsDisplayed}
     <!-- Check that the layer is enabled, so that we don't add a duplicate -->
     <div class="alert flex items-center justify-center">
-            <EyeOffIcon class="w-8"/>
+      <EyeOffIcon class="w-8" />
       <Tr
         t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
       />
@@ -186,8 +186,8 @@
           state.guistate.openFilterView(selectedPreset.layer)
         }}
       >
-                <ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
+        <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
-                <Tr t={Translations.t.general.add.openLayerControl}/>
+        <Tr t={Translations.t.general.add.openLayerControl} />
       </button>
 
       <button
@@ -197,15 +197,15 @@
           abort()
         }}
       >
-                <EyeIcon class="w-12"/>
+        <EyeIcon class="w-12" />
-                <Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })}/>
+        <Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })} />
       </button>
     </div>
   {:else if $layerHasFilters}
     <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
     <div class="alert flex items-center justify-center">
-            <EyeOffIcon class="w-8"/>
+      <EyeOffIcon class="w-8" />
-            <Tr t={Translations.t.general.add.disableFiltersExplanation}/>
+      <Tr t={Translations.t.general.add.disableFiltersExplanation} />
     </div>
     <div class="flex flex-wrap-reverse md:flex-nowrap">
       <button
@@ -215,8 +215,8 @@
           state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
         }}
       >
-                <EyeOffIcon class="w-12"/>
+        <EyeOffIcon class="w-12" />
-                <Tr t={Translations.t.general.add.disableFilters}/>
+        <Tr t={Translations.t.general.add.disableFilters} />
       </button>
       <button
         class="flex w-full gap-x-1"
@@ -225,8 +225,8 @@
           state.guistate.openFilterView(selectedPreset.layer)
         }}
       >
-                <ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
+        <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
-                <Tr t={Translations.t.general.add.openLayerControl}/>
+        <Tr t={Translations.t.general.add.openLayerControl} />
       </button>
     </div>
   {:else if !confirmedCategory}
@@ -237,23 +237,23 @@
       />
     </h2>
 
-        <Tr t={Translations.t.general.add.confirmIntro}/>
+    <Tr t={Translations.t.general.add.confirmIntro} />
 
     {#if selectedPreset.preset.description}
-            <Tr t={selectedPreset.preset.description}/>
+      <Tr t={selectedPreset.preset.description} />
     {/if}
 
     {#if selectedPreset.preset.exampleImages}
       <h3>
         {#if selectedPreset.preset.exampleImages.length === 1}
-                    <Tr t={Translations.t.general.example}/>
+          <Tr t={Translations.t.general.example} />
         {:else}
-                    <Tr t={Translations.t.general.examples}/>
+          <Tr t={Translations.t.general.examples} />
         {/if}
       </h3>
       <span class="flex flex-wrap items-stretch">
         {#each selectedPreset.preset.exampleImages as src}
-          <img {src} class="m-1 h-64 w-auto rounded-lg"/>
+          <img {src} class="m-1 h-64 w-auto rounded-lg" />
         {/each}
       </span>
     {/if}
@@ -265,21 +265,21 @@
 
     <div class="flex w-full flex-wrap-reverse md:flex-nowrap">
       <BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
-                <Tr t={t.backToSelect}/>
+        <Tr t={t.backToSelect} />
       </BackButton>
 
       <NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
         <div slot="image" class="relative">
-                    <FromHtml src={selectedPreset.icon}/>
+          <FromHtml src={selectedPreset.icon} />
-                    <img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg"/>
+          <img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg" />
         </div>
         <div class="w-full">
-                    <Tr t={selectedPreset.text}/>
+          <Tr t={selectedPreset.text} />
         </div>
       </NextButton>
     </div>
   {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
-        <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12"/>
+    <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12" />
     <SubtleButton
       on:click={() => {
         checkedOfGlobalFilters = checkedOfGlobalFilters + 1
@@ -303,14 +303,16 @@
         abort()
       }}
     >
-            <img slot="image" src="./assets/svg/close.svg" class="h-8 w-8"/>
+      <img slot="image" src="./assets/svg/close.svg" class="h-8 w-8" />
-            <Tr slot="message" t={Translations.t.general.cancel}/>
+      <Tr slot="message" t={Translations.t.general.cancel} />
     </SubtleButton>
   {:else if !creating}
     <div class="relative w-full p-1">
       <div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
         <NewPointLocationInput
-                        on:click={() => {preciseInputIsTapped = true}}
+          on:click={() => {
+            preciseInputIsTapped = true
+          }}
           value={preciseCoordinate}
           snappedTo={snappedToObject}
           {state}
@@ -320,26 +322,31 @@
         />
       </div>
 
-            <div class={twJoin(!preciseInputIsTapped && "hidden", "absolute top-0 p-12 flex justify-center w-full")}>
+      <div
+        class={twJoin(
+          !preciseInputIsTapped && "hidden",
+          "absolute top-0 flex w-full justify-center p-12"
+        )}
+      >
         <NextButton on:click={confirm} clss="primary w-fit">
           <div class="flex w-full justify-end gap-x-2">
-                        <Tr t={Translations.t.general.add.confirmLocation}/>
+            <Tr t={Translations.t.general.add.confirmLocation} />
           </div>
         </NextButton>
       </div>
 
       <div class="absolute bottom-0 left-0 p-4">
-                <OpenBackgroundSelectorButton {state}/>
+        <OpenBackgroundSelectorButton {state} />
       </div>
     </div>
     <div class="flex flex-wrap-reverse md:flex-nowrap">
       <BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
-                <Tr t={t.backToSelect}/>
+        <Tr t={t.backToSelect} />
       </BackButton>
 
       <NextButton on:click={confirm} clss={"primary w-full"}>
         <div class="flex w-full justify-end gap-x-2">
-                    <Tr t={Translations.t.general.add.confirmLocation}/>
+          <Tr t={Translations.t.general.add.confirmLocation} />
         </div>
       </NextButton>
     </div>

UI/Popup/DeleteFlow/DeleteWizard.svelte

@@ -112,10 +112,13 @@
         <button
           slot="save-button"
           on:click={onDelete}
-          class={twJoin((selectedTags === undefined && "disabled"), "primary flex bg-red-600")}
+          class={twJoin(selectedTags === undefined && "disabled", "primary flex bg-red-600")}
         >
           <TrashIcon
-            class={twJoin("ml-1 mr-2 h-6 w-6 rounded-full p-1", selectedTags !== undefined && "bg-red-600")}
+            class={twJoin(
+              "ml-1 mr-2 h-6 w-6 rounded-full p-1",
+              selectedTags !== undefined && "bg-red-600"
+            )}
           />
           <Tr t={t.delete} />
         </button>

UI/Popup/ImportButtons/PointImportFlow.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import ImportFlow from "./ImportFlow.svelte"
-  import {PointImportFlowState} from "./PointImportFlowState"
+  import { PointImportFlowState } from "./PointImportFlowState"
   import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-  import {UIEventSource} from "../../../Logic/UIEventSource"
+  import { UIEventSource } from "../../../Logic/UIEventSource"
-  import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
+  import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
 
   export let importFlow: PointImportFlowState
 
@@ -52,7 +52,7 @@
       />
     </div>
     <div class="absolute bottom-0">
-      <OpenBackgroundSelectorButton {state}/>
+      <OpenBackgroundSelectorButton {state} />
     </div>
   </div>
 </ImportFlow>

UI/Popup/ImportButtons/WayImportFlow.svelte

@@ -4,16 +4,16 @@
    */
   import WayImportFlowState from "./WayImportFlowState"
   import ImportFlow from "./ImportFlow.svelte"
-  import {UIEventSource} from "../../../Logic/UIEventSource"
+  import { UIEventSource } from "../../../Logic/UIEventSource"
-  import {Map as MlMap} from "maplibre-gl"
+  import { Map as MlMap } from "maplibre-gl"
-  import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
+  import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
   import MaplibreMap from "../../Map/MaplibreMap.svelte"
   import ShowDataLayer from "../../Map/ShowDataLayer"
   import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
-  import {ImportFlowUtils} from "./ImportFlow"
+  import { ImportFlowUtils } from "./ImportFlow"
-  import {GeoOperations} from "../../../Logic/GeoOperations"
+  import { GeoOperations } from "../../../Logic/GeoOperations"
   import ConflateImportFlowState from "./ConflateImportFlowState"
-  import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
+  import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
 
   export let importFlow: WayImportFlowState | ConflateImportFlowState
 
@@ -51,7 +51,7 @@
       <MaplibreMap {map} />
     </div>
     <div class="absolute bottom-0">
-      <OpenBackgroundSelectorButton/>
+      <OpenBackgroundSelectorButton />
     </div>
   </div>
 </ImportFlow>

UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -32,7 +32,8 @@
       class={twJoin(`mapping-icon-${mapping.iconClass}`, "mr-1")}
       src={mapping.icon}
       aria-hidden="true"
-      alt="" />
+      alt=""
+    />
     <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
   </div>
 {:else if mapping.then !== undefined}

UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -277,7 +277,8 @@
         <slot name="save-button" {selectedTags}>
           <button
             on:click={onSave}
-            class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}>
+            class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}
+          >
             <Tr t={Translations.t.general.save} />
           </button>
         </slot>

UI/ThemeViewGUI.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-    import {Store, UIEventSource} from "../Logic/UIEventSource"
+  import { Store, UIEventSource } from "../Logic/UIEventSource"
-    import {Map as MlMap} from "maplibre-gl"
+  import { Map as MlMap } from "maplibre-gl"
   import MaplibreMap from "./Map/MaplibreMap.svelte"
   import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
   import MapControlButton from "./Base/MapControlButton.svelte"
   import ToSvelte from "./Base/ToSvelte.svelte"
   import If from "./Base/If.svelte"
-    import {GeolocationControl} from "./BigComponents/GeolocationControl"
+  import { GeolocationControl } from "./BigComponents/GeolocationControl"
-    import type {Feature} from "geojson"
+  import type { Feature } from "geojson"
   import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
   import LayerConfig from "../Models/ThemeConfig/LayerConfig"
   import Filterview from "./BigComponents/Filterview.svelte"
   import ThemeViewState from "../Models/ThemeViewState"
-    import type {MapProperties} from "../Models/MapProperties"
+  import type { MapProperties } from "../Models/MapProperties"
   import Geosearch from "./BigComponents/Geosearch.svelte"
   import Translations from "./i18n/Translations"
-    import {CogIcon, EyeIcon, MenuIcon, XCircleIcon} from "@rgossiaux/svelte-heroicons/solid"
+  import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
 
   import Tr from "./Base/Tr.svelte"
   import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
@@ -29,28 +29,28 @@
   import CopyrightPanel from "./BigComponents/CopyrightPanel"
   import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
   import ModalRight from "./Base/ModalRight.svelte"
-    import {Utils} from "../Utils"
+  import { Utils } from "../Utils"
   import Hotkeys from "./Base/Hotkeys"
-    import {VariableUiElement} from "./Base/VariableUIElement"
+  import { VariableUiElement } from "./Base/VariableUIElement"
   import SvelteUIElement from "./Base/SvelteUIElement"
   import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
   import LevelSelector from "./BigComponents/LevelSelector.svelte"
   import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
   import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
   import Svg from "../Svg"
-    import {ShareScreen} from "./BigComponents/ShareScreen"
+  import { ShareScreen } from "./BigComponents/ShareScreen"
   import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
-    import type {RasterLayerPolygon} from "../Models/RasterLayers"
+  import type { RasterLayerPolygon } from "../Models/RasterLayers"
-    import {AvailableRasterLayers} from "../Models/RasterLayers"
+  import { AvailableRasterLayers } from "../Models/RasterLayers"
   import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
   import IfHidden from "./Base/IfHidden.svelte"
-    import {onDestroy} from "svelte"
+  import { onDestroy } from "svelte"
-    import {OpenJosm} from "./BigComponents/OpenJosm"
+  import { OpenJosm } from "./BigComponents/OpenJosm"
   import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
   import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
-    import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
+  import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
-    import Loading from "./Base/Loading.svelte";
+  import Loading from "./Base/Loading.svelte"
-    import StateIndicator from "./BigComponents/StateIndicator.svelte";
+  import StateIndicator from "./BigComponents/StateIndicator.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -74,7 +74,7 @@
       }
 
       const tags = state.featureProperties.getStore(selectedElement.properties.id)
-            return new SvelteUIElement(SelectedElementView, {state, layer, selectedElement, tags})
+      return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags })
     },
     [selectedLayer]
   )
@@ -90,7 +90,7 @@
       }
 
       const tags = state.featureProperties.getStore(selectedElement.properties.id)
-            return new SvelteUIElement(SelectedElementTitle, {state, layer, selectedElement, tags})
+      return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
     },
     [selectedLayer]
   )
@@ -111,10 +111,9 @@
 </script>
 
 <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
-    <MaplibreMap map={maplibremap}/>
+  <MaplibreMap map={maplibremap} />
 </div>
 
-
 <div class="pointer-events-none absolute top-0 left-0 w-full">
   <!-- Top components -->
   <If condition={state.featureSwitches.featureSwitchSearch}>
@@ -130,14 +129,14 @@
   <div class="float-left m-1 flex flex-col sm:mt-2">
     <MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
       <div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
-                <img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon}/>
+        <img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon} />
         <b class="mr-1">
-                    <Tr t={layout.title}/>
+          <Tr t={layout.title} />
         </b>
       </div>
     </MapControlButton>
     <MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}>
-            <MenuIcon class="h-8 w-8 cursor-pointer"/>
+      <MenuIcon class="h-8 w-8 cursor-pointer" />
     </MapControlButton>
     {#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
       <MapControlButton
@@ -158,9 +157,10 @@
       <div class="alert w-fit">Testmode</div>
     </If>
   </div>
-    <div class="flex justify-center w-full"> <!-- Flex and w-full are needed for the positioning -->
+  <div class="flex w-full justify-center">
+    <!-- Flex and w-full are needed for the positioning -->
     <!-- Centermessage -->
-        <StateIndicator {state}/>
+    <StateIndicator {state} />
   </div>
 </div>
 
@@ -169,7 +169,7 @@
   <div class="flex w-full items-end justify-between px-4">
     <div class="flex">
       <!-- bottom left elements -->
-            <OpenBackgroundSelectorButton hideTooltip={true} {state}/>
+      <OpenBackgroundSelectorButton hideTooltip={true} {state} />
       <a
         class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
         on:click={() => {
@@ -193,10 +193,10 @@
         </div>
       </If>
       <MapControlButton on:click={() => mapproperties.zoom.update((z) => z + 1)}>
-                <ToSvelte construct={Svg.plus_svg().SetClass("w-8 h-8")}/>
+        <ToSvelte construct={Svg.plus_svg().SetClass("w-8 h-8")} />
       </MapControlButton>
       <MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)}>
-                <ToSvelte construct={Svg.min_svg().SetClass("w-8 h-8")}/>
+        <ToSvelte construct={Svg.min_svg().SetClass("w-8 h-8")} />
       </MapControlButton>
       <If condition={featureSwitches.featureSwitchGeolocation}>
         <MapControlButton>
@@ -248,7 +248,7 @@
       selectedElement.setData(undefined)
     }}
   >
-        <ToSvelte construct={new VariableUiElement(selectedElementView)}/>
+    <ToSvelte construct={new VariableUiElement(selectedElementView)} />
   </FloatOver>
 </If>
 
@@ -265,18 +265,18 @@
       </div>
 
       <div class="flex" slot="title0">
-                <img class="block h-4 w-4" src={layout.icon}/>
+        <img class="block h-4 w-4" src={layout.icon} />
-                <Tr t={layout.title}/>
+        <Tr t={layout.title} />
       </div>
 
       <div class="m-4 h-full" slot="content0">
-                <ThemeIntroPanel {state}/>
+        <ThemeIntroPanel {state} />
       </div>
 
       <div class="flex" slot="title1">
         <If condition={state.featureSwitches.featureSwitchFilter}>
-                    <ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")}/>
+          <ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")} />
-                    <Tr t={Translations.t.general.menu.filter}/>
+          <Tr t={Translations.t.general.menu.filter} />
         </If>
       </div>
 
@@ -299,25 +299,25 @@
       </div>
       <div class="flex" slot="title2">
         <If condition={state.featureSwitches.featureSwitchEnableExport}>
-                    <ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")}/>
+          <ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} />
-                    <Tr t={Translations.t.general.download.title}/>
+          <Tr t={Translations.t.general.download.title} />
         </If>
       </div>
       <div class="m-4" slot="content2">
-                <DownloadPanel {state}/>
+        <DownloadPanel {state} />
       </div>
 
       <div slot="title3">
-                <Tr t={Translations.t.general.attribution.title}/>
+        <Tr t={Translations.t.general.attribution.title} />
       </div>
 
-            <ToSvelte construct={() => new CopyrightPanel(state)} slot="content3"/>
+      <ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
 
       <div slot="title4">
-                <Tr t={Translations.t.general.sharescreen.title}/>
+        <Tr t={Translations.t.general.sharescreen.title} />
       </div>
       <div class="m-2" slot="content4">
-                <ToSvelte construct={() => new ShareScreen(state)}/>
+        <ToSvelte construct={() => new ShareScreen(state)} />
       </div>
     </TabbedGroup>
   </FloatOver>
@@ -350,50 +350,50 @@
         />
       </div>
       <div class="flex" slot="title0">
-                <Tr t={Translations.t.general.menu.aboutMapComplete}/>
+        <Tr t={Translations.t.general.menu.aboutMapComplete} />
       </div>
 
       <div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
-                <Tr t={Translations.t.general.aboutMapComplete.intro}/>
+        <Tr t={Translations.t.general.aboutMapComplete.intro} />
 
         <a class="flex" href={Utils.HomepageLink()}>
-                    <img class="h-6 w-6" src="./assets/svg/add.svg"/>
+          <img class="h-6 w-6" src="./assets/svg/add.svg" />
-                    <Tr t={Translations.t.general.backToIndex}/>
+          <Tr t={Translations.t.general.backToIndex} />
         </a>
 
         <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
-                    <img class="h-6 w-6" src="./assets/svg/bug.svg"/>
+          <img class="h-6 w-6" src="./assets/svg/bug.svg" />
-                    <Tr t={Translations.t.general.attribution.openIssueTracker}/>
+          <Tr t={Translations.t.general.attribution.openIssueTracker} />
         </a>
 
         <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
-                    <img class="h-6 w-6" src="./assets/svg/mastodon.svg"/>
+          <img class="h-6 w-6" src="./assets/svg/mastodon.svg" />
-                    <Tr t={Translations.t.general.attribution.followOnMastodon}/>
+          <Tr t={Translations.t.general.attribution.followOnMastodon} />
         </a>
 
         <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
-                    <img class="h-6 w-6" src="./assets/svg/liberapay.svg"/>
+          <img class="h-6 w-6" src="./assets/svg/liberapay.svg" />
-                    <Tr t={Translations.t.general.attribution.donate}/>
+          <Tr t={Translations.t.general.attribution.donate} />
         </a>
 
         <a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
-                    <img class="h-6 w-6" src="./assets/svg/statistics.svg"/>
+          <img class="h-6 w-6" src="./assets/svg/statistics.svg" />
-                    <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })}/>
+          <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })} />
         </a>
         {Constants.vNumber}
       </div>
 
       <div class="flex" slot="title1">
-                <CogIcon class="h-6 w-6"/>
+        <CogIcon class="h-6 w-6" />
-                <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})}/>
+        <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
       </div>
 
       <div class="links-as-button" slot="content1">
         <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
         <LoginToggle {state}>
           <div class="flex flex-col" slot="not-logged-in">
-                        <Tr class="alert" t={Translations.t.userinfo.notLoggedIn}/>
+            <Tr class="alert" t={Translations.t.userinfo.notLoggedIn} />
-                        <LoginButton clss="primary" osmConnection={state.osmConnection}/>
+            <LoginButton clss="primary" osmConnection={state.osmConnection} />
           </div>
           <SelectedElementView
             highlightedRendering={state.guistate.highlightedUserSetting}
@@ -410,30 +410,30 @@
       </div>
 
       <div class="flex" slot="title2">
-                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
+        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
         Get in touch with others
       </div>
       <div class="m-2" slot="content2">
-                <CommunityIndexView location={state.mapProperties.location}/>
+        <CommunityIndexView location={state.mapProperties.location} />
       </div>
 
       <div class="flex" slot="title3">
-                <EyeIcon class="w-6"/>
+        <EyeIcon class="w-6" />
-                <Tr t={Translations.t.privacy.title}/>
+        <Tr t={Translations.t.privacy.title} />
       </div>
       <div class="m-2" slot="content3">
-                <ToSvelte construct={() => new PrivacyPolicy()}/>
+        <ToSvelte construct={() => new PrivacyPolicy()} />
       </div>
 
-            <Tr slot="title4" t={Translations.t.advanced.title}/>
+      <Tr slot="title4" t={Translations.t.advanced.title} />
       <div class="m-2 flex flex-col" slot="content4">
-                <OpenIdEditor mapProperties={state.mapProperties}/>
+        <OpenIdEditor mapProperties={state.mapProperties} />
         <ToSvelte
           construct={() =>
             new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")}
         />
-                <MapillaryLink mapProperties={state.mapProperties}/>
+        <MapillaryLink mapProperties={state.mapProperties} />
-                <ToSvelte construct={Hotkeys.generateDocumentationDynamic}/>
+        <ToSvelte construct={Hotkeys.generateDocumentationDynamic} />
       </div>
     </TabbedGroup>
   </FloatOver>