refactor: move room and space mention rendering into link components

src/app/components/Content.svelte

@@ -24,7 +24,6 @@
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import ContentText from "@app/components/ContentText.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
   import ContentEmoji from "@app/components/ContentEmoji.svelte"
   import ContentCode from "@app/components/ContentCode.svelte"
@@ -156,8 +155,6 @@
       {#each shortContent as parsed, i}
         {#if isNewline(parsed) && !isBlock(i - 1)}
           <ContentNewline value={parsed.value} />
-        {:else if isText(parsed)}
-          <ContentText value={parsed.value} />
         {:else if isTopic(parsed)}
           <ContentTopic value={parsed.value} />
         {:else if isEmoji(parsed)}

src/app/components/ContentLinkBlock.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {isRelayUrl, getTagValue} from "@welshman/util"
+  import {isRelayUrl, getTagValue, normalizeRelayUrl} 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 ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
@@ -14,16 +16,36 @@
     VIDEO_CONTENT_TYPES,
     THUMBNAIL_URL,
   } from "@app/core/state"
-  import {makeSpacePath} from "@app/util/routes"
+  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   let hideImage = $state(false)
 
   const url = value.url.toString()
+  const splitRoomReference = (input: string) => {
+    const separatorIndex = input.indexOf("'")
+
+    if (separatorIndex === -1) {
+      return undefined
+    }
+
+    const roomUrl = input.slice(0, separatorIndex)
+    const h = input.slice(separatorIndex + 1)
+
+    if (!h || !isRelayUrl(roomUrl)) {
+      return undefined
+    }
+
+    return {url: normalizeRelayUrl(roomUrl), h}
+  }
+
+  const roomReference = splitRoomReference(url)
+  const relayReference = !roomReference && isRelayUrl(url) ? normalizeRelayUrl(url) : undefined
   const fileType = getTagValue("file-type", event.tags) || ""
   const [href, external] = call(() => {
-    if (isRelayUrl(url)) return [makeSpacePath(url), false]
+    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]
@@ -69,6 +91,11 @@
       <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">{displayUrl(url)}</span>
+      </div>
     {:else}
       {#await loadPreview()}
         <div class="center my-12 w-full">

src/app/components/ContentLinkInline.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {call, displayUrl} from "@welshman/lib"
-  import {isRelayUrl, getTagValue} from "@welshman/util"
+  import {isRelayUrl, getTagValue, normalizeRelayUrl} 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,14 +8,33 @@
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import {pushModal} from "@app/util/modal"
   import {PLATFORM_URL, IMAGE_CONTENT_TYPES} from "@app/core/state"
-  import {makeSpacePath} from "@app/util/routes"
+  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) {
+      return undefined
+    }
+
+    const roomUrl = input.slice(0, separatorIndex)
+    const h = input.slice(separatorIndex + 1)
+
+    if (!h || !isRelayUrl(roomUrl)) {
+      return undefined
+    }
+
+    return {url: normalizeRelayUrl(roomUrl), h}
+  }
+
+  const roomReference = splitRoomReference(url)
   const fileType = getTagValue("file-type", event.tags) || ""
   const [href, external] = call(() => {
-    if (isRelayUrl(url)) return [makeSpacePath(url), false]
+    if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
+    if (isRelayUrl(url)) return [makeSpacePath(normalizeRelayUrl(url)), false]
     if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
 
     return [url, true]

src/app/components/ContentMinimal.svelte

@@ -22,7 +22,6 @@
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import ContentText from "@app/components/ContentText.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
   import ContentEmoji from "@app/components/ContentEmoji.svelte"
   import ContentCode from "@app/components/ContentCode.svelte"
@@ -106,8 +105,6 @@
       {#each shortContent as parsed, i}
         {#if isNewline(parsed)}
           <ContentNewline value={parsed.value} />
-        {:else if isText(parsed)}
-          <ContentText value={parsed.value} />
         {:else if isTopic(parsed)}
           <ContentTopic value={parsed.value} />
         {:else if isEmoji(parsed)}

src/app/components/ContentText.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import Link from "@lib/components/Link.svelte"
-  import {parseContentTextParts} from "@lib/content-text"
-  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
-
-  type Props = {
-    value: string
-  }
-
-  const {value}: Props = $props()
-
-  const parts = $derived(parseContentTextParts(value))
-</script>
-
-{#each parts as part, i (i)}
-  {#if part.type === "room"}
-    <Link href={makeRoomPath(part.url, part.h)} class="link-content whitespace-nowrap"
-      >{part.value}</Link>
-  {:else if part.type === "relay"}
-    <Link href={makeSpacePath(part.url)} class="link-content whitespace-nowrap">{part.value}</Link>
-  {:else}
-    {part.value}
-  {/if}
-{/each}