Feat(filters): show tags that are filtered on, deal with multi-answer tags to allow having this option with auto-filters

src/UI/BigComponents/Filterview.svelte

@@ -13,6 +13,7 @@
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import Constants from "../../Models/Constants"
 
   export let state: SpecialVisualizationState
   export let filteredLayer: FilteredLayer
@@ -22,6 +23,7 @@
   let isDisplayed: UIEventSource<boolean> = filteredLayer.isDisplayed
 
   let isDebugging = state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false)
+  let showTags = state?.userRelatedState?.showTags?.map(s => (s === "yes" && state?.userRelatedState?.osmConnection?.userDetails?.data?.csCount >= Constants.userJourney.tagsVisibleAt) || s === "always" || s === "full")
 
   /**
    * Gets a UIEventSource as boolean for the given option, to be used with a checkbox
@@ -31,7 +33,7 @@
     return state.sync(
       (f) => f === 0,
       [],
-      (b) => (b ? 0 : undefined)
+      (b) => (b ? 0 : undefined),
     )
   }
 
@@ -67,6 +69,10 @@
             {#if filter.options.length === 1 && filter.options[0].fields.length === 0}
               <Checkbox selected={getBooleanStateFor(filter)}>
                 <Tr t={filter.options[0].question} />
+                <span class="subtle">
+                  {filter.options[0].osmTags.asHumanString()}
+                </span>
+
               </Checkbox>
             {/if}
 
@@ -82,6 +88,9 @@
                       {option.emoji}
                     {/if}
                     <Tr t={option.question} />
+                    {#if $showTags && option.osmTags !== undefined}
+                     &nbsp;({option.osmTags.asHumanString()})
+                    {/if}
                   </option>
                 {/each}
               </Dropdown>