Split modals out into separate components

src/app/components/AppContainer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import {pubkey} from '@welshman/app'
+  import Landing from "@app/components/Landing.svelte"
+  import Toast from "@app/components/Toast.svelte"
+  import PrimaryNav from "@app/components/PrimaryNav.svelte"
+</script>
+
+<div class="flex h-screen overflow-hidden">
+  <PrimaryNav>
+    {#if $pubkey}
+      <slot />
+    {:else}
+      <Landing />
+    {/if}
+  </PrimaryNav>
+</div>
+<Toast />

src/app/components/ModalContainer.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import type {SvelteComponent} from "svelte"
+  import {page} from "$app/stores"
+  import {fly} from "@lib/transition"
+  import Drawer from "@lib/components/Drawer.svelte"
+  import {modals} from "@app/modal"
+  import Toast from "@app/components/Toast.svelte"
+
+  let prev: any
+  let mounted = false
+  let dialog: HTMLDialogElement
+  let drawer: SvelteComponent
+
+  $: hash = $page.url.hash.slice(1)
+  $: modal = modals.get(hash)
+  $: prev = modal || prev
+
+  $: {
+    if (mounted) {
+      if (modal?.options?.drawer) {
+        drawer.open()
+      } else if (modal) {
+        dialog.showModal()
+      } else {
+        drawer.close()
+        dialog.close()
+      }
+    }
+  }
+
+  onMount(() => {
+    mounted = true
+  })
+</script>
+
+<dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
+  {#if modal && !modal.options?.drawer}
+    {#key hash}
+      <div class="bg-alt modal-box overflow-visible overflow-y-auto" transition:fly={{duration: 100}}>
+        <svelte:component this={modal.component} {...modal.props} />
+      </div>
+    {/key}
+    <Toast />
+  {/if}
+  <form method="dialog" class="modal-backdrop">
+    <button />
+  </form>
+</dialog>
+<Drawer bind:this={drawer}>
+  {#if modal && modal.options?.drawer}
+    {#key hash}
+      <svelte:component this={modal.component} {...modal.props} />
+    {/key}
+  {/if}
+</Drawer>