src/app/components/ContentLinkBlock.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import {ellipsize, displayUrl, postJson} from "@welshman/lib"
+  import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
   import {isRelayUrl, getTagValue} from "@welshman/util"
   import {Capacitor} from "@capacitor/core"
   import {preventDefault, stopPropagation} from "@lib/html"
+  import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkUrl from "@app/components/ContentLinkUrl.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
@@ -10,6 +11,7 @@
   import {
     dufflepud,
     IMAGE_CONTENT_TYPES,
+    PLATFORM_URL,
     VIDEO_CONTENT_TYPES,
     THUMBNAIL_URL,
     isRoomId,
@@ -21,6 +23,11 @@
 
   const url = value.url.toString()
   const isRoomOrRelay = isRoomId(url) || isRelayUrl(url)
+  const [href, external] = call(() => {
+    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
+
+    return [url, true]
+  })
 
   const fileType = getTagValue("file-type", event.tags) || ""
 
@@ -50,13 +57,9 @@
 </script>
 
 {#if isRoomOrRelay}
-  <ContentLinkUrl
-    {url}
-    class="bg-alt my-2 block p-4 leading-normal whitespace-nowrap"
-    showIcon
-    labelClass="ml-2" />
+  <ContentLinkUrl {url} class="bg-alt my-2 block p-4 leading-normal whitespace-nowrap" />
 {:else}
-  <ContentLinkUrl {url} class="my-2 block">
+  <Link {external} {href} class="my-2 block">
     <div class="overflow-hidden rounded-box">
       {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
         <video
@@ -98,5 +101,5 @@
         {/await}
       {/if}
     </div>
-  </ContentLinkUrl>
+  </Link>
 {/if}

src/app/components/ContentLinkInline.svelte

@@ -27,5 +27,5 @@
     {displayUrl(url)}
   </a>
 {:else}
-  <ContentLinkUrl {url} class="link-content whitespace-nowrap" showIcon />
+  <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
 {/if}

src/app/components/ContentLinkUrl.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type {Snippet} from "svelte"
   import {call, displayUrl} from "@welshman/lib"
   import {displayRelayUrl, isRelayUrl, normalizeRelayUrl} from "@welshman/util"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
@@ -9,17 +8,11 @@
   import {makeRoomPath, makeSpacePath} from "@app/util/routes"
 
   const {
-    children,
     url,
     class: className = "",
-    showIcon = false,
-    labelClass = "",
   }: {
-    children?: Snippet
     url: string
     class?: string
-    showIcon?: boolean
-    labelClass?: string
   } = $props()
 
   const roomReference = call(() => {
@@ -69,12 +62,6 @@
 </script>
 
 <Link {external} {href} class={className}>
-  {#if children}
-    {@render children()}
-  {:else if showIcon}
-    <Icon icon={LinkRound} size={3} class="inline-block" />
-    <span class={labelClass}>{label}</span>
-  {:else}
-    {label}
-  {/if}
+  <Icon icon={LinkRound} size={3} class="inline-block" />
+  <span class="ml-2">{label}</span>
 </Link>