web/dialogs: move buttons to own component & add optional timeout

web/src/components/dialog/DialogButton.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { onDestroy } from "svelte";
+    import type { DialogButton } from "$lib/types/dialog";
+
+    export let button: DialogButton;
+    export let closeFunc: () => void;
+
+    let disabled = false;
+    let seconds = 0;
+
+    if (button.timeout) {
+        disabled = true;
+        seconds = Math.round(button.timeout / 1000);
+
+        let interval = setInterval(() => {
+            seconds--;
+            if (seconds <= 0) {
+                clearInterval(interval);
+                disabled = false;
+            }
+        }, 1000);
+
+        onDestroy(() => clearInterval(interval));
+    }
+</script>
+
+<button
+    class="button elevated popup-button {button.color}"
+    class:color={button.color}
+    class:active={button.main}
+    {disabled}
+    on:click={async () => {
+        await button.action();
+        closeFunc();
+    }}
+>
+    {button.text}{seconds ? ` (${seconds})` : ""}
+</button>
+
+<style>
+    .popup-button {
+        width: 100%;
+        height: 40px;
+        transition: 0.2s opacity;
+    }
+
+    .popup-button.red {
+        background-color: var(--red);
+        color: var(--white);
+    }
+
+    .popup-button[disabled] {
+        opacity: 0.6;
+    }
+</style>

web/src/components/dialog/DialogButtons.svelte

@@ -1,23 +1,14 @@
 <script lang="ts">
-    import type { DialogButton } from "$lib/types/dialog";
+    import type { DialogButton as DialogButtonType } from "$lib/types/dialog";
+    import DialogButton from "$components/dialog/DialogButton.svelte";
 
-    export let buttons: DialogButton[];
+    export let buttons: DialogButtonType[];
     export let closeFunc: () => void;
 </script>
 
 <div class="popup-buttons">
     {#each buttons as button}
-        <button
+        <DialogButton {button} {closeFunc} />
-            class="button elevated popup-button {button.color}"
-            class:color={button.color}
-            class:active={button.main}
-            on:click={async () => {
-                await button.action();
-                closeFunc();
-            }}
-        >
-            {button.text}
-        </button>
     {/each}
 </div>
 
@@ -31,14 +22,4 @@
         border-radius: var(--border-radius);
         min-height: 40px;
     }
-
-    .popup-button {
-        width: 100%;
-        height: 40px;
-    }
-
-    .popup-button.red {
-        background-color: var(--red);
-        color: var(--white);
-    }
 </style>

web/src/lib/types/dialog.ts

@@ -4,6 +4,7 @@ export type DialogButton = {
     text: string,
     color?: "red",
     main: boolean,
+    timeout?: number, // milliseconds
     action: () => unknown | Promise<unknown>
 }