From 5684d1a9cfa0016227de55187c864267b5491c14 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 6 Feb 2025 09:29:30 -0800
Subject: [PATCH] Add calendar actions, menus, etc

---
 .../components/CalendarEventActions.svelte    |  96 +++++++++++++++
 ...eate.svelte => CalendarEventCreate.svelte} |   0
 ...ntItem.svelte => CalendarEventItem.svelte} |  10 +-
 src/app/components/CalendarEventMenu.svelte   |  67 ++++++++++
 src/app/components/CalendarEventShare.svelte  |  66 ++++++++++
 src/app/components/ThreadActions.svelte       |   4 +-
 src/app/notifications.ts                      |  36 +++++-
 src/app/routes.ts                             |  22 ++--
 src/routes/spaces/[relay]/+page.svelte        |  17 ++-
 .../spaces/[relay]/calendar/+page.svelte      |   8 +-
 .../spaces/[relay]/calendar/[id]/+page.svelte | 114 ++++++++++++++++++
 11 files changed, 416 insertions(+), 24 deletions(-)
 create mode 100644 src/app/components/CalendarEventActions.svelte
 rename src/app/components/{EventCreate.svelte => CalendarEventCreate.svelte} (100%)
 rename src/app/components/{EventItem.svelte => CalendarEventItem.svelte} (83%)
 create mode 100644 src/app/components/CalendarEventMenu.svelte
 create mode 100644 src/app/components/CalendarEventShare.svelte
 create mode 100644 src/routes/spaces/[relay]/calendar/[id]/+page.svelte

