Start working on threads page

src/routes/spaces/[nrelay]/+layout.svelte

@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {sort, now} from "@welshman/lib"
-  import {displayRelayUrl, EVENT_DATE, EVENT_TIME, CLASSIFIED} from "@welshman/util"
+  import {displayRelayUrl, NOTE, EVENT_DATE, EVENT_TIME, CLASSIFIED} from "@welshman/util"
   import {subscribe} from "@welshman/app"
   import {fly, slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -16,7 +16,7 @@
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
-  import {userMembership, roomsByUrl, decodeNRelay, GENERAL, MESSAGE, REPLY} from "@app/state"
+  import {userMembership, roomsByUrl, decodeNRelay, GENERAL, MESSAGE} from "@app/state"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
 
@@ -52,7 +52,7 @@
   $: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
 
   onMount(() => {
-    const kinds = [MESSAGE, REPLY, EVENT_DATE, EVENT_TIME, CLASSIFIED]
+    const kinds = [NOTE, MESSAGE, EVENT_DATE, EVENT_TIME, CLASSIFIED]
     const sub = subscribe({filters: [{kinds, since: now() - 30}], relays: [url]})
 
     return () => sub.close()

src/routes/spaces/[nrelay]/[[room]]/+page.svelte

@@ -71,9 +71,9 @@
       class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
       <div class="flex items-center gap-2">
         <Icon icon="hashtag" />
-        <strong>{room || "General"}</strong>
+        <strong>{room}</strong>
       </div>
-      {#if room}
+      {#if room !== GENERAL}
         {#if membership.includes(room)}
           <Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, room)}>
             <Icon icon="arrows-a-logout-2" />

src/routes/spaces/[nrelay]/calendar/+page.svelte

@@ -69,7 +69,7 @@
   </div>
   <Button class="fixed bottom-4 right-4 tooltip tooltip-left p-1" data-tip="Create an Event" on:click={createEvent}>
     <div class="w-12 h-12 flex items-center justify-center btn btn-primary btn-circle">
-      <Icon icon="widget-add" />
+      <Icon icon="calendar-add" />
     </div>
   </Button>
 </div>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import {page} from "$app/stores"
+  import {sortBy, last} from '@welshman/lib'
+  import type {TrustedEvent} from '@welshman/util'
+  import {formatTimestampAsDate} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import ThreadCard from "@app/components/ThreadCard.svelte"
+  import ThreadCreate from "@app/components/ThreadCreate.svelte"
+  import {pushModal} from "@app/modal"
+  import {threadsByUrl, decodeNRelay} from "@app/state"
+
+  const url = decodeNRelay($page.params.nrelay)
+
+  const createThread = () => pushModal(ThreadCreate, {url})
+
+  let loading = true
+
+  $: threads = sortBy(thread => -thread.root.created_at, $threadsByUrl.get(url) || [])
+
+  setTimeout(() => {
+    loading = false
+  }, 3000)
+</script>
+
+<div class="relative flex h-screen flex-col">
+  <div class="relative z-feature mx-2 rounded-xl pt-4">
+    <div
+      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+      <div class="flex items-center gap-2">
+        <Icon icon="notes-minimalistic" />
+        <strong>Threads</strong>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-grow flex-col overflow-auto p-2 gap-2">
+    {#each threads as {root, replies} (root.id)}
+      <ThreadCard {root} {replies} />
+    {/each}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner {loading}>
+        {#if loading}
+          Looking for threads...
+        {:else if threads.length === 0}
+          No threads found.
+        {/if}
+      </Spinner>
+    </p>
+  </div>
+  <Button class="fixed bottom-4 right-4 tooltip tooltip-left p-1" data-tip="Create an Event" on:click={createThread}>
+    <div class="w-12 h-12 flex items-center justify-center btn btn-primary btn-circle">
+      <Icon icon="add-square" />
+    </div>
+  </Button>
+</div>