From 53eb052fe646393b34ac0ae6ae55074f58a0ccb5 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 9 Sep 2024 00:10:21 +0600
Subject: [PATCH] web/SavingDialog: add ios saving tutorial

---
 web/i18n/en/a11y/save.json                    |   5 +-
 web/i18n/en/save.json                         |  11 +-
 web/src/components/dialog/SavingDialog.svelte |  23 ++-
 .../components/dialog/SavingTutorial.svelte   | 160 ++++++++++++++++++
 web/src/lib/env.ts                            |   7 +-
 5 files changed, 194 insertions(+), 12 deletions(-)
 create mode 100644 web/src/components/dialog/SavingTutorial.svelte

diff --git a/web/i18n/en/a11y/save.json b/web/i18n/en/a11y/save.json
index deaf0fe1..3a92de64 100644
--- a/web/i18n/en/a11y/save.json
+++ b/web/i18n/en/a11y/save.json
@@ -5,5 +5,8 @@
     "download.think": "processing the link...",
     "download.check": "verifying download...",
     "download.done": "downloading done",
-    "download.error": "downloading error"
+    "download.error": "downloading error",
+
+    "tutorial.shortcut.photos": "add photos shortcut",
+    "tutorial.shortcut.files": "add files shortcut"
 }
diff --git a/web/i18n/en/save.json b/web/i18n/en/save.json
index fee6f9f1..79a65dfb 100644
--- a/web/i18n/en/save.json
+++ b/web/i18n/en/save.json
@@ -10,5 +10,14 @@
     "services.title": "supported services",
     "services.title_show": "show supported services",
     "services.title_hide": "hide supported services",
-    "services.disclaimer": "cobalt is not affiliated with any of the services listed above."
+    "services.disclaimer": "cobalt is not affiliated with any of the services listed above.",
+
+    "tutorial.title": "how to save on ios?",
+    "tutorial.intro": "to save media conveniently on ios, you'll need to use a companion siri shortcut from the share sheet.",
+    "tutorial.step.1": "add companion siri shortcuts:",
+    "tutorial.step.2": "press the \"share\" button in cobalt's saving dialog.",
+    "tutorial.step.3": "select the respective shortcut in the share sheet.",
+    "tutorial.outro": "these shortcuts will work only from the cobalt app, sharing links from other apps will not work.",
+    "tutorial.shortcut.photos": "to photos",
+    "tutorial.shortcut.files": "to files"
 }
diff --git a/web/src/components/dialog/SavingDialog.svelte b/web/src/components/dialog/SavingDialog.svelte
index e430bee9..16c57142 100644
--- a/web/src/components/dialog/SavingDialog.svelte
+++ b/web/src/components/dialog/SavingDialog.svelte
@@ -8,6 +8,7 @@
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
     import DialogButtons from "$components/dialog/DialogButtons.svelte";
+    import SavingTutorial from "$components/dialog/SavingTutorial.svelte";
     import VerticalActionButton from "$components/buttons/VerticalActionButton.svelte";
 
     import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
@@ -15,7 +16,6 @@
     import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
 
     import CopyIcon from "$components/misc/CopyIcon.svelte";
-
     export let id: string;
     export let url: string;
     export let bodyText: string = "";
@@ -37,6 +37,7 @@
         <div class="meowbalt-container">
             <Meowbalt emotion="question" />
         </div>
+
         <div class="dialog-inner-container">
             <div class="popup-header">
                 <IconFileDownload />
@@ -83,13 +84,17 @@
                     {$t("button.copy")}
                 </VerticalActionButton>
             </div>
-        </div>
 
