Fix doubled side rail and some space navigation

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com>
Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>

src/app/components/ContentQuote.svelte

@@ -6,6 +6,7 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
+  import NoteContent from "@app/components/NoteContent.svelte"
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
   import {deriveEvent} from "@app/repository"
   import {entityLink} from "@app/env"
@@ -43,7 +44,9 @@
 
 <Button class="my-2 block w-full max-w-full text-left" {onclick}>
   {#if $quote}
-    {#if $quote.kind === MESSAGE}
+    {#if $quote.content.trim().match(/^(nostr:)?nevent1[a-z0-9]+$/)}
+      <NoteContent {url} event={$quote} />
+    {:else if $quote.kind === MESSAGE}
       <div
         class="border-l-2 border-solid border-l-primary py-1 pl-2 opacity-90"
         style="background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-300) 90%);">

src/app/components/EventReply.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {writable} from "svelte/store"
+  import type {TrustedEvent} from "@welshman/util"
   import {isMobile, preventDefault} from "@lib/html"
   import {fly} from "@lib/transition"
   import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
+  import ChatComposeParent from "@app/components/ChatComposeParent.svelte"
   import {publishComment} from "@app/comments"
   import {canEnforceNip70} from "@app/relays"
-  import {PROTECTED} from "@app/groups"
+  import {PROTECTED, prependParent} from "@app/groups"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/drafts"
   import {pushToast} from "@app/toast"
@@ -18,8 +20,17 @@
     content?: string | object
   }
 
-  const {url, event, onClose, onSubmit} = $props()
+  type Props = {
-  const draftKey = new DraftKey<Values>(`reply:${event.id}`)
+    url: string
+    event: TrustedEvent
+    parent?: TrustedEvent
+    onClose: () => void
+    onClearParent?: () => void
+    onSubmit: (thunk: unknown) => void
+  }
+
+  const {url, event, parent, onClose, onClearParent, onSubmit}: Props = $props()
+  const draftKey = new DraftKey<Values>(`reply:${event.id}:${parent?.id || ""}`)
   const initialValues = draftKey.get()
   const shouldProtect = canEnforceNip70(url)
   const uploading = writable(false)
@@ -31,8 +42,8 @@
     if ($uploading) return
 
     const ed = await editor
-    const content = ed.getText({blockSeparator: "\n"}).trim()
+    let content = ed.getText({blockSeparator: "\n"}).trim()
-    const tags = ed.storage.nostr.getEditorTags()
+    let tags = ed.storage.nostr.getEditorTags()
 
     if (await shouldProtect) {
       tags.push(PROTECTED)
@@ -45,6 +56,10 @@
       })
     }
 
+    if (parent) {
+      ;({content, tags} = prependParent(parent, {content, tags}, url))
+    }
+
     draftKey.clear()
     onSubmit(publishComment({event, content, tags, relays: [url]}))
   }
@@ -87,6 +102,9 @@
   onsubmit={preventDefault(submit)}
   class="left-content bottom-sai right-sai fixed z-feature mb-14 md:mb-0 w-full md:w-auto pr-2">
   <div class="card2 mx-2 my-2 bg-alt shadow-md">
