From 778190b2b3b541456122c21443612022a9fc6dc0 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 27 Jul 2024 14:24:24 +0600
Subject: [PATCH] web/dialogs: create a container for reused code

---
 .../components/dialog/DialogContainer.svelte  | 33 +++++++++++++++
 web/src/components/dialog/PickerDialog.svelte | 42 ++++---------------
 web/src/components/dialog/SmallDialog.svelte  | 36 +++-------------
 3 files changed, 48 insertions(+), 63 deletions(-)
 create mode 100644 web/src/components/dialog/DialogContainer.svelte

diff --git a/web/src/components/dialog/DialogContainer.svelte b/web/src/components/dialog/DialogContainer.svelte
new file mode 100644
index 00000000..0827bc19
--- /dev/null
+++ b/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>
diff --git a/web/src/components/dialog/PickerDialog.svelte b/web/src/components/dialog/PickerDialog.svelte
index 34d8d0b7..ce7b55f5 100644
--- a/web/src/components/dialog/PickerDialog.svelte
+++ b/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 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;
-        });
-    }
+    let close: () => void;
 </script>
 
-<dialog
-    id="dialog-{id}"
-    bind:this={dialogParent}
-    class:closing
-    class:open
-    class:three-columns={items && items.length <= 3}
->
-    <div class="dialog-body picker-dialog">
+<DialogContainer {id} bind:close>
+    <div
+        class="dialog-body picker-dialog"
+        class:three-columns={items && items.length <= 3}
+    >
         <div class="popup-header">
             <div class="popup-title-container">
                 <IconBoxMultiple />
@@ -84,7 +60,7 @@
     </div>
 
     <DialogBackdropClose closeFunc={close} />
-</dialog>
+</DialogContainer>
 
 <style>
     .picker-dialog {
diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index 0b61d08e..e6771132 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/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 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;
-        });
-    }
+    let close: () => void;
 </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(
-            100% - var(--padding) - var(--dialog-padding) * 2
-        );
+        width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
         max-height: 50%;
         margin: calc(var(--padding) / 2);
     }