coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

feat: implement room and space mentions (#130) #154

Closed
Khushvendra wants to merge 5 commits from Khushvendra/flotilla:feat/room-mentions-130 into dev
pull from: Khushvendra/flotilla:feat/room-mentions-130
merge into: coracle:dev
Conversation 10 Commits 5 Files Changed 8
+139 -158
3 changed files with 139 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ebc1e72b28 - Show all commits
src/app/components/ContentLinkBlock.svelte
+54 -99
View File
@@ -1,76 +1,28 @@
<script lang="ts">
import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
import {isRelayUrl, getTagValue, normalizeRelayUrl, displayRelayUrl} from "@welshman/util"
import {ellipsize, displayUrl, postJson} from "@welshman/lib"
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(() => {
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 isRoomOrRelay = isRoomId(url) || isRelayUrl(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) {
1
 @@ -97,51 +49,54 @@
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 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">
<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>
{#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">
hodlbod marked this conversation as resolved
hodlbod commented 2026-04-09 19:35:38 +00:00
Review
Copy Link
Copy Source

It doesn't make sense to use ContentLinkUrl in this case since because we're providing our own content, it's doing basically nothing. Remove the children and showIcon props from ContentLinkUrl. You can might be able to remove the labelClass as well, not sure.

It doesn't make sense to use ContentLinkUrl in this case since because we're providing our own content, it's doing basically nothing. Remove the children and showIcon props from ContentLinkUrl. You can might be able to remove the labelClass as well, not sure.
<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>
Khushvendra marked this conversation as resolved Outdated
hodlbod commented 2026-04-06 19:36:02 +00:00
Outdated
Review
Copy Link
Copy Source

We should display url/h more helpfully. In either case, prefix with a tilde. Display the url as the space name, and if an h is included append it after the slash, like this: ~Coracle Spaces / Design. Make the same change to the edit interface as well.

We should display url/h more helpfully. In either case, prefix with a tilde. Display the url as the space name, and if an `h` is included append it after the slash, like this: `~Coracle Spaces / Design`. Make the same change to the edit interface as well.
</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>
{: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>
</ContentLinkUrl>
{/if}
src/app/components/ContentLinkInline.svelte
+5 -59
View File
@@ -1,69 +1,18 @@
<script lang="ts">
import {call, displayUrl} from "@welshman/lib"
import {isRelayUrl, getTagValue, normalizeRelayUrl, displayRelayUrl} 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,
displayRoom,
isRoomId,
splitRoomId,
} from "@app/core/state"
import {makeRoomPath, makeSpacePath} from "@app/util/routes"
import {IMAGE_CONTENT_TYPES} from "@app/core/state"
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">
<Icon icon={LinkRound} size={3} class="inline-block" />
{label}
</Link>
<ContentLinkUrl {url} class="link-content whitespace-nowrap" showIcon />
{/if}
src/app/components/ContentLinkUrl.svelte
+80
View File
@@ -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>