refactor: extract shared ContentLinkUrl renderer

src/app/components/ContentLinkBlock.svelte

@@ -1,76 +1,28 @@
 <script lang="ts">
-  import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
+  import {ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {isRelayUrl, getTagValue, normalizeRelayUrl, displayRelayUrl} from "@welshman/util"
+  import {isRelayUrl, getTagValue} from "@welshman/util"
   import {Capacitor} from "@capacitor/core"
   import {preventDefault, stopPropagation} from "@lib/html"
-  import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  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"
   import {pushModal} from "@app/util/modal"
   import {
     dufflepud,
-    PLATFORM_URL,
     IMAGE_CONTENT_TYPES,
     VIDEO_CONTENT_TYPES,
     THUMBNAIL_URL,
-    displayRoom,
     isRoomId,
-    splitRoomId,
   } from "@app/core/state"
-  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   let hideImage = $state(false)
 
   const url = value.url.toString()
-  const roomReference = call(() => {
+  const isRoomOrRelay = isRoomId(url) || isRelayUrl(url)
-    if (!isRoomId(url)) {
-      return undefined
-    }
-
-    const [roomUrl, h] = splitRoomId(url)
-
-    if (!roomUrl || !h || !isRelayUrl(roomUrl)) {
-      return undefined
-    }
-
-    return {url: normalizeRelayUrl(roomUrl), h}
-  })
-
-  const relayReference = call(() => {
-    if (roomReference || !isRelayUrl(url)) {
-      return undefined
-    }
-
-    return normalizeRelayUrl(url)
-  })
-
-  const label = call(() => {
-    if (roomReference) {
-      const spaceName = displayRelayUrl(roomReference.url)
-      const roomName = displayRoom(roomReference.url, roomReference.h)
-
-      return `~${spaceName} / ${roomName}`
-    }
-
-    if (relayReference) {
-      return `~${displayRelayUrl(relayReference)}`
-    }
-
-    return displayUrl(url)
-  })
 
   const fileType = getTagValue("file-type", event.tags) || ""
-  const [href, external] = call(() => {
-    if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
-    if (relayReference) return [makeSpacePath(relayReference), false]
-    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
-
-    return [url, true]
-  })
 
   const getVideoPoster = (videoUrl: string): string | undefined => {
     if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
@@ -97,7 +49,14 @@
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
 
-<Link {external} {href} class="my-2 block">
+{#if isRoomOrRelay}
+  <ContentLinkUrl
+    {url}
+    class="bg-alt my-2 block p-4 leading-normal whitespace-nowrap"
+    showIcon
+    labelClass="ml-2" />
+{:else}
+  <ContentLinkUrl {url} class="my-2 block">
     <div class="overflow-hidden rounded-box">
       {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
         <video
@@ -112,11 +71,6 @@
         <button type="button" onclick={stopPropagation(preventDefault(expand))}>
           <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
         </button>
-    {:else if roomReference || relayReference}
-      <div class="bg-alt p-4 leading-normal">
-        <Icon icon={LinkRound} size={3} class="inline-block" />
-        <span class="ml-2">{label}</span>
-      </div>
       {:else}
         {#await loadPreview()}
           <div class="center my-12 w-full">
@@ -144,4 +98,5 @@
         {/await}
       {/if}
     </div>
-</Link>
+  </ContentLinkUrl>
+{/if}

src/app/components/ContentLinkInline.svelte

@@ -1,69 +1,18 @@
 <script lang="ts">
-  import {call, displayUrl} from "@welshman/lib"
+  import {displayUrl} from "@welshman/lib"
-  import {isRelayUrl, getTagValue, normalizeRelayUrl, displayRelayUrl} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
+  import ContentLinkUrl from "@app/components/ContentLinkUrl.svelte"
   import {pushModal} from "@app/util/modal"
-  import {
+  import {IMAGE_CONTENT_TYPES} from "@app/core/state"
-    PLATFORM_URL,
-    IMAGE_CONTENT_TYPES,
-    displayRoom,
-    isRoomId,
-    splitRoomId,
-  } from "@app/core/state"
-  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   const url = value.url.toString()
-  const roomReference = call(() => {
-    if (!isRoomId(url)) {
-      return undefined
-    }
-
-    const [roomUrl, h] = splitRoomId(url)
-
-    if (!roomUrl || !h || !isRelayUrl(roomUrl)) {
-      return undefined
-    }
-
-    return {url: normalizeRelayUrl(roomUrl), h}
-  })
-
-  const relayReference = call(() => {
-    if (roomReference || !isRelayUrl(url)) {
-      return undefined
-    }
-
-    return normalizeRelayUrl(url)
-  })
-
-  const label = call(() => {
-    if (roomReference) {
-      const spaceName = displayRelayUrl(roomReference.url)
-      const roomName = displayRoom(roomReference.url, roomReference.h)
-
-      return `~${spaceName} / ${roomName}`
-    }
-
-    if (relayReference) {
-      return `~${displayRelayUrl(relayReference)}`
-    }
-
-    return displayUrl(url)
-  })
-
   const fileType = getTagValue("file-type", event.tags) || ""
-  const [href, external] = call(() => {
-    if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
-    if (relayReference) return [makeSpacePath(relayReference), false]
-    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
-
-    return [url, true]
-  })
 
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
@@ -78,8 +27,5 @@
     {displayUrl(url)}
   </a>
 {:else}
-  <Link {external} {href} class="link-content whitespace-nowrap">
+  <ContentLinkUrl {url} class="link-content whitespace-nowrap" showIcon />
-    <Icon icon={LinkRound} size={3} class="inline-block" />
-    {label}
-  </Link>
 {/if}

src/app/components/ContentLinkUrl.svelte

@@ -0,0 +1,80 @@
+<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"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import {PLATFORM_URL, displayRoom, isRoomId, splitRoomId} from "@app/core/state"
+  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(() => {
+    if (!isRoomId(url)) {
+      return undefined
+    }
+
+    const [roomUrl, h] = splitRoomId(url)
+
+    if (!roomUrl || !h || !isRelayUrl(roomUrl)) {
+      return undefined
+    }
+
+    return {url: normalizeRelayUrl(roomUrl), h}
+  })
+
+  const relayReference = call(() => {
+    if (roomReference || !isRelayUrl(url)) {
+      return undefined
+    }
+
+    return normalizeRelayUrl(url)
+  })
+
+  const label = call(() => {
+    if (roomReference) {
+      const spaceName = displayRelayUrl(roomReference.url)
+      const roomName = displayRoom(roomReference.url, roomReference.h)
+
+      return `~${spaceName} / ${roomName}`
+    }
+
+    if (relayReference) {
+      return `~${displayRelayUrl(relayReference)}`
+    }
+
+    return displayUrl(url)
+  })
+
+  const [href, external] = call(() => {
+    if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
+    if (relayReference) return [makeSpacePath(relayReference), false]
+    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
+
+    return [url, true]
+  })
+</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}
+</Link>