2024-10-31 19:24:40 +00:00
|
|
|
<script lang="ts">
|
2026-08-29 16:48:04 +00:00
|
|
|
import {onDestroy, onMount} from "svelte"
|
2025-10-06 18:23:19 +00:00
|
|
|
import {readable} from "svelte/store"
|
|
|
|
|
import type {Readable} from "svelte/store"
|
2026-06-17 16:08:58 +00:00
|
|
|
import {sortBy, partition, spec, max, pushToMapKey, groupBy} from "@welshman/lib"
|
2026-08-30 00:42:07 +00:00
|
|
|
import type {Maybe} from "@welshman/lib"
|
2025-02-13 18:52:00 +00:00
|
|
|
import type {TrustedEvent} from "@welshman/util"
|
2026-07-28 16:16:26 +00:00
|
|
|
import {THREAD, tagValue, tagSpec} from "@welshman/util"
|
2025-09-10 22:26:39 +00:00
|
|
|
import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
|
2024-10-31 19:24:40 +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-31 19:24:40 +00:00
|
|
|
import Spinner from "@lib/components/Spinner.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 ThreadBoard from "@app/components/ThreadBoard.svelte"
|
2026-06-08 22:33:38 +00:00
|
|
|
import {decodeRelay} from "@app/relays"
|
2026-07-28 16:16:26 +00:00
|
|
|
import {displayRoom} from "@app/rooms"
|
2026-06-08 22:33:38 +00:00
|
|
|
import {makeCommentFilter} from "@app/content"
|
2026-08-30 00:42:07 +00:00
|
|
|
import {isFeedLoading, makeFeed, makeFeedContext, makeScrollLoader} from "@app/feeds"
|
2026-09-16 17:14:43 +00:00
|
|
|
import type {PageProps} from "./$types"
|
2024-10-31 19:24:40 +00:00
|
|
|
|
2026-09-16 17:14:43 +00:00
|
|
|
const {params}: PageProps = $props()
|
|
|
|
|
|
|
|
|
|
const url = decodeRelay(params.relay)
|
2026-08-29 16:48:04 +00:00
|
|
|
const context = makeFeedContext({relays: [url]})
|
|
|
|
|
|
|
|
|
|
onDestroy(context.cleanup)
|
2024-10-31 19:24:40 +00:00
|
|
|
|
2026-08-30 00:42:07 +00:00
|
|
|
let older: Maybe<ReturnType<typeof makeScrollLoader>> = $state()
|
|
|
|
|
|
|
|
|
|
const loading = $derived(isFeedLoading($older))
|
|
|
|
|
const exhausted = $derived($older?.status === "exhausted")
|
2025-02-13 18:52:00 +00:00
|
|
|
let element: HTMLElement | undefined = $state()
|
2025-10-06 18:23:19 +00:00
|
|
|
let events: Readable<TrustedEvent[]> = $state(readable([]))
|
2024-11-21 19:01:34 +00:00
|
|
|
|
2026-06-17 16:08:58 +00:00
|
|
|
const threadFeed = $derived.by(() => {
|
2025-10-06 18:23:19 +00:00
|
|
|
const scores = new Map<string, number[]>()
|
2026-06-17 16:08:58 +00:00
|
|
|
const [threads, comments] = partition(spec({kind: THREAD}), $events)
|
2024-11-21 19:01:34 +00:00
|
|
|
|
2025-02-13 18:52:00 +00:00
|
|
|
for (const comment of comments) {
|
2026-07-28 16:16:26 +00:00
|
|
|
const id = tagValue(tagSpec("E"), comment.tags)
|
2024-11-21 19:01:34 +00:00
|
|
|
|
2025-02-13 18:52:00 +00:00
|
|
|
if (id) {
|
2025-10-06 18:23:19 +00:00
|
|
|
pushToMapKey(scores, id, comment.created_at)
|
2025-02-13 18:52:00 +00:00
|
|
|
}
|
|
|
|
|
}
|
2024-10-31 19:24:40 +00:00
|
|
|
|
2026-06-17 16:08:58 +00:00
|
|
|
const items = sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), threads)
|
|
|
|
|
|
2026-09-09 17:13:16 +00:00
|
|
|
const grouped = groupBy(e => tagValue(tagSpec("h"), e.tags) || "", items)
|
|
|
|
|
const byRoom = new Map<string, TrustedEvent[]>([["", []], ...grouped])
|
2026-06-17 16:08:58 +00:00
|
|
|
const roomName = (h: string) => (h ? displayRoom(url, h) : "general").toLowerCase()
|
|
|
|
|
const boards = sortBy(([h]) => roomName(h), Array.from(byRoom.entries()))
|
|
|
|
|
|
|
|
|
|
return {items, boards}
|
2024-11-14 18:53:13 +00:00
|
|
|
})
|
|
|
|
|
|
2024-11-15 22:03:54 +00:00
|
|
|
onMount(() => {
|
2025-10-06 18:23:19 +00:00
|
|
|
const feed = makeFeed({
|
2026-06-29 23:28:11 +00:00
|
|
|
relays: [url],
|
2026-08-29 16:48:04 +00:00
|
|
|
onEvent: context.add,
|
2025-10-06 18:23:19 +00:00
|
|
|
filters: [{kinds: [THREAD]}, makeCommentFilter([THREAD])],
|
2024-11-15 22:03:54 +00:00
|
|
|
})
|
2024-11-01 21:46:38 +00:00
|
|
|
|
2025-10-06 18:23:19 +00:00
|
|
|
events = feed.events
|
|
|
|
|
|
2026-08-30 00:42:07 +00:00
|
|
|
// These lists are sorted newest first, so reaching the bottom is reaching the oldest thing
|
|
|
|
|
// loaded.
|
|
|
|
|
older = makeScrollLoader(element!, feed.loadOlder)
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
older?.stop()
|
|
|
|
|
feed.cleanup()
|
|
|
|
|
}
|
2024-11-14 18:53:13 +00:00
|
|
|
})
|
2024-10-31 19:24:40 +00:00
|
|
|
</script>
|
|
|
|
|
|
2026-03-12 23:41:07 +00:00
|
|
|
<SpaceBar>
|
2026-05-25 19:18:51 +00:00
|
|
|
{#snippet leading()}
|
2026-03-12 23:41:07 +00:00
|
|
|
<Icon icon={NotesMinimalistic} />
|
2026-05-25 19:18:51 +00:00
|
|
|
{/snippet}
|
|
|
|
|
{#snippet title()}
|
2025-03-19 17:30:36 +00:00
|
|
|
<strong>Threads</strong>
|
|
|
|
|
{/snippet}
|
2026-03-12 23:41:07 +00:00
|
|
|
</SpaceBar>
|
2025-03-19 17:30:36 +00:00
|
|
|
|
2026-06-22 20:36:57 +00:00
|
|
|
<PageContent bind:element class="flex flex-col gap-2 p-2 sm:gap-4 sm:p-4">
|
2026-09-09 17:43:44 +00:00
|
|
|
{#each threadFeed.boards as [h, threads] (h)}
|
2026-08-29 16:48:04 +00:00
|
|
|
<ThreadBoard {url} {h} {threads} {context} />
|
2025-03-19 17:30:36 +00:00
|
|
|
{/each}
|
|
|
|
|
<p class="flex h-10 items-center justify-center py-20">
|
|
|
|
|
<Spinner {loading}>
|
|
|
|
|
{#if loading}
|
|
|
|
|
Looking for threads...
|
2026-08-30 00:42:07 +00:00
|
|
|
{:else if exhausted && threadFeed.items.length === 0}
|
2025-03-19 17:30:36 +00:00
|
|
|
No threads found.
|
|
|
|
|
{/if}
|
|
|
|
|
</Spinner>
|
|
|
|
|
</p>
|
|
|
|
|
</PageContent>
|
