web/dialogs: add saving method dialog

web/i18n/en/dialog.json

@@ -4,6 +4,9 @@
     "button.reset": "reset",
     "button.done": "done",
     "button.downloadAudio": "download audio",
+    "button.download": "download",
+    "button.share": "share",
+    "button.copy": "copy",
 
     "reset.title": "reset all settings?",
     "reset.body": "are you sure you want to reset all settings? this action is immediate and irreversible.",
@@ -11,5 +14,7 @@
     "picker.title": "select what to save",
     "picker.description.desktop": "click an item to save it. images can also be saved via the right click menu.",
     "picker.description.phone": "press an item to save it. images can also be saved with a long press.",
-    "picker.description.ios": "press an item to save it with a shortcut. images can also be saved with a long press."
+    "picker.description.ios": "press an item to save it with a shortcut. images can also be saved with a long press.",
+
+    "saving.title": "choose how to save"
 }

web/src/components/buttons/VerticalActionButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    export let id: string;
+    export let click = () => {
+        alert("no function assigned");
+    };
+    export let fill = false;
+    export let elevated = false;
+</script>
+
+<button id="button-{id}" class="button vertical" class:fill class:elevated on:click={click}>
+    <slot></slot>
+</button>
+
+<style>
+    .button.vertical {
+        flex-direction: column;
+        line-height: 1;
+        padding: var(--padding);
+        gap: calc(var(--padding) / 2);
+    }
+
+    .button.vertical.fill {
+        width: 100%;
+        padding: var(--padding) 0;
+    }
+
+    .button.vertical :global(svg) {
+        stroke-width: 1.8px;
+        color: var(--secondary);
+    }
+</style>

web/src/components/dialog/DialogHolder.svelte

@@ -3,6 +3,7 @@
 
     import SmallDialog from "$components/dialog/SmallDialog.svelte";
     import PickerDialog from "$components/dialog/PickerDialog.svelte";
+    import SavingDialog from "$components/dialog/SavingDialog.svelte";
 
     $: backdropVisible = $dialogs.length > 0;
 </script>
@@ -10,10 +11,13 @@
 <div id="dialog-holder">
     {#each $dialogs as dialog}
         {@const { type, ...data } = dialog}
+
         {#if type === "small"}
             <SmallDialog {...data} />
-        {:else if dialog.type === "picker"}
+        {:else if type === "picker"}
             <PickerDialog {...data} />
+        {:else if type === "saving"}
+            <SavingDialog {...data} />
         {/if}
     {/each}
     <div id="dialog-backdrop" class:visible={backdropVisible}></div>

web/src/components/dialog/SavingDialog.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import { copyURL, openURL, shareURL } from "$lib/download";
+
+    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";
+    import VerticalActionButton from "$components/buttons/VerticalActionButton.svelte";
+
+    import IconCopy from "@tabler/icons-svelte/IconCopy.svelte";
+    import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
+    import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
+    import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
+
+    export let id: string;
+    export let url: string;
+
+    let close: () => void;
+</script>
+
+<DialogContainer {id} bind:close>
+    <div class="dialog-body popup-body">
+        <div class="meowbalt-container">
+            <Meowbalt emotion="question" />
+        </div>
+        <div class="dialog-inner-container">
+            <div class="popup-header">
+                <IconFileDownload />
+                <h2 class="popup-title" tabindex="-1">
+                    {$t("dialog.saving.title")}
+                </h2>
+            </div>
+            <div class="action-buttons">
+                <VerticalActionButton
+                    id="save-download"
+                    fill
+                    elevated
+                    click={() => openURL(url)}
+                >
+                    <IconDownload />
+                    {$t("dialog.button.download")}
+                </VerticalActionButton>
+                <VerticalActionButton
+                    id="save-share"
+                    fill
+                    elevated
+                    click={async () => await shareURL(url)}
+                >
+                    <IconShare2 />
+                    {$t("dialog.button.share")}
+                </VerticalActionButton>
+                <VerticalActionButton
+                    id="save-copy"
+                    fill
+                    elevated
+                    click={async () => copyURL(url)}
+                >
+                    <IconCopy />
+                    {$t("dialog.button.copy")}
+                </VerticalActionButton>
+            </div>
+        </div>
+        <DialogButtons
+            buttons={[
+                {
+                    text: $t("dialog.button.done"),
+                    main: true,
+                    action: () => {},
+                },
+            ]}
+            closeFunc={close}
+        />
+    </div>
+
+    <DialogBackdropClose closeFunc={close} />
+</DialogContainer>
+
+<style>
+    .popup-body,
+    .dialog-inner-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--padding);
+    }
+
+    .dialog-inner-container {
+        overflow-y: scroll;
+        gap: 8px;
+        width: 100%;
+    }
+
+    .popup-body {
+        text-align: center;
+        max-width: 340px;
+        width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
+        max-height: 50%;
+        margin: calc(var(--padding) / 2);
+    }
+
+    .meowbalt-container {
+        position: absolute;
+        top: -126px;
+        right: 0;
+        /* simulate meowbalt being behind the popup */
+        clip-path: inset(0px 0px 14px 0px);
+    }
+
+    .popup-header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: calc(var(--padding) / 2);
+        color: var(--secondary);
+    }
+
+    .popup-header :global(svg) {
+        height: 21px;
+        width: 21px;
+    }
+
+    .popup-title {
+        color: var(--secondary);
+        font-size: 19px;
+    }
+
+    .popup-title:focus-visible {
+        box-shadow: none !important;
+    }
+
+    .action-buttons {
+        display: flex;
+        flex-direction: row;
+        gap: calc(var(--padding) / 2);
+        overflow-x: scroll;
+    }
+</style>

