Handle relay urls in content and link within the app

CHANGELOG.md

@@ -3,6 +3,7 @@
 # Current
 
 * Fix skinny profile images
+* Custom handler for relay urls
 
 # 1.6.0
 

src/app/components/ContentLinkBlock.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
-  import {ellipsize, displayUrl, postJson} from "@welshman/lib"
+  import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {dufflepud} from "@app/core/state"
+  import {isRelayUrl} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
-  import {PLATFORM_URL} from "@app/core/state"
+  import {dufflepud, PLATFORM_URL} from "@app/core/state"
+  import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   let hideImage = $state(false)
 
   const url = value.url.toString()
-  const external = !url.startsWith(PLATFORM_URL)
+  const [href, external] = call(() => {
-  const href = external ? url : url.replace(PLATFORM_URL, "")
+    if (isRelayUrl(url)) return [makeSpacePath(url), false]
+    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
+
+    return [url, true]
+  })
 
   const loadPreview = async () => {
     const json = await postJson(dufflepud("link/preview"), {url})

src/app/components/ContentLinkInline.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import {displayUrl} from "@welshman/lib"
+  import {call, displayUrl} from "@welshman/lib"
+  import {isRelayUrl} from "@welshman/util"
   import {preventDefault} from "@lib/html"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -7,12 +8,17 @@
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import {pushModal} from "@app/util/modal"
   import {PLATFORM_URL} from "@app/core/state"
+  import {makeSpacePath} from "@app/util/routes"
 
   const {value} = $props()
 
   const url = value.url.toString()
-  const external = !url.startsWith(PLATFORM_URL)
+  const [href, external] = call(() => {
-  const href = external ? url : url.replace(PLATFORM_URL, "")
+    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, {url}, {fullscreen: true})
 </script>