2024-10-23 21:20:24 +00:00
|
|
|
<script lang="ts">
|
2026-08-29 16:19:01 +00:00
|
|
|
import {onDestroy} from "svelte"
|
2026-06-17 16:08:58 +00:00
|
|
|
import * as nip19 from "nostr-tools/nip19"
|
2026-08-22 18:20:33 +00:00
|
|
|
import {call, sleep, spec, tryCatch} from "@welshman/lib"
|
2026-06-17 16:08:58 +00:00
|
|
|
import type {TrustedEvent} from "@welshman/util"
|
2026-07-28 16:16:26 +00:00
|
|
|
import {deriveEventsAsc} from "@welshman/store"
|
2026-08-17 15:42:14 +00:00
|
|
|
import {getCommentFiltersForRoot, tagValue, tagSpec} from "@welshman/util"
|
2025-09-10 22:26:39 +00:00
|
|
|
import Reply from "@assets/icons/reply-2.svg?dataurl"
|
2024-10-23 21:20:24 +00:00
|
|
|
import Icon from "@lib/components/Icon.svelte"
|
2025-03-19 17:30:36 +00:00
|
|
|
import PageContent from "@lib/components/PageContent.svelte"
|
2024-10-24 18:52:02 +00:00
|
|
|
import Spinner from "@lib/components/Spinner.svelte"
|
2024-10-23 21:20:24 +00:00
|
|
|
import Button from "@lib/components/Button.svelte"
|
2026-06-17 16:08:58 +00:00
|
|
|
import Link from "@lib/components/Link.svelte"
|
2026-03-12 23:41:07 +00:00
|
|
|
import SpaceBar from "@app/components/SpaceBar.svelte"
|
2026-06-17 16:08:58 +00:00
|
|
|
import ThreadPost from "@app/components/ThreadPost.svelte"
|
2025-02-06 18:24:31 +00:00
|
|
|
import EventReply from "@app/components/EventReply.svelte"
|
2026-06-17 16:08:58 +00:00
|
|
|
import RoomName from "@app/components/RoomName.svelte"
|
2026-07-28 16:16:26 +00:00
|
|
|
import {deriveEvent, deriveEventsById} from "@app/repository"
|
2026-08-13 21:44:41 +00:00
|
|
|
import {network} from "@app/core"
|
2026-08-29 16:19:01 +00:00
|
|
|
import {makeFeedContext} from "@app/feeds"
|
2026-06-08 22:33:38 +00:00
|
|
|
import {decodeRelay} from "@app/relays"
|
2026-06-17 16:08:58 +00:00
|
|
|
import {makeSpacePath, scrollToEvent} from "@app/routes"
|
2026-09-16 17:14:43 +00:00
|
|
|
import type {PageProps} from "./$types"
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
const REPLY_BATCH_SIZE = 20
|
2024-10-23 21:20:24 +00:00
|
|
|
|
2026-09-16 17:14:43 +00:00
|
|
|
const {params}: PageProps = $props()
|
|
|
|
|
|
|
|
|
|
const {relay, id} = params
|
2024-10-23 21:20:24 +00:00
|
|
|
const url = decodeRelay(relay)
|
2025-11-20 23:54:06 +00:00
|
|
|
const event = deriveEvent(id, [url])
|
2026-08-29 16:19:01 +00:00
|
|
|
// Rows register themselves with `related`, so the whole page's reactions load in one batch
|
|
|
|
|
const context = makeFeedContext({relays: [url]})
|
2026-08-17 15:42:14 +00:00
|
|
|
const filters = $derived($event ? getCommentFiltersForRoot([$event]) : [])
|
|
|
|
|
const replies = $derived(deriveEventsAsc(deriveEventsById(filters)))
|
2024-10-23 21:20:24 +00:00
|
|
|
|
|
|
|
|
const back = () => history.back()
|
|
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
const replyCount = $derived($replies.length)
|
2026-07-28 16:16:26 +00:00
|
|
|
const h = $derived(tagValue(tagSpec("h"), $event?.tags || []))
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
// A permalink's target. Replies stream in newest first, so the post it names is usually here
|
|
|
|
|
// long before the ones above it — its position is only right once the thread has finished
|
|
|
|
|
// arriving, so this is kept and re-read rather than acted on the first time it shows up.
|
|
|
|
|
let target: string | undefined = $state(
|
|
|
|
|
call(() => {
|
|
|
|
|
const hash = window.location.hash.replace(/^#/, "")
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
if (hash.startsWith("nevent1")) {
|
|
|
|
|
const decoded = tryCatch(() => nip19.decode(hash))
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
if (decoded?.type === "nevent") {
|
|
|
|
|
return decoded.data.id
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}),
|
|
|
|
|
)
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
let revealed = $state(REPLY_BATCH_SIZE)
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
const targetIndex = $derived(target ? $replies.findIndex(spec({id: target})) : -1)
|
|
|
|
|
|
|
|
|
|
// A thread reads from its newest end, and the reader pulls earlier replies in from there. A
|
|
|
|
|
// permalink reaches back as far as it has to on its own.
|
|
|
|
|
const visibleCount = $derived(
|
|
|
|
|
targetIndex < 0 ? revealed : Math.max(revealed, $replies.length - targetIndex),
|
2026-06-17 16:08:58 +00:00
|
|
|
)
|
|
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
const visibleReplies = $derived($replies.slice(Math.max(0, $replies.length - visibleCount)))
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
const hiddenCount = $derived($replies.length - visibleReplies.length)
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
// Reaching back by hand hands control back to the reader.
|
|
|
|
|
const showEarlier = () => {
|
|
|
|
|
const nextCount = visibleCount + REPLY_BATCH_SIZE
|
2026-06-17 16:08:58 +00:00
|
|
|
|
2026-09-10 03:37:37 +00:00
|
|
|
target = undefined
|
|
|
|
|
revealed = nextCount
|
2026-06-17 16:08:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const openReply = (post: TrustedEvent) => {
|
|
|
|
|
replyTo = post
|
2024-10-23 23:16:28 +00:00
|
|
|
showReply = true
|
|
|
|
|
}
|
2024-10-23 21:20:24 +00:00
|
|
|
|
2024-10-23 23:16:28 +00:00
|
|
|
const closeReply = () => {
|
|
|
|
|
showReply = false
|
2026-06-17 16:08:58 +00:00
|
|
|
replyTo = undefined
|
2024-10-23 21:20:24 +00:00
|
|
|
}
|
2024-10-23 23:16:28 +00:00
|
|
|
|
2026-06-17 16:08:58 +00:00
|
|
|
const openThreadReply = () => {
|
|
|
|
|
if ($event) {
|
|
|
|
|
openReply($event)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const clearReplyParent = () => {
|
|
|
|
|
if ($event) {
|
|
|
|
|
replyTo = $event
|
|
|
|
|
}
|
2024-11-21 19:52:29 +00:00
|
|
|
}
|
|
|
|
|
|
2026-08-29 16:19:01 +00:00
|
|
|
onDestroy(context.cleanup)
|
|
|
|
|
|
2025-02-04 00:37:14 +00:00
|
|
|
let showReply = $state(false)
|
2026-06-17 16:08:58 +00:00
|
|
|
let replyTo: TrustedEvent | undefined = $state()
|
|
|
|
|
|
2026-08-22 18:20:33 +00:00
|
|
|
$effect(() => {
|
2026-09-10 03:37:37 +00:00
|
|
|
if (target && (target === $event?.id || targetIndex >= 0)) {
|
|
|
|
|
setTimeout(() => scrollToEvent(target!), 100)
|
2026-06-17 16:08:58 +00:00
|
|
|
}
|
|
|
|
|
})
|
2024-10-24 18:52:02 +00:00
|
|
|
|
2026-08-17 15:42:14 +00:00
|
|
|
$effect(() => {
|
|
|
|
|
if (filters.length > 0) {
|
|
|
|
|
const controller = new AbortController()
|
2025-04-11 16:27:19 +00:00
|
|
|
|
2026-08-17 15:42:14 +00:00
|
|
|
$network.request({relays: [url], filters, signal: controller.signal})
|
2024-11-14 18:53:13 +00:00
|
|
|
|
2026-08-17 15:42:14 +00:00
|
|
|
return () => controller.abort()
|
2024-11-15 22:03:54 +00:00
|
|
|
}
|
2024-11-14 18:53:13 +00:00
|
|
|
})
|
2024-10-23 21:20:24 +00:00
|
|
|
</script>
|
|
|
|
|
|
2026-06-17 16:08:58 +00:00
|
|
|
<SpaceBar {back} class="!h-auto min-h-20 py-3">
|
2025-03-19 17:30:36 +00:00
|
|
|
{#snippet title()}
|
2026-06-17 16:08:58 +00:00
|
|
|
<div class="flex min-w-0 flex-col gap-0.5">
|
2026-07-02 21:22:55 +00:00
|
|
|
<h1 class="truncate min-w-0 font-bold sm:text-xl">
|
2026-07-28 16:16:26 +00:00
|
|
|
{tagValue(tagSpec("title"), $event?.tags || []) || ""}
|
2026-06-17 16:08:58 +00:00
|
|
|
</h1>
|
|
|
|
|
<p class="text-xs opacity-75">
|
|
|
|
|
{replyCount}
|
|
|
|
|
{replyCount === 1 ? "reply" : "replies"}
|
|
|
|
|
{#if h}
|
|
|
|
|
· <Link href={makeSpacePath(url, h)} class="link">#<RoomName {url} {h} /></Link>
|
|
|
|
|
{/if}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2025-03-19 17:30:36 +00:00
|
|
|
{/snippet}
|
2026-03-12 23:41:07 +00:00
|
|
|
</SpaceBar>
|
2025-03-19 17:30:36 +00:00
|
|
|
|
2026-06-24 20:56:53 +00:00
|
|
|
<PageContent noPad class="flex flex-col">
|
2024-10-24 18:52:02 +00:00
|
|
|
{#if $event}
|
2026-06-24 20:56:53 +00:00
|
|
|
<div class="bg-surface border-y" style="border-color: var(--line)">
|
2026-09-10 03:37:37 +00:00
|
|
|
<ThreadPost {url} {context} event={$event} threadPubkey={$event.pubkey} onReply={openReply} />
|
2025-03-19 17:30:36 +00:00
|
|
|
</div>
|
2026-09-10 03:37:37 +00:00
|
|
|
{#if hiddenCount > 0}
|
|
|
|
|
<div class="flex justify-center py-4">
|
|
|
|
|
<Button class="button button-neutral button-sm" onclick={showEarlier}>
|
2026-09-14 21:11:21 +00:00
|
|
|
Show earlier replies ({hiddenCount})
|
2026-09-10 03:37:37 +00:00
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
{#if visibleReplies.length > 0}
|
|
|
|
|
<div class="bg-surface border-y" style="border-color: var(--line)">
|
|
|
|
|
{#each visibleReplies as reply (reply.id)}
|
|
|
|
|
<ThreadPost
|
|
|
|
|
{url}
|
|
|
|
|
{context}
|
|
|
|
|
event={reply}
|
|
|
|
|
threadPubkey={$event.pubkey}
|
|
|
|
|
onReply={openReply} />
|
|
|
|
|
{/each}
|
|
|
|
|
</div>
|
2026-06-17 16:08:58 +00:00
|
|
|
{/if}
|
|
|
|
|
{#if showReply && replyTo && $event}
|
|
|
|
|
<EventReply
|
|
|
|
|
{url}
|
|
|
|
|
event={$event}
|
|
|
|
|
parent={replyTo.id === $event.id ? undefined : replyTo}
|
|
|
|
|
onClose={closeReply}
|
|
|
|
|
onClearParent={clearReplyParent}
|
|
|
|
|
onSubmit={closeReply} />
|
2025-03-19 17:30:36 +00:00
|
|
|
{:else}
|
2026-06-17 16:08:58 +00:00
|
|
|
<div class="flex justify-end p-4">
|
2026-06-24 20:56:53 +00:00
|
|
|
<Button class="button button-primary" onclick={openThreadReply}>
|
2025-09-10 22:26:39 +00:00
|
|
|
<Icon icon={Reply} />
|
2025-03-19 17:30:36 +00:00
|
|
|
Reply to thread
|
2024-11-21 19:52:29 +00:00
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
2024-10-24 18:52:02 +00:00
|
|
|
{:else}
|
2026-06-04 21:31:07 +00:00
|
|
|
<div class="flex justify-center py-20">
|
|
|
|
|
{#await sleep(5000)}
|
|
|
|
|
<Spinner loading>Loading thread...</Spinner>
|
|
|
|
|
{:then}
|
|
|
|
|
<p>Failed to load thread.</p>
|
|
|
|
|
{/await}
|
|
|
|
|
</div>
|
2024-10-24 18:52:02 +00:00
|
|
|
{/if}
|
2025-03-19 17:30:36 +00:00
|
|
|
</PageContent>
|