+    {#if parent}
+      <ChatComposeParent event={parent} clear={() => onClearParent?.()} verb="Replying to" />
+    {/if}
     <div class="relative">
       <div class="note-editor grow overflow-hidden">
         <EditorContent {autofocus} {editor} />

src/app/components/LogInBunker.svelte

@@ -23,7 +23,6 @@
   import {clearModals} from "@app/modal"
   import {setChecked} from "@app/notifications"
   import {pushToast} from "@app/toast"
-  import {SIGNER_RELAYS} from "@app/env"
   import {NIP46_PERMS} from "@app/nip46"
 
   const back = () => {
@@ -38,7 +37,14 @@
     onNostrConnect: async (response: Nip46ResponseWithResult) => {
       const pubkey = await controller.broker.getPublicKey()
 
-      loginWithNip46(pubkey, controller.clientSecret, response.event.pubkey, SIGNER_RELAYS)
+      // Use the broker's current relays rather than the ones we started with, since
+      // the signer may have asked us to switch relays during the connection handshake.
+      loginWithNip46(
+        pubkey,
+        controller.clientSecret,
+        response.event.pubkey,
+        controller.broker.params.relays,
+      )
       setChecked("*")
       clearModals()
     },
@@ -78,7 +84,8 @@
         broker.cleanup()
         controller.stop()
 
-        loginWithNip46(pubkey, clientSecret, signerPubkey, relays)
+        // connect() may have switched relays, so persist the broker's current relays.
+        loginWithNip46(pubkey, clientSecret, signerPubkey, broker.params.relays)
         setChecked("*")
       } else {
         return pushToast({

src/app/components/LogInSelect.svelte

@@ -76,7 +76,7 @@
           onclick={() => selectAccount(option)}
           disabled={loading}
           class="card2 bg-alt flex w-full items-center p-3 text-left">
-          <Profile pubkey={option.pubkey} />
+          <Profile inert pubkey={option.pubkey} />
         </Button>
       {/each}
     </div>

src/app/components/NoteItem.svelte

@@ -23,7 +23,7 @@
 
   const relays = url ? [url] : Router.get().Event(event).getUrls()
 
-  const shouldProtect = url ? canEnforceNip70(url) : Promise.resolve(false)
+  const shouldProtect = url ? canEnforceNip70(url) : false
 
   const deleteReaction = async (event: TrustedEvent) =>
     publishDelete({relays, event, protect: await shouldProtect})

src/app/components/SpaceBar.svelte

@@ -29,20 +29,22 @@
     <Button onclick={back} class="place-self-start pr-3 md:hidden">
       <Icon icon={ArrowLeft} size={7} />
     </Button>
-    <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
+    <div class="flex grow items-center justify-between gap-4">
-      <div class="flex flex-col">
+      <div class="flex min-w-0 flex-col">
-        <div class="flex gap-2 items-center">
+        <div class="flex min-w-0 items-start gap-2">
-          <RelayIcon {url} size={5} class="rounded-full md:hidden" />
+          <RelayIcon {url} size={5} class="shrink-0 rounded-full md:hidden" />
-          <div class="hidden md:contents">
+          <div class="hidden shrink-0 md:flex md:items-center">
             {@render leading?.()}
           </div>
-          {@render title?.()}
+          <div class="min-w-0">
+            {@render title?.()}
+          </div>
         </div>
-        <div class="text-xs text-primary md:hidden">
+        <div class="text-xs text-primary pl-7 md:hidden">
           {displayRelayUrl(url)}
         </div>
       </div>
-      <div class="flex gap-2 items-start">
+      <div class="flex shrink-0 items-center gap-2">
         {@render action?.()}
       </div>
     </div>

src/app/components/SpaceInviteAccept.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {debounce} from "throttle-debounce"
   import {dissoc, maybe} from "@welshman/lib"
-  import {goto} from "$app/navigation"
   import {preventDefault} from "@lib/html"
   import {slideAndFade} from "@lib/transition"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -22,7 +21,7 @@
   import RelaySummary from "@app/components/RelaySummary.svelte"
   import SpaceJoinSettings from "@app/components/SpaceJoinSettings.svelte"
   import {pushToast} from "@app/toast"
-  import {makeSpacePath} from "@app/routes"
+  import {goToSpace} from "@app/routes"
   import {relaysMostlyRestricted} from "@app/policies"
   import {notificationSettings, setSpaceNotifications} from "@app/settings"
   import {parseInviteLink} from "@app/invites"
@@ -68,7 +67,7 @@
       }
 
       await addSpace(url)
-      await goto(makeSpacePath(url), {replaceState: true})
+      await goToSpace(url)
 
       broadcastUserData([url])
       relaysMostlyRestricted.update(dissoc(url))

src/app/components/SpaceJoin.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {goto} from "$app/navigation"
   import {dissoc, maybe} from "@welshman/lib"
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
@@ -22,7 +21,7 @@
   import {notificationSettings} from "@app/settings"
   import {pushModal} from "@app/modal"
   import {pushToast} from "@app/toast"
-  import {makeSpacePath} from "@app/routes"
+  import {goToSpace} from "@app/routes"
   import {Push} from "@app/push"
 
   type Props = {
@@ -56,7 +55,7 @@
       }
 
       await addSpace(url)
-      await goto(makeSpacePath(url), {replaceState: true})
+      await goToSpace(url)
 
       broadcastUserData([url])
       relaysMostlyRestricted.update(dissoc(url))

src/app/components/ThreadBoard.svelte

@@ -0,0 +1,40 @@
+<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[]
+  }
+
+  const {url, h, threads}: 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} />
+  {/each}
+</section>

src/app/components/ThreadBoardItem.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import {formatTimestamp, max} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {COMMENT, 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 {deriveEventsForUrl} from "@app/repository"
+  import {makeThreadPath} from "@app/routes"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
+
+  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
+  const replies = deriveEventsForUrl(url, filters)
+  const replyCount = $derived($replies.length)
+  const lastActive = $derived(max([...$replies, event].map(e => e.created_at)))
+  const title = getTagValue("title", event.tags)
+</script>
+
+<Link
+  href={makeThreadPath(url, event.id)}
+  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

@@ -0,0 +1,66 @@
+<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 goToPage = (target: number) => onPage(target)
+
+  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={() => goToPage(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,93 @@
+<script lang="ts">
+  import {formatTimestamp} from "@welshman/lib"
+  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 LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.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 CommentActions from "@app/components/CommentActions.svelte"
+  import ThreadActions from "@app/components/ThreadActions.svelte"
+  import {makeEventPermalink} from "@app/routes"
+  import {pushModal} from "@app/modal"
+  import {clip} from "@app/toast"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+    threadPubkey: string
+    onReply: (event: TrustedEvent) => void
+  }
+
+  const {url, event, threadPubkey, onReply}: Props = $props()
+
+  const profileDisplay = deriveProfileDisplay(event.pubkey, [url])
+  const handle = deriveHandleForPubkey(event.pubkey)
+  const isOp = event.pubkey === threadPubkey
+  const isComment = event.kind === COMMENT
+
+  const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey, url})
+
+  const copyPermalink = () => clip(makeEventPermalink(event, url))
+
+  const reply = () => onReply(event)
+</script>
+
+<article
+  id="post-{event.id}"
+  data-event={event.id}
+  class="border-b border-base-content/15 bg-base-100">
+  <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={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">
+          {$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}
+      </div>
+    </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 h-auto min-h-0 gap-1 px-1 py-0" onclick={copyPermalink}>
+          <Icon icon={LinkRound} size={3} />
+          Permalink
+        </Button>
+      </div>
+      <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 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>
+        {#if isComment}
+          <CommentActions segment="threads" {event} {url} />
+        {:else}
+          <ThreadActions {event} {url} />
+        {/if}
+      </div>
+    </div>
+  </div>
+</article>

src/app/components/Zap.svelte

@@ -26,7 +26,7 @@
   import {pushToast} from "@app/toast"
 
   type Props = {
-    url: string
+    url?: string
     pubkey: string
     eventId?: string
   }

src/app/components/ZapInvoice.svelte

@@ -30,7 +30,7 @@
   import {clip, pushToast} from "@app/toast"
 
   type Props = {
-    url: string
+    url?: string
     pubkey: string
     eventId?: string
   }

src/app/feeds.ts

@@ -18,7 +18,7 @@ import {
   now,
   on,
   sortBy,
-  WEEK,
+  MONTH,
   YEAR,
 } from "@welshman/lib"
 import {
@@ -122,7 +122,7 @@ export const makeFeed = ({
   const controller = new AbortController()
   const events = writable<TrustedEvent[]>([])
 
-  let interval = int(WEEK)
+  let interval = int(MONTH)
   let buffer = sortEventsDesc(getEventsForUrl(url, filters))
   let backwardWindow = [at - interval, at]
   let forwardWindow = [at, at + interval]
@@ -213,7 +213,7 @@ export const makeFeed = ({
     if (events.length === 0) {
       interval = Math.round(interval * 1.1)
     } else {
-      interval = int(WEEK)
+      interval = int(MONTH)
     }
   }
 
@@ -280,7 +280,7 @@ export const makeCalendarFeed = ({
   element: HTMLElement
   onExhausted?: () => void
 }) => {
-  const interval = int(5, WEEK)
+  const interval = int(5, MONTH)
   const controller = new AbortController()
 
   let exhaustedScrollers = 0

src/app/push/adapters/common.ts

@@ -26,7 +26,7 @@ import {
 import {DM_KINDS, CONTENT_KINDS, makeCommentFilter} from "@app/content"
 import {notificationSettings, shouldNotify, userSettingsValues} from "@app/settings"
 import {userSpaceUrls} from "@app/groups"
-import {makeSpacePath, getEventPath} from "@app/routes"
+import {getEventPath, goToSpace} from "@app/routes"
 
 export type PushSubscription = {
   key: string
@@ -111,7 +111,7 @@ export const onPushNotificationAction = async (action: ActionPerformed) => {
   if (event) {
     goto(await getEventPath(event, [relay]))
   } else {
-    goto(makeSpacePath(relay))
+    goToSpace(relay)
   }
 }
 

src/app/relays.ts

@@ -24,7 +24,14 @@ import {
   uniq,
 } from "@welshman/lib"
 import {throttled} from "@welshman/store"
-import {loadRelay, manageRelay, publishThunk, sign, waitForThunkError} from "@welshman/app"
+import {
+  getRelay,
+  loadRelay,
+  manageRelay,
+  publishThunk,
+  sign,
+  waitForThunkError,
+} from "@welshman/app"
 import {checkRelayHasLivekit} from "$lib/livekit"
 import {stripPrefix} from "@lib/util"
 import {relaysMostlyRestricted} from "@app/policies"
@@ -35,6 +42,9 @@ export const hasNip29 = (relay?: RelayProfile) =>
 export const hasNip50 = (relay?: RelayProfile) =>
   Boolean(relay?.supported_nips?.map?.(String)?.includes?.("50"))
 
+export const hasNip70 = (relay?: RelayProfile) =>
+  Boolean(relay?.supported_nips?.map?.(String)?.includes?.("70"))
+
 export const encodeRelay = (url: string) =>
   encodeURIComponent(
     normalizeRelayUrl(url)
@@ -151,13 +161,7 @@ export const requestRelayClaims = async (urls: string[]) =>
     fromPairs(await Promise.all(urls.map(async url => [url, await requestRelayClaim(url)]))),
   )
 
-export const canEnforceNip70 = async (url: string) => {
+export const canEnforceNip70 = (url: string) => hasNip70(getRelay(url))
-  const socket = Pool.get().get(url)
-
-  await socket.auth.attemptAuth(sign)
-
-  return socket.auth.status !== AuthStatus.None
-}
 
 export const attemptRelayAccess = async (url: string, claim = "") => {
   const socket = Pool.get().get(url)

src/app/routes.ts

@@ -20,7 +20,7 @@ import {
   getRelaysFromList,
 } from "@welshman/util"
 import {makeChatId} from "@app/chats"
-import {entityLink} from "@app/env"
+import {entityLink, PLATFORM_URL} from "@app/env"
 import {encodeRelay, hasNip29} from "@app/relays"
 import {DM_KINDS} from "@app/content"
 import {ROOM} from "@app/groups"
@@ -211,6 +211,17 @@ export const getEventPath = (event: TrustedEvent, urls: string[]) => {
   return entityLink(nip19.neventEncode({id: event.id, relays: urls}))
 }
 
+export const makeEventPermalink = (event: TrustedEvent, url?: string) => {
+  const urls = url ? [url] : Array.from(tracker.getRelays(event.id))
+  const path = getEventPath(event, urls)
+
+  if (path.includes("://")) {
+    return path
+  }
+
+  return `${PLATFORM_URL}${path}#${nip19.neventEncode({id: event.id, relays: urls})}`
+}
+
 export const getRoomItemPath = (url: string, event: TrustedEvent) => {
   switch (event.kind) {
     case THREAD:

src/routes/settings/about/+page.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+  import {session} from "@welshman/app"
   import {Capacitor} from "@capacitor/core"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Zap from "@app/components/Zap.svelte"
+  import ZapInvoice from "@app/components/ZapInvoice.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {PLATFORM_NAME} from "@app/env"
   import {pushModal} from "@app/modal"
+  import {makeSpacePath} from "@app/routes"
   import Code from "@assets/icons/code-2.svg?dataurl"
   import Global from "@assets/icons/global.svg?dataurl"
   import Pen from "@assets/icons/pen.svg?dataurl"
@@ -16,6 +20,8 @@
   const pubkey = "97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322"
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey})
+
+  const zap = () => pushModal($session?.wallet ? Zap : ZapInvoice, {pubkey})
 </script>
 
 <div class="mt-8 min-h-screen bg-base-200 sm:hero">
@@ -28,18 +34,14 @@
           <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-lg">
             <h3 class="text-2xl sm:h-12">Donate</h3>
             <p class="sm:h-16">Funds will be used to support development.</p>
-            <Link external href="https://geyser.fund/project/flotilla" class="btn btn-primary">
+            <Button onclick={zap} class="btn btn-primary">Zap the Developer</Button>
-              Support the Developer
-            </Link>
           </div>
         {/if}
         <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-lg">
           <h3 class="text-2xl sm:h-12">Get in touch</h3>
           <p class="sm:h-16">Having problems? Let us know.</p>
-          <Link
+          <Link class="btn btn-primary" href={makeSpacePath("support.flotilla.social")}>
-            class="btn btn-primary"
+            Get Support
-            href="/chat/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322">
-            Chat with the Developer
           </Link>
         </div>
       </div>

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

@@ -10,7 +10,7 @@
   const url = decodeRelay($page.params.relay!)
   const md = parseFloat(theme.screens.md) * 16
 
-  let width = $state(0)
+  let width = $state(window.innerWidth)
 
   $effect(() => {
     if (width > md) {

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

@@ -3,10 +3,9 @@
   import {readable} from "svelte/store"
   import type {Readable} from "svelte/store"
   import {page} from "$app/stores"
-  import {sortBy, partition, spec, max, pushToMapKey} from "@welshman/lib"
+  import {sortBy, partition, spec, max, pushToMapKey, groupBy} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {THREAD, getTagValue} from "@welshman/util"
-  import {fly} from "@lib/transition"
   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,10 @@
   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 {decodeRelay} from "@app/relays"
+  import {displayRoom} from "@app/groups"
   import {makeCommentFilter} from "@app/content"
   import {makeFeed} from "@app/feeds"
   import {pushModal} from "@app/modal"
@@ -29,9 +29,9 @@
 
   const createThread = () => pushModal(ThreadCreate, {url})
 
-  const items = $derived.by(() => {
+  const threadFeed = $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)
@@ -41,7 +41,13 @@
       }
     }
 
-    return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), goals)
+    const items = sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), threads)
+
+    const byRoom = groupBy(e => getTagValue("h", e.tags) || "", items)
+    const roomName = (h: string) => (h ? displayRoom(url, h) : "general").toLowerCase()
+    const boards = sortBy(([h]) => roomName(h), Array.from(byRoom.entries()))
+
+    return {items, boards}
   })
 
   onMount(() => {
@@ -77,17 +83,15 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element class="flex flex-col gap-2 p-2">
+<PageContent bind:element class="flex flex-col gap-4 p-2">
-  {#each items as event (event.id)}
+  {#each threadFeed.boards as [h, threads] (h || "general")}
-    <div in:fly>
+    <ThreadBoard {url} {h} {threads} />
-      <ThreadItem {url} event={$state.snapshot(event)} />
-    </div>
   {/each}
   <p class="flex h-10 items-center justify-center py-20">
     <Spinner {loading}>
       {#if loading}
         Looking for threads...
-      {:else if items.length === 0}
+      {:else if threadFeed.items.length === 0}
         No threads found.
       {:else}
         That's all!

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

@@ -1,26 +1,31 @@
 <script lang="ts">
   import {onMount} from "svelte"
+  import * as nip19 from "nostr-tools/nip19"
   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 ThreadPost from "@app/components/ThreadPost.svelte"
-  import NoteCard from "@app/components/NoteCard.svelte"
+  import ThreadPagination from "@app/components/ThreadPagination.svelte"
-  import ThreadActions from "@app/components/ThreadActions.svelte"
-  import CommentActions from "@app/components/CommentActions.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, scrollToEvent} from "@app/routes"
+
+  const POSTS_PER_PAGE = 20
 
   const {relay, id} = $page.params as MakeNonOptional<typeof $page.params>
   const url = decodeRelay(relay)
@@ -30,20 +35,106 @@
 
   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}` : ""}`, {
+      keepFocus: true,
+      noScroll: true,
+    })
+  }
+
+  const openReply = (post: TrustedEvent) => {
+    replyTo = post
     showReply = true
   }
 
   const closeReply = () => {
     showReply = false
+    replyTo = undefined
   }
 
-  const expand = () => {
+  const openThreadReply = () => {
-    showAll = true
+    if ($event) {
+      openReply($event)
+    }
+  }
+
+  const clearReplyParent = () => {
+    if ($event) {
+      replyTo = $event
+    }
   }
 
-  let showAll = $state(false)
   let showReply = $state(false)
+  let replyTo: TrustedEvent | undefined = $state()
+  let hashHandled = $state(false)
+
+  $effect(() => {
+    if (hashHandled || posts.length === 0) return
+
+    const hash = window.location.hash.replace(/^#/, "")
+
+    if (!hash.startsWith("nevent1")) return
+
+    let eventId: string
+
+    try {
+      const decoded = nip19.decode(hash)
+
+      if (decoded.type !== "nevent") return
+
+      eventId = decoded.data.id
+    } catch {
+      return
+    }
+
+    const index = posts.findIndex(post => post.id === eventId)
+
+    if (index < 0) return
+
+    hashHandled = true
+
+    const targetPage = Math.ceil((index + 1) / POSTS_PER_PAGE)
+
+    if (targetPage !== currentPage) {
+      setPage(targetPage)
+    }
+
+    setTimeout(() => scrollToEvent(posts[index]!.id), 100)
+  })
 
   onMount(() => {
     const controller = new AbortController()
@@ -56,43 +147,44 @@
   })
 </script>
 
-<SpaceBar {back}>
+<SpaceBar {back} class="!h-auto min-h-20 py-3">
   {#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-base leading-none font-bold sm: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">
+    <div class="border-y border-base-content/15 bg-base-100">
-      <NoteCard event={$event} {url} class="card2 bg-alt z-feature w-full">
+      {#each pagePosts as post (post.id)}
-        <div class="col-3 ml-12">
+        <ThreadPost {url} event={post} threadPubkey={$event.pubkey} onReply={openReply} />
-          <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>
       {/each}
     </div>
-    {#if showReply}
+    {#if pageCount > 1}
-      <EventReply {url} event={$event} onClose={closeReply} onSubmit={closeReply} />
+      <ThreadPagination page={currentPage} {pageCount} onPage={setPage} />
+    {/if}
+    {#if showReply && replyTo && $event}
+      <EventReply
+        {url}
+        event={$event}
+        parent={replyTo.id === $event.id ? undefined : replyTo}
+        onClose={closeReply}
+        onClearParent={clearReplyParent}
+        onSubmit={closeReply} />
     {:else}
-      <div class="flex justify-end">
+      <div class="flex justify-end p-4">
-        <Button class="btn btn-primary" onclick={openReply}>
+        <Button class="btn btn-primary" onclick={openThreadReply}>
           <Icon icon={Reply} />
           Reply to thread
         </Button>