Chore: Housekeeping

src/UI/BigComponents/FilterPanel.svelte

@@ -15,7 +15,6 @@
 </script>
 
 <div class="m-2 flex flex-col">
-
   <h2 class="flex items-center">
     <Filter class="h-6 w-6 pr-2" />
     <Tr t={Translations.t.general.menu.filter} />

src/UI/BigComponents/Filterview.svelte

@@ -29,7 +29,7 @@
     return state.sync(
       (f) => f === 0,
       [],
-      (b) => (b ? 0 : undefined),
+      (b) => (b ? 0 : undefined)
     )
   }
 
@@ -48,7 +48,7 @@
       } else {
         mainElem?.classList?.remove("glowing-shadow")
       }
-    }),
+    })
   )
 </script>
 

src/UI/BigComponents/GeolocationControl.svelte

@@ -9,7 +9,8 @@
 
   export let state: ThemeViewState
   let geolocationstate = state.geolocation.geolocationState
-  let geopermission: Store<GeolocationPermissionState> = state.geolocation.geolocationState.permission
+  let geopermission: Store<GeolocationPermissionState> =
+    state.geolocation.geolocationState.permission
   let allowMoving = geolocationstate.allowMoving
   let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
   let geolocationControlState = state.geolocationControl
@@ -18,7 +19,7 @@
 
 {#if !$allowMoving}
   <Location_locked class="h-8 w-8" />
-{:else if $currentGPSLocation !== undefined }
+{:else if $currentGPSLocation !== undefined}
   <!-- If we have a location; this implies that the location access was granted -->
   {#if $lastClickWasRecent}
     <Location_unlocked class="h-8 w-8" />
@@ -29,15 +30,9 @@
   <Location class="h-8 w-8" />
 {:else if $geopermission === "requested"}
   <!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
-  <Location
-    class="h-8 w-8"
-    style="animation: 3s linear 0s infinite normal none running spin;"
-  />
+  <Location class="h-8 w-8" style="animation: 3s linear 0s infinite normal none running spin;" />
 {:else if $geopermission === "denied"}
   <Location_refused class="h-8 w-8" />
 {:else}
-  <Location
-    class="h-8 w-8"
-    style="animation: 3s linear 0s infinite normal none running spin;"
-  />
+  <Location class="h-8 w-8" style="animation: 3s linear 0s infinite normal none running spin;" />
 {/if}

src/UI/BigComponents/Geosearch.svelte

@@ -21,7 +21,7 @@
   onDestroy(
     triggerSearch.addCallback((_) => {
       performSearch()
-    }),
+    })
   )
 
   let isRunning: boolean = false
