From 87ff5aab4474833ab79ffdb99b6e26d17adade6b Mon Sep 17 00:00:00 2001
From: david_bai <david_bai@example.com>
Date: Sat, 28 Mar 2026 10:36:34 +0800
Subject: [PATCH] feat: add visual feedback for copy buttons in ShareCard

Add check icon feedback when copying RoomID and URL to clipboard:
- RoomID copy button now shows check icon for 2 seconds after copy
- URL copy button now shows check icon for 2 seconds after copy
- Consistent with existing QR code copy button behavior
---
 .../components/ClipboardApp/ShareCard.tsx     | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/components/ClipboardApp/ShareCard.tsx b/frontend/components/ClipboardApp/ShareCard.tsx
index 2e5c459..2fd1f03 100755
--- a/frontend/components/ClipboardApp/ShareCard.tsx
+++ b/frontend/components/ClipboardApp/ShareCard.tsx
@@ -22,6 +22,20 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
   const t = useTranslations("text.retrieveMethod");
   const qrRef = useRef<HTMLDivElement>(null);
   const [isCopied, setIsCopied] = useState<boolean>(false);
+  const [isRoomIdCopied, setIsRoomIdCopied] = useState<boolean>(false);
+  const [isUrlCopied, setIsUrlCopied] = useState<boolean>(false);
+
+  const copyRoomId = async () => {
+    await navigator.clipboard.writeText(RoomID);
+    setIsRoomIdCopied(true);
+    setTimeout(() => setIsRoomIdCopied(false), 2000);
+  };
+
+  const copyUrl = async () => {
+    await navigator.clipboard.writeText(shareLink);
+    setIsUrlCopied(true);
+    setTimeout(() => setIsUrlCopied(false), 2000);
+  };
 
   const copyToClipboard = async () => {
     if (!qrRef.current) return;
@@ -119,10 +133,14 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
             <Button
               variant="outline"
               size="sm"
-              onClick={() => navigator.clipboard.writeText(RoomID)}
+              onClick={copyRoomId}
               title={t("copyRoomId")}
             >
-              <Copy className="h-4 w-4" />
+              {isRoomIdCopied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
             </Button>
           </div>
         </div>
@@ -133,10 +151,14 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
             <Button
               variant="outline"
               size="sm"
-              onClick={() => navigator.clipboard.writeText(shareLink)}
+              onClick={copyUrl}
               title={t("copyUrl")}
             >
-              <Copy className="h-4 w-4" />
+              {isUrlCopied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
             </Button>
           </div>
         </div>