forked from coracle/flotilla
Jon Staab
117 lines
3.5 KiB
Svelte
117 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import {onMount} from "svelte"
|
|
import {page} from "$app/stores"
|
|
import {sortBy, max, nthEq} from "@welshman/lib"
|
|
import type {TrustedEvent} from "@welshman/util"
|
|
import {THREAD, DELETE, COMMENT, getListTags, getPubkeyTagValues} from "@welshman/util"
|
|
import {userMutes} from "@welshman/app"
|
|
import {fly} from "@lib/transition"
|
|
import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import PageBar from "@lib/components/PageBar.svelte"
|
|
import PageContent from "@lib/components/PageContent.svelte"
|
|
import Spinner from "@lib/components/Spinner.svelte"
|
|
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
|
|
import ThreadItem from "@app/components/ThreadItem.svelte"
|
|
import ThreadCreate from "@app/components/ThreadCreate.svelte"
|
|
import {decodeRelay, getEventsForUrl} from "@app/core/state"
|
|
import {setChecked} from "@app/util/notifications"
|
|
import {REACTION_KINDS} from "@app/core/state"
|
|
import {makeFeed} from "@app/core/requests"
|
|
import {pushModal} from "@app/util/modal"
|
|
|
|
const url = decodeRelay($page.params.relay!)
|
|
const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
|
|
const threads: TrustedEvent[] = $state([])
|
|
const comments: TrustedEvent[] = $state([])
|
|
|
|
let loading = $state(true)
|
|
let element: HTMLElement | undefined = $state()
|
|
|
|
const createThread = () => pushModal(ThreadCreate, {url})
|
|
|
|
const events = $derived.by(() => {
|
|
const scores = new Map<string, number>()
|
|
|
|
for (const comment of comments) {
|
|
const id = comment.tags.find(nthEq(0, "E"))?.[1]
|
|
|
|
if (id) {
|
|
scores.set(id, max([scores.get(id), comment.created_at]))
|
|
}
|
|
}
|
|
|
|
return sortBy(e => -max([scores.get(e.id), e.created_at]), threads)
|
|
})
|
|
|
|
onMount(() => {
|
|
const {cleanup} = makeFeed({
|
|
element: element!,
|
|
relays: [url],
|
|
feedFilters: [{kinds: [THREAD, COMMENT]}],
|
|
subscriptionFilters: [
|
|
{kinds: [THREAD, DELETE, ...REACTION_KINDS]},
|
|
{kinds: [COMMENT], "#K": [String(THREAD)]},
|
|
],
|
|
initialEvents: getEventsForUrl(url, [{kinds: [THREAD, COMMENT], limit: 10}]),
|
|
onEvent: event => {
|
|
if (event.kind === THREAD && !mutedPubkeys.includes(event.pubkey)) {
|
|
threads.push(event)
|
|
}
|
|
|
|
if (event.kind === COMMENT) {
|
|
comments.push(event)
|
|
}
|
|
},
|
|
onExhausted: () => {
|
|
loading = false
|
|
},
|
|
})
|
|
|
|
return () => {
|
|
cleanup?.()
|
|
setChecked($page.url.pathname)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<PageBar>
|
|
{#snippet icon()}
|
|
<div class="center">
|
|
<Icon icon={NotesMinimalistic} />
|
|
</div>
|
|
{/snippet}
|
|
{#snippet title()}
|
|
<strong>Threads</strong>
|
|
{/snippet}
|
|
{#snippet action()}
|
|
<div class="row-2">
|
|
<Button class="btn btn-primary btn-sm" onclick={createThread}>
|
|
<Icon icon={NotesMinimalistic} />
|
|
Create a Thread
|
|
</Button>
|
|
<MenuSpaceButton {url} />
|
|
</div>
|
|
{/snippet}
|
|
</PageBar>
|
|
|
|
<PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
|
|
{#each events as event (event.id)}
|
|
<div in:fly>
|
|
<ThreadItem {url} event={$state.snapshot(event)} />
|
|
</div>
|
|
{/each}
|
|
<p class="flex h-10 items-center justify-center py-20">
|
|
<Spinner {loading}>
|
|
{#if loading}
|
|
Looking for threads...
|
|
{:else if events.length === 0}
|
|
No threads found.
|
|
{:else}
|
|
That's all!
|
|
{/if}
|
|
</Spinner>
|
|
</p>
|
|
</PageContent>
|