From 4f3a2a1660b09a06005eb0abbd169ca87a1cda43 Mon Sep 17 00:00:00 2001
From: junaiddshaukat <junaiddshaukat@noreply.coracle.social>
Date: Fri, 3 Apr 2026 16:58:35 +0000
Subject: [PATCH 1/7] Add space search to recent activity page (#59) (#119)

Co-authored-by: junaiddshaukat <junaiddshaukat@noreply.coracle.social>
Co-committed-by: junaiddshaukat <junaiddshaukat@noreply.coracle.social>
---
 src/routes/spaces/[relay]/recent/+page.svelte | 184 +++++++++++++++++-
 1 file changed, 182 insertions(+), 2 deletions(-)

diff --git a/src/routes/spaces/[relay]/recent/+page.svelte b/src/routes/spaces/[relay]/recent/+page.svelte
index cc888f00..309a1296 100644
--- a/src/routes/spaces/[relay]/recent/+page.svelte
+++ b/src/routes/spaces/[relay]/recent/+page.svelte
@@ -1,8 +1,23 @@
 <script lang="ts">
-  import {onMount} from "svelte"
+  import {tick, onMount} from "svelte"
   import {derived} from "svelte/store"
   import {page} from "$app/stores"
-  import {groupBy, ago, MONTH, first, sortBy, uniqBy} from "@welshman/lib"
+  import {debounce} from "throttle-debounce"
+  import {
+    formatTimestampAsDate,
+    groupBy,
+    ago,
+    now,
+    MONTH,
+    MINUTE,
+    HOUR,
+    DAY,
+    WEEK,
+    first,
+    sortBy,
+    uniqBy,
+  } from "@welshman/lib"
+  import {request} from "@welshman/net"
   import {
     MESSAGE,
     THREAD,
@@ -13,12 +28,17 @@
     getTagValue,
     getTagValues,
     getIdAndAddress,
+    sortEventsDesc,
   } from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
   import {repository} from "@welshman/app"
   import History from "@assets/icons/history.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import {createScroller} from "@lib/html"
+  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import NoteItem from "@app/components/NoteItem.svelte"
@@ -28,6 +48,7 @@
   import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
   import RecentConversation from "@app/components/RecentConversation.svelte"
   import {decodeRelay, deriveEventsForUrl, CONTENT_KINDS} from "@app/core/state"
+  import {goToEvent} from "@app/util/routes"
 
   const url = decodeRelay($page.params.relay!)
   const since = ago(3, MONTH)
@@ -88,9 +109,93 @@
     },
   )
 
+  let term = $state("")
+  let showSearch = $state(false)
+  let loading = $state(false)
+  let searchResults: TrustedEvent[] = $state([])
+  let searchInput: HTMLInputElement | undefined = $state()
+  let controller: AbortController | undefined
+
   let limit = $state(20)
   let element: Element | undefined = $state()
 