@@ -71,7 +71,7 @@
         new BBox([
           [lon0, lat0],
           [lon1, lat1],
-        ]).pad(0.01),
+        ]).pad(0.01)
       )
       if (perLayer !== undefined) {
         const id = poi.osm_type + "/" + poi.osm_id
@@ -102,7 +102,7 @@
 </script>
 
 <div class="normal-background flex justify-between rounded-full pl-2">
-  <form class="w-full flex flex-wrap">
+  <form class="flex w-full flex-wrap">
     {#if isRunning}
       <Loading>{Translations.t.general.search.searching}</Loading>
     {:else}
@@ -110,13 +110,16 @@
         type="search"
         class="w-full"
         bind:this={inputElement}
-        on:keypress={(keypr) =>{  feedback = undefined; return (keypr.key === "Enter" ? performSearch() : undefined); }}
+        on:keypress={(keypr) => {
+          feedback = undefined
+          return keypr.key === "Enter" ? performSearch() : undefined
+        }}
         bind:value={searchContents}
         use:placeholder={Translations.t.general.search.search}
       />
       {#if feedback !== undefined}
         <!-- The feedback is _always_ shown for screenreaders and to make sure that the searchfield can still be selected by tabbing-->
-        <div class="alert " role="alert" aria-live="assertive">
+        <div class="alert" role="alert" aria-live="assertive">
           {feedback}
         </div>
       {/if}

src/UI/BigComponents/MapillaryLink.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <a class="flex items-center" href={mapillaryLink} target="_blank">
-  <Mapillary_black class={twMerge("shrink-0",large ? "m-2 mr-4 h-12 w-12" : "w-6 h-6 pr-2")} />
+  <Mapillary_black class={twMerge("shrink-0", large ? "m-2 mr-4 h-12 w-12" : "h-6 w-6 pr-2")} />
   {#if large}
     <div class="flex flex-col">
       <Tr t={Translations.t.general.attribution.openMapillary} />

src/UI/BigComponents/OpenBackgroundSelectorButton.svelte

@@ -13,8 +13,10 @@
   export let hideTooltip = false
 </script>
 
-<MapControlButton arialabel={Translations.t.general.labels.background}
-                  on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
+<MapControlButton
+  arialabel={Translations.t.general.labels.background}
+  on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
+>
   <Square3Stack3dIcon class="h-6 w-6" />
   {#if !hideTooltip}
     <Tr cls="mx-2" t={Translations.t.general.backgroundSwitch} />

src/UI/BigComponents/ReverseGeocoding.svelte

@@ -1,52 +1,58 @@
-<script lang="ts">/**
- * Shows the current address when shaken
- **/
-import Motion from "../../Sensors/Motion"
-import { Geocoding } from "../../Logic/Osm/Geocoding"
-import type { MapProperties } from "../../Models/MapProperties"
-import Hotkeys from "../Base/Hotkeys"
-import Translations from "../i18n/Translations"
-import Locale from "../i18n/Locale"
+<script lang="ts">
+  /**
+   * Shows the current address when shaken
+   **/
+  import Motion from "../../Sensors/Motion"
+  import { Geocoding } from "../../Logic/Osm/Geocoding"
+  import type { MapProperties } from "../../Models/MapProperties"
+  import Hotkeys from "../Base/Hotkeys"
+  import Translations from "../i18n/Translations"
+  import Locale from "../i18n/Locale"
 
-export let mapProperties: MapProperties
-let lastDisplayed: Date = undefined
-let currentLocation: string = undefined
+  export let mapProperties: MapProperties
+  let lastDisplayed: Date = undefined
+  let currentLocation: string = undefined
 
-async function displayLocation() {
-  lastDisplayed = new Date()
-  let result = await Geocoding.reverse(
-    mapProperties.location.data,
-    mapProperties.zoom.data,
-    Locale.language.data
-  )
-  let properties = result.features[0].properties
-  currentLocation = properties.display_name
-  window.setTimeout(() => {
-    if(properties.display_name !== currentLocation){
+  async function displayLocation() {
+    lastDisplayed = new Date()
+    let result = await Geocoding.reverse(
+      mapProperties.location.data,
+      mapProperties.zoom.data,
+      Locale.language.data
+    )
+    let properties = result.features[0].properties
+    currentLocation = properties.display_name
+    window.setTimeout(() => {
+      if (properties.display_name !== currentLocation) {
+        return
+      }
+      currentLocation = undefined
+    }, 5000)
+  }
+
+  Motion.singleton.lastShakeEvent.addCallbackD((shaken) => {
+    if (lastDisplayed !== undefined && shaken.getTime() - lastDisplayed.getTime() < 2000) {
       return
     }
-    currentLocation = undefined
-  }, 5000)
-}
-
-Motion.singleton.lastShakeEvent.addCallbackD(shaken => {
-  if (lastDisplayed !== undefined && shaken.getTime() - lastDisplayed.getTime() < 2000) {
-    return
-  }
-  displayLocation()
-})
-Hotkeys.RegisterHotkey({ nomod: "q" },
-  Translations.t.hotkeyDocumentation.queryCurrentLocation,
-  () => {
     displayLocation()
   })
+  Hotkeys.RegisterHotkey(
+    { nomod: "q" },
+    Translations.t.hotkeyDocumentation.queryCurrentLocation,
+    () => {
+      displayLocation()
+    }
+  )
 
-
-Motion.singleton.startListening()
+  Motion.singleton.startListening()
 </script>
 
 {#if currentLocation}
-  <div role="alert" aria-live="assertive" class="normal-background rounded-full border-interactive px-2">
+  <div
+    role="alert"
+    aria-live="assertive"
+    class="normal-background border-interactive rounded-full px-2"
+  >
     {currentLocation}
   </div>
 {/if}

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -13,7 +13,7 @@
   export let layer: LayerConfig
   export let selectedElement: Feature
   let tags: UIEventSource<Record<string, string>> = state.featureProperties.getStore(
-    selectedElement.properties.id,
+    selectedElement.properties.id
   )
   $: {
     tags = state.featureProperties.getStore(selectedElement.properties.id)
@@ -37,7 +37,7 @@
         class="no-weblate title-icons links-as-button mr-2 flex flex-row flex-wrap items-center gap-x-0.5 p-1 pt-0.5 sm:pt-1"
       >
         {#each layer.titleIcons as titleIconConfig}
-          {#if (titleIconConfig.condition?.matchesProperties($tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties({ ...$metatags, ...$tags }) ?? true) && titleIconConfig.IsKnown($tags)}
+          {#if (titleIconConfig.condition?.matchesProperties($tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ...$metatags, ...$tags } ) ?? true) && titleIconConfig.IsKnown($tags)}
             <div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
               <TagRenderingAnswer
                 config={titleIconConfig}
@@ -53,16 +53,18 @@
       </div>
     </div>
 
-    <button on:click={() => state.selectedElement.setData(undefined)}
-            use:ariaLabel={Translations.t.general.backToMap}
-            class="border-none p-0 rounded-full">
+    <button
+      on:click={() => state.selectedElement.setData(undefined)}
+      use:ariaLabel={Translations.t.general.backToMap}
+      class="rounded-full border-none p-0"
+    >
       <XCircleIcon aria-hidden={true} class="h-8 w-8" />
     </button>
   </div>
 {/if}
 
 <style>
-    :global(.title-icons a) {
-        display: block !important;
-    }
+  :global(.title-icons a) {
+    display: block !important;
+  }
 </style>

src/UI/BigComponents/Summary.svelte

@@ -19,22 +19,23 @@
     state.selectedElement.setData(feature)
   }
 
-  let bearingAndDist: Store<{ bearing: number, dist: number }> = state.mapProperties.location.map(l => {
+  let bearingAndDist: Store<{ bearing: number; dist: number }> = state.mapProperties.location.map(
+    (l) => {
       let fcenter = GeoOperations.centerpointCoordinates(feature)
       let mapCenter = [l.lon, l.lat]
 
       let bearing = Math.round(GeoOperations.bearing(fcenter, mapCenter))
       let dist = Math.round(GeoOperations.distanceBetween(fcenter, mapCenter))
       return { bearing, dist }
-    },
+    }
   )
 </script>
 
-<div class="cursor-pointer small flex" on:click={() => select()}>
+<div class="small flex cursor-pointer" on:click={() => select()}>
   <span class="flex">
-  {#if i !== undefined}
-    <span class="font-bold">{i + 1}.</span>
-  {/if}
+    {#if i !== undefined}
+      <span class="font-bold">{i + 1}.</span>
+    {/if}
     <TagRenderingAnswer config={layer.title} {layer} selectedElement={feature} {state} {tags} />
     {$bearingAndDist.dist}m {$bearingAndDist.bearing}°
   </span>

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -101,7 +101,7 @@
 
       <If condition={state.featureSwitches.featureSwitchSearch}>
         <div
-          class=".button low-interaction m-1 flex flex-wrap h-fit w-full items-center justify-end gap-x-2 gap-y-2 rounded border p-1"
+          class=".button low-interaction m-1 flex h-fit w-full flex-wrap items-center justify-end gap-x-2 gap-y-2 rounded border p-1"
         >
           <div style="min-width: 16rem; " class="grow">
             <Geosearch
@@ -117,7 +117,7 @@
           </div>
           <button
             class={twJoin(
-              "flex shrink-0 w-fit items-center justify-between gap-x-2 small",
+              "small flex w-fit shrink-0 items-center justify-between gap-x-2",
               !searchEnabled && "disabled"
             )}
             on:click={() => triggerSearch.ping()}

src/UI/BigComponents/ThemesList.svelte

@@ -43,7 +43,6 @@
     {/each}
   </div>
 
-
   {#if filteredThemes.length === 0}
     <NoThemeResultButton {search} />
   {/if}

src/UI/BigComponents/UnofficialThemeList.svelte

@@ -21,13 +21,7 @@
 </script>
 
 {#if customThemes.length > 0}
-  <ThemesList
-    {search}
-    {state}
-    themes={customThemes}
-    isCustom={true}
-    hideThemes={false}
-  >
+  <ThemesList {search} {state} themes={customThemes} isCustom={true} hideThemes={false}>
     <svelte:fragment slot="title">
       <h3>
         <Tr t={t.customThemeTitle} />

src/UI/BigComponents/VisualFeedbackPanel.svelte

@@ -17,26 +17,27 @@
   const t = Translations.t.general.visualFeedback
   let centerFeatures = state.closestFeatures.features
 
-  let lastAction: UIEventSource<KeyNavigationEvent> = new UIEventSource<KeyNavigationEvent>(undefined)
+  let lastAction: UIEventSource<KeyNavigationEvent> = new UIEventSource<KeyNavigationEvent>(
+    undefined
+  )
   state.mapProperties.onKeyNavigationEvent((event) => {
     lastAction.setData(event)
   })
-  lastAction.stabilized(750).addCallbackAndRunD(_ => lastAction.setData(undefined))
+  lastAction.stabilized(750).addCallbackAndRunD((_) => lastAction.setData(undefined))
 </script>
-<div aria-live="assertive" class="p-1" role="alert">
 
+<div aria-live="assertive" class="p-1" role="alert">
   {#if $lastAction !== undefined}
     <Tr t={t[$lastAction.key]} />
   {:else if $centerFeatures.length === 0}
     <Tr t={t.noCloseFeatures} />
   {:else}
     <div class="pointer-events-auto">
-      <Tr t={t.closestFeaturesAre.Subs({n: $featuresInViewPort?.length})} />
+      <Tr t={t.closestFeaturesAre.Subs({ n: $featuresInViewPort?.length })} />
       <ol class="list-none">
         {#each $centerFeatures as feat, i (feat.properties.id)}
           <li class="flex">
-            
-            <Summary {state} feature={feat} {i}/>
+            <Summary {state} feature={feat} {i} />
           </li>
         {/each}
       </ol>