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

src/app/components/SpaceBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import type {Snippet} from "svelte"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
@@ -16,33 +17,50 @@
     leading?: Snippet
     title?: Snippet
     action?: Snippet
+    hideRelay?: boolean
     [key: string]: any
   }
 
-  const {back = () => goto(makeSpacePath(url)), leading, title, action, ...props}: Props = $props()
+  const {
+    back = () => goto(makeSpacePath(url)),
+    leading,
+    title,
+    action,
+    hideRelay = false,
+    ...props
+  }: Props = $props()
 
   const url = decodeRelay($page.params.relay!)
 </script>
 
 <PageBar {...props}>
-  <div class="flex">
-    <Button onclick={back} class="place-self-start pr-3 md:hidden">
+  <div class="flex gap-2" class:items-start={hideRelay} class:items-center={!hideRelay}>
+    <Button onclick={back} class={cx("shrink-0 md:hidden", hideRelay && "pt-0.5")}>
       <Icon icon={ArrowLeft} size={7} />
     </Button>
-    <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
-      <div class="flex flex-col">
-        <div class="flex gap-2 items-center">
-          <RelayIcon {url} size={5} class="rounded-full md:hidden" />
-          <div class="hidden md:contents">
+    <div
+      class="flex min-w-0 grow justify-between gap-4"
+      class:items-start={hideRelay}
+      class:items-center={!hideRelay}>
+      <div class="flex min-w-0 flex-col gap-0.5">
+        <div class="flex min-w-0 items-center gap-2">
+          {#if !hideRelay}
+            <RelayIcon {url} size={5} class="shrink-0 rounded-full md:hidden" />
+          {/if}
+          <div class="hidden shrink-0 md:flex md:items-center">
             {@render leading?.()}
           </div>
-          {@render title?.()}
-        </div>
-        <div class="text-xs text-primary md:hidden">
-          {displayRelayUrl(url)}
+          <div class="min-w-0">
+            {@render title?.()}
+          </div>
         </div>
+        {#if !hideRelay}
+          <div class="text-xs text-primary md:hidden">
+            {displayRelayUrl(url)}
+          </div>
+        {/if}
       </div>
-      <div class="flex gap-2 items-start">
+      <div class="flex shrink-0 items-center gap-2">
         {@render action?.()}
       </div>
     </div>

src/app/components/ThreadBoard.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import RoomName from "@app/components/RoomName.svelte"
+  import ThreadBoardItem from "@app/components/ThreadBoardItem.svelte"
+
+  type Props = {
+    url: string
+    h: string
+    threads: TrustedEvent[]
+    replyCounts: Map<string, number>
+    lastActive: Map<string, number>
+  }
+
+  const {url, h, threads, replyCounts, lastActive}: Props = $props()
+</script>
+
+<section class="overflow-hidden rounded-box border border-base-content/15 bg-base-100 shadow-sm">
+  <header
+    class="flex items-center justify-between gap-2 border-b border-base-content/15 bg-base-200/70 px-4 py-2.5">
+    <h2 class="text-sm font-bold sm:text-base">
+      {#if h}
+        #<RoomName {url} {h} />
+      {:else}
+        General
+      {/if}
+    </h2>
+    <span class="text-xs opacity-60">
+      {threads.length}
+      {threads.length === 1 ? "topic" : "topics"}
+    </span>
+  </header>
+  <div
+    class="hidden border-b border-base-content/10 bg-base-200/40 px-4 py-2 text-xs font-bold uppercase tracking-wide opacity-60 sm:grid sm:grid-cols-[1fr_8rem_5rem_8rem] sm:gap-x-4">
+    <span>Topic</span>
+    <span>Author</span>
+    <span class="text-center">Replies</span>
+    <span class="text-right">Last post</span>
+  </div>
+  {#each threads as event (event.id)}
+    <ThreadBoardItem
+      {url}
+      {event}
+      replyCount={replyCounts.get(event.id) || 0}
+      lastActive={lastActive.get(event.id) || event.created_at} />
+  {/each}
+</section>

src/app/components/ThreadBoardItem.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import {formatTimestamp} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
+  import Link from "@lib/components/Link.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
+  import {makeThreadPath} from "@app/routes"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+    replyCount: number
+    lastActive: number
+  }
+
+  const {url, event, replyCount, lastActive}: Props = $props()
+
+  const title = getTagValue("title", event.tags)
+  const path = makeThreadPath(url, event.id)
+</script>
+
+<Link
+  href={path}
+  class="grid grid-cols-[1fr_auto] gap-x-3 gap-y-1 border-b border-base-content/10 px-3 py-3 transition-colors hover:bg-base-200/50 sm:grid-cols-[1fr_8rem_5rem_8rem] sm:items-center sm:gap-x-4 sm:px-4">
+  <div class="col-span-2 min-w-0 sm:col-span-1">
+    <p class="ellipsize text-sm font-bold sm:text-base">{title || "Untitled thread"}</p>
+    <p class="ellipsize mt-0.5 text-xs opacity-60 sm:hidden">
+      by <ProfileName pubkey={event.pubkey} {url} />
+    </p>
+  </div>
+  <div class="hidden items-center gap-2 sm:flex">
+    <ProfileCircle pubkey={event.pubkey} {url} size={6} />
+    <span class="ellipsize text-sm">
+      <ProfileName pubkey={event.pubkey} {url} />
+    </span>
+  </div>
+  <p class="text-right text-xs opacity-75 sm:text-center sm:text-sm">
+    <span class="opacity-60 sm:hidden">Replies · </span>
+    {replyCount}
+  </p>
+  <p class="text-right text-xs opacity-75 sm:text-sm">
+    <span class="opacity-60 sm:hidden">Last · </span>
+    {formatTimestamp(lastActive)}
+  </p>
+</Link>

src/app/components/ThreadPagination.svelte

@@ -19,6 +19,7 @@
   const goPrev = () => onPage(page - 1)
   const goNext = () => onPage(page + 1)
   const goLast = () => onPage(pageCount)
+  const selectPage = (target: number) => onPage(target)
 
   const pages = $derived.by(() => {
     if (pageCount <= 7) {
@@ -51,7 +52,7 @@
       {/if}
       <Button
         class={cx("btn join-item btn-sm", page === p && "btn-primary")}
-        onclick={() => onPage(p)}>
+        onclick={() => selectPage(p)}>
         {p}
       </Button>
     {/each}

src/app/components/ThreadPost.svelte

@@ -1,76 +1,65 @@
 <script lang="ts">
-  import {page} from "$app/stores"
+  import cx from "classnames"
   import {formatTimestamp, removeUndefined} from "@welshman/lib"
-  import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {COMMENT, getTagValue} from "@welshman/util"
+  import type {TrustedEvent} from "@welshman/util"
+  import {COMMENT} 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 CommentActions from "@app/components/CommentActions.svelte"
+  import ThreadActions from "@app/components/ThreadActions.svelte"
   import {makeSpacePath} from "@app/routes"
   import {pushModal} from "@app/modal"
   import {clip} from "@app/toast"
 
   type Props = {
     url: string
+    threadId: string
     event: TrustedEvent
     number: number
     threadPubkey: string
-    showRoom?: boolean
-    onReply: () => void
+    even?: boolean
+    onReply: (event: TrustedEvent) => void
   }
 
-  const {url, event, number, threadPubkey, showRoom, onReply}: Props = $props()
+  const {url, threadId, event, number, threadPubkey, even = false, 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 isComment = event.kind === COMMENT
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey, url})
 
   const copyPermalink = () => {
-    const path = makeSpacePath(url, "threads", $page.params.id!)
+    const path = makeSpacePath(url, "threads", threadId)
     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})
+  const reply = () => onReply(event)
 </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">
+  class={cx("border-b border-base-content/15", even ? "bg-base-100" : "bg-base-200/25")}>
+  <div class="flex flex-col md:flex-row">
+    <aside
+      class="flex shrink-0 flex-row items-center gap-3 border-b border-base-content/10 bg-base-200/50 p-3 md:w-40 md:flex-col md:items-center md:border-b-0 md:border-r md:p-4 md:text-center">
       <Button onclick={openProfile}>
-        <ProfileCircle pubkey={event.pubkey} {url} size={12} class="md:size-16" />
+        <ProfileCircle pubkey={event.pubkey} {url} size={10} class="md:size-14" />
       </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">
+        <Button onclick={openProfile} class="text-bold ellipsize text-sm">
           {$profileDisplay}
         </Button>
         {#if $handle}
@@ -79,52 +68,35 @@
         {#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">
+    </aside>
+    <div class="flex min-w-0 grow flex-col">
+      <div
+        class="flex flex-wrap items-center justify-between gap-2 border-b border-base-content/10 bg-base-200/40 px-3 py-2 text-xs sm:px-4 sm:text-sm">
         <span class="opacity-75">{formatTimestamp(event.created_at)}</span>
-        <Button class="btn btn-ghost btn-xs gap-1" onclick={copyPermalink}>
-          #{number}
+        <Button class="btn btn-ghost btn-xs h-auto min-h-0 gap-1 px-1 py-0" onclick={copyPermalink}>
+          Post #{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}
+      <div class="px-3 py-4 sm:px-4">
+        {#if isComment}
           <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}>
+      <div
+        class="flex shrink-0 flex-col gap-2 border-t border-base-content/10 bg-base-200/20 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4">
+        <Button class="btn btn-neutral btn-xs w-fit gap-1" onclick={reply}>
           <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>
+        {#if isComment}
+          <CommentActions segment="threads" {event} {url} />
+        {:else}
+          <ThreadActions {event} {url} />
+        {/if}
       </div>
     </div>
   </div>

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

@@ -5,8 +5,7 @@
   import {page} from "$app/stores"
   import {sortBy, partition, spec, max, pushToMapKey} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {THREAD, getTagValue} from "@welshman/util"
-  import {fly} from "@lib/transition"
+  import {THREAD, COMMENT, getTagValue} from "@welshman/util"
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
   import Add from "@assets/icons/add.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -14,9 +13,8 @@
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import SpaceBar from "@app/components/SpaceBar.svelte"
-  import ThreadItem from "@app/components/ThreadItem.svelte"
+  import ThreadBoard from "@app/components/ThreadBoard.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"
@@ -33,7 +31,7 @@
 
   const items = $derived.by(() => {
     const scores = new Map<string, number[]>()
-    const [goals, comments] = partition(spec({kind: THREAD}), $events)
+    const [threads, comments] = partition(spec({kind: THREAD}), $events)
 
     for (const comment of comments) {
       const id = getTagValue("E", comment.tags)
@@ -43,12 +41,52 @@
       }
     }
 
-    return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), goals)
+    return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), threads)
+  })
+
+  const replyCounts = $derived.by(() => {
+    const counts = new Map<string, number>()
+    const [, comments] = partition(spec({kind: COMMENT}), $events)
+
+    for (const comment of comments) {
+      const id = getTagValue("E", comment.tags)
+
+      if (id) {
+        counts.set(id, (counts.get(id) || 0) + 1)
+      }
+    }
+
+    return counts
+  })
+
+  const lastActive = $derived.by(() => {
+    const times = new Map<string, number>()
+    const [, comments] = partition(spec({kind: COMMENT}), $events)
+
+    for (const comment of comments) {
+      const id = getTagValue("E", comment.tags)
+
+      if (id) {
+        times.set(id, max([times.get(id), comment.created_at]))
+      }
+    }
+
+    for (const thread of items) {
+      times.set(thread.id, max([times.get(thread.id), thread.created_at]))
+    }
+
+    return times
   })
 
   const boards = $derived.by(() => {
     const byRoom = new Map<string, TrustedEvent[]>()
 
+    for (const room of $roomsByUrl.get(url) || []) {
+      byRoom.set(room.h, [])
+    }
+
+    byRoom.set("", [])
+
     for (const event of items) {
       const h = getTagValue("h", event.tags) || ""
       const roomEvents = byRoom.get(h) || []
@@ -59,17 +97,19 @@
 
     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
+    return Array.from(byRoom.entries())
+      .filter(([, threads]) => threads.length > 0)
+      .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
+        const aOrder = roomOrder.get(a) ?? Number.MAX_SAFE_INTEGER
+        const bOrder = roomOrder.get(b) ?? Number.MAX_SAFE_INTEGER
 
-      if (aOrder !== bOrder) return aOrder - bOrder
+        if (aOrder !== bOrder) return aOrder - bOrder
 
-      return a.localeCompare(b)
-    })
+        return a.localeCompare(b)
+      })
   })
 
   onMount(() => {
@@ -107,20 +147,7 @@
 
 <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>
+    <ThreadBoard {url} {h} {threads} {replyCounts} {lastActive} />
   {/each}
   <p class="flex h-10 items-center justify-center py-20">
     <Spinner {loading}>

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

@@ -125,10 +125,12 @@
   })
 </script>
 
-<SpaceBar {back}>
+<SpaceBar {back} hideRelay class="!h-auto min-h-20 py-3">
   {#snippet title()}
     <div class="flex min-w-0 flex-col gap-0.5">
-      <h1 class="ellipsize text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
+      <h1 class="ellipsize text-base leading-tight font-bold sm:text-xl">
+        {getTagValue("title", $event?.tags || []) || ""}
+      </h1>
       <p class="text-xs opacity-75">
         {replyCount}
         {replyCount === 1 ? "reply" : "replies"}
@@ -142,16 +144,17 @@
 
 <PageContent class="flex flex-col">
   {#if $event}
-    <div class="bg-base-100">
+    <div class="border-y border-base-content/15 bg-base-100">
       {#each pagePosts as post, i (post.id)}
         {@const number = (currentPage - 1) * POSTS_PER_PAGE + i + 1}
         <ThreadPost
           {url}
+          threadId={id}
           event={post}
           {number}
           threadPubkey={$event.pubkey}
-          showRoom={number === 1}
-          onReply={() => openReply(post)} />
+          even={i % 2 === 0}
+          onReply={openReply} />
       {/each}
     </div>
     {#if pageCount > 1}