+  const resultsByAge = $derived(groupBy(e => getAgeSection(e.created_at), searchResults))
+
+  const getAgeSection = (createdAt: number) => {
+    const age = now() - createdAt
+
+    if (age <= DAY) return "day"
+    if (age <= WEEK) return "week"
+    return "older"
+  }
+
+  const getAgeLabel = (createdAt: number) => {
+    const age = now() - createdAt
+
+    if (age < MINUTE) return "Just now"
+    if (age < HOUR) return `${Math.floor(age / MINUTE)}m ago`
+    if (age < DAY) return `${Math.floor(age / HOUR)}h ago`
+    return `${Math.floor(age / DAY)}d ago`
+  }
+
+  const openSearch = () => {
+    showSearch = true
+    tick().then(() => searchInput?.focus())
+  }
+
+  const closeSearch = () => {
+    showSearch = false
+  }
+
+  const clearSearch = () => {
+    term = ""
+    showSearch = false
+    loading = false
+    searchResults = []
+    controller?.abort()
+    controller = undefined
+  }
+
+  const search = debounce(300, async (searchTerm: string) => {
+    controller?.abort()
+
+    if (!searchTerm.trim()) {
+      loading = false
+      searchResults = []
+      return
+    }
+
+    controller = new AbortController()
+    loading = true
+
+    try {
+      const events = await request({
+        relays: [url],
+        autoClose: true,
+        signal: controller.signal,
+        filters: [{kinds: [MESSAGE, ...CONTENT_KINDS], search: searchTerm.trim()}],
+      })
+
+      searchResults = sortEventsDesc(uniqBy((e: TrustedEvent) => e.id, events))
+    } catch (error) {
+      if (!(error instanceof DOMException && error.name === "AbortError")) {
+        searchResults = []
+      }
+    } finally {
+      loading = false
+    }
+  })
+
+  const onInput = () => {
+    showSearch = true
+    void search(term)
+  }
+
+  const onResultClick = (event: TrustedEvent) => {
+    closeSearch()
+    goToEvent(event, {keepFocus: true})
+  }
+
   onMount(() => {
     const scroller = createScroller({
       element: element!,
@@ -108,6 +213,81 @@
     <Icon icon={History} />
     <strong>Recent Activity</strong>
   {/snippet}
+  {#snippet action()}
+    <div>
+      <button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={openSearch}>
+        <Icon size={4} icon={Magnifier} />
+      </button>
+      {#if showSearch}
+        <button class="fixed inset-0 z-feature" aria-label="Close search" onclick={closeSearch}
+        ></button>
+        <div class="fixed cw top-0 right-0 z-feature p-2">
+          <div
+            class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
+            transition:fly={{y: -40, duration: 150}}>
+            <div class="flex justify-between">
+              <strong>Search</strong>
+              <Button onclick={clearSearch}>
+                <Icon icon={CloseCircle} />
+              </Button>
+            </div>
+            <label class="input input-sm input-bordered flex w-full items-center gap-2">
+              <Icon size={4} icon={Magnifier} />
+              <input
+                bind:this={searchInput}
+                bind:value={term}
+                class="min-w-0 grow"
+                type="text"
+                placeholder="Search this space..."
+                oninput={onInput} />
+            </label>
+            <div class="max-h-[65vh] overflow-y-auto">
+              {#if !term}
+                <p class="text-sm opacity-70">Search for content across this space.</p>
+              {:else if loading}
+                <p class="text-sm opacity-70">Searching...</p>
+              {:else if resultsByAge.size === 0}
+                <p class="text-sm opacity-70">No results found.</p>
+              {:else}
+                <div class="col-2">
+                  {#each resultsByAge as [key, events] (key)}
+                    <div class="col-2">
+                      <p class="text-xs uppercase tracking-wide opacity-60">
+                        {#if key === "day"}
+                          Last 24 Hours
+                        {:else if key === "week"}
+                          Last 7 Days
+                        {:else}
+                          Older
+                        {/if}
+                      </p>
+                      <div class="col-2">
+                        {#each events as event (event.id)}
+                          <button
+                            class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
+                            onclick={() => onResultClick(event)}>
+                            <p class="line-clamp-2 text-sm">
+                              {event.content.trim() ||
+                                getTagValue("title", event.tags) ||
+                                "(No text content)"}
+                            </p>
+                            <div class="row-2 text-xs opacity-70">
+                              <span>{getAgeLabel(event.created_at)}</span>
+                              <span>{formatTimestampAsDate(event.created_at)}</span>
+                            </div>
+                          </button>
+                        {/each}
+                      </div>
+                    </div>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/snippet}
 </SpaceBar>
 
 <div bind:this={element}>

From fe20fbfd28b0cbc8211bc539dd9b1b7240e4ed09 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Fri, 3 Apr 2026 10:54:50 -0700
Subject: [PATCH 2/7] Add polls

---
 src/app/components/ComposeMenu.svelte         |  10 +
 src/app/components/NoteContent.svelte         |   4 +
 src/app/components/NoteContentMinimal.svelte  |   4 +
 .../components/NoteContentMinimalPoll.svelte  |  19 ++
 src/app/components/NoteContentPoll.svelte     |  29 +++
 src/app/components/PollCreate.svelte          | 238 ++++++++++++++++++
 src/app/components/PollItem.svelte            |  34 +++
 src/app/components/PollOption.svelte          |  70 ++++++
 src/app/components/PollVotes.svelte           | 127 ++++++++++
 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                         |  76 ++++++
 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    | 107 ++++++++
 src/routes/spaces/[relay]/recent/+page.svelte |   4 +
 19 files changed, 859 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/PollOption.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..b7828d55 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} />
+      Ask a Question
+    </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..0202b65a
--- /dev/null
+++ b/src/app/components/NoteContentMinimalPoll.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {derived} from "svelte/store"
+  import {PollResponse} from "nostr-tools/kinds"
+  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 = deriveEvents([{kinds: [PollResponse], "#e": [props.event.id]}])
+
+  const results = derived(responses, $responses => getPollResults(props.event, $responses))
+</script>
+
+<div class="flex flex-col gap-0">
+  <ContentMinimal {...props} />
+  <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..a60ecda4
--- /dev/null
+++ b/src/app/components/NoteContentPoll.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {onMount} from "svelte"
+  import {request} from "@welshman/net"
+  import {PollResponse} from "nostr-tools/kinds"
+  import PollVotes from "@app/components/PollVotes.svelte"
+  import Content from "@app/components/Content.svelte"
+
+  const props: ComponentProps<typeof Content> = $props()
+
+  onMount(() => {
+    if (!props.url) {
+      return
+    }
+
+    request({
+      relays: [props.url],
+      filters: [{kinds: [PollResponse], "#e": [props.event.id]}],
+    })
+  })
+</script>
+
+<div class="flex flex-col gap-3">
+  <Content event={props.event} showEntire url={props.url} />
+
+  {#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
new file mode 100644
index 00000000..33d3cc3e
--- /dev/null
+++ b/src/app/components/PollCreate.svelte
@@ -0,0 +1,238 @@
+<script lang="ts">
+  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"
+  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"
+  import type {PollType} from "@app/util/polls"
+
+  type Props = {
+    url: string
+    h?: string
+  }
+
+  const {url, h}: Props = $props()
+
+  const shouldProtect = canEnforceNip70(url)
+
+  type DraftOption = {
+    id: string
+    value: string
+  }
+
+  const back = () => history.back()
+
+  const addOption = () => {
+    options = [...options, {id: randomId(), value: ""}]
+  }
+
+  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 () => {
+    if (!title.trim()) {
+      return pushToast({theme: "error", message: "Please provide a title for your poll."})
+    }
+
+    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."})
+    }
+
+    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]),
+      ["polltype", pollType],
+      ["relay", url],
+    ]
+
+    if (endsAt) {
+      tags.push(["endsAt", String(endsAt)])
+    }
+
+    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<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 a question and collect votes right in the feed.</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" 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
+                    value={option.value}
+                    class="grow"
+                    type="text"
+                    placeholder={`Option ${index + 1}`}
+                    oninput={e => updateOption(option.id, e.currentTarget.value)} />
+                </label>
+                <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(option.id)}>
+                  <Icon icon={MinusCircle} size={4} />
+                </Button>
+              </div>
+            {/each}
+            <Button class="btn btn-outline btn-sm self-end" 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()}
+            <DateTimeInput bind:value={endsAt} />
+          {/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..1f96e96a
--- /dev/null
+++ b/src/app/components/PollItem.svelte
@@ -0,0 +1,34 @@
+<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/PollOption.svelte b/src/app/components/PollOption.svelte
new file mode 100644
index 00000000..784c1fde
--- /dev/null
+++ b/src/app/components/PollOption.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import {tweened} from "svelte/motion"
+  import type {TrustedEvent} from "@welshman/util"
+  import {noop} from "@welshman/lib"
+  import {stopPropagation} from "@lib/html"
+  import {getPollType, isPollClosed} from "@app/util/polls"
+
+  type Props = {
+    event: TrustedEvent
+    option: {id: string; label: string}
+    results: {voters: number; options: {id: string; votes: number}[]}
+    selectedIds: string[]
+    setSingleChoice: (id: string) => void
+    toggleMultipleChoice: (id: string) => void
+  }
+
+  const {event, option, results, selectedIds, setSingleChoice, toggleMultipleChoice}: Props =
+    $props()
+
+  const pollType = getPollType(event)
+  const closed = isPollClosed(event)
+
+  const selected = $derived(
+    pollType === "singlechoice" ? selectedIds[0] === option.id : selectedIds.includes(option.id),
+  )
+  const onselect = () =>
+    pollType === "singlechoice" ? setSingleChoice(option.id) : toggleMultipleChoice(option.id)
+
+  const votes = $derived(results.options.find(r => r.id === option.id)?.votes || 0)
+  const maxVotes = $derived(Math.max(...results.options.map(r => r.votes), 1))
+
+  const tweenedVotes = tweened(votes, {duration: 300})
+  const tweenedMax = tweened(maxVotes, {duration: 300})
+
+  $effect(() => {
+    tweenedVotes.set(votes)
+  })
+
+  $effect(() => {
+    tweenedMax.set(maxVotes)
+  })
+</script>
+
+<div class="flex flex-col gap-2 card2 card2-sm bg-alt">
+  <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={selected}
+            onclick={stopPropagation(noop)}
+            onchange={onselect} />
+        {:else}
+          <input
+            type="checkbox"
+            class="checkbox checkbox-primary checkbox-sm"
+            checked={selected}
+            onclick={stopPropagation(noop)}
+            onchange={onselect} />
+        {/if}
+      {/if}
+      <span class="truncate">{option.label}</span>
+    </label>
+    <span class="whitespace-nowrap text-xs opacity-75">{votes} vote{votes === 1 ? "" : "s"}</span>
+  </div>
+  <progress class="progress progress-primary" value={$tweenedVotes} max={$tweenedMax}></progress>
+</div>
diff --git a/src/app/components/PollVotes.svelte b/src/app/components/PollVotes.svelte
new file mode 100644
index 00000000..83448174
--- /dev/null
+++ b/src/app/components/PollVotes.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+  import {onDestroy} from "svelte"
+  import type {TrustedEvent} from "@welshman/util"
+  import {pubkey, publishThunk, abortThunk} from "@welshman/app"
+  import {PollResponse} from "nostr-tools/kinds"
+  import {formatTimestampRelative} from "@welshman/lib"
+  import {deriveEvents} from "@app/core/state"
+  import {pushToast} from "@app/util/toast"
+  import {makePollResponse} from "@app/core/commands"
+  import PollOption from "@app/components/PollOption.svelte"
+  import {
+    getPollEndsAt,
+    getPollOptions,
+    getPollResponseSelections,
+    getPollResults,
+    getPollType,
+    isPollClosed,
+  } from "@app/util/polls"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
+
+  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 publishDelay = pollType === "multiplechoice" ? 10_000 : undefined
+
+  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 publishSelection = (selection: string[]) => {
+    if (activeThunk) {
+      abortThunk(activeThunk)
+    }
+
+    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."})
+    }
+
+    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-2">
+  {#each options as option (option.id)}
+    <PollOption {event} {option} {results} {selectedIds} {setSingleChoice} {toggleMultipleChoice} />
+  {/each}
+  <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}
+        {#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>
+  </div>
+</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 5c436b62..195516fb 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 6b759e9a..131730a9 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},
         ],
       })
     }
@@ -300,6 +302,7 @@ const syncSpace = (url: string, rooms: string[]) => {
     filters: [
       {kinds: [...relayKinds, ...roomMetaKinds, ...roomMemberKinds, ...MESSAGE_KINDS]},
       makeCommentFilter(CONTENT_KINDS, {since}),
+      {kinds: [PollResponse], since},
     ],
     onEvent: event => {
       if (event.kind === ROOM_META) {
@@ -311,7 +314,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..6c0a7390
--- /dev/null
+++ b/src/app/util/polls.ts
@@ -0,0 +1,76 @@
+import {now, removeUndefined, uniq} from "@welshman/lib"
+import type {TrustedEvent} from "@welshman/util"
+import {getTagValue, getTags, getTagValues} from "@welshman/util"
+
+export type PollType = "singlechoice" | "multiplechoice"
+
+export type PollOption = {
+  id: string
+  label: string
+  votes: number
+}
+
+export const getPollType = (event: TrustedEvent): PollType =>
+  getTagValue("polltype", event.tags) === "multiplechoice" ? "multiplechoice" : "singlechoice"
+
+export const getPollOptions = (event: TrustedEvent) =>
+  removeUndefined(
+    getTags("option", event.tags).map(tag => {
+      const [, id, label = id] = tag
+
+      if (!id) return undefined
+
+      return {id, label}
+    }),
+  )
+
+export const getPollEndsAt = (event: TrustedEvent) => {
+  const endsAt = 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 = getTagValues("response", event.tags)
+
+  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..c5ac4b2d
--- /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 {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..976f9c36
--- /dev/null
+++ b/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>
diff --git a/src/routes/spaces/[relay]/recent/+page.svelte b/src/routes/spaces/[relay]/recent/+page.svelte
index 309a1296..d75ddbc0 100644
--- a/src/routes/spaces/[relay]/recent/+page.svelte
+++ b/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}

From fceccf47bec1bb6b2c3fc6d506843c2bf9e1385d Mon Sep 17 00:00:00 2001
From: userAdityaa <aditya.chaudhary1558@gmail.com>
Date: Fri, 3 Apr 2026 23:54:20 +0000
Subject: [PATCH 3/7] fix(ui): hide report badge for non-admin users (#147)

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com>
Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>
---
 src/app/components/ReactionSummary.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ReactionSummary.svelte b/src/app/components/ReactionSummary.svelte
index fad73460..9d88180c 100644
--- a/src/app/components/ReactionSummary.svelte
+++ b/src/app/components/ReactionSummary.svelte
@@ -23,7 +23,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Reaction from "@app/components/Reaction.svelte"
   import ReportDetails from "@app/components/ReportDetails.svelte"
-  import {REACTION_KINDS} from "@app/core/state"
+  import {REACTION_KINDS, deriveUserIsSpaceAdmin} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
   interface Props {
@@ -78,6 +78,8 @@
     }
   }
 
+  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+
   const onReportClick = () => pushModal(ReportDetails, {url, event})
 
   const reportReasons = $derived(uniq(map(e => getTag("e", e.tags)?.[2], $reports.values())))
@@ -118,7 +120,7 @@
 
 {#if $reactions.length > 0 || $zaps.length || $reports.length > 0 || children}
   <div class="flex min-w-0 flex-wrap gap-2">
-    {#if url && $reports.length > 0}
+    {#if url && $reports.length > 0 && $userIsAdmin}
       <button
         type="button"
         data-tip={`This content has been reported as "${displayList(reportReasons)}".`}

From 9311cab3b21d1532f661238f2b01f22307dfd145 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Fri, 3 Apr 2026 17:14:55 -0700
Subject: [PATCH 4/7] Move away from fixed positioned page elements because
 they act squirrely on android

---
 src/app.css                                   |  24 +--
 src/app/components/EventReply.svelte          |   6 +-
 src/app/components/PrimaryNav.svelte          |   2 +-
 src/app/components/PrimaryNavSpaces.svelte    |   2 +-
 src/app/components/SpaceSearch.svelte         | 136 +++++++------
 src/lib/components/Page.svelte                |   2 +-
 src/lib/components/PageBar.svelte             |   2 +-
 src/lib/components/PageContent.svelte         |   5 +-
 src/lib/components/SecondaryNav.svelte        |   2 +-
 src/lib/components/SecondaryNavSection.svelte |   2 +-
 src/routes/people/+page.svelte                |   2 +-
 src/routes/spaces/+page.svelte                |   6 +-
 src/routes/spaces/[relay]/+page.svelte        |   4 +-
 src/routes/spaces/[relay]/recent/+page.svelte | 184 +++++++++---------
 src/routes/spaces/create/+page.svelte         |   4 +-
 15 files changed, 181 insertions(+), 202 deletions(-)

diff --git a/src/app.css b/src/app.css
index ae198f34..27d4e197 100644
--- a/src/app.css
+++ b/src/app.css
@@ -390,28 +390,12 @@ progress[value]::-webkit-progress-value {
 
 /* content width for fixed elements */
 
-.cw {
-  @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
-}
-
-.cw-full {
-  @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))];
-}
-
-.cb {
-  @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
-}
-
-.ct {
-  @apply top-[calc(var(--sait)+5rem)] md:top-[calc(var(--sait)+3rem)];
+.left-content {
+  @apply md:left-[calc(18.5rem+var(--sail))];
 }
 
 /* Keyboard open state adjustments */
 
-body.keyboard-open .cb {
-  @apply bottom-sai;
-}
-
 body.keyboard-open .hide-on-keyboard {
   display: none;
 }
@@ -419,11 +403,11 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */
 
 .chat__compose {
-  @apply cb cw fixed z-compose;
+  @apply left-content bottom-sai right-sai fixed z-compose;
 }
 
 .chat__compose-zone {
-  @apply cb cw fixed z-compose;
+  @apply left-content bottom-sai right-sai fixed z-compose;
 }
 
 .chat__compose-zone .chat__compose-inner {
diff --git a/src/app/components/EventReply.svelte b/src/app/components/EventReply.svelte
index 20a9826a..31b412a3 100644
--- a/src/app/components/EventReply.svelte
+++ b/src/app/components/EventReply.svelte
@@ -64,7 +64,11 @@
 </script>
 
 <div bind:this={spacer}></div>
-<form in:fly bind:this={form} onsubmit={preventDefault(submit)} class="cb cw fixed z-feature pt-3">
+<form
+  in:fly
+  bind:this={form}
+  onsubmit={preventDefault(submit)}
+  class="left-content bottom-sai right-sai ml-2 pl-2 fixed z-feature">
   <div class="card2 mx-2 my-2 bg-alt shadow-md">
     <div class="relative">
       <div class="note-editor flex-grow overflow-hidden">
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index c17ad236..80003124 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <div
-  class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
+  class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-2 md:block">
   <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
     <PrimaryNavSpaces />
     {#if PLATFORM_RELAYS.length > 0}
diff --git a/src/app/components/PrimaryNavSpaces.svelte b/src/app/components/PrimaryNavSpaces.svelte
index c89d080b..8f692ca8 100644
--- a/src/app/components/PrimaryNavSpaces.svelte
+++ b/src/app/components/PrimaryNavSpaces.svelte
@@ -12,7 +12,7 @@
 
   const itemHeight = 56
   const navPadding = 8 * itemHeight
-  const itemLimit = $derived((windowHeight - navPadding) / itemHeight)
+  const itemLimit = $derived(Math.max(0, (windowHeight - navPadding) / itemHeight))
   const [primarySpaceUrls, secondarySpaceUrls] = $derived(splitAt(itemLimit, $userSpaceUrls))
   const otherSpaceNotifications = $derived(secondarySpaceUrls.some(p => $notifications.has(p)))
 </script>
diff --git a/src/app/components/SpaceSearch.svelte b/src/app/components/SpaceSearch.svelte
index b1143fec..6372f6cf 100644
--- a/src/app/components/SpaceSearch.svelte
+++ b/src/app/components/SpaceSearch.svelte
@@ -130,76 +130,74 @@
   }
 </script>
 
-<div>
-  <button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={open}>
-    <Icon size={4} icon={Magnifier} />
-  </button>
-  {#if show}
-    <button class="fixed inset-0 z-feature" aria-label="Close search" onclick={close}></button>
-    <div class="fixed cw top-0 right-0 z-feature p-2">
-      <div
-        class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
-        transition:fly={{y: -40, duration: 150}}>
-        <div class="flex justify-between">
-          <strong>Search</strong>
-          <Button onclick={clear}>
-            <Icon icon={CloseCircle} />
-          </Button>
-        </div>
-        <label class="input input-sm input-bordered flex w-full items-center gap-2">
-          <Icon size={4} icon={Magnifier} />
-          <input
-            bind:this={input}
-            bind:value={term}
-            class="min-w-0 grow"
-            type="text"
-            placeholder={h ? "Search this room..." : "Search this space..."}
-            oninput={onInput} />
-        </label>
-        <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 content in this room." : "Search for content in this space."}
-            </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}
-            <div class="col-2">
-              {#each eventsByAge as [key, events] (key)}
+<button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={open}>
+  <Icon size={4} icon={Magnifier} />
+</button>
+{#if show}
+  <button class="fixed inset-0 z-feature" aria-label="Close search" onclick={close}></button>
+  <div class="fixed top-sai right-sai left-content z-feature p-2">
+    <div
+      class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
+      transition:fly={{y: -40, duration: 150}}>
+      <div class="flex justify-between">
+        <strong>Search</strong>
+        <Button onclick={clear}>
+          <Icon icon={CloseCircle} />
+        </Button>
+      </div>
+      <label class="input input-sm input-bordered flex w-full items-center gap-2">
+        <Icon size={4} icon={Magnifier} />
+        <input
+          bind:this={input}
+          bind:value={term}
+          class="min-w-0 grow"
+          type="text"
+          placeholder={h ? "Search this room..." : "Search this space..."}
+          oninput={onInput} />
+      </label>
+      <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 content in this room." : "Search for content in this space."}
+          </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}
+          <div class="col-2">
+            {#each eventsByAge as [key, events] (key)}
+              <div class="col-2">
+                <p class="text-xs uppercase tracking-wide opacity-60">
+                  {#if key === "day"}
+                    Last 24 Hours
+                  {:else if key === "week"}
+                    Last 7 Days
+                  {:else}
+                    Older
+                  {/if}
+                </p>
                 <div class="col-2">
-                  <p class="text-xs uppercase tracking-wide opacity-60">
-                    {#if key === "day"}
-                      Last 24 Hours
-                    {:else if key === "week"}
-                      Last 7 Days
-                    {:else}
-                      Older
-                    {/if}
-                  </p>
-                  <div class="col-2">
-                    {#each events as event (event.id)}
-                      <button
-                        class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
-                        onclick={() => onRoomSearchResultClick(event)}>
-                        <p class="line-clamp-2 text-sm">
-                          {event.content.trim() || "(No text content)"}
-                        </p>
-                        <div class="row-2 text-xs opacity-70">
-                          <span>{getAgeLabel(event.created_at)}</span>
-                          <span>{formatTimestampAsDate(event.created_at)}</span>
-                        </div>
-                      </button>
-                    {/each}
-                  </div>
+                  {#each events as event (event.id)}
+                    <button
+                      class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
+                      onclick={() => onRoomSearchResultClick(event)}>
+                      <p class="line-clamp-2 text-sm">
+                        {event.content.trim() || "(No text content)"}
+                      </p>
+                      <div class="row-2 text-xs opacity-70">
+                        <span>{getAgeLabel(event.created_at)}</span>
+                        <span>{formatTimestampAsDate(event.created_at)}</span>
+                      </div>
+                    </button>
+                  {/each}
                 </div>
-              {/each}
-            </div>
-          {/if}
-        </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
       </div>
     </div>
-  {/if}
-</div>
+  </div>
+{/if}
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
index ebe29cb6..8ee859e6 100644
--- a/src/lib/components/Page.svelte
+++ b/src/lib/components/Page.svelte
@@ -9,6 +9,6 @@
 
 <div
   data-component="Page"
-  class="scroll-container bottom-sai top-sai cw fixed mb-14 overflow-auto bg-base-200 md:mb-0 {props.class}">
+  class="relative flex-grow flex flex-col min-w-0 ml-sai mb-sai mt-sai mr-sai bg-base-200 md:ml-0 md:mb-0 {props.class}">
   {@render props.children?.()}
 </div>
diff --git a/src/lib/components/PageBar.svelte b/src/lib/components/PageBar.svelte
index 02418d3d..5d65355a 100644
--- a/src/lib/components/PageBar.svelte
+++ b/src/lib/components/PageBar.svelte
@@ -9,7 +9,7 @@
   const {children, ...props}: Props = $props()
 </script>
 
-<div data-component="PageBar" class="cw top-sai fixed z-nav p-2 {props.class}">
+<div data-component="PageBar" class="relative z-nav p-2 -mb-4 {props.class}">
   <div class="rounded-xl bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center">
     {@render children?.()}
   </div>
diff --git a/src/lib/components/PageContent.svelte b/src/lib/components/PageContent.svelte
index 84483d6d..d73eebcc 100644
--- a/src/lib/components/PageContent.svelte
+++ b/src/lib/components/PageContent.svelte
@@ -10,10 +10,7 @@
 
   let {children, element = $bindable(), ...props}: Props = $props()
 
-  const className = cx(
-    props.class,
-    "scroll-container cw cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
-  )
+  const className = cx(props.class, "scroll-container z-feature overflow-y-auto overflow-x-hidden")
 </script>
 
 <div {...props} bind:this={element} data-component="PageContent" class={className}>
diff --git a/src/lib/components/SecondaryNav.svelte b/src/lib/components/SecondaryNav.svelte
index c92c3eb7..162c8b8f 100644
--- a/src/lib/components/SecondaryNav.svelte
+++ b/src/lib/components/SecondaryNav.svelte
@@ -12,7 +12,7 @@
 
 <div
   class={cx(
-    "ml-sai mt-sai mb-sai max-h-screen w-60 sm:flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    "mt-sai mb-sai max-h-screen w-60 min-h-0 flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
     props.class,
   )}>
   {@render children?.()}
diff --git a/src/lib/components/SecondaryNavSection.svelte b/src/lib/components/SecondaryNavSection.svelte
index c29b50f5..e141c763 100644
--- a/src/lib/components/SecondaryNavSection.svelte
+++ b/src/lib/components/SecondaryNavSection.svelte
@@ -7,6 +7,6 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="flex flex-col gap-1 px-2 py-4 {props.class}">
+<div class="flex flex-col gap-1 px-2 py-2 {props.class}">
   {@render props.children?.()}
 </div>
diff --git a/src/routes/people/+page.svelte b/src/routes/people/+page.svelte
index 5778fed4..7d9937b6 100644
--- a/src/routes/people/+page.svelte
+++ b/src/routes/people/+page.svelte
@@ -37,7 +37,7 @@
   })
 </script>
 
-<Page class="cw-full">
+<Page>
   <ContentSearch>
     {#snippet input()}
       <label class="row-2 input input-bordered">
diff --git a/src/routes/spaces/+page.svelte b/src/routes/spaces/+page.svelte
index cba769e2..95ddd8c7 100644
--- a/src/routes/spaces/+page.svelte
+++ b/src/routes/spaces/+page.svelte
@@ -180,8 +180,8 @@
   })
 </script>
 
-<Page class="cw-full">
-  <PageBar class="cw-full">
+<Page>
+  <PageBar>
     {#if showSearch}
       <label class="input input-bordered input-sm flex flex-1 items-center gap-2" in:fly>
         <Icon icon={Magnifier} />
@@ -218,7 +218,7 @@
       </div>
     {/if}
   </PageBar>
-  <PageContent class="cw-full flex flex-col gap-2 p-2 pt-4">
+  <PageContent class="flex flex-col gap-2 p-2 pt-4">
     <div class="flex flex-col gap-2" bind:this={element}>
       {#each PLATFORM_RELAYS as url (url)}
         <Button
diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte
index aa56d767..233ab68e 100644
--- a/src/routes/spaces/[relay]/+page.svelte
+++ b/src/routes/spaces/[relay]/+page.svelte
@@ -22,10 +22,10 @@
 <svelte:window bind:innerWidth={width} />
 
 {#if width <= md}
-  <div class="ml-sai mt-sai mb-sai relative z-nav w-14 flex-shrink-0 bg-base-200 pt-4">
+  <div class="ml-sai mt-sai mb-sai relative z-nav w-14 flex-shrink-0 bg-base-200 pt-2">
     <PrimaryNavSpaces />
   </div>
-  <SecondaryNav class="!flex !min-h-0 !w-auto flex-grow pb-4">
+  <SecondaryNav class="!flex !w-auto flex-grow pb-16">
     <SpaceMenu {url} />
   </SecondaryNav>
 {/if}
diff --git a/src/routes/spaces/[relay]/recent/+page.svelte b/src/routes/spaces/[relay]/recent/+page.svelte
index d75ddbc0..c0abba62 100644
--- a/src/routes/spaces/[relay]/recent/+page.svelte
+++ b/src/routes/spaces/[relay]/recent/+page.svelte
@@ -216,104 +216,100 @@
     <strong>Recent Activity</strong>
   {/snippet}
   {#snippet action()}
-    <div>
-      <button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={openSearch}>
-        <Icon size={4} icon={Magnifier} />
-      </button>
-      {#if showSearch}
-        <button class="fixed inset-0 z-feature" aria-label="Close search" onclick={closeSearch}
-        ></button>
-        <div class="fixed cw top-0 right-0 z-feature p-2">
-          <div
-            class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
-            transition:fly={{y: -40, duration: 150}}>
-            <div class="flex justify-between">
-              <strong>Search</strong>
-              <Button onclick={clearSearch}>
-                <Icon icon={CloseCircle} />
-              </Button>
-            </div>
-            <label class="input input-sm input-bordered flex w-full items-center gap-2">
-              <Icon size={4} icon={Magnifier} />
-              <input
-                bind:this={searchInput}
-                bind:value={term}
-                class="min-w-0 grow"
-                type="text"
-                placeholder="Search this space..."
-                oninput={onInput} />
-            </label>
-            <div class="max-h-[65vh] overflow-y-auto">
-              {#if !term}
-                <p class="text-sm opacity-70">Search for content across this space.</p>
-              {:else if loading}
-                <p class="text-sm opacity-70">Searching...</p>
-              {:else if resultsByAge.size === 0}
-                <p class="text-sm opacity-70">No results found.</p>
-              {:else}
-                <div class="col-2">
-                  {#each resultsByAge as [key, events] (key)}
+    <button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={openSearch}>
+      <Icon size={4} icon={Magnifier} />
+    </button>
+    {#if showSearch}
+      <button class="fixed inset-0 z-feature" aria-label="Close search" onclick={closeSearch}
+      ></button>
+      <div class="fixed top-sai right-sai left-content z-feature p-2">
+        <div
+          class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
+          transition:fly={{y: -40, duration: 150}}>
+          <div class="flex justify-between">
+            <strong>Search</strong>
+            <Button onclick={clearSearch}>
+              <Icon icon={CloseCircle} />
+            </Button>
+          </div>
+          <label class="input input-sm input-bordered flex w-full items-center gap-2">
+            <Icon size={4} icon={Magnifier} />
+            <input
+              bind:this={searchInput}
+              bind:value={term}
+              class="min-w-0 grow"
+              type="text"
+              placeholder="Search this space..."
+              oninput={onInput} />
+          </label>
+          <div class="max-h-[65vh] overflow-y-auto">
+            {#if !term}
+              <p class="text-sm opacity-70">Search for content across this space.</p>
+            {:else if loading}
+              <p class="text-sm opacity-70">Searching...</p>
+            {:else if resultsByAge.size === 0}
+              <p class="text-sm opacity-70">No results found.</p>
+            {:else}
+              <div class="col-2">
+                {#each resultsByAge as [key, events] (key)}
+                  <div class="col-2">
+                    <p class="text-xs uppercase tracking-wide opacity-60">
+                      {#if key === "day"}
+                        Last 24 Hours
+                      {:else if key === "week"}
+                        Last 7 Days
+                      {:else}
+                        Older
+                      {/if}
+                    </p>
                     <div class="col-2">
-                      <p class="text-xs uppercase tracking-wide opacity-60">
-                        {#if key === "day"}
-                          Last 24 Hours
-                        {:else if key === "week"}
-                          Last 7 Days
-                        {:else}
-                          Older
-                        {/if}
-                      </p>
-                      <div class="col-2">
-                        {#each events as event (event.id)}
-                          <button
-                            class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
-                            onclick={() => onResultClick(event)}>
-                            <p class="line-clamp-2 text-sm">
-                              {event.content.trim() ||
-                                getTagValue("title", event.tags) ||
-                                "(No text content)"}
-                            </p>
-                            <div class="row-2 text-xs opacity-70">
-                              <span>{getAgeLabel(event.created_at)}</span>
-                              <span>{formatTimestampAsDate(event.created_at)}</span>
-                            </div>
-                          </button>
-                        {/each}
-                      </div>
+                      {#each events as event (event.id)}
+                        <button
+                          class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
+                          onclick={() => onResultClick(event)}>
+                          <p class="line-clamp-2 text-sm">
+                            {event.content.trim() ||
+                              getTagValue("title", event.tags) ||
+                              "(No text content)"}
+                          </p>
+                          <div class="row-2 text-xs opacity-70">
+                            <span>{getAgeLabel(event.created_at)}</span>
+                            <span>{formatTimestampAsDate(event.created_at)}</span>
+                          </div>
+                        </button>
+                      {/each}
                     </div>
-                  {/each}
-                </div>
-              {/if}
-            </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
           </div>
         </div>
-      {/if}
-    </div>
+      </div>
+    {/if}
   {/snippet}
 </SpaceBar>
 
-<div bind:this={element}>
-  <PageContent class="flex flex-col gap-2 p-2 pt-4">
-    {#if $recentActivity.length === 0}
-      <p class="flex flex-col items-center py-20 text-center">No recent activity found!</p>
-    {:else}
-      {#each $recentActivity.slice(0, limit) as { type, event, count = 0 } (event.id)}
-        {#if type === "message"}
-          <RecentConversation {url} {event} {count} />
-        {:else if event.kind === THREAD}
-          <ThreadItem {url} {event} />
-        {:else if event.kind === CLASSIFIED}
-          <ClassifiedItem {url} {event} />
-        {:else if event.kind === ZAP_GOAL}
-          <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}
-      {/each}
-    {/if}
-  </PageContent>
-</div>
+<PageContent class="flex flex-col gap-2 p-2 pt-4" bind:element>
+  {#if $recentActivity.length === 0}
+    <p class="flex flex-col items-center py-20 text-center">No recent activity found!</p>
+  {:else}
+    {#each $recentActivity.slice(0, limit) as { type, event, count = 0 } (event.id)}
+      {#if type === "message"}
+        <RecentConversation {url} {event} {count} />
+      {:else if event.kind === THREAD}
+        <ThreadItem {url} {event} />
+      {:else if event.kind === CLASSIFIED}
+        <ClassifiedItem {url} {event} />
+      {:else if event.kind === ZAP_GOAL}
+        <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}
+    {/each}
+  {/if}
+</PageContent>
diff --git a/src/routes/spaces/create/+page.svelte b/src/routes/spaces/create/+page.svelte
index 6bab77dc..774688e5 100644
--- a/src/routes/spaces/create/+page.svelte
+++ b/src/routes/spaces/create/+page.svelte
@@ -8,8 +8,8 @@
   import PageContent from "@lib/components/PageContent.svelte"
 </script>
 
-<Page class="cw-full">
-  <PageContent class="cw-full flex flex-col items-center gap-2 p-2 pt-4">
+<Page>
+  <PageContent class="flex flex-col items-center gap-2 p-2 pt-4">
     <PageHeader>
       {#snippet title()}
         <div>Create your own Space</div>

From fd6cc84be6710592a554f55eb8fb51880668b1c4 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Sat, 4 Apr 2026 09:02:52 -0700
Subject: [PATCH 5/7] Simplify chat compose layout

---
 src/app.css                                 |  8 ++-----
 src/app/components/Chat.svelte              | 20 ++---------------
 src/app/components/PrimaryNav.svelte        |  4 ++--
 src/routes/spaces/[relay]/[h]/+page.svelte  | 23 +++----------------
 src/routes/spaces/[relay]/chat/+page.svelte | 25 ++++-----------------
 5 files changed, 13 insertions(+), 67 deletions(-)

diff --git a/src/app.css b/src/app.css
index 27d4e197..e283ad25 100644
--- a/src/app.css
+++ b/src/app.css
@@ -403,14 +403,10 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */
 
 .chat__compose {
-  @apply left-content bottom-sai right-sai fixed z-compose;
+  @apply relative z-compose mb-14 flex-grow md:mb-0;
 }
 
-.chat__compose-zone {
-  @apply left-content bottom-sai right-sai fixed z-compose;
-}
-
-.chat__compose-zone .chat__compose-inner {
+.chat__compose .chat__compose-inner {
   @apply min-w-0;
 }
 
diff --git a/src/app/components/Chat.svelte b/src/app/components/Chat.svelte
index 26e84db8..6cc312b2 100644
--- a/src/app/components/Chat.svelte
+++ b/src/app/components/Chat.svelte
@@ -196,8 +196,6 @@
   let compose: ChatCompose | undefined = $state()
   let parent: TrustedEvent | undefined = $state()
   let eventToEdit: TrustedEvent | undefined = $state()
-  let chatCompose: HTMLElement | undefined = $state()
-  let dynamicPadding: HTMLElement | undefined = $state()
 
   const elements = $derived.by(() => {
     const elements = []
@@ -233,20 +231,6 @@
     for (const pubkey of others) {
       loadMessagingRelayList(pubkey)
     }
-
-    const observer = new ResizeObserver(() => {
-      if (dynamicPadding && chatCompose) {
-        dynamicPadding.style.minHeight = `${chatCompose.offsetHeight}px`
-      }
-    })
-
-    observer.observe(chatCompose!)
-    observer.observe(dynamicPadding!)
-
-    return () => {
-      observer.unobserve(chatCompose!)
-      observer.unobserve(dynamicPadding!)
-    }
   })
 
   setTimeout(() => {
@@ -294,7 +278,6 @@
 </PageBar>
 
 <PageContent class="flex flex-col-reverse gap-2 pt-4">
-  <div bind:this={dynamicPadding}></div>
   {#if missingRelayLists.length > 0}
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">
@@ -335,9 +318,10 @@
     </Spinner>
     {@render info?.()}
   </p>
+  <div class="h-screen"></div>
 </PageContent>
 
-<div class="chat__compose bg-base-200" bind:this={chatCompose}>
+<div class="chat__compose bg-base-200">
   <div>
     {#if parent}
       <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 80003124..32638e94 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -68,10 +68,10 @@
 
 <!-- a little extra something for ios -->
 <div
-  class="bottom-nav hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
+  class="hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
 </div>
 <div
-  class="bottom-nav hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
+  class="hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-6">
       <PrimaryNavItem title="Search" href="/people">
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index fc9b7b16..af74cbe7 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -232,8 +232,6 @@
   let share = $state(popKey<TrustedEvent | undefined>("share"))
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
-  let chatCompose: HTMLElement | undefined = $state()
-  let dynamicPadding: HTMLElement | undefined = $state()
   let newMessagesSeen = false
   let showFixedNewMessages = $state(false)
   let showScrollButton = $state(false)
@@ -344,22 +342,9 @@
   const onEditPrevious = () => ifLet($events.toReversed().find(canEditEvent), onEditEvent)
 
   onMount(() => {
-    const observer = new ResizeObserver(() => {
-      if (dynamicPadding && chatCompose) {
-        dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
-      }
-    })
-
-    observer.observe(chatCompose!)
-    observer.observe(dynamicPadding!)
-
     start()
 
-    return () => {
-      cleanup()
-      observer.unobserve(chatCompose!)
-      observer.unobserve(dynamicPadding!)
-    }
+    return cleanup
   })
 </script>
 
@@ -377,7 +362,6 @@
 </SpaceBar>
 
 <PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
-  <div bind:this={dynamicPadding}></div>
   {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
     <div class="py-20">
       <div class="card2 col-8 m-auto max-w-md items-center text-center">
@@ -444,11 +428,10 @@
       {/if}
     </p>
   {/if}
+  <div class="h-screen"></div>
 </PageContent>
 
-<div
-  class="chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0"
-  bind:this={chatCompose}>
+<div class="chat__compose flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0">
   <div class="chat__compose-inner min-w-0 flex-1">
     {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
       <!-- pass -->
diff --git a/src/routes/spaces/[relay]/chat/+page.svelte b/src/routes/spaces/[relay]/chat/+page.svelte
index 6e309c13..3ae0b338 100644
--- a/src/routes/spaces/[relay]/chat/+page.svelte
+++ b/src/routes/spaces/[relay]/chat/+page.svelte
@@ -163,8 +163,6 @@
   let share = $state(popKey<TrustedEvent | undefined>("share"))
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
-  let chatCompose: HTMLElement | undefined = $state()
-  let dynamicPadding: HTMLElement | undefined = $state()
   let newMessagesSeen = false
   let showFixedNewMessages = $state(false)
   let showScrollButton = $state(false)
@@ -275,24 +273,9 @@
   const onEditPrevious = () => ifLet($events.toReversed().find(canEditEvent), onEditEvent)
 
   onMount(() => {
-    const controller = new AbortController()
-
-    const observer = new ResizeObserver(() => {
-      if (dynamicPadding && chatCompose) {
-        dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
-      }
-    })
-
-    observer.observe(chatCompose!)
-    observer.observe(dynamicPadding!)
     start()
 
-    return () => {
-      cleanup()
-      controller.abort()
-      observer.unobserve(chatCompose!)
-      observer.unobserve(dynamicPadding!)
-    }
+    return cleanup
   })
 </script>
 
@@ -306,8 +289,7 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
-  <div bind:this={dynamicPadding}></div>
+<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4 mb-14 md:mb-0">
   {#if loadingForward}
     <p class="py-20 flex justify-center">
       <Spinner loading={loadingForward}>Looking for messages...</Spinner>
@@ -351,9 +333,10 @@
       <Spinner>End of message history</Spinner>
     {/if}
   </p>
+  <div class="h-screen"></div>
 </PageContent>
 
-<div class="chat__compose bg-base-200" bind:this={chatCompose}>
+<div class="chat__compose bg-base-200">
   <div>
     {#if parent}
       <RoomComposeParent event={parent} clear={clearParent} verb="Replying to" />

From 18cb245599ace3be9d587779d688a19f64f4f520 Mon Sep 17 00:00:00 2001
From: junaiddshaukat <junaiddshaukat@noreply.coracle.social>
Date: Sat, 4 Apr 2026 16:28:11 +0000
Subject: [PATCH 6/7] Remove room/space leave indications (#149)

Co-authored-by: junaiddshaukat <junaiddshaukat@noreply.coracle.social>
Co-committed-by: junaiddshaukat <junaiddshaukat@noreply.coracle.social>
---
 src/app/components/RoomItemRemoveMember.svelte | 18 ------------------
 src/routes/spaces/[relay]/[h]/+page.svelte     | 15 +++------------
 src/routes/spaces/[relay]/chat/+page.svelte    | 10 ++++------
 3 files changed, 7 insertions(+), 36 deletions(-)
 delete mode 100644 src/app/components/RoomItemRemoveMember.svelte

diff --git a/src/app/components/RoomItemRemoveMember.svelte b/src/app/components/RoomItemRemoveMember.svelte
deleted file mode 100644
index bf2c3b30..00000000
--- a/src/app/components/RoomItemRemoveMember.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-  import type {TrustedEvent} from "@welshman/util"
-  import {getPubkeyTagValues} from "@welshman/util"
-  import ProfileLink from "@app/components/ProfileLink.svelte"
-
-  type Props = {
-    url: string
-    event: TrustedEvent
-  }
-
-  const {url, event}: Props = $props()
-</script>
-
-{#each getPubkeyTagValues(event.tags) as pubkey}
-  <div class="py-1 text-center text-xs opacity-75">
-    <ProfileLink unstyled class="text-primary" {url} {pubkey} /> left the room
-  </div>
-{/each}
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index af74cbe7..fca7bd03 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -8,13 +8,7 @@
   import {now, ifLet, int, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
   import type {MakeNonOptional} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {
-    makeEvent,
-    makeRoomMeta,
-    MESSAGE,
-    ROOM_ADD_MEMBER,
-    ROOM_REMOVE_MEMBER,
-  } from "@welshman/util"
+  import {makeEvent, makeRoomMeta, MESSAGE, ROOM_ADD_MEMBER} from "@welshman/util"
   import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
@@ -36,7 +30,6 @@
   import ThunkToast from "@app/components/ThunkToast.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
-  import RoomItemRemoveMember from "@src/app/components/RoomItemRemoveMember.svelte"
   import {canEnforceNip70, prependParent, publishDelete} from "@app/core/commands"
   import {
     decodeRelay,
@@ -286,7 +279,7 @@
           showPubkey:
             previousPubkey !== event.pubkey ||
             event.created_at - previousCreatedAt > int(3, MINUTE) ||
-            [ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER].includes(previousKind!),
+            previousKind === ROOM_ADD_MEMBER,
         })
 
         previousDate = date
@@ -311,7 +304,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [...MESSAGE_KINDS, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER], "#h": [h]}],
+      filters: [{kinds: [...MESSAGE_KINDS, ROOM_ADD_MEMBER], "#h": [h]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -405,8 +398,6 @@
         {@const event = $state.snapshot(value as TrustedEvent)}
         {#if event.kind === ROOM_ADD_MEMBER}
           <RoomItemAddMember {url} {event} />
-        {:else if event.kind === ROOM_REMOVE_MEMBER}
-          <RoomItemRemoveMember {url} {event} />
         {:else}
           <div in:slide class="cv" class:-mt-1={!showPubkey}>
             <RoomItem
diff --git a/src/routes/spaces/[relay]/chat/+page.svelte b/src/routes/spaces/[relay]/chat/+page.svelte
index 3ae0b338..8972fe44 100644
--- a/src/routes/spaces/[relay]/chat/+page.svelte
+++ b/src/routes/spaces/[relay]/chat/+page.svelte
@@ -6,7 +6,7 @@
   import {readable} from "svelte/store"
   import {now, int, ifLet, formatTimestampAsDate, MINUTE, ago} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {makeEvent, MESSAGE, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER} from "@welshman/util"
+  import {makeEvent, MESSAGE, RELAY_ADD_MEMBER} from "@welshman/util"
   import {pubkey, publishThunk} from "@welshman/app"
   import {fade, fly} from "@lib/transition"
   import ChatRound from "@assets/icons/chat-round.svg?dataurl"
@@ -21,7 +21,7 @@
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
-  import RoomItemRemoveMember from "@src/app/components/RoomItemRemoveMember.svelte"
+
   import RoomCompose from "@app/components/RoomCompose.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
@@ -217,7 +217,7 @@
           showPubkey:
             previousPubkey !== event.pubkey ||
             event.created_at - previousCreatedAt > int(3, MINUTE) ||
-            [RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER].includes(previousKind!),
+            previousKind === RELAY_ADD_MEMBER,
         })
 
         previousDate = date
@@ -242,7 +242,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [...MESSAGE_KINDS, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]}],
+      filters: [{kinds: [...MESSAGE_KINDS, RELAY_ADD_MEMBER]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -311,8 +311,6 @@
       {@const event = $state.snapshot(value as TrustedEvent)}
       {#if event.kind === RELAY_ADD_MEMBER}
         <RoomItemAddMember {url} {event} />
-      {:else if event.kind === RELAY_REMOVE_MEMBER}
-        <RoomItemRemoveMember {url} {event} />
       {:else}
         <div class:-mt-1={!showPubkey}>
           <RoomItem

From 80df16f97b862760e7b4ab9bfa30ebbb27f2111e Mon Sep 17 00:00:00 2001
From: userAdityaa <aditya.chaudhary1558@gmail.com>
Date: Sat, 4 Apr 2026 16:45:49 +0000
Subject: [PATCH 7/7] feat: redesign toast notifications for UX (#148)

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com>
Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>
---
 src/app/components/Toast.svelte | 81 ++++++++++++++++++++++++++++++---
 1 file changed, 74 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Toast.svelte b/src/app/components/Toast.svelte
index 7674bc01..7e8bd399 100644
--- a/src/app/components/Toast.svelte
+++ b/src/app/components/Toast.svelte
@@ -1,28 +1,98 @@
 <script lang="ts">
   import {parse, renderAsHtml} from "@welshman/content"
+  import Close from "@assets/icons/close.svg?dataurl"
   import {fly} from "@lib/transition"
-  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {toast, popToast} from "@app/util/toast"
 
+  let touchStartY = 0
+  let touchStartTime = 0
+  let dragY = $state(0)
+  let isSettling = $state(false)
+  let containerEl = $state<HTMLDivElement | undefined>(undefined)
+
+  $effect(() => {
+    if ($toast) {
+      dragY = 0
+      isSettling = false
+    }
+  })
+
+  $effect(() => {
+    if (!containerEl) return
+    containerEl.addEventListener("touchmove", onTouchMove, {passive: false})
+    return () => containerEl!.removeEventListener("touchmove", onTouchMove)
+  })
+
   const onActionClick = () => {
     $toast!.action!.onclick()
     popToast($toast!.id)
   }
+
+  const onClose = () => popToast($toast!.id)
+
+  const onTouchStart = (e: TouchEvent) => {
+    touchStartY = e.touches[0].clientY
+    touchStartTime = Date.now()
+    dragY = 0
+    isSettling = false
+  }
+
+  const onTouchMove = (e: TouchEvent) => {
+    const delta = e.touches[0].clientY - touchStartY
+    if (delta < 0) {
+      e.preventDefault()
+      isSettling = false
+      dragY = delta
+    } else {
+      dragY = 0
+    }
+  }
+
+  const onTouchEnd = (e: TouchEvent) => {
+    const delta = e.changedTouches[0].clientY - touchStartY
+    const duration = Date.now() - touchStartTime
+    const isQuickFlick = duration < 400 && delta < 0
+    const isSlowDismiss = delta < -40
+
+    if (isQuickFlick || isSlowDismiss) {
+      dragY = 0
+      popToast($toast!.id)
+    } else {
+      isSettling = true
+      dragY = 0
+      setTimeout(() => {
+        isSettling = false
+      }, 200)
+    }
+  }
 </script>
 
 {#if $toast}
   {@const theme = $toast.theme || "info"}
-  <div transition:fly class="bottom-sai right-sai toast z-toast">
+  <div
+    bind:this={containerEl}
+    transition:fly={{y: -20}}
+    class="fixed z-toast top-[calc(var(--sait)+0.5rem)] left-[calc(var(--sail)+0.5rem)] right-[calc(var(--sair)+0.5rem)] flex flex-col gap-2 md:right-4 md:bottom-4 md:top-auto md:left-auto md:w-80"
+    style={dragY !== 0 || isSettling
+      ? `transform: translateY(${dragY}px)${isSettling ? "; transition: transform 200ms ease-out" : ""}`
+      : ""}
+    ontouchstart={onTouchStart}
+    ontouchend={onTouchEnd}>
     {#key $toast.id}
       <div
         role="alert"
-        class="alert flex justify-center whitespace-normal text-left"
+        class="alert relative flex justify-center whitespace-normal text-left"
         class:bg-base-100={theme === "info"}
         class:text-base-content={theme === "info"}
         class:alert-error={theme === "error"}>
-        <p class:welshman-content-error={theme === "error"}>
+        <Button
+          class="absolute -top-2 -right-2 btn btn-circle btn-neutral btn-xs hidden md:inline-flex"
+          onclick={onClose}>
+          <Icon icon={Close} size={3} />
+        </Button>
+        <p class="md:pr-6" class:welshman-content-error={theme === "error"}>
           {#if $toast.message}
             {@html renderAsHtml(parse({content: $toast.message}))}
             {#if $toast.action}
@@ -35,9 +105,6 @@
             <Component toast={$toast} {...props} />
           {/if}
         </p>
-        <Button class="flex items-center opacity-75" onclick={() => popToast($toast.id)}>
-          <Icon icon={CloseCircle} />
-        </Button>
       </div>
     {/key}
   </div>