chore: redesign threads as a linear phpBB-style forum view

.env

@@ -1,5 +1,6 @@
 VITE_DEFAULT_PUBKEYS=06639a386c9c1014217622ccbcf40908c4f1a0c33e23f8d6d68f4abf655f8f71,266815e0c9210dfa324c6cba3573b14bee49da4209a9456f9484e5106cd408a5,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24,55f04590674f3648f4cdc9dc8ce32da2a282074cd0b020596ee033d12d385185,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9,6389be6491e7b693e9f368ece88fcd145f07c068d2c1bbae4247b9b5ef439d32,63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed,6e75f7972397ca3295e0f4ca0fbc6eb9cc79be85bafdd56bd378220ca8eee74e,76c71aae3a491f1d9eec47cba17e229cda4113a0bbb6e6ae1776d7643e29cafa,7fa56f5d6962ab1e3cd424e758c3002b8665f7b0d8dcee9fe9e288d7751ac194,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3
 VITE_DEFAULT_BLOSSOM_SERVERS=https://blossom.primal.net/
+VITE_DEFAULT_SPACES=https://chat.flotilla.social/
 VITE_POMADE_SIGNERS=https://pomade.coracle.social,https://pomade.fiatjaf.com,https://pomade.nostrver.se,https://pomade.scuttle.works
 VITE_PLATFORM_URL=https://app.flotilla.social
 VITE_PLATFORM_TERMS=https://flotilla.social/terms

README.md

@@ -8,13 +8,34 @@ If you would like to be interoperable with Flotilla, please check out this guide
 
 You can also optionally create an `.env.local` file and populate it with the following environment variables (see `.env.template` for examples):
 
-- `VITE_DEFAULT_PUBKEYS` - A comma-separated list of hex pubkeys for bootstrapping web of trust
+**Platform branding**
 - `VITE_PLATFORM_URL` - The url where the app will be hosted
 - `VITE_PLATFORM_NAME` - The name of the app
 - `VITE_PLATFORM_LOGO` - A logo url for the app. Can be a local path or https link. Must be a PNG file.
-- `VITE_PLATFORM_RELAYS` - A list of comma-separated relay urls that will make flotilla operate in "platform mode". Disables all space browse/add/select functionality and makes the first platform relay the home page.
 - `VITE_PLATFORM_ACCENT` - A hex color for the app's accent color
 - `VITE_PLATFORM_DESCRIPTION` - A description of the app
+- `VITE_PLATFORM_TERMS` - URL to your terms of service page
+- `VITE_PLATFORM_PRIVACY` - URL to your privacy policy page
+
+**Platform mode**
+- `VITE_PLATFORM_RELAYS` - A comma-separated list of relay urls that will make flotilla operate in "platform mode". Disables all space browse/add/select functionality and makes the first platform relay the home page.
+
+**Defaults**
+- `VITE_DEFAULT_PUBKEYS` - A comma-separated list of hex pubkeys for bootstrapping web of trust
+- `VITE_DEFAULT_SPACES` - A comma-separated list of relay urls that new users will be automatically joined to on signup
+- `VITE_DEFAULT_RELAYS` - A comma-separated list of relay urls used as default outbox/inbox relays
+- `VITE_DEFAULT_MESSAGING_RELAYS` - A comma-separated list of relay urls used for encrypted direct messages
+- `VITE_DEFAULT_BLOSSOM_SERVERS` - A comma-separated list of blossom server urls used for file uploads
+
+**Infrastructure**
+- `VITE_INDEXER_RELAYS` - A comma-separated list of relay urls used for user profile/key lookup
+- `VITE_SIGNER_RELAYS` - A comma-separated list of relay urls used for NIP-55 remote signers
+- `VITE_BLOCKED_RELAYS` - A comma-separated list of relay urls that will be blocked
+- `VITE_PUSH_SERVER` - URL of the push notification server
+- `VITE_PUSH_BRIDGE` - WebSocket URL of the push notification relay bridge
+- `VITE_VAPID_PUBLIC_KEY` - VAPID public key for web push notifications
+- `VITE_POMADE_SIGNERS` - A comma-separated list of Pomade signer server URLs (3+ required to enable email signup)
+- `VITE_THUMBNAIL_URL` - URL of the image thumbnail service
 
 These values **won't** be used for a built version. Instead, env variables should be provided to `build.sh` directly or to the built container.
 

