From 0d3044c5e6b33f1a07cfe520e085146282fe1b58 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 5 Mar 2025 18:07:46 +0600
Subject: [PATCH] web: add haptics for all copy actions

& prevent spamming the copy action along with haptic feedback :3

should probably unify all of this cuz this is really messy
---
 web/src/components/dialog/SavingDialog.svelte       |  8 ++++++--
 web/src/components/donate/DonateAltItem.svelte      |  8 ++++++--
 web/src/components/donate/DonateShareCard.svelte    |  8 ++++++--
 web/src/components/misc/SectionHeading.svelte       | 10 +++++++---
 web/src/components/settings/SettingsCategory.svelte |  2 --
 web/src/lib/haptics.ts                              | 11 +++++++++--
 6 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/web/src/components/dialog/SavingDialog.svelte b/web/src/components/dialog/SavingDialog.svelte
index 03127353..05b9b083 100644
--- a/web/src/components/dialog/SavingDialog.svelte
+++ b/web/src/components/dialog/SavingDialog.svelte
@@ -2,6 +2,7 @@
     import { t } from "$lib/i18n/translations";
 
     import { device } from "$lib/device";
+    import { hapticConfirm } from "$lib/haptics";
     import {
         copyURL,
         openURL,
@@ -101,8 +102,11 @@
                         fill
                         elevated
                         click={async () => {
-                            copyURL(url);
-                            copied = true;
+                            if (!copied) {
+                                copyURL(url);
+                                hapticConfirm();
+                                copied = true;
+                            }
                         }}
                         ariaLabel={copied ? $t("button.copied") : ""}
                     >
diff --git a/web/src/components/donate/DonateAltItem.svelte b/web/src/components/donate/DonateAltItem.svelte
index cbc8e684..4724e249 100644
--- a/web/src/components/donate/DonateAltItem.svelte
+++ b/web/src/components/donate/DonateAltItem.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
+    import { hapticConfirm } from "$lib/haptics";
     import { copyURL, openURL } from "$lib/download";
 
     import CopyIcon from "$components/misc/CopyIcon.svelte";
@@ -27,8 +28,11 @@
         })}
         on:click={() => {
             if (type === "copy") {
-                copied = true;
-                copyURL(address);
+                if (!copied) {
+                    copyURL(address);
+                    hapticConfirm();
+                    copied = true;
+                }
             } else {
                 openURL(address);
             }
diff --git a/web/src/components/donate/DonateShareCard.svelte b/web/src/components/donate/DonateShareCard.svelte
index 62727b58..704d2c4f 100644
--- a/web/src/components/donate/DonateShareCard.svelte
+++ b/web/src/components/donate/DonateShareCard.svelte
@@ -3,6 +3,7 @@
     import { device } from "$lib/device";
     import locale from "$lib/i18n/locale";
     import { t } from "$lib/i18n/translations";
+    import { hapticConfirm } from "$lib/haptics";
 
     import { openURL, copyURL, shareURL } from "$lib/download";
 
@@ -51,8 +52,11 @@
                 id="action-button-copy"
                 class="action-button"
                 on:click={async () => {
-                    copyURL(cobaltUrl);
-                    copied = true;
+                    if (!copied) {
+                        copyURL(cobaltUrl);
+                        hapticConfirm();
+                        copied = true;
+                    }
                 }}
                 aria-label={copied ? $t("button.copied") : ""}
             >
diff --git a/web/src/components/misc/SectionHeading.svelte b/web/src/components/misc/SectionHeading.svelte
index bb90550e..85cfd0dd 100644
--- a/web/src/components/misc/SectionHeading.svelte
+++ b/web/src/components/misc/SectionHeading.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
-    import { t } from "$lib/i18n/translations";
     import { copyURL } from "$lib/download";
+    import { t } from "$lib/i18n/translations";
+    import { hapticConfirm } from "$lib/haptics";
 
     import CopyIcon from "$components/misc/CopyIcon.svelte";
 
@@ -40,8 +41,11 @@
                 ? $t("button.copied")
                 : $t(`button.copy${copyData ? "" : ".section"}`)}
             on:click={() => {
-                copied = true;
-                copyURL(copyData || sectionURL);
+                if (!copied) {
+                    copyURL(copyData || sectionURL);
+                    hapticConfirm();
+                    copied = true;
+                }
             }}
         >
             <CopyIcon check={copied} regularIcon={!!copyData} />
diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 689316d6..ef3e2e29 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { page } from "$app/stores";
-    import { copyURL as _copyURL } from "$lib/download";
-
     import SectionHeading from "$components/misc/SectionHeading.svelte";
 
     export let title: string;
diff --git a/web/src/lib/haptics.ts b/web/src/lib/haptics.ts
index 22937832..4b8d9026 100644
--- a/web/src/lib/haptics.ts
+++ b/web/src/lib/haptics.ts
@@ -2,10 +2,10 @@ import { device } from "$lib/device";
 
 // not sure if vibrations feel the same on android,
 // so they're enabled only on ios 18+ for now
-const shouldVibrate = device.is.modernIOS;
+const useHaptics = device.is.modernIOS;
 
 export const hapticSwitch = () => {
-    if (!shouldVibrate) return;
+    if (!useHaptics) return;
 
     try {
         const label = document.createElement("label");
@@ -24,3 +24,10 @@ export const hapticSwitch = () => {
         // ignore
     }
 }
+
+export const hapticConfirm = () => {
+    if (!useHaptics) return;
+
+    hapticSwitch();
+    setTimeout(() => hapticSwitch(), 120);
+}