From 90ca53c2a5ea09b1cbbe59e648182263d2ce9090 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Thu, 20 Feb 2025 20:45:16 +0300
Subject: [PATCH] feat: show check icon and toast when copied

---
 src/lib/sections/about/Vertd.svelte | 55 +++++++++++++++++------------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/lib/sections/about/Vertd.svelte b/src/lib/sections/about/Vertd.svelte
index 8f97b4f..61b914c 100644
--- a/src/lib/sections/about/Vertd.svelte
+++ b/src/lib/sections/about/Vertd.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
-	import { PiggyBankIcon, CopyIcon } from "lucide-svelte";
+	import { PiggyBankIcon, CopyIcon, CheckIcon } from "lucide-svelte";
 	import HotMilk from "$lib/assets/hotmilk.svg?component";
 	import { DISCORD_URL } from "$lib/consts";
 	import { error } from "$lib/logger";
+	import { addToast } from "$lib/store/ToastProvider";
+
+	let copied = false;
+	let timeoutId: number | undefined;
 
 	function copyToClipboard() {
 		try {
 			navigator.clipboard.writeText("hello@vert.sh");
-			alert("Email copied to clipboard!");
+			copied = true;
+			addToast("success", "Email copied to clipboard!");
+
+			if (timeoutId) clearTimeout(timeoutId);
+			timeoutId = setTimeout(() => (copied = false), 2000);
 		} catch (err) {
 			error(`Failed to copy email: ${err}`);
 		}
@@ -34,27 +42,30 @@
 				<HotMilk class="w-full h-16" />
 			</a>
 		</div>
-		<div>
-			<p class="text-muted">
-				Want to support us? Contact a developer in the <a
-					href={DISCORD_URL}
-					target="_blank">Discord</a
+		<p class="text-muted">
+			Want to support us? Contact a developer in the <a
+				href={DISCORD_URL}
+				target="_blank">Discord</a
+			>
+			server, or send an email to
+			<span class="inline-block mx-[2px] relative top-[2px]">
+				<button
+					id="email"
+					class="flex items-center gap-[6px] cursor-pointer"
+					onclick={copyToClipboard}
+					aria-label="Copy email to clipboard"
 				>
-				server, or send an email to
-				<span class="inline-block mx-[2px] relative top-[2px]"
-					><button
-						id="email"
-						class="flex items-center gap-2 cursor-pointer"
-						onclick={copyToClipboard}
-						aria-label="Copy email to clipboard"
-					>
-						<CopyIcon size="14"></CopyIcon> hello@vert.sh
-					</button></span
-				>!
-			</p>
-		</div>
-	</div></Panel
->
+					{#if copied}
+						<CheckIcon size="14"></CheckIcon>
+					{:else}
+						<CopyIcon size="14"></CopyIcon>
+					{/if}
+					hello@vert.sh
+				</button>
+			</span>!
+		</p>
+	</div>
+</Panel>
 
 <style>
 	#email {