From 0b06299da085934e63b99c69f6dd04912fde0ec3 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Sat, 12 Oct 2024 17:36:28 +0000
Subject: [PATCH] web/DialogButton: add "link" buttons

---
 web/src/components/dialog/DialogButton.svelte | 43 +++++++++++++------
 web/src/lib/types/dialog.ts                   |  3 +-
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/web/src/components/dialog/DialogButton.svelte b/web/src/components/dialog/DialogButton.svelte
index f977cc6a..69aaf722 100644
--- a/web/src/components/dialog/DialogButton.svelte
+++ b/web/src/components/dialog/DialogButton.svelte
@@ -23,21 +23,36 @@
         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>
-
+{#if button.link}
+    <a
+        class="button elevated link-button"
+        class:color={button.color}
+        class:active={button.main}
+        href={button.link}
+    >
+        {button.text}
+    </a>
+{:else}
+    <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>
+{/if}
 <style>
+    .link-button {
+        text-decoration: none;
+        font-weight: 500;
+        width: 100%;
+    }
+
     .popup-button {
         width: 100%;
         height: 40px;
diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts
index 69e27b5d..c0721f97 100644
--- a/web/src/lib/types/dialog.ts
+++ b/web/src/lib/types/dialog.ts
@@ -6,7 +6,8 @@ export type DialogButton = {
     color?: "red",
     main: boolean,
     timeout?: number, // milliseconds
-    action: () => unknown | Promise<unknown>
+    action: () => unknown | Promise<unknown>,
+    link?: string
 }
 
 export type SmallDialogIcons = "warn-red";