web: dialog system & basic small dialog

web/src/components/dialog/DialogHolder.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import SmallDialog from "./SmallDialog.svelte";
+    import dialogs from "$lib/dialogs";
+</script>
+
+<div id="dialog-holder" aria-hidden="true">
+    {#each $dialogs as dialog}
+        {#if dialog.type === "small"}
+            <SmallDialog
+                id={dialog.id}
+                title={dialog.title}
+                bodyText={dialog.bodyText}
+                bodySubText={dialog.bodySubText}
+                buttons={dialog.buttons}
+            />
+        {/if}
+    {/each}
+</div>
+
+<style>
+    #dialog-holder {
+        position: absolute;
+        padding-top: env(safe-area-inset-bottom);
+        height: calc(100%);
+        width: 100%;
+        pointer-events: none;
+    }
+</style>

web/src/components/dialog/SmallDialog.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { killDialog } from "$lib/dialogs";
+    import type { DialogButton } from "$lib/types/dialog";
+
+    export let id: string;
+    export let title: string = "";
+    export let bodyText: string = "";
+    export let bodySubText: string = "";
+    export let buttons: DialogButton[];
+
+    let dialogParent: HTMLDialogElement;
+
+    const close = () => {
+        if (dialogParent) {
+            dialogParent.close();
+            killDialog();
+        }
+    }
+
+    $: if (dialogParent) {
+        dialogParent.showModal();
+    }
+</script>
+
+<dialog id="dialog-{id}" bind:this={dialogParent} class="small-dialog">
+    <div class="popup-header">
+        <h2>{title}</h2>
+    </div>
+    <div class="popup-body">
+        {bodyText}
+        {#if bodySubText}
+            <div class="subtext">{bodySubText}</div>
+        {/if}
+    </div>
+    <div class="popup-buttons">
+        {#each buttons as button}
+            <button
+                on:click={
+                    (async() => {
+                        await button.action();
+                        close();
+                    })
+                }
+            >
+                {button.text}
+            </button>
+        {/each}
+    </div>
+</dialog>
+
+<style>
+    .small-dialog {
+        max-width: 375px;
+    }
+</style>