flotilla/src/app/modal.ts

import type {Component} from "svelte"
import {get, writable} from "svelte/store"
import {randomId, always, assoc, Emitter} from "@welshman/lib"
import {deriveDeduplicated} from "@welshman/store"
import {page} from "$app/stores"
import type {DialogSize} from "@lib/components/Dialog.svelte"

export type ModalOptions = {
  drawer?: boolean
  nested?: boolean
  noEscape?: boolean
  fullscreen?: boolean
  size?: DialogSize
  replaceState?: boolean
  path?: string
}

export type Modal = {
  id: string
  component: Component
  props: Record<string, any>
  options: ModalOptions
}

export const emitter = new Emitter()

export const modals = writable<Record<string, Modal>>({})

const getIdsFromHash = (hash: string) => hash.slice(1).split(",").filter(Boolean)

// The modal stack lives in the url hash, but it is written with the History API directly rather
// than SvelteKit's `goto`. A programmatic hash `goto` runs a full navigation, which re-renders the
// whole layout tree and (in dev) leaves a second, orphaned app shell mounted; a History update does
// not navigate. `history.state` is carried through untouched, so SvelteKit's own popstate handler
// treats a back as a same-entry hash change and does nothing, while this store drives the open
// modals.
const modalHash = writable(typeof location === "undefined" ? "" : location.hash)

if (typeof window !== "undefined") {
  window.addEventListener("popstate", () => modalHash.set(location.hash))
}

const setModalHash = (hash: string, replace: boolean) => {
  const {pathname, search} = get(page).url
  const url = pathname + search + hash

  if (replace) {
    history.replaceState(history.state, "", url)
  } else {
    history.pushState(history.state, "", url)
  }

  modalHash.set(hash)
}

export const modalStack = deriveDeduplicated([modalHash, modals], ([$hash, $modals]) => {
  return getIdsFromHash($hash)
    .map(id => $modals[id])
    .filter(Boolean)
})

export const modal = deriveDeduplicated([modalHash, modals], ([$hash, $modals]) => {
  const ids = getIdsFromHash($hash)

  return $modals[ids.at(-1) || ""]
})

export const pushModal = (
  component: Component<any>,
  props: Record<string, any> = {},
  options: ModalOptions = {},
) => {
  const id = randomId()
  const existingIds = getIdsFromHash(get(modalHash))
  const ids = options.nested ? [...existingIds, id] : [id]

  modals.update(assoc(id, {id, component, props, options}))

  setModalHash("#" + ids.join(","), Boolean(options.replaceState))

  return id
}

export const pushDrawer = (
  component: Component<any>,
  props: Record<string, any> = {},
  options: ModalOptions = {},
) => pushModal(component, props, {...options, drawer: true})

export const popModal = () => {
  const ids = getIdsFromHash(get(modalHash))

  if (ids.length === 0) {
    return
  }

  const next = ids.slice(0, -1).join(",")

  setModalHash(next ? `#${next}` : "", true)
}

export const clearModals = () => {
  setModalHash("", true)
  modals.update(always({}))
  emitter.emit("close")
}