From 329ad507f6519414bc4283851e8f3e7bdc227b42 Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Thu, 2 Apr 2026 11:18:41 +0530
Subject: [PATCH 1/7] feat: use NIP-50 relay-side search with scope selection

---
 src/app/components/SpaceSearch.svelte | 137 ++++++++++++++++++++++----
 1 file changed, 117 insertions(+), 20 deletions(-)

diff --git a/src/app/components/SpaceSearch.svelte b/src/app/components/SpaceSearch.svelte
index c5557bcb..f25313fe 100644
--- a/src/app/components/SpaceSearch.svelte
+++ b/src/app/components/SpaceSearch.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
   import {tick} from "svelte"
-  import {createSearch} from "@welshman/app"
-  import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
-  import type {TrustedEvent} from "@welshman/util"
-  import {MESSAGE} from "@welshman/util"
+  import {debounce} from "throttle-debounce"
+  import {request} from "@welshman/net"
+  import {userSearchRelayList} from "@welshman/app"
+  import {formatTimestampAsDate, groupBy, now, uniqBy, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
+  import type {TrustedEvent, Filter} from "@welshman/util"
+  import {getRelaysFromList, MESSAGE, sortEventsDesc} from "@welshman/util"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import {fly} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import {deriveEventsForUrl} from "@app/core/state"
+  import {DEFAULT_RELAYS} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
 
   type Props = {
@@ -19,14 +21,34 @@
 
   const {url, h}: Props = $props()
 
-  const spaceMessages = deriveEventsForUrl(
-    url,
-    h ? [{kinds: [MESSAGE], "#h": [h]}] : [{kinds: [MESSAGE]}],
-  )
+  type SearchScope = "room" | "space" | "everything"
+
+  const scopes: SearchScope[] = h ? ["room", "space", "everything"] : ["space", "everything"]
 
   let term = $state("")
   let show = $state(false)
+  let scope = $state<SearchScope>(h ? "room" : "space")
+  let results = $state<TrustedEvent[]>([])
+  let loading = $state(false)
   let input: HTMLInputElement | undefined = $state()
+  let currentSearchId = 0
+  let controller: AbortController | undefined
+
+  const searchRelayUrls = $derived(getRelaysFromList($userSearchRelayList))
+  const effectiveEverythingRelays = $derived(
+    uniqBy(identity => identity, searchRelayUrls).length > 0
+      ? uniqBy(identity => identity, searchRelayUrls)
+      : DEFAULT_RELAYS,
+  )
+  const relayStatus = $derived(
+    scope === "room"
+      ? `Using space relay: ${url} (room filter applied).`
+      : scope === "space"
+        ? `Using space relay: ${url}.`
+        : searchRelayUrls.length > 0
+          ? `Using your search relays (${effectiveEverythingRelays.length}).`
+          : `Using default relays (${effectiveEverythingRelays.length}) because no search relays are configured.`,
+  )
 
   const open = () => {
     show = true
@@ -40,20 +62,75 @@
   const clear = () => {
     term = ""
     show = false
+    loading = false
+    results = []
+    controller?.abort()
+    controller = undefined
   }
 
+  const getRelayUrls = () => {
+    if (scope === "everything") {
+      return effectiveEverythingRelays
+    }
+
+    return [url]
+  }
+
+  const getFilter = (searchTerm: string): Filter => {
+    if (scope === "room" && h) {
+      return {kinds: [MESSAGE], "#h": [h], search: searchTerm}
+    }
+
+    return {kinds: [MESSAGE], search: searchTerm}
+  }
+
+  const search = debounce(300, async (searchTerm: string, searchId: number) => {
+    controller?.abort()
+
+    if (!searchTerm.trim()) {
+      loading = false
+      results = []
+      return
+    }
+
+    controller = new AbortController()
+    loading = true
+
+    try {
+      const events = await request({
+        relays: getRelayUrls(),
+        autoClose: true,
+        signal: controller.signal,
+        filters: [getFilter(searchTerm.trim())],
+      })
+
+      if (searchId === currentSearchId) {
+        results = sortEventsDesc(uniqBy((event: TrustedEvent) => event.id, events))
+      }
+    } catch (error) {
+      if (
+        !(error instanceof DOMException && error.name === "AbortError") &&
+        searchId === currentSearchId
+      ) {
+        results = []
+      }
+    } finally {
+      if (searchId === currentSearchId) {
+        loading = false
+      }
+    }
+  })
+
   const onInput = () => {
-    show = true
+    currentSearchId += 1
+    void search(term, currentSearchId)
   }
 
-  const searchIndex = $derived.by(() =>
-    createSearch($spaceMessages, {
-      getValue: event => event.id,
-      fuseOptions: {keys: ["content"]},
-    }),
-  )
-
-  const results = $derived(term ? searchIndex.searchOptions(term) : [])
+  const setScope = (value: SearchScope) => {
+    scope = value
+    currentSearchId += 1
+    void search(term, currentSearchId)
+  }
 
   const eventsByAge = $derived(groupBy(e => getAgeSection(e.created_at), results))
 
@@ -118,14 +195,34 @@
             bind:value={term}
             class="min-w-0 grow"
             type="text"
-            placeholder={h ? "Search this room..." : "Search this space..."}
+            placeholder={scope === "room"
+              ? "Search this room..."
+              : scope === "space"
+                ? "Search this space..."
+                : "Search everything..."}
             oninput={onInput} />
         </label>
+        <div class="flex flex-wrap gap-1">
+          {#each scopes as value (value)}
+            <Button
+              class={value === scope ? "btn btn-neutral btn-xs" : "btn btn-ghost btn-xs"}
+              onclick={() => setScope(value)}>
+              {value === "room" ? "Room" : value === "space" ? "Space" : "Everything"}
+            </Button>
+          {/each}
+        </div>
         <div class="max-h-[65vh] overflow-y-auto">
+          <p class="mb-2 text-xs opacity-70">{relayStatus}</p>
           {#if !term}
             <p class="text-sm opacity-70">
-              {h ? "Search for messages in this room." : "Search for messages across this space."}
+              {scope === "room"
+                ? "Search for messages in this room."
+                : scope === "space"
+                  ? "Search for messages in this space."
+                  : "Search across your configured search relays."}
             </p>
+          {:else if loading}
+            <p class="text-sm opacity-70">Searching...</p>
           {:else if eventsByAge.size === 0}
             <p class="text-sm opacity-70">No results found.</p>
           {:else}
-- 
2.52.0


From 8990a205d28f9fd4d9747094b9051c361facc1c5 Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Thu, 2 Apr 2026 23:42:48 +0530
Subject: [PATCH 2/7] fix: query content kinds via NIP-50 in room and space
 search

---
 src/app/components/SpaceSearch.svelte | 71 +++++++--------------------
 1 file changed, 19 insertions(+), 52 deletions(-)

diff --git a/src/app/components/SpaceSearch.svelte b/src/app/components/SpaceSearch.svelte
index f25313fe..687555ad 100644
--- a/src/app/components/SpaceSearch.svelte
+++ b/src/app/components/SpaceSearch.svelte
@@ -2,16 +2,15 @@
   import {tick} from "svelte"
   import {debounce} from "throttle-debounce"
   import {request} from "@welshman/net"
-  import {userSearchRelayList} from "@welshman/app"
-  import {formatTimestampAsDate, groupBy, now, uniqBy, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
+  import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
   import type {TrustedEvent, Filter} from "@welshman/util"
-  import {getRelaysFromList, MESSAGE, sortEventsDesc} from "@welshman/util"
+  import {sortEventsDesc} from "@welshman/util"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import {fly} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import {DEFAULT_RELAYS} from "@app/core/state"
+  import {CONTENT_KINDS} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
 
   type Props = {
@@ -21,9 +20,9 @@
 
   const {url, h}: Props = $props()
 
-  type SearchScope = "room" | "space" | "everything"
+  type SearchScope = "room" | "space"
 
-  const scopes: SearchScope[] = h ? ["room", "space", "everything"] : ["space", "everything"]
+  const scopes: SearchScope[] = h ? ["room", "space"] : ["space"]
 
   let term = $state("")
   let show = $state(false)
@@ -31,23 +30,12 @@
   let results = $state<TrustedEvent[]>([])
   let loading = $state(false)
   let input: HTMLInputElement | undefined = $state()
-  let currentSearchId = 0
   let controller: AbortController | undefined
 
-  const searchRelayUrls = $derived(getRelaysFromList($userSearchRelayList))
-  const effectiveEverythingRelays = $derived(
-    uniqBy(identity => identity, searchRelayUrls).length > 0
-      ? uniqBy(identity => identity, searchRelayUrls)
-      : DEFAULT_RELAYS,
-  )
   const relayStatus = $derived(
     scope === "room"
       ? `Using space relay: ${url} (room filter applied).`
-      : scope === "space"
-        ? `Using space relay: ${url}.`
-        : searchRelayUrls.length > 0
-          ? `Using your search relays (${effectiveEverythingRelays.length}).`
-          : `Using default relays (${effectiveEverythingRelays.length}) because no search relays are configured.`,
+      : `Using space relay: ${url}.`,
   )
 
   const open = () => {
@@ -68,23 +56,17 @@
     controller = undefined
   }
 
-  const getRelayUrls = () => {
-    if (scope === "everything") {
-      return effectiveEverythingRelays
-    }
-
-    return [url]
-  }
+  const getRelayUrls = () => [url]
 
   const getFilter = (searchTerm: string): Filter => {
     if (scope === "room" && h) {
-      return {kinds: [MESSAGE], "#h": [h], search: searchTerm}
+      return {kinds: CONTENT_KINDS, "#h": [h], search: searchTerm}
     }
 
-    return {kinds: [MESSAGE], search: searchTerm}
+    return {kinds: CONTENT_KINDS, search: searchTerm}
   }
 
-  const search = debounce(300, async (searchTerm: string, searchId: number) => {
+  const search = debounce(300, async (searchTerm: string) => {
     controller?.abort()
 
     if (!searchTerm.trim()) {
@@ -104,32 +86,23 @@
         filters: [getFilter(searchTerm.trim())],
       })
 
-      if (searchId === currentSearchId) {
-        results = sortEventsDesc(uniqBy((event: TrustedEvent) => event.id, events))
-      }
+      results = sortEventsDesc(events)
     } catch (error) {
-      if (
-        !(error instanceof DOMException && error.name === "AbortError") &&
-        searchId === currentSearchId
-      ) {
+      if (!(error instanceof DOMException && error.name === "AbortError")) {
         results = []
       }
     } finally {
-      if (searchId === currentSearchId) {
-        loading = false
-      }
+      loading = false
     }
   })
 
   const onInput = () => {
-    currentSearchId += 1
-    void search(term, currentSearchId)
+    void search(term)
   }
 
   const setScope = (value: SearchScope) => {
     scope = value
-    currentSearchId += 1
-    void search(term, currentSearchId)
+    void search(term)
   }
 
   const eventsByAge = $derived(groupBy(e => getAgeSection(e.created_at), results))
@@ -195,11 +168,7 @@
             bind:value={term}
             class="min-w-0 grow"
             type="text"
-            placeholder={scope === "room"
-              ? "Search this room..."
-              : scope === "space"
-                ? "Search this space..."
-                : "Search everything..."}
+            placeholder={scope === "room" ? "Search this room..." : "Search this space..."}
             oninput={onInput} />
         </label>
         <div class="flex flex-wrap gap-1">
@@ -207,7 +176,7 @@
             <Button
               class={value === scope ? "btn btn-neutral btn-xs" : "btn btn-ghost btn-xs"}
               onclick={() => setScope(value)}>
-              {value === "room" ? "Room" : value === "space" ? "Space" : "Everything"}
+              {value === "room" ? "Room" : "Space"}
             </Button>
           {/each}
         </div>
@@ -216,10 +185,8 @@
           {#if !term}
             <p class="text-sm opacity-70">
               {scope === "room"
-                ? "Search for messages in this room."
-                : scope === "space"
-                  ? "Search for messages in this space."
-                  : "Search across your configured search relays."}
+                ? "Search for content in this room."
+                : "Search for content in this space."}
             </p>
           {:else if loading}
             <p class="text-sm opacity-70">Searching...</p>
-- 
2.52.0


From 63b1cd125e52b33c1673885b3495a7705a73a8bd Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Thu, 2 Apr 2026 23:56:02 +0530
Subject: [PATCH 3/7] make contextual search h-based again

---
 src/app/components/SpaceSearch.svelte | 40 +++++----------------------
 1 file changed, 7 insertions(+), 33 deletions(-)

diff --git a/src/app/components/SpaceSearch.svelte b/src/app/components/SpaceSearch.svelte
index 687555ad..b1143fec 100644
--- a/src/app/components/SpaceSearch.svelte
+++ b/src/app/components/SpaceSearch.svelte
@@ -20,22 +20,15 @@
 
   const {url, h}: Props = $props()
 
-  type SearchScope = "room" | "space"
-
-  const scopes: SearchScope[] = h ? ["room", "space"] : ["space"]
-
   let term = $state("")
   let show = $state(false)
-  let scope = $state<SearchScope>(h ? "room" : "space")
   let results = $state<TrustedEvent[]>([])
   let loading = $state(false)
   let input: HTMLInputElement | undefined = $state()
   let controller: AbortController | undefined
 
   const relayStatus = $derived(
-    scope === "room"
-      ? `Using space relay: ${url} (room filter applied).`
-      : `Using space relay: ${url}.`,
+    h ? `Searching this room on relay: ${url}.` : `Searching this space on relay: ${url}.`,
   )
 
   const open = () => {
@@ -58,13 +51,10 @@
 
   const getRelayUrls = () => [url]
 
-  const getFilter = (searchTerm: string): Filter => {
-    if (scope === "room" && h) {
-      return {kinds: CONTENT_KINDS, "#h": [h], search: searchTerm}
-    }
-
-    return {kinds: CONTENT_KINDS, search: searchTerm}
-  }
+  const getFilter = (searchTerm: string): Filter =>
+    h
+      ? {kinds: CONTENT_KINDS, "#h": [h], search: searchTerm}
+      : {kinds: CONTENT_KINDS, search: searchTerm}
 
   const search = debounce(300, async (searchTerm: string) => {
     controller?.abort()
@@ -100,11 +90,6 @@
     void search(term)
   }
 
-  const setScope = (value: SearchScope) => {
-    scope = value
-    void search(term)
-  }
-
   const eventsByAge = $derived(groupBy(e => getAgeSection(e.created_at), results))
 
   const getAgeSection = (createdAt: number) => {
@@ -168,25 +153,14 @@
             bind:value={term}
             class="min-w-0 grow"
             type="text"
-            placeholder={scope === "room" ? "Search this room..." : "Search this space..."}
+            placeholder={h ? "Search this room..." : "Search this space..."}
             oninput={onInput} />
         </label>
-        <div class="flex flex-wrap gap-1">
-          {#each scopes as value (value)}
-            <Button
-              class={value === scope ? "btn btn-neutral btn-xs" : "btn btn-ghost btn-xs"}
-              onclick={() => setScope(value)}>
-              {value === "room" ? "Room" : "Space"}
-            </Button>
-          {/each}
-        </div>
         <div class="max-h-[65vh] overflow-y-auto">
           <p class="mb-2 text-xs opacity-70">{relayStatus}</p>
           {#if !term}
             <p class="text-sm opacity-70">
-              {scope === "room"
-                ? "Search for content in this room."
-                : "Search for content in this space."}
+              {h ? "Search for content in this room." : "Search for content in this space."}
             </p>
           {:else if loading}
             <p class="text-sm opacity-70">Searching...</p>
-- 
2.52.0


From 5ba920adec7871c3cd3e454b278e6897b8d00214 Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Fri, 3 Apr 2026 00:54:04 +0530
Subject: [PATCH 4/7] feat: add NIP-88 poll support

---
 src/app/components/ComposeMenu.svelte         |  10 ++
 src/app/components/NoteContent.svelte         |   4 +
 src/app/components/NoteContentMinimal.svelte  |   4 +
 .../components/NoteContentMinimalPoll.svelte  |  22 +++
 src/app/components/NoteContentPoll.svelte     |  53 ++++++
 src/app/components/PollCreate.svelte          | 166 ++++++++++++++++++
 src/app/components/PollItem.svelte            |  32 ++++
 src/app/components/PollVotes.svelte           | 126 +++++++++++++
 src/app/components/SpaceMenu.svelte           |   8 +
 src/app/core/commands.ts                      |  17 ++
 src/app/core/state.ts                         |   3 +-
 src/app/core/sync.ts                          |   5 +-
 src/app/util/polls.ts                         |  80 +++++++++
 src/app/util/routes.ts                        |   9 +
 src/app/util/title.ts                         |   2 +
 src/routes/spaces/[relay]/polls/+page.svelte  |  95 ++++++++++
 .../spaces/[relay]/polls/[id]/+page.svelte    | 105 +++++++++++
 src/routes/spaces/[relay]/recent/+page.svelte |   4 +
 18 files changed, 743 insertions(+), 2 deletions(-)
 create mode 100644 src/app/components/NoteContentMinimalPoll.svelte
 create mode 100644 src/app/components/NoteContentPoll.svelte
 create mode 100644 src/app/components/PollCreate.svelte
 create mode 100644 src/app/components/PollItem.svelte
 create mode 100644 src/app/components/PollVotes.svelte
 create mode 100644 src/app/util/polls.ts
 create mode 100644 src/routes/spaces/[relay]/polls/+page.svelte
 create mode 100644 src/routes/spaces/[relay]/polls/[id]/+page.svelte

diff --git a/src/app/components/ComposeMenu.svelte b/src/app/components/ComposeMenu.svelte
index 990728de..8c89e9f4 100644
--- a/src/app/components/ComposeMenu.svelte
+++ b/src/app/components/ComposeMenu.svelte
@@ -4,6 +4,7 @@
   import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic.svg?dataurl"
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
   import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
+  import Revote from "@assets/icons/revote.svg?dataurl"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import {pushModal} from "@app/util/modal"
@@ -11,6 +12,7 @@
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
   import ClassifiedCreate from "@app/components/ClassifiedCreate.svelte"
   import GoalCreate from "@app/components/GoalCreate.svelte"
+  import PollCreate from "@app/components/PollCreate.svelte"
 
   type Props = {
     url: string
@@ -28,6 +30,8 @@
 
   const createClassified = () => pushModal(ClassifiedCreate, {url, h})
 
+  const createPoll = () => pushModal(PollCreate, {url, h})
+
   let ul: Element
 
   onMount(() => {
@@ -60,4 +64,10 @@
       Create Thread
     </Button>
   </li>
+  <li>
+    <Button onclick={createPoll}>
+      <Icon size={4} icon={Revote} />
+      Poll
+    </Button>
+  </li>
 </ul>
diff --git a/src/app/components/NoteContent.svelte b/src/app/components/NoteContent.svelte
index d14c6c47..8eca0dd9 100644
--- a/src/app/components/NoteContent.svelte
+++ b/src/app/components/NoteContent.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
   import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
+  import {Poll} from "nostr-tools/kinds"
   import NoteContentEventTime from "@app/components/NoteContentEventTime.svelte"
   import NoteContentThread from "@app/components/NoteContentThread.svelte"
   import NoteContentClassified from "@app/components/NoteContentClassified.svelte"
   import NoteContentGoal from "@app/components/NoteContentGoal.svelte"
+  import NoteContentPoll from "@app/components/NoteContentPoll.svelte"
   import Content from "@app/components/Content.svelte"
 
   const props: ComponentProps<typeof Content> = $props()
@@ -19,6 +21,8 @@
     <NoteContentClassified {...props} />
   {:else if props.event.kind === ZAP_GOAL}
     <NoteContentGoal {...props} />
+  {:else if props.event.kind === Poll}
+    <NoteContentPoll {...props} />
   {:else}
     <Content {...props} />
   {/if}
diff --git a/src/app/components/NoteContentMinimal.svelte b/src/app/components/NoteContentMinimal.svelte
index 7a1a5e8a..99dec195 100644
--- a/src/app/components/NoteContentMinimal.svelte
+++ b/src/app/components/NoteContentMinimal.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
   import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
+  import {Poll} from "nostr-tools/kinds"
   import NoteContentMinimalEventTime from "@app/components/NoteContentMinimalEventTime.svelte"
   import NoteContentMinimalThread from "@app/components/NoteContentMinimalThread.svelte"
   import NoteContentMinimalClassified from "@app/components/NoteContentMinimalClassified.svelte"
   import NoteContentMinimalGoal from "@app/components/NoteContentMinimalGoal.svelte"
+  import NoteContentMinimalPoll from "@app/components/NoteContentMinimalPoll.svelte"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
 
   const props: ComponentProps<typeof ContentMinimal> = $props()
@@ -19,6 +21,8 @@
     <NoteContentMinimalClassified {...props} />
   {:else if props.event.kind === ZAP_GOAL}
     <NoteContentMinimalGoal {...props} />
+  {:else if props.event.kind === Poll}
+    <NoteContentMinimalPoll {...props} />
   {:else}
     <ContentMinimal {...props} />
   {/if}
diff --git a/src/app/components/NoteContentMinimalPoll.svelte b/src/app/components/NoteContentMinimalPoll.svelte
new file mode 100644
index 00000000..6e479710
--- /dev/null
+++ b/src/app/components/NoteContentMinimalPoll.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {derived} from "svelte/store"
+  import {PollResponse} from "nostr-tools/kinds"
+  import {repository} from "@welshman/app"
+  import {deriveArray, deriveEventsById} from "@welshman/store"
+  import ContentMinimal from "@app/components/ContentMinimal.svelte"
+  import {getPollResults} from "@app/util/polls"
+
+  const props: ComponentProps<typeof ContentMinimal> = $props()
+
+  const responses = deriveArray(
+    deriveEventsById({repository, filters: [{kinds: [PollResponse], "#e": [props.event.id]}]}),
+  )
+
+  const results = derived(responses, $responses => getPollResults(props.event, $responses))
+</script>
+
+<div class="flex flex-col gap-1">
+  <span class="text-sm">{props.event.content || "Poll"}</span>
+  <span class="text-xs opacity-50">{$results.voters} voter{$results.voters === 1 ? "" : "s"}</span>
+</div>
diff --git a/src/app/components/NoteContentPoll.svelte b/src/app/components/NoteContentPoll.svelte
new file mode 100644
index 00000000..db6af151
--- /dev/null
+++ b/src/app/components/NoteContentPoll.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {derived} from "svelte/store"
+  import {formatTimestampRelative} from "@welshman/lib"
+  import {PollResponse} from "nostr-tools/kinds"
+  import {repository} from "@welshman/app"
+  import {deriveArray, deriveEventsById} from "@welshman/store"
+  import Content from "@app/components/Content.svelte"
+  import {getPollEndsAt, getPollResults, getPollType, isPollClosed} from "@app/util/polls"
+
+  const props: ComponentProps<typeof Content> = $props()
+
+  const responses = deriveArray(
+    deriveEventsById({repository, filters: [{kinds: [PollResponse], "#e": [props.event.id]}]}),
+  )
+
+  const results = derived(responses, $responses => getPollResults(props.event, $responses))
+
+  const endsAt = getPollEndsAt(props.event)
+  const pollType = getPollType(props.event)
+  const closed = isPollClosed(props.event)
+</script>
+
+<div class="flex flex-col gap-3">
+  <div class="flex flex-wrap items-start justify-between gap-2">
+    <div class="min-w-0 flex-grow">
+      <p class="text-xl">{props.event.content || "Poll"}</p>
+      <p class="text-xs opacity-50">
+        {pollType === "multiplechoice" ? "Multiple choice" : "Single choice"}
+        {#if endsAt}
+          · Ends {formatTimestampRelative(endsAt)}
+        {/if}
+        {#if closed}
+          · Closed
+        {/if}
+      </p>
+    </div>
+    <p class="whitespace-nowrap text-xs opacity-50">{$results.voters} voter{$results.voters === 1 ? "" : "s"}</p>
+  </div>
+
+  <div class="flex flex-col gap-2">
+    {#each $results.options as option (option.id)}
+      {@const maxVotes = Math.max(...$results.options.map(item => item.votes), 1)}
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center justify-between gap-2 text-sm">
+          <span class="truncate">{option.label}</span>
+          <span class="whitespace-nowrap opacity-75">{option.votes}</span>
+        </div>
+        <progress class="progress progress-primary" value={option.votes} max={maxVotes}></progress>
+      </div>
+    {/each}
+  </div>
+</div>
diff --git a/src/app/components/PollCreate.svelte b/src/app/components/PollCreate.svelte
new file mode 100644
index 00000000..d4c46a30
--- /dev/null
+++ b/src/app/components/PollCreate.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+  import {randomId, removeUndefined} from "@welshman/lib"
+  import {makeEvent} from "@welshman/util"
+  import {publishThunk} from "@welshman/app"
+  import {Poll} from "nostr-tools/kinds"
+  import {isMobile, preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import PlusCircle from "@assets/icons/add-circle.svg?dataurl"
+  import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import {pushToast} from "@app/util/toast"
+  import {PROTECTED} from "@app/core/state"
+  import {canEnforceNip70} from "@app/core/commands"
+
+  type Props = {
+    url: string
+    h?: string
+  }
+
+  const {url, h}: Props = $props()
+
+  const shouldProtect = canEnforceNip70(url)
+
+  const back = () => history.back()
+
+  const addOption = () => {
+    options = [...options, ""]
+  }
+
+  const removeOption = (index: number) => {
+    options = options.filter((_, optionIndex) => optionIndex !== index)
+  }
+
+  const submit = async () => {
+    if (!title.trim()) {
+      return pushToast({theme: "error", message: "Please provide a title for your poll."})
+    }
+
+    const nonEmptyOptions = removeUndefined(options.map(option => option.trim() || undefined))
+
+    if (nonEmptyOptions.length < 2) {
+      return pushToast({theme: "error", message: "Please provide at least two options."})
+    }
+
+    const parsedEndsAt = endsAt ? Math.floor(new Date(endsAt).getTime() / 1000) : undefined
+
+    const tags: string[][] = [
+      ...nonEmptyOptions.map(option => ["option", randomId(), option]),
+      ["polltype", pollType],
+      ["relay", url],
+    ]
+
+    if (parsedEndsAt) {
+      tags.push(["endsAt", String(parsedEndsAt)])
+    }
+
+    if (h) {
+      tags.push(["h", h])
+    }
+
+    if (await shouldProtect) {
+      tags.push(PROTECTED)
+    }
+
+    publishThunk({
+      relays: [url],
+      event: makeEvent(Poll, {content: title.trim(), tags}),
+    })
+
+    history.back()
+  }
+
+  let title = $state("")
+  let pollType = $state<"singlechoice" | "multiplechoice">("singlechoice")
+  let endsAt = $state("")
+  let options = $state(["Yes", "No"])
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Create a Poll</ModalTitle>
+      <ModalSubtitle>Ask the room a question with one or more answers.</ModalSubtitle>
+    </ModalHeader>
+    <div class="col-8 relative">
+      <Field>
+        {#snippet label()}
+          <p>Question*</p>
+        {/snippet}
+        {#snippet input()}
+          <label class="input input-bordered flex w-full items-center gap-2">
+            <!-- svelte-ignore a11y_autofocus -->
+            <input
+              autofocus={!isMobile}
+              bind:value={title}
+              class="grow"
+              type="text"
+              placeholder="What would you like to ask?" />
+          </label>
+        {/snippet}
+      </Field>
+
+      <Field>
+        {#snippet label()}
+          <p>Options*</p>
+        {/snippet}
+        {#snippet input()}
+          <div class="flex flex-col gap-2">
+            {#each options as option, index (index)}
+              <div class="flex items-center gap-2">
+                <label class="input input-bordered flex w-full items-center gap-2">
+                  <input bind:value={options[index]} class="grow" type="text" placeholder={`Option ${index + 1}`} />
+                </label>
+                <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(index)}>
+                  <Icon icon={MinusCircle} size={4} />
+                </Button>
+              </div>
+            {/each}
+            <Button class="btn btn-ghost btn-sm self-start" onclick={addOption}>
+              <Icon icon={PlusCircle} size={4} />
+              Add option
+            </Button>
+          </div>
+        {/snippet}
+      </Field>
+
+      <div class="flex flex-col gap-2">
+        <FieldInline>
+          {#snippet label()}
+            Poll type
+          {/snippet}
+          {#snippet input()}
+            <select class="select select-bordered w-full max-w-xs" bind:value={pollType}>
+              <option value="singlechoice">Single choice</option>
+              <option value="multiplechoice">Multiple choice</option>
+            </select>
+          {/snippet}
+        </FieldInline>
+        <FieldInline>
+          {#snippet label()}
+            Ends at
+          {/snippet}
+          {#snippet input()}
+            <input bind:value={endsAt} class="input input-bordered w-full max-w-xs" type="datetime-local" />
+          {/snippet}
+        </FieldInline>
+      </div>
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary">Create Poll</Button>
+  </ModalFooter>
+</Modal>
diff --git a/src/app/components/PollItem.svelte b/src/app/components/PollItem.svelte
new file mode 100644
index 00000000..7a5eea1f
--- /dev/null
+++ b/src/app/components/PollItem.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
+  import Link from "@lib/components/Link.svelte"
+  import NoteContent from "@app/components/NoteContent.svelte"
+  import CommentActions from "@app/components/CommentActions.svelte"
+  import RoomLink from "@app/components/RoomLink.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
+  import {makePollPath} from "@app/util/routes"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
+
+  const h = getTagValue("h", event.tags)
+</script>
+
+<Link class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md" href={makePollPath(url, event.id)}>
+  <NoteContent {event} {url} />
+  <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
+      Posted by <ProfileLink pubkey={event.pubkey} {url} />
+      {#if h}
+        in <RoomLink {url} {h} />
+      {/if}
+    </span>
+    <CommentActions segment="polls" showActivity {url} {event} />
+  </div>
+</Link>
diff --git a/src/app/components/PollVotes.svelte b/src/app/components/PollVotes.svelte
new file mode 100644
index 00000000..ee31e8a6
--- /dev/null
+++ b/src/app/components/PollVotes.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import {pubkey, repository} from "@welshman/app"
+  import {deriveArray, deriveEventsById} from "@welshman/store"
+  import {PollResponse} from "nostr-tools/kinds"
+  import {formatTimestampRelative} from "@welshman/lib"
+  import Button from "@lib/components/Button.svelte"
+  import {pushToast} from "@app/util/toast"
+  import {publishPollResponse} from "@app/core/commands"
+  import {
+    getPollEndsAt,
+    getPollOptions,
+    getPollResponseSelections,
+    getPollResults,
+    getPollType,
+    isPollClosed,
+  } from "@app/util/polls"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
+
+  const responses = deriveArray(
+    deriveEventsById({repository, filters: [{kinds: [PollResponse], "#e": [event.id]}]}),
+  )
+
+  const pollType = getPollType(event)
+  const options = getPollOptions(event)
+  const closed = isPollClosed(event)
+  const endsAt = getPollEndsAt(event)
+
+  const results = $derived.by(() => getPollResults(event, $responses))
+  const ownResponse = $derived.by(() =>
+    $responses
+      .filter(response => response.pubkey === $pubkey)
+      .sort((left, right) => right.created_at - left.created_at)[0],
+  )
+
+  const submit = async () => {
+    if (closed) {
+      return pushToast({theme: "error", message: "This poll is closed."})
+    }
+
+    const selection = pollType === "singlechoice" ? [selectedIds[0]].filter(Boolean) : selectedIds
+
+    if (selection.length === 0) {
+      return pushToast({theme: "error", message: "Please select at least one option."})
+    }
+
+    publishPollResponse({relays: [url], event, selectedIds: selection})
+  }
+
+  const setSingleChoice = (id: string) => {
+    selectedIds = [id]
+  }
+
+  const toggleMultipleChoice = (id: string) => {
+    selectedIds = selectedIds.includes(id)
+      ? selectedIds.filter(selectedId => selectedId !== id)
+      : [...selectedIds, id]
+  }
+
+  let selectedIds = $state<string[]>([])
+
+  $effect(() => {
+    if (ownResponse) {
+      selectedIds = getPollResponseSelections(ownResponse, pollType)
+    }
+  })
+</script>
+
+<div class="flex flex-col gap-3 rounded-box bg-base-200 p-4">
+  <div class="flex flex-wrap items-center justify-between gap-2">
+    <div class="text-sm opacity-75">
+      {pollType === "multiplechoice" ? "Multiple choice" : "Single choice"}
+      {#if endsAt}
+        · Ends {formatTimestampRelative(endsAt)}
+      {/if}
+      {#if closed}
+        · Closed
+      {/if}
+    </div>
+    <div class="text-sm opacity-75">{results.voters} vote{results.voters === 1 ? "" : "s"}</div>
+  </div>
+
+  <div class="flex flex-col gap-2">
+    {#each options as option (option.id)}
+      {@const maxVotes = Math.max(...results.options.map(result => result.votes), 1)}
+      {@const current = results.options.find(result => result.id === option.id)}
+      <div class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
+        <div class="flex items-center justify-between gap-2">
+          <label class="flex min-w-0 flex-grow items-center gap-2">
+            {#if !closed}
+              {#if pollType === "singlechoice"}
+                <input
+                  name={event.id}
+                  type="radio"
+                  class="radio radio-primary radio-sm"
+                  checked={selectedIds[0] === option.id}
+                  onchange={() => setSingleChoice(option.id)} />
+              {:else}
+                <input
+                  type="checkbox"
+                  class="checkbox checkbox-primary checkbox-sm"
+                  checked={selectedIds.includes(option.id)}
+                  onchange={() => toggleMultipleChoice(option.id)} />
+              {/if}
+            {/if}
+            <span class="truncate">{option.label}</span>
+          </label>
+          <span class="whitespace-nowrap text-xs opacity-75">{current?.votes || 0} vote{(current?.votes || 0) === 1 ? "" : "s"}</span>
+        </div>
+        <progress class="progress progress-primary" value={current?.votes || 0} max={maxVotes}></progress>
+      </div>
+    {/each}
+  </div>
+
+  {#if !closed}
+    <div class="flex justify-end">
+      <Button class="btn btn-primary btn-sm" onclick={submit}>Cast vote</Button>
+    </div>
+  {/if}
+</div>
diff --git a/src/app/components/SpaceMenu.svelte b/src/app/components/SpaceMenu.svelte
index d7b97c83..fd8d8a5d 100644
--- a/src/app/components/SpaceMenu.svelte
+++ b/src/app/components/SpaceMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {derived} from "svelte/store"
   import {displayRelayUrl, EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
+  import {Poll} from "nostr-tools/kinds"
   import {deriveRelay, createSearch, pubkey} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
@@ -17,6 +18,7 @@
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
   import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
   import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
+  import Revote from "@assets/icons/revote.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import ChatRound from "@assets/icons/chat-round.svg?dataurl"
   import Bell from "@assets/icons/bell.svg?dataurl"
@@ -69,6 +71,7 @@
   const threadsPath = makeSpacePath(url, "threads")
   const classifiedsPath = makeSpacePath(url, "classifieds")
   const calendarPath = makeSpacePath(url, "calendar")
+  const pollsPath = makeSpacePath(url, "polls")
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
   const otherVoiceRooms = deriveOtherVoiceRooms(url)
@@ -257,6 +260,11 @@
           <Icon icon={CalendarMinimalistic} /> Calendar
         </SecondaryNavItem>
       {/if}
+      {#if $spaceKinds.has(Poll)}
+        <SecondaryNavItem href={pollsPath}>
+          <Icon icon={Revote} /> Polls
+        </SecondaryNavItem>
+      {/if}
       {#if hasNip29($relay)}
         {#if $userRooms.length > 0}
           <div class="h-2 flex-shrink-0"></div>
diff --git a/src/app/core/commands.ts b/src/app/core/commands.ts
index cfcaf3a8..299a2d2e 100644
--- a/src/app/core/commands.ts
+++ b/src/app/core/commands.ts
@@ -18,6 +18,7 @@ import {
 import {Nip01Signer} from "@welshman/signer"
 import type {UploadTask} from "@welshman/editor"
 import type {TrustedEvent, EventContent, Profile, PublishedRoomMeta} from "@welshman/util"
+import {PollResponse} from "nostr-tools/kinds"
 import {
   DELETE,
   REPORT,
@@ -351,6 +352,22 @@ export const publishReaction = ({relays, ...params}: ReactionParams & {relays: s
   publishThunk({event: makeReaction({url: relays[0], ...params}), relays})
 }
 
+// Polls
+
+export type PollResponseParams = {
+  event: TrustedEvent
+  selectedIds: string[]
+}
+
+export const makePollResponse = ({event, selectedIds}: PollResponseParams) =>
+  makeEvent(PollResponse, {
+    content: "",
+    tags: [["e", event.id], ...selectedIds.map(selectedId => ["response", selectedId])],
+  })
+
+export const publishPollResponse = ({relays, ...params}: PollResponseParams & {relays: string[]}) =>
+  publishThunk({event: makePollResponse(params), relays})
+
 // Comments
 
 export type CommentParams = {
diff --git a/src/app/core/state.ts b/src/app/core/state.ts
index b5d50a3e..d59f090d 100644
--- a/src/app/core/state.ts
+++ b/src/app/core/state.ts
@@ -3,6 +3,7 @@ import {context as pomadeContext} from "@pomade/core"
 import {Capacitor} from "@capacitor/core"
 import {derived, readable, writable} from "svelte/store"
 import * as nip19 from "nostr-tools/nip19"
+import {Poll} from "nostr-tools/kinds"
 import {
   on,
   gt,
@@ -325,7 +326,7 @@ if (ENABLE_ZAPS) {
   REACTION_KINDS.push(ZAP_RESPONSE)
 }
 
-export const CONTENT_KINDS = [ZAP_GOAL, EVENT_TIME, THREAD, CLASSIFIED]
+export const CONTENT_KINDS = [ZAP_GOAL, EVENT_TIME, THREAD, CLASSIFIED, Poll]
 
 export const MESSAGE_KINDS = [...CONTENT_KINDS, MESSAGE]
 
diff --git a/src/app/core/sync.ts b/src/app/core/sync.ts
index 32bb33a8..4efcb7b6 100644
--- a/src/app/core/sync.ts
+++ b/src/app/core/sync.ts
@@ -2,6 +2,7 @@ import {page} from "$app/stores"
 import type {Unsubscriber} from "svelte/store"
 import {derived, get} from "svelte/store"
 import {last, call, ifLet, assoc, chunk, sleep, identity, WEEK, ago} from "@welshman/lib"
+import {PollResponse} from "nostr-tools/kinds"
 import {
   getListTags,
   getRelayTagValues,
@@ -281,6 +282,7 @@ const syncSpace = (url: string, rooms: string[]) => {
         filters: [
           {kinds: MESSAGE_KINDS, since, "#h": [room]},
           makeCommentFilter(CONTENT_KINDS, {since, "#h": [room]}),
+          {kinds: [PollResponse], since},
         ],
       })
     }
@@ -303,6 +305,7 @@ const syncSpace = (url: string, rooms: string[]) => {
       {kinds: roomMemberKinds},
       {kinds: MESSAGE_KINDS, since},
       makeCommentFilter(CONTENT_KINDS, {since}),
+      {kinds: [PollResponse], since},
     ],
     onEvent: event => {
       if (event.kind === ROOM_META) {
@@ -314,7 +317,7 @@ const syncSpace = (url: string, rooms: string[]) => {
   listen({
     url,
     signal: controller.signal,
-    filters: [{kinds: REACTION_KINDS}],
+    filters: [{kinds: REACTION_KINDS}, {kinds: [PollResponse]}],
   })
 
   return () => controller.abort()
diff --git a/src/app/util/polls.ts b/src/app/util/polls.ts
new file mode 100644
index 00000000..e207def8
--- /dev/null
+++ b/src/app/util/polls.ts
@@ -0,0 +1,80 @@
+import {now, uniq} from "@welshman/lib"
+import type {TrustedEvent} from "@welshman/util"
+import {getTagValue, getTags} from "@welshman/util"
+
+export type PollType = "singlechoice" | "multiplechoice"
+
+export type PollOption = {
+  id: string
+  label: string
+  votes: number
+}
+
+const isDefined = <T>(value: T | undefined): value is T => value !== undefined
+
+export const getPollType = (event: TrustedEvent): PollType =>
+  getTagValue("polltype", event.tags) === "multiplechoice" ? "multiplechoice" : "singlechoice"
+
+export const getPollOptions = (event: TrustedEvent) =>
+  getTags("option", event.tags)
+    .map(tag => {
+      const [, id, label = id] = tag
+
+      if (!id) return undefined
+
+      return {id, label}
+    })
+    .filter(isDefined)
+
+export const getPollEndsAt = (event: TrustedEvent) => {
+  const endsAt = getTagValue("endsAt", event.tags) || getTagValue("endsat", event.tags)
+
+  if (!endsAt) return undefined
+
+  const timestamp = parseInt(endsAt)
+
+  return Number.isNaN(timestamp) ? undefined : timestamp
+}
+
+export const isPollClosed = (event: TrustedEvent) => {
+  const endsAt = getPollEndsAt(event)
+
+  return typeof endsAt === "number" ? endsAt <= now() : false
+}
+
+export const getPollResponseSelections = (event: TrustedEvent, pollType = getPollType(event)) => {
+  const selections = getTags("response", event.tags)
+    .map(tag => tag[1])
+    .filter(isDefined)
+
+  return pollType === "singlechoice" ? selections.slice(0, 1) : uniq(selections)
+}
+
+export const getPollResults = (event: TrustedEvent, responses: TrustedEvent[]) => {
+  const options = getPollOptions(event).map(option => ({...option, votes: 0}))
+  const counts = new Map(options.map(option => [option.id, option]))
+  const latestByPubkey = new Map<string, TrustedEvent>()
+
+  for (const response of responses) {
+    const current = latestByPubkey.get(response.pubkey)
+
+    if (!current || response.created_at > current.created_at) {
+      latestByPubkey.set(response.pubkey, response)
+    }
+  }
+
+  for (const response of latestByPubkey.values()) {
+    for (const optionId of getPollResponseSelections(response, getPollType(event))) {
+      const option = counts.get(optionId)
+
+      if (option) {
+        option.votes += 1
+      }
+    }
+  }
+
+  return {
+    options,
+    voters: latestByPubkey.size,
+  }
+}
diff --git a/src/app/util/routes.ts b/src/app/util/routes.ts
index b227af8a..998834ec 100644
--- a/src/app/util/routes.ts
+++ b/src/app/util/routes.ts
@@ -6,6 +6,7 @@ import {page} from "$app/stores"
 import {nthEq} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {getAddress} from "@welshman/util"
+import {Poll} from "nostr-tools/kinds"
 import {tracker, userMessagingRelayList} from "@welshman/app"
 import {identity} from "@welshman/lib"
 import {
@@ -90,6 +91,8 @@ export const makeClassifiedPath = (url: string, address?: string) =>
 export const makeCalendarPath = (url: string, address?: string) =>
   makeSpacePath(url, "calendar", address)
 
+export const makePollPath = (url: string, id?: string) => makeSpacePath(url, "polls", id)
+
 export const scrollToEvent = (id: string) => {
   const element = document.querySelector(`[data-event="${id}"]`) as any
 
@@ -146,6 +149,10 @@ export const getEventPath = (event: TrustedEvent, urls: string[]) => {
       return makeCalendarPath(url, getAddress(event))
     }
 
+    if (event.kind === Poll) {
+      return makePollPath(url, event.id)
+    }
+
     if (event.kind === MESSAGE) {
       return makeMessagePath(url, event)
     }
@@ -192,5 +199,7 @@ export const getRoomItemPath = (url: string, event: TrustedEvent) => {
       return makeGoalPath(url, event.id)
     case EVENT_TIME:
       return makeCalendarPath(url, getAddress(event))
+    case Poll:
+      return makePollPath(url, event.id)
   }
 }
diff --git a/src/app/util/title.ts b/src/app/util/title.ts
index bbb9bc4b..ac60ac26 100644
--- a/src/app/util/title.ts
+++ b/src/app/util/title.ts
@@ -17,6 +17,7 @@ const staticTitles = new Map<string, string>([
   ["/spaces/[relay]/classifieds", "Classifieds"],
   ["/spaces/[relay]/calendar", "Calendar"],
   ["/spaces/[relay]/goals", "Goals"],
+  ["/spaces/[relay]/polls", "Polls"],
   ["/chat", "Messages"],
   ["/join", "Join Space"],
   ["/people", "Find People"],
@@ -35,6 +36,7 @@ const eventRoutes = new Set([
   "/spaces/[relay]/goals/[id]",
   "/spaces/[relay]/calendar/[address]",
   "/spaces/[relay]/classifieds/[address]",
+  "/spaces/[relay]/polls/[id]",
 ])
 
 type RouteParams = Record<string, string | undefined>
diff --git a/src/routes/spaces/[relay]/polls/+page.svelte b/src/routes/spaces/[relay]/polls/+page.svelte
new file mode 100644
index 00000000..c875ad9f
--- /dev/null
+++ b/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 {COMMENT, 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>
diff --git a/src/routes/spaces/[relay]/polls/[id]/+page.svelte b/src/routes/spaces/[relay]/polls/[id]/+page.svelte
new file mode 100644
index 00000000..eac6f17d
--- /dev/null
+++ b/src/routes/spaces/[relay]/polls/[id]/+page.svelte
@@ -0,0 +1,105 @@
+<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 PollVotes from "@app/components/PollVotes.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} />
+          <PollVotes {url} event={$event} />
+          <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>
diff --git a/src/routes/spaces/[relay]/recent/+page.svelte b/src/routes/spaces/[relay]/recent/+page.svelte
index cc888f00..b4a61071 100644
--- a/src/routes/spaces/[relay]/recent/+page.svelte
+++ b/src/routes/spaces/[relay]/recent/+page.svelte
@@ -26,8 +26,10 @@
   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 {Poll} from "nostr-tools/kinds"
 
   const url = decodeRelay($page.params.relay!)
   const since = ago(3, MONTH)
@@ -126,6 +128,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}
-- 
2.52.0


From 7a44bd1677721da7ebfd6de53ef381defdc7b2d6 Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Fri, 3 Apr 2026 01:09:00 +0530
Subject: [PATCH 5/7] feat: add NIP-88 poll support

---
 src/app/components/NoteContentPoll.svelte         |  4 +++-
 src/app/components/PollCreate.svelte              | 11 +++++++++--
 src/app/components/PollItem.svelte                |  4 +++-
 src/app/components/PollVotes.svelte               | 15 +++++++++------
 src/routes/spaces/[relay]/polls/+page.svelte      |  2 +-
 src/routes/spaces/[relay]/polls/[id]/+page.svelte |  6 +++++-
 6 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/app/components/NoteContentPoll.svelte b/src/app/components/NoteContentPoll.svelte
index db6af151..ffcf9bc3 100644
--- a/src/app/components/NoteContentPoll.svelte
+++ b/src/app/components/NoteContentPoll.svelte
@@ -35,7 +35,9 @@
         {/if}
       </p>
     </div>
-    <p class="whitespace-nowrap text-xs opacity-50">{$results.voters} voter{$results.voters === 1 ? "" : "s"}</p>
+    <p class="whitespace-nowrap text-xs opacity-50">
+      {$results.voters} voter{$results.voters === 1 ? "" : "s"}
+    </p>
   </div>
 
   <div class="flex flex-col gap-2">
diff --git a/src/app/components/PollCreate.svelte b/src/app/components/PollCreate.svelte
index d4c46a30..fb17bf51 100644
--- a/src/app/components/PollCreate.svelte
+++ b/src/app/components/PollCreate.svelte
@@ -118,7 +118,11 @@
             {#each options as option, index (index)}
               <div class="flex items-center gap-2">
                 <label class="input input-bordered flex w-full items-center gap-2">
-                  <input bind:value={options[index]} class="grow" type="text" placeholder={`Option ${index + 1}`} />
+                  <input
+                    bind:value={options[index]}
+                    class="grow"
+                    type="text"
+                    placeholder={`Option ${index + 1}`} />
                 </label>
                 <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(index)}>
                   <Icon icon={MinusCircle} size={4} />
@@ -150,7 +154,10 @@
             Ends at
           {/snippet}
           {#snippet input()}
-            <input bind:value={endsAt} class="input input-bordered w-full max-w-xs" type="datetime-local" />
+            <input
+              bind:value={endsAt}
+              class="input input-bordered w-full max-w-xs"
+              type="datetime-local" />
           {/snippet}
         </FieldInline>
       </div>
diff --git a/src/app/components/PollItem.svelte b/src/app/components/PollItem.svelte
index 7a5eea1f..1f96e96a 100644
--- a/src/app/components/PollItem.svelte
+++ b/src/app/components/PollItem.svelte
@@ -18,7 +18,9 @@
   const h = getTagValue("h", event.tags)
 </script>
 
-<Link class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md" href={makePollPath(url, event.id)}>
+<Link
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md"
+  href={makePollPath(url, event.id)}>
   <NoteContent {event} {url} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
     <span class="whitespace-nowrap py-1 text-sm opacity-75">
diff --git a/src/app/components/PollVotes.svelte b/src/app/components/PollVotes.svelte
index ee31e8a6..c334f9b9 100644
--- a/src/app/components/PollVotes.svelte
+++ b/src/app/components/PollVotes.svelte
@@ -33,10 +33,11 @@
   const endsAt = getPollEndsAt(event)
 
   const results = $derived.by(() => getPollResults(event, $responses))
-  const ownResponse = $derived.by(() =>
-    $responses
-      .filter(response => response.pubkey === $pubkey)
-      .sort((left, right) => right.created_at - left.created_at)[0],
+  const ownResponse = $derived.by(
+    () =>
+      $responses
+        .filter(response => response.pubkey === $pubkey)
+        .sort((left, right) => right.created_at - left.created_at)[0],
   )
 
   const submit = async () => {
@@ -111,9 +112,11 @@
             {/if}
             <span class="truncate">{option.label}</span>
           </label>
-          <span class="whitespace-nowrap text-xs opacity-75">{current?.votes || 0} vote{(current?.votes || 0) === 1 ? "" : "s"}</span>
+          <span class="whitespace-nowrap text-xs opacity-75"
+            >{current?.votes || 0} vote{(current?.votes || 0) === 1 ? "" : "s"}</span>
         </div>
-        <progress class="progress progress-primary" value={current?.votes || 0} max={maxVotes}></progress>
+        <progress class="progress progress-primary" value={current?.votes || 0} max={maxVotes}
+        ></progress>
       </div>
     {/each}
   </div>
diff --git a/src/routes/spaces/[relay]/polls/+page.svelte b/src/routes/spaces/[relay]/polls/+page.svelte
index c875ad9f..c5ac4b2d 100644
--- a/src/routes/spaces/[relay]/polls/+page.svelte
+++ b/src/routes/spaces/[relay]/polls/+page.svelte
@@ -5,7 +5,7 @@
   import {page} from "$app/stores"
   import {sortBy, partition, spec, pushToMapKey, max} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {COMMENT, getTagValue} 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"
diff --git a/src/routes/spaces/[relay]/polls/[id]/+page.svelte b/src/routes/spaces/[relay]/polls/[id]/+page.svelte
index eac6f17d..7de2c560 100644
--- a/src/routes/spaces/[relay]/polls/[id]/+page.svelte
+++ b/src/routes/spaces/[relay]/polls/[id]/+page.svelte
@@ -47,7 +47,11 @@
   onMount(() => {
     const controller = new AbortController()
 
-    request({relays: [url], filters: [{kinds: [Poll], ids: [id]}, {kinds: [PollResponse], "#e": [id]}, ...filters], signal: controller.signal})
+    request({
+      relays: [url],
+      filters: [{kinds: [Poll], ids: [id]}, {kinds: [PollResponse], "#e": [id]}, ...filters],
+      signal: controller.signal,
+    })
 
     return () => {
       controller.abort()
-- 
2.52.0


From 70ce54c5a503fa25c6c7e4642f057e8c2dac4e55 Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Fri, 3 Apr 2026 04:04:45 +0530
Subject: [PATCH 6/7] fix: refine poll UX and review and fix requested changes

---
 src/app/components/ComposeMenu.svelte         |   2 +-
 .../components/NoteContentMinimalPoll.svelte  |   9 +-
 src/app/components/NoteContentPoll.svelte     |  58 +++------
 src/app/components/PollCreate.svelte          | 111 ++++++++++++++----
 src/app/components/PollVotes.svelte           |  42 ++++---
 src/app/util/polls.ts                         |  20 ++--
 .../spaces/[relay]/polls/[id]/+page.svelte    |   2 -
 7 files changed, 142 insertions(+), 102 deletions(-)

diff --git a/src/app/components/ComposeMenu.svelte b/src/app/components/ComposeMenu.svelte
index 8c89e9f4..b7828d55 100644
--- a/src/app/components/ComposeMenu.svelte
+++ b/src/app/components/ComposeMenu.svelte
@@ -67,7 +67,7 @@
   <li>
     <Button onclick={createPoll}>
       <Icon size={4} icon={Revote} />
-      Poll
+      Ask a Question
     </Button>
   </li>
 </ul>
diff --git a/src/app/components/NoteContentMinimalPoll.svelte b/src/app/components/NoteContentMinimalPoll.svelte
index 6e479710..1d67365e 100644
--- a/src/app/components/NoteContentMinimalPoll.svelte
+++ b/src/app/components/NoteContentMinimalPoll.svelte
@@ -2,21 +2,18 @@
   import type {ComponentProps} from "svelte"
   import {derived} from "svelte/store"
   import {PollResponse} from "nostr-tools/kinds"
-  import {repository} from "@welshman/app"
-  import {deriveArray, deriveEventsById} from "@welshman/store"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
+  import {deriveEvents} from "@app/core/state"
   import {getPollResults} from "@app/util/polls"
 
   const props: ComponentProps<typeof ContentMinimal> = $props()
 
-  const responses = deriveArray(
-    deriveEventsById({repository, filters: [{kinds: [PollResponse], "#e": [props.event.id]}]}),
-  )
+  const responses = deriveEvents([{kinds: [PollResponse], "#e": [props.event.id]}])
 
   const results = derived(responses, $responses => getPollResults(props.event, $responses))
 </script>
 
-<div class="flex flex-col gap-1">
+<div class="flex flex-col gap-0">
   <span class="text-sm">{props.event.content || "Poll"}</span>
   <span class="text-xs opacity-50">{$results.voters} voter{$results.voters === 1 ? "" : "s"}</span>
 </div>
diff --git a/src/app/components/NoteContentPoll.svelte b/src/app/components/NoteContentPoll.svelte
index ffcf9bc3..53fcb203 100644
--- a/src/app/components/NoteContentPoll.svelte
+++ b/src/app/components/NoteContentPoll.svelte
@@ -1,55 +1,29 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
-  import {derived} from "svelte/store"
-  import {formatTimestampRelative} from "@welshman/lib"
+  import {onMount} from "svelte"
+  import {request} from "@welshman/net"
   import {PollResponse} from "nostr-tools/kinds"
-  import {repository} from "@welshman/app"
-  import {deriveArray, deriveEventsById} from "@welshman/store"
+  import PollVotes from "@app/components/PollVotes.svelte"
   import Content from "@app/components/Content.svelte"
-  import {getPollEndsAt, getPollResults, getPollType, isPollClosed} from "@app/util/polls"
 
   const props: ComponentProps<typeof Content> = $props()
 
-  const responses = deriveArray(
-    deriveEventsById({repository, filters: [{kinds: [PollResponse], "#e": [props.event.id]}]}),
-  )
+  onMount(() => {
+    if (!props.url) {
+      return
+    }
 
-  const results = derived(responses, $responses => getPollResults(props.event, $responses))
-
-  const endsAt = getPollEndsAt(props.event)
-  const pollType = getPollType(props.event)
-  const closed = isPollClosed(props.event)
+    request({
+      relays: [props.url],
+      filters: [{kinds: [PollResponse], "#e": [props.event.id]}],
+    })
+  })
 </script>
 
 <div class="flex flex-col gap-3">
-  <div class="flex flex-wrap items-start justify-between gap-2">
-    <div class="min-w-0 flex-grow">
-      <p class="text-xl">{props.event.content || "Poll"}</p>
-      <p class="text-xs opacity-50">
-        {pollType === "multiplechoice" ? "Multiple choice" : "Single choice"}
-        {#if endsAt}
-          · Ends {formatTimestampRelative(endsAt)}
-        {/if}
-        {#if closed}
-          · Closed
-        {/if}
-      </p>
-    </div>
-    <p class="whitespace-nowrap text-xs opacity-50">
-      {$results.voters} voter{$results.voters === 1 ? "" : "s"}
-    </p>
-  </div>
+  <p class="text-xl">{props.event.content || "Poll"}</p>
 
-  <div class="flex flex-col gap-2">
-    {#each $results.options as option (option.id)}
-      {@const maxVotes = Math.max(...$results.options.map(item => item.votes), 1)}
-      <div class="flex flex-col gap-1">
-        <div class="flex items-center justify-between gap-2 text-sm">
-          <span class="truncate">{option.label}</span>
-          <span class="whitespace-nowrap opacity-75">{option.votes}</span>
-        </div>
-        <progress class="progress progress-primary" value={option.votes} max={maxVotes}></progress>
-      </div>
-    {/each}
-  </div>
+  {#if props.url}
+    <PollVotes url={props.url} event={props.event} />
+  {/if}
 </div>
diff --git a/src/app/components/PollCreate.svelte b/src/app/components/PollCreate.svelte
index fb17bf51..33d3cc3e 100644
--- a/src/app/components/PollCreate.svelte
+++ b/src/app/components/PollCreate.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-  import {randomId, removeUndefined} from "@welshman/lib"
+  import {insertAt, now, randomId, removeAt, removeUndefined} from "@welshman/lib"
   import {makeEvent} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import {Poll} from "nostr-tools/kinds"
   import {isMobile, preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import HamburgerMenu from "@assets/icons/hamburger-menu.svg?dataurl"
   import PlusCircle from "@assets/icons/add-circle.svg?dataurl"
   import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
+  import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
@@ -20,6 +22,7 @@
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
   import {canEnforceNip70} from "@app/core/commands"
+  import type {PollType} from "@app/util/polls"
 
   type Props = {
     url: string
@@ -30,14 +33,62 @@
 
   const shouldProtect = canEnforceNip70(url)
 
+  type DraftOption = {
+    id: string
+    value: string
+  }
+
   const back = () => history.back()
 
   const addOption = () => {
-    options = [...options, ""]
+    options = [...options, {id: randomId(), value: ""}]
   }
 
-  const removeOption = (index: number) => {
-    options = options.filter((_, optionIndex) => optionIndex !== index)
+  const removeOption = (id: string) => {
+    options = options.filter(option => option.id !== id)
+  }
+
+  const updateOption = (id: string, value: string) => {
+    options = options.map(option => (option.id === id ? {...option, value} : option))
+  }
+
+  const reorderOptions = (targetId: string) => {
+    if (!draggedOptionId) {
+      return
+    }
+
+    const sourceIndex = options.findIndex(option => option.id === draggedOptionId)
+    const targetIndex = options.findIndex(option => option.id === targetId)
+
+    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+      return
+    }
+
+    options = insertAt(targetIndex, options[sourceIndex], removeAt(sourceIndex, options))
+  }
+
+  const onDragStart = (e: DragEvent, id: string) => {
+    draggedOptionId = id
+
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move"
+      e.dataTransfer.setData("text/plain", id)
+    }
+  }
+
+  const onDragOver = (e: DragEvent, targetId: string) => {
+    e.preventDefault()
+    reorderOptions(targetId)
+  }
+
+  const onDrop = (e: DragEvent, targetId: string) => {
+    e.preventDefault()
+    reorderOptions(targetId)
+    draggedOptionId = undefined
+  }
+
+  const onDragEnd = () => {
+    draggedOptionId = undefined
   }
 
   const submit = async () => {
@@ -45,13 +96,15 @@
       return pushToast({theme: "error", message: "Please provide a title for your poll."})
     }
 
-    const nonEmptyOptions = removeUndefined(options.map(option => option.trim() || undefined))
+    const nonEmptyOptions = removeUndefined(options.map(option => option.value.trim() || undefined))
 
     if (nonEmptyOptions.length < 2) {
       return pushToast({theme: "error", message: "Please provide at least two options."})
     }
 
-    const parsedEndsAt = endsAt ? Math.floor(new Date(endsAt).getTime() / 1000) : undefined
+    if (endsAt && endsAt <= now()) {
+      return pushToast({theme: "error", message: "End time must be in the future."})
+    }
 
     const tags: string[][] = [
       ...nonEmptyOptions.map(option => ["option", randomId(), option]),
@@ -59,8 +112,8 @@
       ["relay", url],
     ]
 
-    if (parsedEndsAt) {
-      tags.push(["endsAt", String(parsedEndsAt)])
+    if (endsAt) {
+      tags.push(["endsAt", String(endsAt)])
     }
 
     if (h) {
@@ -80,16 +133,20 @@
   }
 
   let title = $state("")
-  let pollType = $state<"singlechoice" | "multiplechoice">("singlechoice")
-  let endsAt = $state("")
-  let options = $state(["Yes", "No"])
+  let pollType = $state<PollType>("singlechoice")
+  let endsAt = $state<number | undefined>()
+  let options = $state<DraftOption[]>([
+    {id: randomId(), value: "Yes"},
+    {id: randomId(), value: "No"},
+  ])
+  let draggedOptionId = $state<string | undefined>()
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
       <ModalTitle>Create a Poll</ModalTitle>
-      <ModalSubtitle>Ask the room a question with one or more answers.</ModalSubtitle>
+      <ModalSubtitle>Ask a question and collect votes right in the feed.</ModalSubtitle>
     </ModalHeader>
     <div class="col-8 relative">
       <Field>
@@ -114,22 +171,33 @@
           <p>Options*</p>
         {/snippet}
         {#snippet input()}
-          <div class="flex flex-col gap-2">
-            {#each options as option, index (index)}
-              <div class="flex items-center gap-2">
+          <div class="flex flex-col gap-2" role="list">
+            {#each options as option, index (option.id)}
+              <div
+                class="flex items-center gap-2"
+                draggable="true"
+                role="listitem"
+                ondragstart={e => onDragStart(e, option.id)}
+                ondragover={e => onDragOver(e, option.id)}
+                ondrop={e => onDrop(e, option.id)}
+                ondragend={onDragEnd}>
+                <div class="cursor-move opacity-70" aria-label="Drag handle">
+                  <Icon icon={HamburgerMenu} size={4} />
+                </div>
                 <label class="input input-bordered flex w-full items-center gap-2">
                   <input
-                    bind:value={options[index]}
+                    value={option.value}
                     class="grow"
                     type="text"
-                    placeholder={`Option ${index + 1}`} />
+                    placeholder={`Option ${index + 1}`}
+                    oninput={e => updateOption(option.id, e.currentTarget.value)} />
                 </label>
-                <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(index)}>
+                <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(option.id)}>
                   <Icon icon={MinusCircle} size={4} />
                 </Button>
               </div>
             {/each}
-            <Button class="btn btn-ghost btn-sm self-start" onclick={addOption}>
+            <Button class="btn btn-outline btn-sm self-end" onclick={addOption}>
               <Icon icon={PlusCircle} size={4} />
               Add option
             </Button>
@@ -154,10 +222,7 @@
             Ends at
           {/snippet}
           {#snippet input()}
-            <input
-              bind:value={endsAt}
-              class="input input-bordered w-full max-w-xs"
-              type="datetime-local" />
+            <DateTimeInput bind:value={endsAt} />
           {/snippet}
         </FieldInline>
       </div>
diff --git a/src/app/components/PollVotes.svelte b/src/app/components/PollVotes.svelte
index c334f9b9..d134f384 100644
--- a/src/app/components/PollVotes.svelte
+++ b/src/app/components/PollVotes.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import type {TrustedEvent} from "@welshman/util"
-  import {pubkey, repository} from "@welshman/app"
-  import {deriveArray, deriveEventsById} from "@welshman/store"
+  import {pubkey} from "@welshman/app"
   import {PollResponse} from "nostr-tools/kinds"
   import {formatTimestampRelative} from "@welshman/lib"
   import Button from "@lib/components/Button.svelte"
+  import {deriveEvents} from "@app/core/state"
   import {pushToast} from "@app/util/toast"
   import {publishPollResponse} from "@app/core/commands"
   import {
@@ -23,22 +23,31 @@
 
   const {url, event}: Props = $props()
 
-  const responses = deriveArray(
-    deriveEventsById({repository, filters: [{kinds: [PollResponse], "#e": [event.id]}]}),
-  )
+  const responses = deriveEvents([{kinds: [PollResponse], "#e": [event.id]}])
 
   const pollType = getPollType(event)
   const options = getPollOptions(event)
   const closed = isPollClosed(event)
   const endsAt = getPollEndsAt(event)
 
-  const results = $derived.by(() => getPollResults(event, $responses))
-  const ownResponse = $derived.by(
-    () =>
-      $responses
-        .filter(response => response.pubkey === $pubkey)
-        .sort((left, right) => right.created_at - left.created_at)[0],
-  )
+  const getOwnResponse = (responses: TrustedEvent[]) => {
+    let latest: TrustedEvent | undefined
+
+    for (const response of responses) {
+      if (response.pubkey !== $pubkey) {
+        continue
+      }
+
+      if (!latest || response.created_at > latest.created_at) {
+        latest = response
+      }
+    }
+
+    return latest
+  }
+
+  const results = $derived(getPollResults(event, $responses))
+  const ownResponse = $derived(getOwnResponse($responses))
 
   const submit = async () => {
     if (closed) {
@@ -78,10 +87,11 @@
     <div class="text-sm opacity-75">
       {pollType === "multiplechoice" ? "Multiple choice" : "Single choice"}
       {#if endsAt}
-        · Ends {formatTimestampRelative(endsAt)}
-      {/if}
-      {#if closed}
-        · Closed
+        {#if closed}
+          • Ended {formatTimestampRelative(endsAt)}
+        {:else}
+          • Ends {formatTimestampRelative(endsAt)}
+        {/if}
       {/if}
     </div>
     <div class="text-sm opacity-75">{results.voters} vote{results.voters === 1 ? "" : "s"}</div>
diff --git a/src/app/util/polls.ts b/src/app/util/polls.ts
index e207def8..6c0a7390 100644
--- a/src/app/util/polls.ts
+++ b/src/app/util/polls.ts
@@ -1,6 +1,6 @@
-import {now, uniq} from "@welshman/lib"
+import {now, removeUndefined, uniq} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
-import {getTagValue, getTags} from "@welshman/util"
+import {getTagValue, getTags, getTagValues} from "@welshman/util"
 
 export type PollType = "singlechoice" | "multiplechoice"
 
@@ -10,24 +10,22 @@ export type PollOption = {
   votes: number
 }
 
-const isDefined = <T>(value: T | undefined): value is T => value !== undefined
-
 export const getPollType = (event: TrustedEvent): PollType =>
   getTagValue("polltype", event.tags) === "multiplechoice" ? "multiplechoice" : "singlechoice"
 
 export const getPollOptions = (event: TrustedEvent) =>
-  getTags("option", event.tags)
-    .map(tag => {
+  removeUndefined(
+    getTags("option", event.tags).map(tag => {
       const [, id, label = id] = tag
 
       if (!id) return undefined
 
       return {id, label}
-    })
-    .filter(isDefined)
+    }),
+  )
 
 export const getPollEndsAt = (event: TrustedEvent) => {
-  const endsAt = getTagValue("endsAt", event.tags) || getTagValue("endsat", event.tags)
+  const endsAt = getTagValue("endsAt", event.tags)
 
   if (!endsAt) return undefined
 
@@ -43,9 +41,7 @@ export const isPollClosed = (event: TrustedEvent) => {
 }
 
 export const getPollResponseSelections = (event: TrustedEvent, pollType = getPollType(event)) => {
-  const selections = getTags("response", event.tags)
-    .map(tag => tag[1])
-    .filter(isDefined)
+  const selections = getTagValues("response", event.tags)
 
   return pollType === "singlechoice" ? selections.slice(0, 1) : uniq(selections)
 }
diff --git a/src/routes/spaces/[relay]/polls/[id]/+page.svelte b/src/routes/spaces/[relay]/polls/[id]/+page.svelte
index 7de2c560..976f9c36 100644
--- a/src/routes/spaces/[relay]/polls/[id]/+page.svelte
+++ b/src/routes/spaces/[relay]/polls/[id]/+page.svelte
@@ -15,7 +15,6 @@
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
-  import PollVotes from "@app/components/PollVotes.svelte"
   import CommentActions from "@app/components/CommentActions.svelte"
   import EventReply from "@app/components/EventReply.svelte"
   import {deriveEvent, decodeRelay} from "@app/core/state"
@@ -71,7 +70,6 @@
       <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} />
-          <PollVotes {url} event={$event} />
           <CommentActions segment="polls" showActivity {url} event={$event} />
         </div>
       </NoteCard>
-- 
2.52.0


From 9b39858b490bdd7ed2e5551528a51fdeed6bfc85 Mon Sep 17 00:00:00 2001
From: Bhavishy <bhavishyrocker2801@gmail.com>
Date: Fri, 3 Apr 2026 13:45:48 +0530
Subject: [PATCH 7/7] fix: refine poll rendering and inline voting UX

---
 .../components/NoteContentMinimalPoll.svelte  |  6 +-
 src/app/components/NoteContentPoll.svelte     |  2 +-
 src/app/components/PollVotes.svelte           | 58 +++++++++++++------
 3 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/app/components/NoteContentMinimalPoll.svelte b/src/app/components/NoteContentMinimalPoll.svelte
index 1d67365e..a7e066f1 100644
--- a/src/app/components/NoteContentMinimalPoll.svelte
+++ b/src/app/components/NoteContentMinimalPoll.svelte
@@ -2,11 +2,11 @@
   import type {ComponentProps} from "svelte"
   import {derived} from "svelte/store"
   import {PollResponse} from "nostr-tools/kinds"
-  import ContentMinimal from "@app/components/ContentMinimal.svelte"
+  import Content from "@app/components/Content.svelte"
   import {deriveEvents} from "@app/core/state"
   import {getPollResults} from "@app/util/polls"
 
-  const props: ComponentProps<typeof ContentMinimal> = $props()
+  const props: ComponentProps<typeof Content> = $props()
 
   const responses = deriveEvents([{kinds: [PollResponse], "#e": [props.event.id]}])
 
@@ -14,6 +14,6 @@
 </script>
 
 <div class="flex flex-col gap-0">
-  <span class="text-sm">{props.event.content || "Poll"}</span>
+  <Content event={props.event} url={props.url} />
   <span class="text-xs opacity-50">{$results.voters} voter{$results.voters === 1 ? "" : "s"}</span>
 </div>
diff --git a/src/app/components/NoteContentPoll.svelte b/src/app/components/NoteContentPoll.svelte
index 53fcb203..a60ecda4 100644
--- a/src/app/components/NoteContentPoll.svelte
+++ b/src/app/components/NoteContentPoll.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <div class="flex flex-col gap-3">
-  <p class="text-xl">{props.event.content || "Poll"}</p>
+  <Content event={props.event} showEntire url={props.url} />
 
   {#if props.url}
     <PollVotes url={props.url} event={props.event} />
diff --git a/src/app/components/PollVotes.svelte b/src/app/components/PollVotes.svelte
index d134f384..e86f4412 100644
--- a/src/app/components/PollVotes.svelte
+++ b/src/app/components/PollVotes.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
+  import {onDestroy} from "svelte"
   import type {TrustedEvent} from "@welshman/util"
-  import {pubkey} from "@welshman/app"
+  import {pubkey, publishThunk, abortThunk} from "@welshman/app"
   import {PollResponse} from "nostr-tools/kinds"
   import {formatTimestampRelative} from "@welshman/lib"
-  import Button from "@lib/components/Button.svelte"
+  import {noop} from "@welshman/lib"
+  import {stopPropagation} from "@lib/html"
   import {deriveEvents} from "@app/core/state"
   import {pushToast} from "@app/util/toast"
-  import {publishPollResponse} from "@app/core/commands"
+  import {makePollResponse} from "@app/core/commands"
   import {
     getPollEndsAt,
     getPollOptions,
@@ -29,6 +31,7 @@
   const options = getPollOptions(event)
   const closed = isPollClosed(event)
   const endsAt = getPollEndsAt(event)
+  const publishDelay = pollType === "multiplechoice" ? 10_000 : undefined
 
   const getOwnResponse = (responses: TrustedEvent[]) => {
     let latest: TrustedEvent | undefined
@@ -46,43 +49,66 @@
     return latest
   }
 
-  const results = $derived(getPollResults(event, $responses))
-  const ownResponse = $derived(getOwnResponse($responses))
-
-  const submit = async () => {
-    if (closed) {
-      return pushToast({theme: "error", message: "This poll is closed."})
+  const publishSelection = (selection: string[]) => {
+    if (activeThunk) {
+      abortThunk(activeThunk)
     }
 
-    const selection = pollType === "singlechoice" ? [selectedIds[0]].filter(Boolean) : selectedIds
+    if (selection.length === 0) {
+      activeThunk = undefined
+      return
+    }
+
+    activeThunk = publishThunk({
+      relays: [url],
+      event: makePollResponse({event, selectedIds: selection}),
+      delay: publishDelay,
+    })
+  }
+
+  const publishCurrentSelection = () => {
+    const selection = pollType === "singlechoice" ? selectedIds.slice(0, 1) : selectedIds
 
     if (selection.length === 0) {
       return pushToast({theme: "error", message: "Please select at least one option."})
     }
 
-    publishPollResponse({relays: [url], event, selectedIds: selection})
+    publishSelection(selection)
   }
 
+  const results = $derived(getPollResults(event, $responses))
+  const ownResponse = $derived(getOwnResponse($responses))
+
   const setSingleChoice = (id: string) => {
     selectedIds = [id]
+    publishCurrentSelection()
   }
 
   const toggleMultipleChoice = (id: string) => {
     selectedIds = selectedIds.includes(id)
       ? selectedIds.filter(selectedId => selectedId !== id)
       : [...selectedIds, id]
+
+    publishCurrentSelection()
   }
 
   let selectedIds = $state<string[]>([])
+  let activeThunk: ReturnType<typeof publishThunk> | undefined
 
   $effect(() => {
     if (ownResponse) {
       selectedIds = getPollResponseSelections(ownResponse, pollType)
     }
   })
+
+  onDestroy(() => {
+    if (activeThunk) {
+      abortThunk(activeThunk)
+    }
+  })
 </script>
 
-<div class="flex flex-col gap-3 rounded-box bg-base-200 p-4">
+<div class="card2 bg-alt p-4">
   <div class="flex flex-wrap items-center justify-between gap-2">
     <div class="text-sm opacity-75">
       {pollType === "multiplechoice" ? "Multiple choice" : "Single choice"}
@@ -111,12 +137,14 @@
                   type="radio"
                   class="radio radio-primary radio-sm"
                   checked={selectedIds[0] === option.id}
+                  onclick={stopPropagation(noop)}
                   onchange={() => setSingleChoice(option.id)} />
               {:else}
                 <input
                   type="checkbox"
                   class="checkbox checkbox-primary checkbox-sm"
                   checked={selectedIds.includes(option.id)}
+                  onclick={stopPropagation(noop)}
                   onchange={() => toggleMultipleChoice(option.id)} />
               {/if}
             {/if}
@@ -130,10 +158,4 @@
       </div>
     {/each}
   </div>
-
-  {#if !closed}
-    <div class="flex justify-end">
-      <Button class="btn btn-primary btn-sm" onclick={submit}>Cast vote</Button>
-    </div>
-  {/if}
 </div>
-- 
2.52.0