Handle drawer close

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

src/app/modal.ts

@@ -32,5 +32,6 @@ export const pushDrawer = (
 
 export const clearModal = () => {
   goto("#")
+  modals.clear()
   emitter.emit("close")
 }

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>

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} />