From cbf3d3566fa0fb16e3832dc79f324442493ef583 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 15 Oct 2024 14:44:21 -0700
Subject: [PATCH] Handle drawer close

---
 src/app/components/ChannelMessage.svelte |  2 +-
 src/app/modal.ts                         |  1 +
 src/lib/components/Drawer.svelte         |  2 +-
 src/routes/+layout.svelte                | 20 ++++++++++++++------
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/app/components/ChannelMessage.svelte b/src/app/components/ChannelMessage.svelte
index 059e6b2..e555f9d 100644
--- a/src/app/components/ChannelMessage.svelte
+++ b/src/app/components/ChannelMessage.svelte
@@ -147,7 +147,7 @@
     </div>
   {/if}
   <button
-    class="join absolute -top-2 right-0 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
+    class="join absolute top-1 right-1 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
     on:click|stopPropagation>
     <ChannelMessageEmojiButton {url} {room} {event} />
     <Button class="btn join-item btn-xs" on:click={showInfo}>
diff --git a/src/app/modal.ts b/src/app/modal.ts
index e7ee259..c864200 100644
--- a/src/app/modal.ts
+++ b/src/app/modal.ts
@@ -32,5 +32,6 @@ export const pushDrawer = (
 
 export const clearModal = () => {
   goto("#")
+  modals.clear()
   emitter.emit("close")
 }
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte
index f61c5a7..5a432cc 100644
--- a/src/lib/components/Drawer.svelte
+++ b/src/lib/components/Drawer.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div class="drawer drawer-end">
-  <input {id} type="checkbox" class="drawer-toggle" bind:this={input} />
+  <input {id} type="checkbox" class="drawer-toggle" bind:this={input} on:change />
   <div class="drawer-content">
     <label for={id} bind:this={label} />
   </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 82cdaa4..96e206f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -62,7 +62,13 @@
     }
   }
 
-  let ready: Promise<unknown>
+  const onDrawerClose = (e: any) => {
+    if (!e.target.checked) {
+      clearModal()
+    }
+  }
+
+  let ready: Promise<unknown> = Promise.resolve()
   let dialog: HTMLDialogElement
   let drawer: SvelteComponent
   let modal: any
@@ -156,10 +162,12 @@
       if ($pubkey) {
         loadUserData($pubkey)
       }
+    }
 
-      ready.then(async () => {
-        await sleep(1)
+    ready.then(async () => {
+      await sleep(1)
 
+      subs.push(
         page.subscribe($page => {
           modal = modals.get($page.url.hash.slice(1))
 
@@ -178,8 +186,8 @@
             dialog?.close()
           }
         })
-      })
-    }
+      )
+    })
 
     return () => {
       for (const unsub of subs) {
@@ -216,7 +224,7 @@
         </form>
       {/if}
     </dialog>
-    <Drawer bind:this={drawer}>
+    <Drawer bind:this={drawer} on:change={onDrawerClose}>
       {#if modal && modal.options?.drawer}
         {#key modal}
           <svelte:component this={modal.component} {...modal.props} />