diff --git a/src/app/components/CalendarEventActions.svelte b/src/app/components/CalendarEventActions.svelte
new file mode 100644
index 00000000..56cbeac6
--- /dev/null
+++ b/src/app/components/CalendarEventActions.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {type Instance} from "tippy.js"
+  import type {NativeEmoji} from "emoji-picker-element/shared"
+  import {max} from "@welshman/lib"
+  import {deriveEvents, deriveIsDeleted} from "@welshman/store"
+  import type {TrustedEvent} from "@welshman/util"
+  import {COMMENT} from "@welshman/util"
+  import {thunks, load, pubkey, repository, formatTimestampRelative} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import EmojiButton from "@lib/components/EmojiButton.svelte"
+  import ReactionSummary from "@app/components/ReactionSummary.svelte"
+  import ThunkStatus from "@app/components/ThunkStatus.svelte"
+  import CalendarEventMenu from "@app/components/CalendarEventMenu.svelte"
+  import {publishDelete, publishReaction} from "@app/commands"
+  import {notifications} from "@app/notifications"
+  import {makeCalendarPath} from "@app/routes"
+
+  interface Props {
+    url: any
+    event: any
+    showActivity?: boolean
+  }
+
+  const {url, event, showActivity = false}: Props = $props()
+
+  const thunk = $derived($thunks[event.id])
+  const deleted = deriveIsDeleted(repository, event)
+  const path = makeCalendarPath(url, event.id)
+  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
+  const replies = deriveEvents(repository, {filters})
+
+  const showPopover = () => popover?.show()
+
+  const hidePopover = () => popover?.hide()
+
+  const onReactionClick = (content: string, events: TrustedEvent[]) => {
+    const reaction = events.find(e => e.pubkey === $pubkey)
+
+    if (reaction) {
+      publishDelete({relays: [url], event: reaction})
+    } else {
+      publishReaction({event, content, relays: [url]})
+    }
+  }
+
+  const onEmoji = (emoji: NativeEmoji) =>
+    publishReaction({event, content: emoji.unicode, relays: [url]})
+
+  let popover: Instance | undefined = $state()
+
+  const lastActive = $derived(max([...$replies, event].map(e => e.created_at)))
+
+  onMount(() => {
+    load({relays: [url], filters})
+  })
+</script>
+
+<div class="flex flex-wrap items-center justify-between gap-2">
+  <div class="flex flex-grow flex-wrap justify-end gap-2">
+    <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-left" />
+    {#if $deleted}
+      <div class="btn btn-error btn-xs rounded-full">Deleted</div>
+    {:else if thunk}
+      <ThunkStatus {thunk} />
+    {/if}
+    {#if showActivity}
+      <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
+        <Icon icon="reply" />
+        <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
+      </div>
+      <div class="btn btn-neutral btn-xs relative hidden rounded-full sm:flex">
+        {#if $notifications.has(path)}
+          <div class="h-2 w-2 rounded-full bg-primary"></div>
+        {/if}
+        Active {formatTimestampRelative(lastActive)}
+      </div>
+    {/if}
+    <Button class="join rounded-full">
+      <EmojiButton {onEmoji} class="btn join-item btn-neutral btn-xs">
+        <Icon icon="smile-circle" size={4} />
+      </EmojiButton>
+      <Tippy
+        bind:popover
+        component={CalendarEventMenu}
+        props={{url, event, onClick: hidePopover}}
+        params={{trigger: "manual", interactive: true}}>
+        <Button class="btn join-item btn-neutral btn-xs" onclick={showPopover}>
+          <Icon icon="menu-dots" size={4} />
+        </Button>
+      </Tippy>
+    </Button>
+  </div>
+</div>
diff --git a/src/app/components/EventCreate.svelte b/src/app/components/CalendarEventCreate.svelte
similarity index 100%
rename from src/app/components/EventCreate.svelte
rename to src/app/components/CalendarEventCreate.svelte
diff --git a/src/app/components/EventItem.svelte b/src/app/components/CalendarEventItem.svelte
similarity index 83%
rename from src/app/components/EventItem.svelte
rename to src/app/components/CalendarEventItem.svelte
index 91f3ef37..03a29dd2 100644
--- a/src/app/components/EventItem.svelte
+++ b/src/app/components/CalendarEventItem.svelte
@@ -3,11 +3,13 @@
   import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
-  import ThreadActions from "@app/components/ThreadActions.svelte"
+  import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {makeCalendarPath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   const {url, event} = $props()
@@ -22,7 +24,7 @@
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 </script>
 
-<div class="card2 bg-alt col-2">
+<Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeCalendarPath(url, event.id)}>
   <div class="flex items-center justify-between gap-2">
     <span>{meta.title || meta.name}</span>
     <div class="flex items-center gap-2 text-sm">
@@ -40,6 +42,6 @@
         @<ProfileName pubkey={event.pubkey} />
       </Button>
     </span>
-    <ThreadActions {url} {event} />
+    <CalendarEventActions {url} {event} />
   </div>
-</div>
+</Link>
diff --git a/src/app/components/CalendarEventMenu.svelte b/src/app/components/CalendarEventMenu.svelte
new file mode 100644
index 00000000..85ada53c
--- /dev/null
+++ b/src/app/components/CalendarEventMenu.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import {COMMENT} from "@welshman/util"
+  import {pubkey} from "@welshman/app"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import EventInfo from "@app/components/EventInfo.svelte"
+  import EventReport from "@app/components/EventReport.svelte"
+  import CalendarEventShare from "@app/components/CalendarEventShare.svelte"
+  import ConfirmDelete from "@app/components/ConfirmDelete.svelte"
+  import {pushModal} from "@app/modal"
+
+  const {url, event, onClick} = $props()
+
+  const isRoot = event.kind !== COMMENT
+
+  const report = () => {
+    onClick()
+    pushModal(EventReport, {url, event})
+  }
+
+  const showInfo = () => {
+    onClick()
+    pushModal(EventInfo, {event})
+  }
+
+  const share = () => {
+    onClick()
+    pushModal(CalendarEventShare, {url, event})
+  }
+
+  const showDelete = () => {
+    onClick()
+    pushModal(ConfirmDelete, {url, event})
+  }
+</script>
+
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
+  {#if isRoot}
+    <li>
+      <Button onclick={share}>
+        <Icon size={4} icon="share-circle" />
+        Share to Chat
+      </Button>
+    </li>
+  {/if}
+  <li>
+    <Button onclick={showInfo}>
+      <Icon size={4} icon="code-2" />
+      Event Details
+    </Button>
+  </li>
+  {#if event.pubkey === $pubkey}
+    <li>
+      <Button onclick={showDelete} class="text-error">
+        <Icon size={4} icon="trash-bin-2" />
+        Delete Event
+      </Button>
+    </li>
+  {:else}
+    <li>
+      <Button class="text-error" onclick={report}>
+        <Icon size={4} icon="danger" />
+        Report Content
+      </Button>
+    </li>
+  {/if}
+</ul>
diff --git a/src/app/components/CalendarEventShare.svelte b/src/app/components/CalendarEventShare.svelte
new file mode 100644
index 00000000..6b7d3e4b
--- /dev/null
+++ b/src/app/components/CalendarEventShare.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import {nip19} from "nostr-tools"
+  import {goto} from "$app/navigation"
+  import {ctx} from "@welshman/lib"
+  import {toNostrURI} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ChannelName from "@app/components/ChannelName.svelte"
+  import {channelsByUrl} from "@app/state"
+  import {makeRoomPath} from "@app/routes"
+  import {setKey} from "@app/implicit"
+
+  const {url, event} = $props()
+
+  const relays = ctx.app.router.Event(event).getUrls()
+  const nevent = nip19.neventEncode({id: event.id, relays})
+
+  const back = () => history.back()
+
+  const onSubmit = () => {
+    setKey("content", toNostrURI(nevent))
+    goto(makeRoomPath(url, selection), {replaceState: true})
+  }
+
+  const toggleRoom = (room: string) => {
+    selection = room === selection ? "" : room
+  }
+
+  let selection = $state("")
+</script>
+
+<form class="column gap-4" onsubmit={preventDefault(onSubmit)}>
+  <ModalHeader>
+    {#snippet title()}
+      <div>Share Event</div>
+    {/snippet}
+    {#snippet info()}
+      <div>Which room would you like to share this event to?</div>
+    {/snippet}
+  </ModalHeader>
+  <div class="grid grid-cols-3 gap-2">
+    {#each $channelsByUrl.get(url) || [] as channel (channel.room)}
+      <button
+        type="button"
+        class="btn"
+        class:btn-neutral={selection !== channel.room}
+        class:btn-primary={selection === channel.room}
+        onclick={() => toggleRoom(channel.room)}>
+        #<ChannelName {...channel} />
+      </button>
+    {/each}
+  </div>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={!selection}>
+      Share Event
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </ModalFooter>
+</form>
diff --git a/src/app/components/ThreadActions.svelte b/src/app/components/ThreadActions.svelte
index 60af31b1..250ec677 100644
--- a/src/app/components/ThreadActions.svelte
+++ b/src/app/components/ThreadActions.svelte
@@ -16,7 +16,7 @@
   import ThreadMenu from "@app/components/ThreadMenu.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
   import {notifications} from "@app/notifications"
-  import {makeSpacePath} from "@app/routes"
+  import {makeThreadPath} from "@app/routes"
 
   interface Props {
     url: any
@@ -28,7 +28,7 @@
 
   const thunk = $derived($thunks[event.id])
   const deleted = deriveIsDeleted(repository, event)
-  const path = makeSpacePath(url, "threads", event.id)
+  const path = makeThreadPath(url, event.id)
   const filters = [{kinds: [COMMENT], "#E": [event.id]}]
   const replies = deriveEvents(repository, {filters})
 
diff --git a/src/app/notifications.ts b/src/app/notifications.ts
index 5d7a79b6..c583c80f 100644
--- a/src/app/notifications.ts
+++ b/src/app/notifications.ts
@@ -3,8 +3,14 @@ import {synced, throttled} from "@welshman/store"
 import {pubkey} from "@welshman/app"
 import {prop, spec, identity, now, groupBy} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
-import {MESSAGE, THREAD, COMMENT, getTagValue} from "@welshman/util"
-import {makeSpacePath, makeChatPath, makeThreadPath, makeRoomPath} from "@app/routes"
+import {EVENT_TIME, MESSAGE, THREAD, COMMENT, getTagValue} from "@welshman/util"
+import {
+  makeSpacePath,
+  makeChatPath,
+  makeThreadPath,
+  makeCalendarPath,
+  makeRoomPath,
+} from "@app/routes"
 import {chats, getUrlsForEvent, userRoomsByUrl, repositoryStore} from "@app/state"
 
 // Checked state
@@ -57,18 +63,31 @@ export const notifications = derived(
       {kinds: [THREAD]},
       {kinds: [COMMENT], "#K": [String(THREAD)]},
     ])
+
+    const allCalendarEvents = $repository.query([
+      {kinds: [EVENT_TIME]},
+      {kinds: [COMMENT], "#K": [String(EVENT_TIME)]},
+    ])
+
     const allMessageEvents = $repository.query([{kinds: [MESSAGE]}])
 
     for (const [url, rooms] of $userRoomsByUrl.entries()) {
       const spacePath = makeSpacePath(url)
       const threadPath = makeThreadPath(url)
+      const calendarPath = makeCalendarPath(url)
       const threadEvents = allThreadEvents.filter(e => $getUrlsForEvent(e.id).includes(url))
+      const calendarEvents = allCalendarEvents.filter(e => $getUrlsForEvent(e.id).includes(url))
 
       if (hasNotification(threadPath, threadEvents[0])) {
         paths.add(spacePath)
         paths.add(threadPath)
       }
 
+      if (hasNotification(calendarPath, calendarEvents[0])) {
+        paths.add(spacePath)
+        paths.add(calendarPath)
+      }
+
       const commentsByThreadId = groupBy(
         e => getTagValue("E", e.tags),
         threadEvents.filter(spec({kind: COMMENT})),
@@ -82,6 +101,19 @@ export const notifications = derived(
         }
       }
 
+      const commentsByEventId = groupBy(
+        e => getTagValue("E", e.tags),
+        calendarEvents.filter(spec({kind: COMMENT})),
+      )
+
+      for (const [eventId, [comment]] of commentsByEventId.entries()) {
+        const calendarEventPath = makeCalendarPath(url, eventId)
+
+        if (hasNotification(calendarEventPath, comment)) {
+          paths.add(calendarEventPath)
+        }
+      }
+
       for (const room of rooms) {
         const roomPath = makeRoomPath(url, room)
         const latestEvent = allMessageEvents.find(
diff --git a/src/app/routes.ts b/src/app/routes.ts
index fdcfc5a8..96aad395 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -1,11 +1,17 @@
 import type {Page} from "@sveltejs/kit"
+import {identity} from "@welshman/lib"
 import {makeChatId, decodeRelay, encodeRelay, userRoomsByUrl} from "@app/state"
 
-export const makeSpacePath = (url: string, ...extra: string[]) => {
+export const makeSpacePath = (url: string, ...extra: (string | undefined)[]) => {
   let path = `/spaces/${encodeRelay(url)}`
 
   if (extra.length > 0) {
-    path += "/" + extra.map(s => encodeURIComponent(s)).join("/")
+    path +=
+      "/" +
+      extra
+        .filter(identity)
+        .map(s => encodeURIComponent(s as string))
+        .join("/")
   }
 
   return path
@@ -15,15 +21,11 @@ export const makeChatPath = (pubkeys: string[]) => `/chat/${makeChatId(pubkeys)}
 
 export const makeRoomPath = (url: string, room: string) => `/spaces/${encodeRelay(url)}/${room}`
 
-export const makeThreadPath = (url: string, eventId?: string) => {
-  let path = `/spaces/${encodeRelay(url)}/threads`
+export const makeThreadPath = (url: string, eventId?: string) =>
+  makeSpacePath(url, "threads", eventId)
 
-  if (eventId) {
-    path += "/" + eventId
-  }
-
-  return path
-}
+export const makeCalendarPath = (url: string, eventId?: string) =>
+  makeSpacePath(url, "calendar", eventId)
 
 export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]
 
diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte
index 923a0c7a..c7cbf4ec 100644
--- a/src/routes/spaces/[relay]/+page.svelte
+++ b/src/routes/spaces/[relay]/+page.svelte
@@ -25,7 +25,7 @@
     deriveOtherRooms,
     userRoomsByUrl,
   } from "@app/state"
-  import {makeChatPath, makeRoomPath, makeSpacePath} from "@app/routes"
+  import {makeChatPath, makeThreadPath, makeCalendarPath, makeRoomPath} from "@app/routes"
   import {notifications} from "@app/notifications"
   import {pushModal} from "@app/modal"
 
@@ -33,7 +33,8 @@
   const relay = deriveRelay(url)
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
-  const threadsPath = makeSpacePath(url, "threads")
+  const threadsPath = makeThreadPath(url)
+  const calendarPath = makeCalendarPath(url)
 
   const joinSpace = () => pushModal(SpaceJoin, {url})
 
@@ -137,6 +138,18 @@
           {/if}
         </div>
       </Link>
+      <Link href={calendarPath} class="btn btn-secondary">
+        <div class="relative flex items-center gap-2">
+          <Icon icon="notes-minimalistic" />
+          Calendar
+          {#if $notifications.has(calendarPath)}
+            <div
+              class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary-content"
+              transition:fade>
+            </div>
+          {/if}
+        </div>
+      </Link>
       {#each $userRooms as room (room)}
         {@const roomPath = makeRoomPath(url, room)}
         <Link href={roomPath} class="btn btn-neutral relative">
diff --git a/src/routes/spaces/[relay]/calendar/+page.svelte b/src/routes/spaces/[relay]/calendar/+page.svelte
index 0c9c9553..6ad1edc6 100644
--- a/src/routes/spaces/[relay]/calendar/+page.svelte
+++ b/src/routes/spaces/[relay]/calendar/+page.svelte
@@ -14,8 +14,8 @@
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
-  import EventItem from "@app/components/EventItem.svelte"
-  import EventCreate from "@app/components/EventCreate.svelte"
+  import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
+  import CalendarEventCreate from "@app/components/CalendarEventCreate.svelte"
   import {pushModal} from "@app/modal"
   import {GENERAL, getEventsForUrl, decodeRelay} from "@app/state"
   import {makeCalendarFeed} from "@app/requests"
@@ -23,7 +23,7 @@
 
   const url = decodeRelay($page.params.relay)
 
-  const createEvent = () => pushModal(EventCreate, {url})
+  const createEvent = () => pushModal(CalendarEventCreate, {url})
 
   const getStart = (event: TrustedEvent) => parseInt(getTagValue("start", event.tags) || "")
 
@@ -144,7 +144,7 @@
         {#if dateDisplay}
           <Divider>{dateDisplay}</Divider>
         {/if}
-        <EventItem {url} {event} />
+        <CalendarEventItem {url} {event} />
       </div>
     {/each}
     {#if loading}
diff --git a/src/routes/spaces/[relay]/calendar/[id]/+page.svelte b/src/routes/spaces/[relay]/calendar/[id]/+page.svelte
new file mode 100644
index 00000000..180d9267
--- /dev/null
+++ b/src/routes/spaces/[relay]/calendar/[id]/+page.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {page} from "$app/stores"
+  import {sortBy, sleep} from "@welshman/lib"
+  import {COMMENT, getTagValue} from "@welshman/util"
+  import {repository, subscribe} from "@welshman/app"
+  import {deriveEvents} from "@welshman/store"
+  import Icon from "@lib/components/Icon.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Content from "@app/components/Content.svelte"
+  import NoteCard from "@app/components/NoteCard.svelte"
+  import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
+  import ThreadActions from "@app/components/ThreadActions.svelte"
+  import ThreadReply from "@app/components/ThreadReply.svelte"
+  import {deriveEvent, decodeRelay} from "@app/state"
+  import {setChecked} from "@app/notifications"
+
+  const {relay, id} = $page.params
+  const url = decodeRelay(relay)
+  const event = deriveEvent(id)
+  const filters = [{kinds: [COMMENT], "#E": [id]}]
+  const replies = deriveEvents(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 sub = subscribe({relays: [url], filters})
+
+    return () => {
+      sub.close()
+      setChecked($page.url.pathname)
+    }
+  })
+</script>
+
+<div class="relative flex flex-col-reverse gap-3 px-2">
+  <div class="absolute left-[51px] top-32 h-[calc(100%-248px)] w-[2px] bg-neutral"></div>
+  {#if $event}
+    {#if !showReply}
+      <div class="flex justify-end px-2 pb-2">
+        <Button class="btn btn-primary" onclick={openReply}>
+          <Icon icon="reply" />
+          Reply to thread
+        </Button>
+      </div>
+    {/if}
+    {#each sortBy(e => -e.created_at, $replies).slice(0, showAll ? undefined : 4) as reply (reply.id)}
+      <NoteCard event={reply} class="card2 bg-alt z-feature w-full">
+        <div class="col-3 ml-12">
+          <Content showEntire event={reply} />
+          <ThreadActions event={reply} {url} />
+        </div>
+      </NoteCard>
+    {/each}
+    {#if !showAll && $replies.length > 4}
+      <div class="flex justify-center">
+        <Button class="btn btn-link" onclick={expand}>
+          <Icon icon="sort-vertical" />
+          Show all {$replies.length} replies
+        </Button>
+      </div>
+    {/if}
+    <NoteCard event={$event} class="card2 bg-alt z-feature w-full">
+      <div class="col-3 ml-12">
+        <Content showEntire event={$event} quoteProps={{relays: [url]}} />
+        <ThreadActions event={$event} {url} />
+      </div>
+    </NoteCard>
+  {:else}
+    {#await sleep(5000)}
+      <Spinner loading>Loading thread...</Spinner>
+    {:then}
+      <p>Failed to load thread.</p>
+    {/await}
+  {/if}
+  <PageBar class="mx-0">
+    {#snippet icon()}
+      <div>
+        <Button class="btn btn-neutral btn-sm" onclick={back}>
+          <Icon icon="alt-arrow-left" />
+          Go back
+        </Button>
+      </div>
+    {/snippet}
+    {#snippet title()}
+      <h1 class="text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
+    {/snippet}
+    {#snippet action()}
+      <div>
+        <MenuSpaceButton {url} />
+      </div>
+    {/snippet}
+  </PageBar>
+</div>
+{#if showReply}
+  <ThreadReply {url} event={$event} onClose={closeReply} onSubmit={closeReply} />
+{/if}