web/dialogs: create a container for reused code

web/src/components/dialog/DialogContainer.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { tick } from "svelte";
+    import { killDialog } from "$lib/dialogs";
+
+    export let id: string;
+
+    let dialogParent: HTMLDialogElement;
+
+    let open = false;
+    let closing = false;
+
+    export const close = () => {
+        if (dialogParent) {
+            closing = true;
+            open = false;
+            setTimeout(() => {
+                dialogParent.close();
+                killDialog();
+            }, 150);
+        }
+    };
+
+    $: if (dialogParent) {
+        dialogParent.showModal();
+        tick().then(() => {
+            open = true;
+        });
+    }
+</script>
+
+<dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open>
+    <slot></slot>
+</dialog>

web/src/components/dialog/PickerDialog.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { tick } from "svelte";
     import { device } from "$lib/device";
-    import { killDialog } from "$lib/dialogs";
     import { t } from "$lib/i18n/translations";
 
     import type { Optional } from "$lib/types/generic";
     import type { DialogButton } from "$lib/types/dialog";
     import type { DialogPickerItem } from "$lib/types/dialog";
 
+    import DialogContainer from "$components/dialog/DialogContainer.svelte";
+
     import PickerItem from "$components/dialog/PickerItem.svelte";
     import DialogButtons from "$components/dialog/DialogButtons.svelte";
     import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
@@ -28,38 +28,14 @@
         dialogDescription += "desktop";
     }
 
-    let dialogParent: HTMLDialogElement;
+    let close: () => void;
-
-    let closing = false;
-    let open = false;
-
-    const close = () => {
-        if (dialogParent) {
-            closing = true;
-            open = false;
-            setTimeout(() => {
-                dialogParent.close();
-                killDialog();
-            }, 150);
-        }
-    };
-
-    $: if (dialogParent) {
-        dialogParent.showModal();
-        tick().then(() => {
-            open = true;
-        });
-    }
 </script>
 
-<dialog
+<DialogContainer {id} bind:close>
-    id="dialog-{id}"
+    <div
-    bind:this={dialogParent}
+        class="dialog-body picker-dialog"
-    class:closing
+        class:three-columns={items && items.length <= 3}
-    class:open
+    >
-    class:three-columns={items && items.length <= 3}
->
-    <div class="dialog-body picker-dialog">
         <div class="popup-header">
             <div class="popup-title-container">
                 <IconBoxMultiple />
@@ -84,7 +60,7 @@
     </div>
 
     <DialogBackdropClose closeFunc={close} />
-</dialog>
+</DialogContainer>
 
 <style>
     .picker-dialog {

web/src/components/dialog/SmallDialog.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-    import { tick } from "svelte";
-    import { killDialog } from "$lib/dialogs";
-
     import type { Optional } from "$lib/types/generic";
     import type { MeowbaltEmotions } from "$lib/types/meowbalt";
     import type { DialogButton, SmallDialogIcons } from "$lib/types/dialog";
 
+    import DialogContainer from "$components/dialog/DialogContainer.svelte";
+
     import Meowbalt from "$components/misc/Meowbalt.svelte";
     import DialogButtons from "$components/dialog/DialogButtons.svelte";
     import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
@@ -20,31 +19,10 @@
     export let bodySubText = "";
     export let buttons: Optional<DialogButton[]> = undefined;
 
-    let dialogParent: HTMLDialogElement;
+    let close: () => void;
-
-    let closing = false;
-    let open = false;
-
-    const close = () => {
-        if (dialogParent) {
-            closing = true;
-            open = false;
-            setTimeout(() => {
-                dialogParent.close();
-                killDialog();
-            }, 150);
-        }
-    };
-
-    $: if (dialogParent) {
-        dialogParent.showModal();
-        tick().then(() => {
-            open = true;
-        });
-    }
 </script>
 
-<dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open>
+<DialogContainer {id} bind:close>
     <div class="dialog-body small-dialog" class:meowbalt-visible={meowbalt}>
         {#if meowbalt}
             <div class="meowbalt-container">
@@ -77,7 +55,7 @@
     </div>
 
     <DialogBackdropClose closeFunc={close} />
-</dialog>
+</DialogContainer>
 
 <style>
     .small-dialog,
@@ -95,9 +73,7 @@
     .small-dialog {
         text-align: center;
         max-width: 340px;
-        width: calc(
+        width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
-            100% - var(--padding) - var(--dialog-padding) * 2
-        );
         max-height: 50%;
         margin: calc(var(--padding) / 2);
     }