add room mentions and clickable room/relay refs

2026-04-04 16:48:29 +05:30
parent f6d9e52c6e
commit ec0b6a99e2
10 changed files with 278 additions and 69 deletions
@@ -5,30 +5,32 @@
  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"
  import {pushModal} from "@app/util/modal"
  import {
    dufflepud,
-    PLATFORM_URL,
    IMAGE_CONTENT_TYPES,
+    PLATFORM_URL,
    VIDEO_CONTENT_TYPES,
    THUMBNAIL_URL,
+    isRoomId,
  } from "@app/core/state"
-  import {makeSpacePath} from "@app/util/routes"

  const {value, event} = $props()

  let hideImage = $state(false)

  const url = value.url.toString()
-  const fileType = getTagValue("file-type", event.tags) || ""
+  const isRoomOrRelay = isRoomId(url) || isRelayUrl(url)
  const [href, external] = call(() => {
-    if (isRelayUrl(url)) return [makeSpacePath(url), false]
    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]

    return [url, true]
  })

+  const fileType = getTagValue("file-type", event.tags) || ""
+
  const getVideoPoster = (videoUrl: string): string | undefined => {
    if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
      return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}`
@@ -54,46 +56,52 @@
  const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>

-<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
-        controls
-        src={url}
-        poster={getVideoPoster(url)}
-        preload="metadata"
-        class="max-h-96 rounded-box object-contain object-center">
-        <track kind="captions" />
-      </video>
-    {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
-      <button type="button" onclick={stopPropagation(preventDefault(expand))}>
-        <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
-      </button>
-    {:else}
-      {#await loadPreview()}
-        <div class="center my-12 w-full">
-          <span class="loading loading-spinner"></span>
-        </div>
-      {:then preview}
-        <div class="bg-alt flex max-w-xl flex-col leading-normal">
-          {#if preview.image && !hideImage}
-            <img
-              alt=""
-              onerror={onError}
-              src={preview.image}
-              class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
-          {/if}
-          <div class="flex flex-col gap-2 p-4">
-            <strong class="overflow-hidden text-ellipsis whitespace-nowrap"
-              >{preview.title || displayUrl(url)}</strong>
-            <p>{ellipsize(preview.description, 140)}</p>
-          </div>
-        </div>
-      {:catch}
-        <p class="bg-alt p-12 text-center leading-normal">
-          Unable to load a preview for {url}
-        </p>
-      {/await}
-    {/if}
+{#if isRoomOrRelay}
+  <div>
+    <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
  </div>
-</Link>
+{:else}
+  <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
+          controls
+          src={url}
+          poster={getVideoPoster(url)}
+          preload="metadata"
+          class="max-h-96 rounded-box object-contain object-center">
+          <track kind="captions" />
+        </video>
+      {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
+        <button type="button" onclick={stopPropagation(preventDefault(expand))}>
+          <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
+        </button>
+      {:else}
+        {#await loadPreview()}
+          <div class="center my-12 w-full">
+            <span class="loading loading-spinner"></span>
+          </div>
+        {:then preview}
+          <div class="bg-alt flex max-w-xl flex-col leading-normal">
+            {#if preview.image && !hideImage}
+              <img
+                alt=""
+                onerror={onError}
+                src={preview.image}
+                class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
+            {/if}
+            <div class="flex flex-col gap-2 p-4">
+              <strong class="overflow-hidden text-ellipsis whitespace-nowrap"
+                >{preview.title || displayUrl(url)}</strong>
+              <p>{ellipsize(preview.description, 140)}</p>
+            </div>
+          </div>
+        {:catch}
+          <p class="bg-alt p-12 text-center leading-normal">
+            Unable to load a preview for {url}
+          </p>
+        {/await}
+      {/if}
+    </div>
+  </Link>
+{/if}
@@ -1,25 +1,18 @@
 <script lang="ts">
-  import {call, displayUrl} from "@welshman/lib"
-  import {isRelayUrl, getTagValue} from "@welshman/util"
+  import {displayUrl} from "@welshman/lib"
+  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 {PLATFORM_URL, IMAGE_CONTENT_TYPES} from "@app/core/state"
-  import {makeSpacePath} from "@app/util/routes"
+  import {IMAGE_CONTENT_TYPES} from "@app/core/state"

  const {value, event} = $props()

  const url = value.url.toString()
  const fileType = getTagValue("file-type", event.tags) || ""
-  const [href, external] = call(() => {
-    if (isRelayUrl(url)) return [makeSpacePath(url), false]
-    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
-
-    return [url, true]
-  })

  const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
@@ -34,8 +27,5 @@
    {displayUrl(url)}
  </a>
 {:else}
-  <Link {external} {href} class="link-content whitespace-nowrap">
-    <Icon icon={LinkRound} size={3} class="inline-block" />
-    {displayUrl(url)}
-  </Link>
+  <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
 {/if}
@@ -0,0 +1,59 @@
+<script lang="ts">
+  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 {
+    url,
+    class: className = "",
+  }: {
+    url: string
+    class?: 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 [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 roomReference}
+    ~<span class="text-primary">{displayRelayUrl(roomReference.url)}</span> /
+    {displayRoom(roomReference.url, roomReference.h)}
+  {:else if relayReference}
+    <span class="text-primary">{displayRelayUrl(relayReference)}</span>
+  {:else}
+    <Icon icon={LinkRound} size={3} class="inline-block" />
+    {displayUrl(url)}
+  {/if}
+</Link>
@@ -12,7 +12,7 @@
 </script>

 <div class="flex grow items-center justify-between gap-4 {props.class}">
-  <div class="flex items-center gap-3">
+  <div class="flex items-center gap-2">
    <RoomImage {url} {h} />
    <div class="min-w-0 overflow-hidden text-ellipsis">
      <RoomName {url} {h} />