Usersettings: use a collapsable dropdown, introduce dropdown special visualisation

src/UI/BigComponents/SelectedElementView.svelte

@@ -17,31 +17,44 @@
   export let highlightedRendering: UIEventSource<string> = undefined
 
   export let tags: UIEventSource<Record<string, string>> = state?.featureProperties?.getStore(
-    selectedElement.properties.id
+    selectedElement.properties.id,
   )
 
   let isAddNew = tags.mapD(
-    (t) => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false
+    (t) => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false,
   )
 
   export let layer: LayerConfig
-
+  export let mustMatchLabels: Set<string> | undefined = undefined
+  export let dontMatchLabels: Set<string> | undefined = new Set(["hidden"])
   let _metatags: Record<string, string>
   if (state?.userRelatedState?.preferencesAsTags) {
     onDestroy(
       state.userRelatedState.preferencesAsTags.addCallbackAndRun((tags) => {
         _metatags = tags
-      })
+      }),
     )
   }
 
   let knownTagRenderings: Store<TagRenderingConfig[]> = tags.mapD((tgs) =>
     layer?.tagRenderings?.filter(
-      (config) =>
-        (config.condition?.matchesProperties(tgs) ?? true) &&
-        (config.metacondition?.matchesProperties({ ...tgs, ..._metatags }) ?? true) &&
-        config.IsKnown(tgs)
-    )
+      (config) => {
+        if (mustMatchLabels !== undefined) {
+          if (!mustMatchLabels.has(config.id) && !config?.labels?.some(l => mustMatchLabels.has(l))) {
+            return false
+          }
+        } else if (dontMatchLabels) {
+          if (dontMatchLabels.has(config.id) || config?.labels?.some(l => dontMatchLabels.has(l))) {
+            return false
+          }
+        }
+        if (!config.IsKnown(tgs)) {
+          return false
+        }
+        return (config.condition?.matchesProperties(tgs) ?? true) &&
+          (config.metacondition?.matchesProperties({ ...tgs, ..._metatags }) ?? true)
+      },
+    ),
   )
 </script>
 

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -14,8 +14,8 @@
   import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
   import Location_refused from "../../assets/svg/Location_refused.svelte"
   import Location from "../../assets/svg/Location.svelte"
-  import ChevronDoubleLeft from "@babeard/svelte-heroicons/mini/ChevronDoubleLeft"
-  import Constants from "../../Models/Constants"
+  import ChevronDoubleLeft from "@babeard/svelte-heroicons/solid/ChevronDoubleLeft"
+  import GeolocationIndicator from "./GeolocationIndicator.svelte"
 
   /**
    * The theme introduction panel
@@ -27,9 +27,11 @@
   let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
   let searchEnabled = false
 
-  let geopermission: Store<GeolocationPermissionState> =
-    state.geolocation.geolocationState.permission
-  let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
+  let geolocation = state.geolocation.geolocationState
+  let geopermission: Store<GeolocationPermissionState> = geolocation.permission
+  let currentGPSLocation = geolocation.currentGPSLocation
+  let gpsExplanation = geolocation.gpsStateExplanation
+  let gpsAvailable = geolocation.gpsAvailable
 
   function jumpToCurrentLocation() {
     const glstate = state.geolocation.geolocationState
@@ -75,38 +77,12 @@
 
     <div class="flex w-full flex-wrap sm:flex-nowrap">
       <If condition={state.featureSwitches.featureSwitchGeolocation}>
-        {#if $currentGPSLocation !== undefined || $geopermission === "prompt"}
-          <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
-            <Location class="h-8 w-8" />
-            <Tr t={Translations.t.general.openTheMapAtGeolocation} />
-          </button>
-          <!-- No geolocation granted - we don't show the button -->
-        {:else if $geopermission === "requested"}
-          <button
-            class="disabled flex w-full items-center gap-x-2"
-            on:click={jumpToCurrentLocation}
-          >
-            <!-- 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;"
-            />
-            <Tr t={Translations.t.general.waitingForGeopermission} />
-          </button>
-        {:else if $geopermission === "denied"}
-          <button class="disabled flex w-full items-center gap-x-2">
-            <Location_refused class="h-8 w-8" />
-            <Tr t={Translations.t.general.geopermissionDenied} />
-          </button>
-        {:else}
-          <button class="disabled flex w-full items-center gap-x-2">
-            <Location
-              class="h-8 w-8"
-              style="animation: 3s linear 0s infinite normal none running spin;"
-            />
-            <Tr t={Translations.t.general.waitingForLocation} />
-          </button>
-        {/if}
+
+        <button disabled={!$gpsAvailable} class:disabled={!$gpsAvailable} class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
+
+          <GeolocationIndicator {state} />
+          <Tr t={$gpsExplanation} />
+        </button>
       </If>
 
       <If condition={state.featureSwitches.featureSwitchSearch}>

src/UI/BigComponents/UserProfile.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import UserDetails, { OsmConnection } from "../../Logic/Osm/OsmConnection"
-  import { UIEventSource } from "../../Logic/UIEventSource"
-  import { PencilAltIcon, UserCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import { onDestroy } from "svelte"
-  import Showdown from "showdown"
-  import FromHtml from "../Base/FromHtml.svelte"
-  import Tr from "../Base/Tr.svelte"
-  import Translations from "../i18n/Translations.js"
-  import Pencil from "@babeard/svelte-heroicons/solid/Pencil"
-
-  /**
-   * This panel shows information about the logged-in user, showing account name, profile pick, description and an edit-button
-   */
-  export let osmConnection: OsmConnection
-  let userdetails: UIEventSource<UserDetails> = osmConnection.userDetails
-  let description: string
-  onDestroy(
-    userdetails.addCallbackAndRunD((userdetails) => {
-      description = new Showdown.Converter()
-        .makeHtml(userdetails.description)
-        ?.replace(/&gt;/g, ">")
-        ?.replace(/&lt;/g, "<")
-    })
-  )
-</script>
-
-<div class="link-underline m-1 flex rounded-md border border-dashed border-gray-600 p-1">
-  {#if $userdetails.img}
-    <img src={$userdetails.img} class="m-4 h-12 w-12 rounded-full" />
-  {:else}
-    <UserCircleIcon class="h-12 w-12" />
-  {/if}
-  <div class="flex flex-col">
-    <h3>{$userdetails.name}</h3>
-    {#if description}
-      <FromHtml src={description} />
-      <a
-        href={osmConnection.Backend() + "/profile/edit"}
-        target="_blank"
-        rel="noopener"
-        class="link-no-underline flex items-center self-end"
-      >
-        <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
-        <Tr t={Translations.t.userinfo.editDescription} />
-      </a>
-    {:else}
-      <Tr t={Translations.t.userinfo.noDescription} />
-      <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex items-center">
-        <Pencil class="h-8 w-8 p-2" />
-        <Tr t={Translations.t.userinfo.noDescriptionCallToAction} />
-      </a>
-    {/if}
-  </div>
-</div>