-        {#if bodyText}
-            <div class="body-text">
-                {bodyText}
-            </div>
-        {/if}
+            {#if device.is.iOS}
+                <SavingTutorial />
+            {/if}
+
+            {#if bodyText}
+                <div class="body-text">
+                    {bodyText}
+                </div>
+            {/if}
+        </div>
 
         <DialogButtons
             buttons={[
@@ -121,7 +126,7 @@
     .popup-body {
         max-width: 340px;
         width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
-        max-height: 50%;
+        max-height: 70%;
         margin: calc(var(--padding) / 2);
     }
 
@@ -159,7 +164,7 @@
         display: flex;
         flex-direction: row;
         gap: calc(var(--padding) / 2);
-        overflow-x: scroll;
+        position: relative;
     }
 
     .body-text {
diff --git a/web/src/components/dialog/SavingTutorial.svelte b/web/src/components/dialog/SavingTutorial.svelte
new file mode 100644
index 00000000..c0ce2983
--- /dev/null
+++ b/web/src/components/dialog/SavingTutorial.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+    import { siriShortcuts } from "$lib/env";
+    import { t } from "$lib/i18n/translations";
+
+    import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
+    import IconFlower from "@tabler/icons-svelte/IconFlower.svelte";
+    import IconFolder from "@tabler/icons-svelte/IconFolder.svelte";
+
+    let tutorialExpanded = false;
+</script>
+
+<div id="saving-tutorial" class:expanded={tutorialExpanded}>
+    <button
+        id="tutorial-button"
+        class="button elevated"
+        on:click={() => {
+            tutorialExpanded = !tutorialExpanded;
+        }}
+    >
+        <div class="expand-icon">
+            <IconPlus />
+        </div>
+        {$t("save.tutorial.title")}
+    </button>
+
+    {#if tutorialExpanded}
+        <div class="body-text tutorial-body">
+            <div>
+                {$t("save.tutorial.intro")}
+            </div>
+
+            <div class="numbered-list">
+                <li>
+                    {$t("save.tutorial.step.1")}
+                    <div class="shortcut-list">
+                        <a
+                            class="button elevated shortcut"
+                            href={siriShortcuts.photos}
+                            aria-label={$t(
+                                "a11y.save.tutorial.shortcut.photos"
+                            )}
+                        >
+                            <IconFlower />
+                            {$t("save.tutorial.shortcut.photos")}
+                        </a>
+                        <a
+                            class="button elevated shortcut"
+                            href={siriShortcuts.files}
+                            aria-label={$t(
+                                "a11y.save.tutorial.shortcut.files"
+                            )}
+                        >
+                            <IconFolder />
+                            {$t("save.tutorial.shortcut.files")}
+                        </a>
+                    </div>
+                </li>
+                <li>
+                    {$t("save.tutorial.step.2")}
+                </li>
+                <li>
+                    {$t("save.tutorial.step.3")}
+                </li>
+            </div>
+
+            <div>
+                {$t("save.tutorial.outro")}
+            </div>
+        </div>
+    {/if}
+</div>
+
+<style>
+    #saving-tutorial {
+        display: flex;
+        flex-direction: column;
+        background: var(--button-elevated);
+        border-radius: var(--border-radius);
+    }
+
+    #tutorial-button {
+        font-size: 13px;
+        width: 100%;
+        justify-content: flex-start;
+        padding: 8px;
+    }
+
+    .expand-icon {
+        height: 18px;
+        width: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .expand-icon :global(svg) {
+        height: 16px;
+        width: 16px;
+        stroke-width: 2px;
+        color: var(--secondary);
+        will-change: transform;
+    }
+
+    .expanded .expand-icon {
+        transform: rotate(45deg);
+    }
+
+    .tutorial-body *:not(.shortcut) {
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 1.5;
+        white-space: pre-wrap;
+        user-select: text;
+        -webkit-user-select: text;
+    }
+
+    .tutorial-body {
+        color: var(--secondary);
+        padding: var(--padding);
+        padding-top: 6px;
+    }
+
+    .tutorial-body,
+    .numbered-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--padding);
+    }
+
+    .numbered-list {
+        list-style-type: decimal;
+    }
+
+    .numbered-list li {
+        margin-block: 0;
+    }
+
+    .shortcut-list {
+        display: flex;
+        padding-top: 6px;
+        gap: 6px;
+    }
+
+    .shortcut {
+        flex-direction: column;
+        background: var(--button-elevated-hover);
+        width: 100%;
+        gap: 3px;
+        text-decoration: none;
+        font-size: 13px;
+        padding: 8px;
+    }
+
+    .shortcut :global(svg) {
+        height: 21px;
+        width: 21px;
+        stroke-width: 1.5px;
+        stroke: var(--secondary);
+    }
+</style>
diff --git a/web/src/lib/env.ts b/web/src/lib/env.ts
index be24bb27..0f5a0970 100644
--- a/web/src/lib/env.ts
+++ b/web/src/lib/env.ts
@@ -43,7 +43,12 @@ const donate = {
     }
 };
 
+const siriShortcuts = {
+    photos: "https://www.icloud.com/shortcuts/14e9aebf04b24156acc34ceccf7e6fcd",
+    files: "https://www.icloud.com/shortcuts/2134cd9d4d6b41448b2201f933542b2e",
+}
+
 const apiURL = "https://api.cobalt.tools";
 
-export { donate, apiURL, contacts, partners };
+export { donate, apiURL, contacts, partners, siriShortcuts };
 export default variables;