99 lines
3 KiB
Svelte
99 lines
3 KiB
Svelte
<script lang="ts">
|
|
import {onDestroy, onMount} from "svelte"
|
|
import {readable} from "svelte/store"
|
|
import type {Readable} from "svelte/store"
|
|
import {page} from "$app/stores"
|
|
import {sortBy, partition, spec, pushToMapKey, max} from "@welshman/lib"
|
|
import type {TrustedEvent} from "@welshman/util"
|
|
import {ZAP_GOAL, tagSpec, tagValue} from "@welshman/util"
|
|
import {fly} from "@lib/transition"
|
|
import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic.svg?dataurl"
|
|
import Add from "@assets/icons/add.svg?dataurl"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import PageContent from "@lib/components/PageContent.svelte"
|
|
import Spinner from "@lib/components/Spinner.svelte"
|
|
import SpaceBar from "@app/components/SpaceBar.svelte"
|
|
import GoalItem from "@app/components/GoalItem.svelte"
|
|
import GoalCreate from "@app/components/GoalCreate.svelte"
|
|
import {decodeRelay} from "@app/relays"
|
|
import {makeCommentFilter} from "@app/content"
|
|
import {makeFeed, makeFeedContext} from "@app/feeds"
|
|
import {pushModal} from "@app/modal"
|
|
|
|
const url = decodeRelay($page.params.relay!)
|
|
const context = makeFeedContext({relays: [url]})
|
|
|
|
onDestroy(context.cleanup)
|
|
|
|
let loading = $state(true)
|
|
let element: HTMLElement | undefined = $state()
|
|
let events: Readable<TrustedEvent[]> = $state(readable([]))
|
|
|
|
const createGoal = () => pushModal(GoalCreate, {url})
|
|
|
|
const items = $derived.by(() => {
|
|
const scores = new Map<string, number[]>()
|
|
const [goals, comments] = partition(spec({kind: ZAP_GOAL}), $events)
|
|
|
|
for (const comment of comments) {
|
|
const id = tagValue(tagSpec("E"), comment.tags)
|
|
|
|
if (id) {
|
|
pushToMapKey(scores, id, comment.created_at)
|
|
}
|
|
}
|
|
|
|
return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), goals)
|
|
})
|
|
|
|
onMount(() => {
|
|
const feed = makeFeed({
|
|
relays: [url],
|
|
element: element!,
|
|
onEvent: context.add,
|
|
filters: [{kinds: [ZAP_GOAL]}, makeCommentFilter([ZAP_GOAL])],
|
|
onBackwardExhausted: () => {
|
|
loading = false
|
|
},
|
|
})
|
|
|
|
events = feed.events
|
|
|
|
return () => feed.cleanup()
|
|
})
|
|
</script>
|
|
|
|
<SpaceBar>
|
|
{#snippet leading()}
|
|
<Icon icon={StarFallMinimalistic} />
|
|
{/snippet}
|
|
{#snippet title()}
|
|
<strong>Goals</strong>
|
|
{/snippet}
|
|
{#snippet action()}
|
|
<Button class="button button-primary button-sm" onclick={createGoal}>
|
|
<Icon icon={Add} />
|
|
Create
|
|
</Button>
|
|
{/snippet}
|
|
</SpaceBar>
|
|
|
|
<PageContent bind:element class="flex flex-col gap-2 p-2 sm:gap-4 sm:p-4">
|
|
{#each items as event (event.id)}
|
|
<div in:fly>
|
|
<GoalItem {url} {context} event={$state.snapshot(event)} />
|
|
</div>
|
|
{/each}
|
|
<p class="flex h-10 items-center justify-center py-20">
|
|
<Spinner {loading}>
|
|
{#if loading}
|
|
Looking for goals...
|
|
{:else if items.length === 0}
|
|
No goals found.
|
|
{:else}
|
|
That's all!
|
|
{/if}
|
|
</Spinner>
|
|
</p>
|
|
</PageContent>
|