Allow nested modals

src/app/components/AppContainer.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {page} from "$app/stores"
   import {pubkey} from "@welshman/app"
   import Dialog from "@lib/components/Dialog.svelte"
   import Landing from "@app/components/Landing.svelte"
   import Toast from "@app/components/Toast.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
-  import {modals} from "@app/util/modal"
+  import {modal} from "@app/util/modal"
 
   interface Props {
     children: Snippet
@@ -20,7 +19,7 @@
     <PrimaryNav>
       {@render children?.()}
     </PrimaryNav>
-  {:else if !$modals[$page.url.hash.slice(1)]}
+  {:else if !$modal}
     <Dialog children={{component: Landing, props: {}}} />
   {/if}
 </div>

src/app/components/ModalContainer.svelte

@@ -2,38 +2,46 @@
   import {onMount, mount, unmount} from "svelte"
   import Drawer from "@lib/components/Drawer.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
-  import {modal, clearModals} from "@app/util/modal"
+  import {modal, modalStack, popModal} from "@app/util/modal"
 
-  const closeModals = () => {
+  const closeModal = () => {
     if ($modal && !$modal.options.noEscape) {
-      clearModals()
+      popModal()
     }
   }
 
   const onKeyDown = (e: any) => {
     if (e.code === "Escape" && e.target === document.body) {
-      closeModals()
+      closeModal()
     }
   }
 
   let element: HTMLElement
-  let instance: any | undefined
+  const instances: Record<string, any> = {}
 
   onMount(() => {
-    return modal.subscribe($modal => {
+    return modalStack.subscribe($modalStack => {
-      if (instance) {
+      const ids = $modalStack.map(({id}) => id)
-        unmount(instance, {outro: true})
+
-        instance = undefined
+      for (const [id, instance] of Object.entries(instances)) {
+        if (!ids.includes(id)) {
+          unmount(instance, {outro: true})
+          delete instances[id]
+        }
       }
 
-      if ($modal) {
+      for (const item of $modalStack) {
-        const {options, component, props} = $modal
+        if (instances[item.id]) {
+          continue
+        }
+
+        const {options, component, props} = item
         const wrapper = options.drawer ? Drawer : Dialog
 
-        instance = mount(wrapper as any, {
+        instances[item.id] = mount(wrapper as any, {
           target: element,
           props: {
-            onClose: closeModals,
+            onClose: closeModal,
             fullscreen: options.fullscreen,
             children: {component, props},
           },

src/app/util/modal.ts

@@ -1,5 +1,5 @@
 import type {Component} from "svelte"
-import {writable} from "svelte/store"
+import {get, writable} from "svelte/store"
 import {randomId, always, assoc, Emitter} from "@welshman/lib"
 import {deriveDeduplicated} from "@welshman/store"
 import {goto} from "$app/navigation"
@@ -7,6 +7,7 @@ import {page} from "$app/stores"
 
 export type ModalOptions = {
   drawer?: boolean
+  nested?: boolean
   noEscape?: boolean
   fullscreen?: boolean
   replaceState?: boolean
@@ -24,8 +25,18 @@ export const emitter = new Emitter()
 
 export const modals = writable<Record<string, Modal>>({})
 
+const getIdsFromHash = (hash: string) => hash.slice(1).split(",").filter(Boolean)
+
+export const modalStack = deriveDeduplicated([page, modals], ([$page, $modals]) => {
+  return getIdsFromHash($page.url.hash)
+    .map(id => $modals[id])
+    .filter(Boolean)
+})
+
 export const modal = deriveDeduplicated([page, modals], ([$page, $modals]) => {
-  return $modals[$page.url.hash.slice(1)]
+  const ids = getIdsFromHash($page.url.hash)
+
+  return $modals[ids.at(-1) || ""]
 })
 
 export const pushModal = (
@@ -35,10 +46,12 @@ export const pushModal = (
 ) => {
   const id = randomId()
   const path = options.path || ""
+  const existingIds = getIdsFromHash(get(page).url.hash)
+  const ids = options.nested ? [...existingIds, id] : [id]
 
   modals.update(assoc(id, {id, component, props, options}))
 
-  goto(path + "#" + id, {replaceState: options.replaceState})
+  goto(path + "#" + ids.join(","), {replaceState: options.replaceState})
 
   return id
 }
@@ -49,7 +62,24 @@ export const pushDrawer = (
   options: ModalOptions = {},
 ) => pushModal(component, props, {...options, drawer: true})
 
+export const popModal = () => {
+  const url = get(page).url
+  const ids = getIdsFromHash(url.hash)
+
+  if (ids.length === 0) {
+    return
+  }
+
+  const next = ids.slice(0, -1).join(",")
+  const hash = next ? `#${next}` : ""
+
+  goto(url.pathname + url.search + hash, {replaceState: true})
+}
+
 export const clearModals = () => {
+  const url = get(page).url
+
+  goto(url.pathname + url.search, {replaceState: true})
   modals.update(always({}))
   emitter.emit("close")
 }

src/lib/components/IconPickerButton.svelte

@@ -3,16 +3,16 @@
   import {between, throttle} from "@welshman/lib"
   import {isMobile} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
-  import Dialog from "@lib/components/Dialog.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import IconPickerModal from "@app/components/IconPickerModal.svelte"
   import IconPickerPopover from "@app/components/IconPickerPopover.svelte"
+  import {pushModal, popModal} from "@app/util/modal"
 
   const {...props} = $props()
 
   const open = () => {
     if (isMobile) {
-      showIconPicker = true
+      pushModal(IconPickerModal, {onSelect: onClick}, {nested: true})
     } else {
       popover?.show()
     }
@@ -20,7 +20,7 @@
 
   const close = () => {
     if (isMobile) {
-      showIconPicker = false
+      popModal()
     } else {
       popover?.hide()
     }
@@ -41,7 +41,6 @@
     }
   })
 
-  let showIconPicker = $state(false)
   let popover: Instance | undefined = $state()
 </script>
 
@@ -56,14 +55,3 @@
     {@render props.children?.()}
   </Button>
 </Tippy>
-
-{#if showIconPicker}
-  <Dialog
-    onClose={close}
-    children={{
-      component: IconPickerModal,
-      props: {
-        onSelect: onClick,
-      },
-    }} />
-{/if}