refactor: align room mention labels with link rendering

src/app/components/ContentLinkBlock.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {isRelayUrl, getTagValue, normalizeRelayUrl} from "@welshman/util"
+  import {isRelayUrl, getTagValue, normalizeRelayUrl, displayRelayUrl} 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"
@@ -8,7 +8,15 @@
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
-  import {dufflepud, PLATFORM_URL, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/core/state"
+  import {
+    dufflepud,
+    PLATFORM_URL,
+    IMAGE_CONTENT_TYPES,
+    VIDEO_CONTENT_TYPES,
+    displayRoom,
+    isRoomId,
+    splitRoomId,
+  } from "@app/core/state"
   import {makeRoomPath, makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
@@ -16,25 +24,43 @@
   let hideImage = $state(false)
 
   const url = value.url.toString()
-  const splitRoomReference = (input: string) => {
-    const separatorIndex = input.indexOf("'")
-
-    if (separatorIndex === -1) {
+  const roomReference = call(() => {
+    if (!isRoomId(url)) {
       return undefined
     }
 
-    const roomUrl = input.slice(0, separatorIndex)
-    const h = input.slice(separatorIndex + 1)
+    const [roomUrl, h] = splitRoomId(url)
 
-    if (!h || !isRelayUrl(roomUrl)) {
+    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 roomReference = splitRoomReference(url)
-  const relayReference = !roomReference && isRelayUrl(url) ? normalizeRelayUrl(url) : undefined
   const fileType = getTagValue("file-type", event.tags) || ""
   const [href, external] = call(() => {
     if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
@@ -74,7 +100,7 @@
     {:else if roomReference || relayReference}
       <div class="bg-alt p-4 leading-normal">
         <Icon icon={LinkRound} size={3} class="inline-block" />
-        <span class="ml-2">{displayUrl(url)}</span>
+        <span class="ml-2">{label}</span>
       </div>
     {:else}
       {#await loadPreview()}

src/app/components/ContentLinkInline.svelte

@@ -1,40 +1,65 @@
 <script lang="ts">
   import {call, displayUrl} from "@welshman/lib"
-  import {isRelayUrl, getTagValue, normalizeRelayUrl} from "@welshman/util"
+  import {isRelayUrl, getTagValue, normalizeRelayUrl, displayRelayUrl} 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 {pushModal} from "@app/util/modal"
-  import {PLATFORM_URL, IMAGE_CONTENT_TYPES} from "@app/core/state"
+  import {
+    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 splitRoomReference = (input: string) => {
-    const separatorIndex = input.indexOf("'")
-
-    if (separatorIndex === -1) {
+  const roomReference = call(() => {
+    if (!isRoomId(url)) {
       return undefined
     }
 
-    const roomUrl = input.slice(0, separatorIndex)
-    const h = input.slice(separatorIndex + 1)
+    const [roomUrl, h] = splitRoomId(url)
 
-    if (!h || !isRelayUrl(roomUrl)) {
+    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 roomReference = splitRoomReference(url)
   const fileType = getTagValue("file-type", event.tags) || ""
   const [href, external] = call(() => {
     if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
-    if (isRelayUrl(url)) return [makeSpacePath(normalizeRelayUrl(url)), false]
+    if (relayReference) return [makeSpacePath(relayReference), false]
     if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
 
     return [url, true]
@@ -55,6 +80,6 @@
 {:else}
   <Link {external} {href} class="link-content whitespace-nowrap">
     <Icon icon={LinkRound} size={3} class="inline-block" />
-    {displayUrl(url)}
+    {label}
   </Link>
 {/if}