From 68087384253d2216e914f1534ac919f89c4938cd Mon Sep 17 00:00:00 2001
From: Robin van der Linde <robin.vanderlinde@gmail.com>
Date: Sun, 30 Mar 2025 13:51:35 +0200
Subject: [PATCH] Feature: Clickable links in AllTagsPanel

---
 package-lock.json                             | 12 +++++
 package.json                                  |  1 +
 .../{ => AllTagsPanel}/AllTagsPanel.svelte    | 20 ++++----
 src/UI/Popup/AllTagsPanel/TagLink.svelte      | 46 +++++++++++++++++++
 .../SettingsVisualisations.ts                 |  2 +-
 src/UI/SpecialVisualizations.ts               |  2 +-
 src/UI/Studio/EditLayer.svelte                |  2 +-
 7 files changed, 73 insertions(+), 12 deletions(-)
 rename src/UI/Popup/{ => AllTagsPanel}/AllTagsPanel.svelte (86%)
 create mode 100644 src/UI/Popup/AllTagsPanel/TagLink.svelte

diff --git a/package-lock.json b/package-lock.json
index 5a58d8d00..ffaf6cd84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,6 +82,7 @@
         "showdown": "^2.1.0",
         "svelte": "^3.59.2",
         "svg-path-parser": "^1.1.0",
+        "tag2link": "^2025.3.21",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "^3.4.17",
         "ts-node": "^10.9.2",
@@ -26392,6 +26393,12 @@
       "version": "3.2.4",
       "license": "MIT"
     },
+    "node_modules/tag2link": {
+      "version": "2025.3.21",
+      "resolved": "https://registry.npmjs.org/tag2link/-/tag2link-2025.3.21.tgz",
+      "integrity": "sha512-JvRTQdY/z0vAEFUzL7rhLndNiDnStlurW+1jgXL5FW+GppR2T/dq2lXMEppbFNxJ9C4h5b+ykjcMPH791YeLdA==",
+      "license": "ISC"
+    },
     "node_modules/tailwind-merge": {
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
@@ -48535,6 +48542,11 @@
     "symbol-tree": {
       "version": "3.2.4"
     },
+    "tag2link": {
+      "version": "2025.3.21",
+      "resolved": "https://registry.npmjs.org/tag2link/-/tag2link-2025.3.21.tgz",
+      "integrity": "sha512-JvRTQdY/z0vAEFUzL7rhLndNiDnStlurW+1jgXL5FW+GppR2T/dq2lXMEppbFNxJ9C4h5b+ykjcMPH791YeLdA=="
+    },
     "tailwind-merge": {
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
diff --git a/package.json b/package.json
index 6f9397d5d..a88a9112d 100644
--- a/package.json
+++ b/package.json
@@ -244,6 +244,7 @@
     "showdown": "^2.1.0",
     "svelte": "^3.59.2",
     "svg-path-parser": "^1.1.0",
+    "tag2link": "^2025.3.21",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.4.17",
     "ts-node": "^10.9.2",
diff --git a/src/UI/Popup/AllTagsPanel.svelte b/src/UI/Popup/AllTagsPanel/AllTagsPanel.svelte
similarity index 86%
rename from src/UI/Popup/AllTagsPanel.svelte
rename to src/UI/Popup/AllTagsPanel/AllTagsPanel.svelte
index 39a66f335..33b710ad0 100644
--- a/src/UI/Popup/AllTagsPanel.svelte
+++ b/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>
diff --git a/src/UI/Popup/AllTagsPanel/TagLink.svelte b/src/UI/Popup/AllTagsPanel/TagLink.svelte
new file mode 100644
index 000000000..a90c8b174
--- /dev/null
+++ b/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}
diff --git a/src/UI/SpecialVisualisations/SettingsVisualisations.ts b/src/UI/SpecialVisualisations/SettingsVisualisations.ts
index ea52ea627..d22cf6888 100644
--- a/src/UI/SpecialVisualisations/SettingsVisualisations.ts
+++ b/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"
diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts
index a212ae011..0fdee9e98 100644
--- a/src/UI/SpecialVisualizations.ts
+++ b/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"
diff --git a/src/UI/Studio/EditLayer.svelte b/src/UI/Studio/EditLayer.svelte
index 79ef7776e..c561edfe1 100644
--- a/src/UI/Studio/EditLayer.svelte
+++ b/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"