Feature: Clickable links in AllTagsPanel

src/UI/Popup/AllTagsPanel/AllTagsPanel.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
-  import SimpleMetaTaggers from "../../Logic/SimpleMetaTagger"
-  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import Searchbar from "../Base/Searchbar.svelte"
-  import Translations from "../i18n/Translations"
-  import { Utils } from "../../Utils"
+  import { Store, UIEventSource } from "../../../Logic/UIEventSource"
+  import SimpleMetaTaggers from "../../../Logic/SimpleMetaTagger"
+  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+  import Searchbar from "../../Base/Searchbar.svelte"
+  import Translations from "../../i18n/Translations"
+  import { Utils } from "../../../Utils"
+  import TagLink from "./TagLink.svelte"
+  import Tag from "@rgossiaux/svelte-heroicons/solid/Tag"
 
   export let tags: UIEventSource<Record<string, any>>
   export let tagKeys = tags.map((tgs) => (tgs === undefined ? [] : Object.keys(tgs)))
@@ -69,7 +71,7 @@
             {:else if typeof $tags[key] === "object"}
               <div class="literal-code">{JSON.stringify($tags[key])}</div>
             {:else}
-              {$tags[key]}
+              <TagLink {tags} {key} />
             {/if}
           </td>
         </tr>
@@ -95,7 +97,7 @@
             <span class="literal-code">{JSON.stringify($tags[key])}</span>
             <i>{typeof $tags[key]}</i>
           {:else}
-            {$tags[key]}
+            <TagLink {tags} {key} />
           {/if}
         </td>
       </tr>
@@ -123,7 +125,7 @@
           {:else if $tags[key] === ""}
             <i>Empty string</i>
           {:else}
-            {$tags[key]}
+            <TagLink {tags} {key} />
           {/if}
         </td>
       </tr>

src/UI/Popup/AllTagsPanel/TagLink.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { UIEventSource } from "../../../Logic/UIEventSource"
+  import tag2link from "tag2link/index.json"
+
+  export let tags: UIEventSource<Record<string, any>>
+  export let key: string
+
+  const tag2linkData = tag2link as Tag2LinkElement[]
+
+  interface Tag2LinkElement {
+    /**
+     * OSM tag key
+     */
+    key: string
+
+    /**
+     * URL template or formatter URL: replace `$1` with the tag value
+     */
+    url: string
+
+    /**
+     * Source of this formatter URL
+     */
+    source?: string
+
+    /**
+     * Rank or relative importance of this formatter URL.
+     */
+    rank?: "preferred" | "normal" | "deprecated"
+  }
+
+  const url = tag2linkData.find((item) => item.key === `Key:${key}`)?.url
+</script>
+
+{#if url}
+  <a
+    href={url.replace("$1", $tags[key])}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="tag-link"
+  >
+    {$tags[key]}
+  </a>
+{:else}
+  {$tags[key]}
+{/if}

src/UI/SpecialVisualisations/SettingsVisualisations.ts

@@ -6,7 +6,7 @@ import LogoutButton from "../Base/LogoutButton.svelte"
 import LoginButton from "../Base/LoginButton.svelte"
 import ThemeViewState from "../../Models/ThemeViewState"
 import OrientationDebugPanel from "../Debug/OrientationDebugPanel.svelte"
-import AllTagsPanel from "../Popup/AllTagsPanel.svelte"
+import AllTagsPanel from "../Popup/AllTagsPanel/AllTagsPanel.svelte"
 import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
 import ClearCaches from "../Popup/ClearCaches.svelte"
 import Locale from "../i18n/Locale"

src/UI/SpecialVisualizations.ts

@@ -10,7 +10,7 @@ import { HistogramViz } from "./Popup/HistogramViz"
 import { UploadToOsmViz } from "./Popup/UploadToOsmViz"
 import { MultiApplyViz } from "./Popup/MultiApplyViz"
 import { UIEventSource } from "../Logic/UIEventSource"
-import AllTagsPanel from "./Popup/AllTagsPanel.svelte"
+import AllTagsPanel from "./Popup/AllTagsPanel/AllTagsPanel.svelte"
 import { VariableUiElement } from "./Base/VariableUIElement"
 import { Translation } from "./i18n/Translation"
 import Translations from "./i18n/Translations"

src/UI/Studio/EditLayer.svelte

@@ -13,7 +13,7 @@
   import SchemaBasedInput from "./SchemaBasedInput.svelte"
   import FloatOver from "../Base/FloatOver.svelte"
   import TagRenderingInput from "./TagRenderingInput.svelte"
-  import AllTagsPanel from "../Popup/AllTagsPanel.svelte"
+  import AllTagsPanel from "../Popup/AllTagsPanel/AllTagsPanel.svelte"
   import QuestionPreview from "./QuestionPreview.svelte"
   import ShowConversionMessages from "./ShowConversionMessages.svelte"
   import RawEditor from "./RawEditor.svelte"