From 3549a78be53c1fa18e3e0057cd69cad5aaad9561 Mon Sep 17 00:00:00 2001
From: Karl Ludwig Weise <ludwig@ludwigweise.de>
Date: Wed, 17 Jun 2026 19:42:49 +0200
Subject: [PATCH] Added feedback for value being copied successfully

---
 .../ui/appointment-details/copy-button.svelte | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/ui/appointment-details/copy-button.svelte b/src/lib/components/ui/appointment-details/copy-button.svelte
index 6a55c34..d6c869f 100644
--- a/src/lib/components/ui/appointment-details/copy-button.svelte
+++ b/src/lib/components/ui/appointment-details/copy-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
   import { cn } from "$lib/utils";
-  import { Copy } from "@lucide/svelte";
+  import { Check, Copy } from "@lucide/svelte";
 
   let {
     value,
@@ -10,17 +10,32 @@
     value: string;
     class?: string;
   } = $props();
+  let isCopied = $state(false);
+
+  const copy = (
+    e:
+      | (MouseEvent & {
+          currentTarget: EventTarget & HTMLButtonElement;
+        })
+      | (MouseEvent & {
+          currentTarget: EventTarget & HTMLAnchorElement;
+        }),
+  ) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(value);
+    isCopied = true;
+    setTimeout(() => {
+      isCopied = false;
+    }, 1500);
+  };
 </script>
 
 {#if value}
-  <Button
-    variant="ghost"
-    onclick={(e) => {
-      e.stopPropagation();
-      navigator.clipboard.writeText(value);
-    }}
-    class={cn("size-2 rounded-sm px-px", className)}
-  >
-    <Copy />
+  <Button variant="ghost" onclick={copy} class={cn("size-2 rounded-sm px-px", className)}>
+    {#if isCopied}
+      <Check />
+    {:else}
+      <Copy />
+    {/if}
   </Button>
 {/if}