Add polls

src/routes/spaces/[relay]/polls/+page.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import {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 {getTagValue} from "@welshman/util"
+  import {fly} from "@lib/transition"
+  import PollIcon from "@assets/icons/revote.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 PollItem from "@app/components/PollItem.svelte"
+  import PollCreate from "@app/components/PollCreate.svelte"
+  import {Poll} from "nostr-tools/kinds"
+  import {decodeRelay, makeCommentFilter} from "@app/core/state"
+  import {makeFeed} from "@app/core/requests"
+  import {pushModal} from "@app/util/modal"
+
+  const url = decodeRelay($page.params.relay!)
+
+  let loading = $state(true)
+  let element: HTMLElement | undefined = $state()
+  let events: Readable<TrustedEvent[]> = $state(readable([]))
+
+  const createPoll = () => pushModal(PollCreate, {url})
+
+  const items = $derived.by(() => {
+    const scores = new Map<string, number[]>()
+    const [polls, comments] = partition(spec({kind: Poll}), $events)
+
+    for (const comment of comments) {
+      const id = getTagValue("E", comment.tags)
+
+      if (id) {
+        pushToMapKey(scores, id, comment.created_at)
+      }
+    }
+
+    return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), polls)
+  })
+
+  onMount(() => {
+    const feed = makeFeed({
+      url,
+      element: element!,
+      filters: [{kinds: [Poll]}, makeCommentFilter([Poll])],
+      onBackwardExhausted: () => {
+        loading = false
+      },
+    })
+
+    events = feed.events
+
+    return () => {
+      feed.cleanup()
+    }
+  })
+</script>
+
+<SpaceBar>
+  {#snippet title()}
+    <Icon icon={PollIcon} />
+    <strong>Polls</strong>
+  {/snippet}
+  {#snippet action()}
+    <Button class="btn btn-primary btn-sm" onclick={createPoll}>
+      <Icon icon={Add} />
+      Create
+    </Button>
+  {/snippet}
+</SpaceBar>
+
+<PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
+  {#each items as event (event.id)}
+    <div in:fly>
+      <PollItem {url} event={$state.snapshot(event)} />
+    </div>
+  {/each}
+  <p class="flex h-10 items-center justify-center py-20">
+    <Spinner {loading}>
+      {#if loading}
+        Looking for polls...
+      {:else if items.length === 0}
+        No polls found.
+      {:else}
+        That's all!
+      {/if}
+    </Spinner>
+  </p>
+</PageContent>

src/routes/spaces/[relay]/polls/[id]/+page.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {page} from "$app/stores"
+  import {sleep} from "@welshman/lib"
+  import type {MakeNonOptional} from "@welshman/lib"
+  import {COMMENT} from "@welshman/util"
+  import {repository} from "@welshman/app"
+  import {request} from "@welshman/net"
+  import {deriveEventsById, deriveEventsAsc} from "@welshman/store"
+  import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
+  import NoteCard from "@app/components/NoteCard.svelte"
+  import NoteContent from "@app/components/NoteContent.svelte"
+  import CommentActions from "@app/components/CommentActions.svelte"
+  import EventReply from "@app/components/EventReply.svelte"
+  import {deriveEvent, decodeRelay} from "@app/core/state"
+  import {Poll, PollResponse} from "nostr-tools/kinds"
+
+  const {relay, id} = $page.params as MakeNonOptional<typeof $page.params>
+  const url = decodeRelay(relay)
+  const event = deriveEvent(id, [url])
+  const filters = [{kinds: [COMMENT], "#E": [id]}]
+  const comments = deriveEventsAsc(deriveEventsById({repository, filters}))
+
+  const back = () => history.back()
+
+  const openReply = () => {
+    showReply = true
+  }
+
+  const closeReply = () => {
+    showReply = false
+  }
+
+  const expand = () => {
+    showAll = true
+  }
+
+  let showAll = $state(false)
+  let showReply = $state(false)
+
+  onMount(() => {
+    const controller = new AbortController()
+
+    request({
+      relays: [url],
+      filters: [{kinds: [Poll], ids: [id]}, {kinds: [PollResponse], "#e": [id]}, ...filters],
+      signal: controller.signal,
+    })
+
+    return () => {
+      controller.abort()
+    }
+  })
+</script>
+
+<SpaceBar {back}>
+  {#snippet title()}
+    <h1 class="text-xl">{$event?.content || "Poll"}</h1>
+  {/snippet}
+</SpaceBar>
+
+<PageContent class="flex flex-col gap-3 p-2 pt-4">
+  {#if $event}
+    <div class="flex flex-col gap-3">
+      <NoteCard event={$event} {url} class="card2 bg-alt z-feature w-full">
+        <div class="col-3 ml-12 flex flex-col gap-3">
+          <NoteContent showEntire event={$event} {url} />
+          <CommentActions segment="polls" showActivity {url} event={$event} />
+        </div>
+      </NoteCard>
+      {#if !showAll && $comments.length > 4}
+        <div class="flex justify-center">
+          <Button class="btn btn-link" onclick={expand}>
+            <Icon icon={SortVertical} />
+            Show all {$comments.length} comments
+          </Button>
+        </div>
+      {/if}
+      {#each $comments.slice(0, showAll ? undefined : 4) as reply (reply.id)}
+        <NoteCard event={reply} {url} class="card2 bg-alt z-feature w-full">
+          <div class="col-3 ml-12">
+            <NoteContent showEntire event={reply} {url} />
+            <CommentActions segment="polls" event={reply} {url} />
+          </div>
+        </NoteCard>
+      {/each}
+    </div>
+    {#if showReply}
+      <EventReply {url} event={$event} onClose={closeReply} onSubmit={closeReply} />
+    {:else}
+      <div class="flex justify-end p-2">
+        <Button class="btn btn-primary" onclick={openReply}>Comment on this poll</Button>
+      </div>
+    {/if}
+  {:else}
+    {#await sleep(5000)}
+      <Spinner loading>Loading poll...</Spinner>
+    {:then}
+      <p>Failed to load poll.</p>
+    {/await}
+  {/if}
+</PageContent>

src/routes/spaces/[relay]/recent/+page.svelte

@@ -46,9 +46,11 @@
   import ClassifiedItem from "@app/components/ClassifiedItem.svelte"
   import GoalItem from "@app/components/GoalItem.svelte"
   import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
+  import PollItem from "@app/components/PollItem.svelte"
   import RecentConversation from "@app/components/RecentConversation.svelte"
   import {decodeRelay, deriveEventsForUrl, CONTENT_KINDS} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
+  import {Poll} from "nostr-tools/kinds"
 
   const url = decodeRelay($page.params.relay!)
   const since = ago(3, MONTH)
@@ -306,6 +308,8 @@
           <GoalItem {url} {event} />
         {:else if event.kind === EVENT_TIME}
           <CalendarEventItem {url} {event} />
+        {:else if event.kind === Poll}
+          <PollItem {url} {event} />
         {:else}
           <NoteItem {url} {event} />
         {/if}