From 3683780f9d19016ee0972cffb6ee55997a0b60c5 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 29 Oct 2024 23:46:52 +0100
Subject: [PATCH] Fix: fix fediverse link

---
 .../Validators/FediverseValidator.ts          | 33 ++++++++++----
 src/UI/Popup/FediverseLink.svelte             | 31 +++++++++++++
 src/UI/SpecialVisualizations.ts               | 43 ++-----------------
 3 files changed, 58 insertions(+), 49 deletions(-)
 create mode 100644 src/UI/Popup/FediverseLink.svelte

diff --git a/src/UI/InputElement/Validators/FediverseValidator.ts b/src/UI/InputElement/Validators/FediverseValidator.ts
index 115eb52ba..1d047b851 100644
--- a/src/UI/InputElement/Validators/FediverseValidator.ts
+++ b/src/UI/InputElement/Validators/FediverseValidator.ts
@@ -12,27 +12,42 @@ export default class FediverseValidator extends Validator {
         )
     }
 
+    /**
+     * FediverseValidator.extractServer(undefined) // => undefined
+     * FediverseValidator.extractServer("@pietervdvn@en.osm.town") // => {server: "en.osm.town", username: "pietervdvn"}
+     */
+    public static extractServer(handle: string): { server: string; username: string } {
+        const match = handle?.match(this.usernameAtServer)
+        if(!match){
+            return undefined
+        }
+        const [_, username, server] = match
+        return {username, server}
+    }
+
     /**
      * Returns an `@username@host`
      * @param s
+     * new FediverseValidator().reformat("https://hsnl.social/@pixelbar") // => "@pixelbar@hsnl.social"
      */
     reformat(s: string): string {
         s = s.trim()
+        try {
+            const url = new URL(s)
+            const path = url.pathname
+            if (path.match(/^\/@?\w+$/)) {
+                return `${path.substring(1)}@${url.hostname}`;
+            }
+        } catch (e) {
+            // Nothing to do here
+        }
         if (!s.startsWith("@")) {
             s = "@" + s
         }
         if (s.match(FediverseValidator.usernameAtServer)) {
             return s
         }
-        try {
-            const url = new URL(s)
-            const path = url.pathname
-            if (path.match(/^\/\w+$/)) {
-                return `@${path.substring(1)}@${url.hostname}`
-            }
-        } catch (e) {
-            // Nothing to do here
-        }
+
         return undefined
     }
     getFeedback(s: string): Translation | undefined {
diff --git a/src/UI/Popup/FediverseLink.svelte b/src/UI/Popup/FediverseLink.svelte
new file mode 100644
index 000000000..6ae60f7b9
--- /dev/null
+++ b/src/UI/Popup/FediverseLink.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Store } from "../../Logic/UIEventSource"
+  import FediverseValidator from "../InputElement/Validators/FediverseValidator"
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+
+  export let key: string
+  export let tags: Store<Record<string, string>>
+  export let state: SpecialVisualizationState
+  const validator = new FediverseValidator()
+  const userinfo = tags.mapD(t => t[key]).mapD(fediAccount => {
+    return FediverseValidator.extractServer(validator.reformat(fediAccount))
+  })
+  const homeLocation: Store<string> = state.userRelatedState?.preferencesAsTags.mapD(prefs => prefs["_mastodon_link"])
+    .mapD(userhandle => FediverseValidator.extractServer(validator.reformat(userhandle))?.server)
+</script>
+<div class="flex flex-col w-full">
+
+<a href={ "https://" + $userinfo.server + "/@" + $userinfo.username} target="_blank">@{$userinfo.username}
+  @{$userinfo.server} </a>
+
+{#if $homeLocation !== undefined}
+
+  <a target="_blank" href={"https://"+$homeLocation+"/"}>
+    <Tr t={ Translations.t.validation.fediverse.onYourServer} />
+  </a>
+
+{/if}
+
+</div>
diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts
index e9b229e18..ecb5ca3f9 100644
--- a/src/UI/SpecialVisualizations.ts
+++ b/src/UI/SpecialVisualizations.ts
@@ -101,6 +101,7 @@ import ClearCaches from "./Popup/ClearCaches.svelte"
 import GroupedView from "./Popup/GroupedView.svelte"
 import { QuestionableTagRenderingConfigJson } from "../Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson"
 import NoteCommentElement from "./Popup/Notes/NoteCommentElement.svelte"
+import FediverseLink from "./Popup/FediverseLink.svelte"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -1514,52 +1515,14 @@ export default class SpecialVisualizations {
 
                 constr(
                     state: SpecialVisualizationState,
-                    tagSource: UIEventSource<Record<string, string>>,
+                    tags: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
                     layer: LayerConfig
                 ): BaseUIElement {
                     const key = argument[0]
-                    const validator = new FediverseValidator()
-                    return new VariableUiElement(
-                        tagSource
-                            .map((tags) => tags[key])
-                            .map((fediAccount) => {
-                                fediAccount = validator.reformat(fediAccount)
-                                const [_, username, host] = fediAccount.match(
-                                    FediverseValidator.usernameAtServer
-                                )
+                    return new SvelteUIElement(FediverseLink, {key, tags, state})
 
-                                const normalLink = new SvelteUIElement(Link, {
-                                    text: fediAccount,
-                                    href: "https://" + host + "/@" + username,
-                                    newTab: true,
-                                })
-
-                                const loggedInContributorMastodon =
-                                    state.userRelatedState?.preferencesAsTags?.data?.[
-                                        "_mastodon_link"
-                                    ]
-                                console.log(
-                                    "LoggedinContributorMastodon",
-                                    loggedInContributorMastodon
-                                )
-                                if (!loggedInContributorMastodon) {
-                                    return normalLink
-                                }
-                                const homeUrl = new URL(loggedInContributorMastodon)
-                                const homeHost = homeUrl.protocol + "//" + homeUrl.hostname
-
-                                return new Combine([
-                                    normalLink,
-                                    new SvelteUIElement(Link, {
-                                        href: homeHost + "/" + fediAccount,
-                                        text: Translations.t.validation.fediverse.onYourServer,
-                                        newTab: true,
-                                    }).SetClass("button"),
-                                ])
-                            })
-                    )
                 },
             },
             {