Get threads working reasonably well

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import "@src/app.css"
   import {onMount} from "svelte"
+  import type {SvelteComponent} from "svelte"
   import {get} from "svelte/store"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
@@ -24,6 +25,7 @@
   } from "@welshman/app"
   import * as app from "@welshman/app"
   import ModalBox from "@lib/components/ModalBox.svelte"
+  import Drawer from "@lib/components/Drawer.svelte"
   import Toast from "@app/components/Toast.svelte"
   import Landing from "@app/components/Landing.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
@@ -35,6 +37,7 @@
 
   let ready: Promise<unknown>
   let dialog: HTMLDialogElement
+  let drawer: SvelteComponent
   let prev: any
 
   $: modalId = $page.url.hash.slice(1)
@@ -52,9 +55,15 @@
 
   $: {
     if (modal) {
-      dialog?.showModal()
       prev = modal
+
+      if (prev.options.drawer) {
+        drawer?.open()
+      } else {
+        dialog?.showModal()
+      }
     } else {
+      drawer?.close()
       dialog?.close()
     }
   }
@@ -101,7 +110,7 @@
       <slot />
     </div>
     <dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
-      {#if prev}
+      {#if prev && !prev.options.drawer}
         {#key prev}
           <ModalBox {...prev} />
         {/key}
@@ -113,6 +122,13 @@
         </form>
       {/if}
     </dialog>
+    <Drawer bind:this={drawer}>
+      {#if prev && prev.options.drawer}
+        {#key prev}
+          <svelte:component this={prev.component} {...prev.props} />
+        {/key}
+      {/if}
+    </Drawer>
     <Toast />
   </div>
 {/await}

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

@@ -9,16 +9,18 @@
 
 <script lang="ts">
   import {page} from "$app/stores"
-  import {sortBy} from "@welshman/lib"
-  import type {TrustedEvent} from "@welshman/util"
-  import {formatTimestampAsDate} from "@welshman/app"
+  import {sortBy, append} from "@welshman/lib"
+  import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {createEvent} from "@welshman/util"
+  import {formatTimestampAsDate, makeThunk, publishThunk} from "@welshman/app"
+  import {fly} from "@lib/transition"
   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 ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
-  import {userMembership, decodeNRelay, makeChatId, deriveChat, GENERAL} from "@app/state"
+  import {userMembership, decodeNRelay, makeChatId, deriveChat, GENERAL, tagRoom, MESSAGE} from "@app/state"
   import {addRoomMembership, removeRoomMembership} from "@app/commands"
 
   const {nrelay, room = GENERAL} = $page.params
@@ -27,6 +29,12 @@
 
   const assertEvent = (e: any) => e as TrustedEvent
 
+  const onSubmit = ({content, tags}: EventContent) => {
+    const event = createEvent(MESSAGE, {content, tags: append(tagRoom(room, url), tags)})
+
+    publishThunk(makeThunk({event, relays: [url]}))
+  }
+
   let loading = true
   let elements: Element[] = []
 
@@ -93,7 +101,9 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        <ChatMessage {url} {room} event={assertEvent(value)} {showPubkey} />
+        <div in:fly>
+          <ChatMessage {url} {room} event={assertEvent(value)} {showPubkey} />
+        </div>
       {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
@@ -106,5 +116,7 @@
       </Spinner>
     </p>
   </div>
-  <ChatCompose {url} {room} />
+  <div class="shadow-top-xl border-t border-solid border-base-100 bg-base-100">
+    <ChatCompose {onSubmit} />
+  </div>
 </div>