From e985f454d6bc063e136d1c13d35a5302259e36d2 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Fri, 17 Jan 2025 20:54:08 -0700
Subject: [PATCH] Add id to media card menu

---
 src/components/media/MediaCard.tsx | 35 +++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 51c4491d..a1f642f0 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -75,11 +75,15 @@ function MediaCardContent({
 
   const dotListContent = [t(`media.types.${media.type}`)];
 
+  const altDotListContent = [t(`ID: ${media.id}`)];
+
   const [searchQuery] = useSearchQuery();
 
   const [, copyToClipboard] = useCopyToClipboard();
   const [hasCopied, setHasCopied] = useState(false);
 
+  const [hasCopiedID, setHasCopiedID] = useState(false);
+
   if (closable) {
     setOverlayVisible(false);
   }
@@ -115,6 +119,15 @@ function MediaCardContent({
     setTimeout(() => setHasCopied(false), 2000);
   };
 
+  const handleCopyIDClick = (
+    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+  ) => {
+    e.preventDefault();
+    copyToClipboard(media.id);
+    setHasCopiedID(true);
+    setTimeout(() => setHasCopiedID(false), 2000);
+  };
+
   return (
     <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       <Flare.Base
@@ -292,7 +305,27 @@ function MediaCardContent({
             <span>{media.title}</span>
           </h1>
           <div className="media-info-container justify-content-center flex flex-wrap">
-            <DotList className="text-xs" content={dotListContent} />
+            {!overlayVisible ? (
+              <DotList className="text-xs" content={dotListContent} />
+            ) : (
+              <button
+                type="button"
+                onClick={handleCopyIDClick}
+                className="z-50"
+              >
+                {!hasCopiedID ? (
+                  <DotList className="text-xs" content={altDotListContent} />
+                ) : (
+                  <div className="flex items-center gap-1">
+                    <DotList className="text-xs" content={altDotListContent} />
+                    <Icon
+                      className="text-xs text-type-secondary"
+                      icon={Icons.CHECKMARK}
+                    />
+                  </div>
+                )}
+              </button>
+            )}
           </div>
 
           {!overlayVisible && !closable ? (