src/app/components/SignUp.svelte

@@ -22,8 +22,10 @@
     INDEXER_RELAYS,
     DEFAULT_RELAYS,
     DEFAULT_MESSAGING_RELAYS,
+    DEFAULT_SPACES,
   } from "@app/env"
   import {setChecked} from "@app/notifications"
+  import {setSpaces} from "@app/groups"
   import {loginWithPomade} from "@app/pomade"
   import {pushModal, clearModals} from "@app/modal"
 
@@ -52,6 +54,9 @@
     // Save the user's profile
     initProfile(getKey<Profile>("signup.profile")!)
 
+    // Auto-join default spaces
+    setSpaces(DEFAULT_SPACES)
+
     // Don't show any notifications for old content
     setChecked("*")
 

src/app/components/ThreadPagination.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import cx from "classnames"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import DoubleAltArrowLeft from "@assets/icons/double-alt-arrow-left.svg?dataurl"
+  import DoubleAltArrowRight from "@assets/icons/double-alt-arrow-right.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+
+  type Props = {
+    page: number
+    pageCount: number
+    onPage: (page: number) => void
+  }
+
+  const {page, pageCount, onPage}: Props = $props()
+
+  const goFirst = () => onPage(1)
+  const goPrev = () => onPage(page - 1)
+  const goNext = () => onPage(page + 1)
+  const goLast = () => onPage(pageCount)
+
+  const pages = $derived.by(() => {
+    if (pageCount <= 7) {
+      return Array.from({length: pageCount}, (_, i) => i + 1)
+    }
+
+    const result = new Set<number>([1, pageCount, page])
+
+    if (page > 2) result.add(page - 1)
+    if (page < pageCount - 1) result.add(page + 1)
+    if (page > 3) result.add(page - 2)
+    if (page < pageCount - 2) result.add(page + 2)
+
+    return Array.from(result).sort((a, b) => a - b)
+  })
+</script>
+
+<div class="flex flex-col items-center gap-3 border-t border-base-content/10 py-4">
+  <p class="text-sm opacity-75">Page {page} of {pageCount}</p>
+  <div class="join">
+    <Button class="btn join-item btn-sm" disabled={page <= 1} onclick={goFirst}>
+      <Icon icon={DoubleAltArrowLeft} size={4} />
+    </Button>
+    <Button class="btn join-item btn-sm" disabled={page <= 1} onclick={goPrev}>
+      <Icon icon={AltArrowLeft} size={4} />
+    </Button>
+    {#each pages as p, i (p)}
+      {#if i > 0 && p - pages[i - 1] > 1}
+        <Button class="btn join-item btn-sm btn-disabled" disabled>…</Button>
+      {/if}
+      <Button
+        class={cx("btn join-item btn-sm", page === p && "btn-primary")}
+        onclick={() => onPage(p)}>
+        {p}
+      </Button>
+    {/each}
+    <Button class="btn join-item btn-sm" disabled={page >= pageCount} onclick={goNext}>
+      <Icon icon={AltArrowRight} size={4} />
+    </Button>
+    <Button class="btn join-item btn-sm" disabled={page >= pageCount} onclick={goLast}>
+      <Icon icon={DoubleAltArrowRight} size={4} />
+    </Button>
+  </div>
+</div>

src/app/components/ThreadPost.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import {page} from "$app/stores"
+  import {formatTimestamp, removeUndefined} from "@welshman/lib"
+  import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {COMMENT, getTagValue} from "@welshman/util"
+  import {deriveHandleForPubkey, deriveProfileDisplay, displayHandle} from "@welshman/app"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import SquareArrowRightUp from "@assets/icons/square-arrow-right-up.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import NoteContent from "@app/components/NoteContent.svelte"
+  import Content from "@app/components/Content.svelte"
+  import ReactionSummary from "@app/components/ReactionSummary.svelte"
+  import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
+  import EventActions from "@app/components/EventActions.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+  import {publishDelete} from "@app/deletes"
+  import {publishReaction} from "@app/reactions"
+  import {canEnforceNip70} from "@app/relays"
+  import {makeSpacePath} from "@app/routes"
+  import {pushModal} from "@app/modal"
+  import {clip} from "@app/toast"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+    number: number
+    threadPubkey: string
+    showRoom?: boolean
+    onReply: () => void
+  }
+
+  const {url, event, number, threadPubkey, showRoom, onReply}: Props = $props()
+
+  const relays = removeUndefined([url])
+  const profileDisplay = deriveProfileDisplay(event.pubkey, relays)
+  const handle = deriveHandleForPubkey(event.pubkey)
+  const isOp = event.pubkey === threadPubkey
+  const h = getTagValue("h", event.tags)
+  const shouldProtect = canEnforceNip70(url)
+  const noun = event.kind === COMMENT ? "Comment" : "Thread"
+
+  const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey, url})
+
+  const copyPermalink = () => {
+    const path = makeSpacePath(url, "threads", $page.params.id!)
+    const link = `${window.location.origin}${path}#post-${number}`
+
+    clip(link)
+  }
+
+  const deleteReaction = async (event: TrustedEvent) =>
+    publishDelete({relays: [url], event, protect: await shouldProtect})
+
+  const createReaction = async (template: EventContent) =>
+    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
+</script>
+
+<article
+  id="post-{number}"
+  data-event={event.id}
+  class="border-b border-base-content/10 bg-base-100">
+  <div class="flex flex-col gap-3 p-4 md:flex-row md:gap-6">
+    <div
+      class="flex shrink-0 flex-row items-center gap-3 md:w-36 md:flex-col md:items-center md:text-center">
+      <Button onclick={openProfile}>
+        <ProfileCircle pubkey={event.pubkey} {url} size={12} class="md:size-16" />
+      </Button>
+      <div class="flex min-w-0 flex-col gap-1 md:items-center">
+        <Button onclick={openProfile} class="text-bold ellipsize text-sm md:text-base">
+          {$profileDisplay}
+        </Button>
+        {#if $handle}
+          <span class="ellipsize text-xs opacity-75">{displayHandle($handle)}</span>
+        {/if}
+        {#if isOp}
+          <span class="badge badge-primary badge-sm">OP</span>
+        {/if}
+        {#if showRoom && h}
+          <Link
+            href={makeSpacePath(url, h)}
+            class="btn btn-neutral btn-xs mt-1 hidden rounded-full md:inline-flex">
+            #<RoomName {url} {h} />
+          </Link>
+        {/if}
+      </div>
+    </div>
+    <div class="flex min-w-0 grow flex-col gap-3">
+      <div class="flex flex-wrap items-center justify-between gap-2 text-sm">
+        <span class="opacity-75">{formatTimestamp(event.created_at)}</span>
+        <Button class="btn btn-ghost btn-xs gap-1" onclick={copyPermalink}>
+          #{number}
+          <Icon icon={SquareArrowRightUp} size={3} />
+        </Button>
+      </div>
+      {#if showRoom && h}
+        <Link
+          href={makeSpacePath(url, h)}
+          class="btn btn-neutral btn-xs w-fit rounded-full md:hidden">
+          Posted in #<RoomName {url} {h} />
+        </Link>
+      {/if}
+      <div class="min-w-0">
+        {#if event.kind === COMMENT}
+          <Content showEntire {event} {url} />
+        {:else}
+          <NoteContent showEntire {event} {url} />
+        {/if}
+      </div>
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <Button class="btn btn-neutral btn-xs gap-1" onclick={onReply}>
+          <Icon icon={Reply} size={4} />
+          Reply
+        </Button>
+        <div class="flex flex-wrap items-center justify-end gap-2">
+          <ReactionSummary
+            {url}
+            {event}
+            {deleteReaction}
+            {createReaction}
+            reactionClass="tooltip-left" />
+          <ThunkStatusOrDeleted {event} />
+          <EventActions {url} {event} {noun} />
+        </div>
+      </div>
+    </div>
+  </div>
+</article>

src/app/env.ts

@@ -46,6 +46,8 @@ export const POMADE_SIGNERS = fromCsv(import.meta.env.VITE_POMADE_SIGNERS)
 
 export const DEFAULT_BLOSSOM_SERVERS = fromCsv(import.meta.env.VITE_DEFAULT_BLOSSOM_SERVERS)
 
+export const DEFAULT_SPACES = fromCsv(import.meta.env.VITE_DEFAULT_SPACES).map(normalizeRelayUrl)
+
 export const DEFAULT_PUBKEYS = import.meta.env.VITE_DEFAULT_PUBKEYS
 
 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"

src/app/groups.ts

@@ -311,7 +311,7 @@ export const removeSpace = async (url: string) => {
   return publishThunk({event, relays})
 }
 
-export const setSpaceOrder = async (urls: string[]) => {
+export const setSpaces = async (urls: string[]) => {
   const list = get(userGroupList) || makeList({kind: ROOMS})
   const orderedUrls = uniq(urls.map(normalizeRelayUrl))
   const relayTags = list.publicTags.filter(t => t[0] === "r")

src/app/routes.ts

@@ -6,7 +6,7 @@ import {page} from "$app/stores"
 import {nthEq} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {getAddress} from "@welshman/util"
-import {tracker, userMessagingRelayList} from "@welshman/app"
+import {tracker, userMessagingRelayList, getRelay} from "@welshman/app"
 import {identity} from "@welshman/lib"
 import {
   getTagValue,
@@ -21,7 +21,7 @@ import {
 } from "@welshman/util"
 import {makeChatId} from "@app/chats"
 import {entityLink} from "@app/env"
-import {encodeRelay} from "@app/relays"
+import {encodeRelay, hasNip29} from "@app/relays"
 import {DM_KINDS} from "@app/content"
 import {ROOM} from "@app/groups"
 import {pushModal} from "@app/modal"
@@ -84,6 +84,8 @@ export const goToSpace = async (url: string) => {
 
   if (prevPath && prevPath !== makeSpacePath(url)) {
     goto(prevPath, {replaceState: true})
+  } else if (!hasNip29(getRelay(url))) {
+    goto(makeSpaceChatPath(url), {replaceState: true})
   } else if (window.matchMedia(`(min-width: ${theme.screens.md})`).matches) {
     goto(makeSpacePath(url, "recent"), {replaceState: true})
   } else {

src/routes/spaces/+page.svelte

@@ -26,7 +26,7 @@
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
-  import {userSpaceUrls, loadUserGroupList, groupListPubkeysByUrl, setSpaceOrder} from "@app/groups"
+  import {userSpaceUrls, loadUserGroupList, groupListPubkeysByUrl, setSpaces} from "@app/groups"
   import {PLATFORM_RELAYS, DEFAULT_RELAYS} from "@app/env"
   import {bootstrapPubkeys} from "@app/social"
   import {parseInviteLink} from "@app/invites"
@@ -128,7 +128,7 @@
     lastDragTarget = undefined
 
     if (dragStartOrder && !isSameOrder(dragStartOrder, orderedSpaceUrls)) {
-      void setSpaceOrder(orderedSpaceUrls).catch(console.error)
+      void setSpaces(orderedSpaceUrls).catch(console.error)
     }
 
     dragStartOrder = undefined

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

@@ -16,7 +16,9 @@
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
   import {decodeRelay} from "@app/relays"
+  import {roomsByUrl} from "@app/groups"
   import {makeCommentFilter} from "@app/content"
   import {makeFeed} from "@app/feeds"
   import {pushModal} from "@app/modal"
@@ -44,6 +46,32 @@
     return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), goals)
   })
 
+  const boards = $derived.by(() => {
+    const byRoom = new Map<string, TrustedEvent[]>()
+
+    for (const event of items) {
+      const h = getTagValue("h", event.tags) || ""
+      const roomEvents = byRoom.get(h) || []
+
+      roomEvents.push(event)
+      byRoom.set(h, roomEvents)
+    }
+
+    const roomOrder = new Map(($roomsByUrl.get(url) || []).map((room, index) => [room.h, index]))
+
+    return Array.from(byRoom.entries()).sort(([a], [b]) => {
+      if (!a) return 1
+      if (!b) return -1
+
+      const aOrder = roomOrder.get(a) ?? Number.MAX_SAFE_INTEGER
+      const bOrder = roomOrder.get(b) ?? Number.MAX_SAFE_INTEGER
+
+      if (aOrder !== bOrder) return aOrder - bOrder
+
+      return a.localeCompare(b)
+    })
+  })
+
   onMount(() => {
     const feed = makeFeed({
       url,
@@ -77,11 +105,22 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element class="flex flex-col gap-2 p-2">
-  {#each items as event (event.id)}
-    <div in:fly>
-      <ThreadItem {url} event={$state.snapshot(event)} />
-    </div>
+<PageContent bind:element class="flex flex-col gap-4 p-2">
+  {#each boards as [h, threads] (h || "general")}
+    <section class="flex flex-col gap-2">
+      <h2 class="text-sm font-bold uppercase tracking-wide opacity-60">
+        {#if h}
+          #<RoomName {url} {h} />
+        {:else}
+          General
+        {/if}
+      </h2>
+      {#each threads as event (event.id)}
+        <div in:fly>
+          <ThreadItem {url} event={$state.snapshot(event)} />
+        </div>
+      {/each}
+    </section>
   {/each}
   <p class="flex h-10 items-center justify-center py-20">
     <Spinner {loading}>

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

@@ -1,26 +1,30 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
   import {sleep} from "@welshman/lib"
   import type {MakeNonOptional} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
   import {COMMENT, getTagValue} 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 Reply from "@assets/icons/reply-2.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 Link from "@lib/components/Link.svelte"
   import SpaceBar from "@app/components/SpaceBar.svelte"
-  import NoteContent from "@app/components/NoteContent.svelte"
-  import NoteCard from "@app/components/NoteCard.svelte"
-  import ThreadActions from "@app/components/ThreadActions.svelte"
-  import CommentActions from "@app/components/CommentActions.svelte"
+  import ThreadPost from "@app/components/ThreadPost.svelte"
+  import ThreadPagination from "@app/components/ThreadPagination.svelte"
   import EventReply from "@app/components/EventReply.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
   import {deriveEvent} from "@app/repository"
   import {decodeRelay} from "@app/relays"
+  import {makeSpacePath} from "@app/routes"
+
+  const POSTS_PER_PAGE = 20
 
   const {relay, id} = $page.params as MakeNonOptional<typeof $page.params>
   const url = decodeRelay(relay)
@@ -30,26 +34,91 @@
 
   const back = () => history.back()
 
-  const openReply = () => {
+  const posts = $derived.by(() => {
+    if (!$event) return []
+
+    return [$event, ...$replies]
+  })
+
+  const replyCount = $derived(Math.max(0, posts.length - 1))
+  const h = $derived(getTagValue("h", $event?.tags || []))
+
+  const pageCount = $derived(Math.max(1, Math.ceil(posts.length / POSTS_PER_PAGE)))
+
+  const currentPage = $derived.by(() => {
+    const raw = parseInt($page.url.searchParams.get("page") || "1")
+
+    if (Number.isNaN(raw) || raw < 1) return 1
+    if (raw > pageCount) return pageCount
+
+    return raw
+  })
+
+  const pagePosts = $derived(
+    posts.slice((currentPage - 1) * POSTS_PER_PAGE, currentPage * POSTS_PER_PAGE),
+  )
+
+  const setPage = (nextPage: number) => {
+    const params = new URLSearchParams($page.url.searchParams)
+
+    if (nextPage <= 1) {
+      params.delete("page")
+    } else {
+      params.set("page", String(nextPage))
+    }
+
+    const search = params.toString()
+
+    goto(`${$page.url.pathname}${search ? `?${search}` : ""}`, {
+      replaceState: true,
+      keepFocus: true,
+      noScroll: true,
+    })
+  }
+
+  const openReply = (post: TrustedEvent) => {
+    replyTo = post
     showReply = true
   }
 
   const closeReply = () => {
     showReply = false
+    replyTo = undefined
   }
 
-  const expand = () => {
-    showAll = true
+  const openThreadReply = () => {
+    if ($event) {
+      openReply($event)
+    }
+  }
+
+  const scrollToPost = (hash: string) => {
+    const element = document.getElementById(hash)
+
+    if (element) {
+      element.scrollIntoView({behavior: "smooth", block: "start"})
+    }
   }
 
-  let showAll = $state(false)
   let showReply = $state(false)
+  let replyTo: TrustedEvent | undefined = $state()
 
   onMount(() => {
     const controller = new AbortController()
 
     request({relays: [url], filters, signal: controller.signal})
 
+    const hash = window.location.hash.replace(/^#/, "")
+
+    if (hash.startsWith("post-")) {
+      const postNumber = parseInt(hash.replace("post-", ""))
+
+      if (!Number.isNaN(postNumber) && postNumber > 0) {
+        setPage(Math.ceil(postNumber / POSTS_PER_PAGE))
+        setTimeout(() => scrollToPost(hash), 100)
+      }
+    }
+
     return () => {
       controller.abort()
     }
@@ -58,41 +127,41 @@
 
 <SpaceBar {back}>
   {#snippet title()}
-    <h1 class="text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
+    <div class="flex min-w-0 flex-col gap-0.5">
+      <h1 class="ellipsize text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
+      <p class="text-xs opacity-75">
+        {replyCount}
+        {replyCount === 1 ? "reply" : "replies"}
+        {#if h}
+          · <Link href={makeSpacePath(url, h)} class="link">#<RoomName {url} {h} /></Link>
+        {/if}
+      </p>
+    </div>
   {/snippet}
 </SpaceBar>
 
-<PageContent class="flex flex-col gap-2 p-2">
+<PageContent class="flex flex-col">
   {#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">
-          <NoteContent showEntire event={$event} {url} />
-          <ThreadActions showRoom event={$event} {url} />
-        </div>
-      </NoteCard>
-      {#if !showAll && $replies.length > 4}
-        <div class="flex justify-center">
-          <Button class="btn btn-link" onclick={expand}>
-            <Icon icon={SortVertical} />
-            Show all {$replies.length} replies
-          </Button>
-        </div>
-      {/if}
-      {#each $replies.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="threads" event={reply} {url} />
-          </div>
-        </NoteCard>
+    <div class="bg-base-100">
+      {#each pagePosts as post, i (post.id)}
+        {@const number = (currentPage - 1) * POSTS_PER_PAGE + i + 1}
+        <ThreadPost
+          {url}
+          event={post}
+          {number}
+          threadPubkey={$event.pubkey}
+          showRoom={number === 1}
+          onReply={() => openReply(post)} />
       {/each}
     </div>
-    {#if showReply}
-      <EventReply {url} event={$event} onClose={closeReply} onSubmit={closeReply} />
+    {#if pageCount > 1}
+      <ThreadPagination page={currentPage} {pageCount} onPage={setPage} />
+    {/if}
+    {#if showReply && replyTo}
+      <EventReply {url} event={replyTo} onClose={closeReply} onSubmit={closeReply} />
     {:else}
-      <div class="flex justify-end">
-        <Button class="btn btn-primary" onclick={openReply}>
+      <div class="flex justify-end p-4">
+        <Button class="btn btn-primary" onclick={openThreadReply}>
           <Icon icon={Reply} />
           Reply to thread
         </Button>