web/src/components/misc/Meowbalt.svelte

@@ -21,11 +21,14 @@
         object-fit: cover;
     }
 
-    .think,
     .error {
         height: 160px;
     }
 
+    .question {
+        height: 140px;
+    }
+
     .error {
         margin-left: 25px;
     }

web/src/lib/download.ts

@@ -1,9 +1,41 @@
-import { device } from "$lib/device";
+import { get } from "svelte/store";
 
-export const downloadFile = (url: string) => {
-    if (device.is.iOS) {
-        return navigator?.share({ url }).catch(() => {});
-    } else {
+import { app, device } from "$lib/device";
+import settings from "$lib/state/settings";
+
+import { createDialog } from "$lib/dialogs";
+
+export const openURL = (url: string) => {
     return window.open(url, "_blank");
 }
-};
+
+export const shareURL = async (url: string) => {
+    try {
+        return await navigator?.share({ url });
+    } catch {
+        return false;
+    }
+}
+
+export const copyURL = async (url: string) => {
+    try {
+        return await navigator?.clipboard.writeText(url);
+    } catch {
+        return false;
+    }
+}
+
+export const downloadFile = (url: string) => {
+    const savingPreference = get(settings).save.downloadPopup;
+    if (savingPreference) {
+        createDialog({
+            type: "saving",
+            id: "saving",
+            url
+        })
+    } else if (device.is.iOS && app.is.installed) {
+        return shareURL(url);
+    } else {
+        return openURL(url);
+    }
+}

web/src/lib/types/dialog.ts

@@ -17,7 +17,6 @@ export type DialogPickerItem = {
 
 type Dialog = {
     id: string,
-    buttons?: DialogButton[],
 };
 
 type SmallDialog = Dialog & {
@@ -27,11 +26,18 @@ type SmallDialog = Dialog & {
     title?: string,
     bodyText?: string,
     bodySubText?: string,
+    buttons?: DialogButton[],
 };
 
 type PickerDialog = Dialog & {
     type: "picker",
     items?: DialogPickerItem[],
+    buttons?: DialogButton[],
 };
 
-export type DialogInfo = SmallDialog | PickerDialog;
+type SavingDialog = Dialog & {
+    type: "saving",
+    url: string,
+};
+
+export type DialogInfo = SmallDialog | PickerDialog | SavingDialog;