Add calendar actions, menus, etc

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">

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}

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}