fix: harden blog share actions

Author: Copilot

src/components/SocialShare/SocialShare.css

@@ -25,6 +25,7 @@
   width: 3.25rem;
   height: 3.25rem;
   border-radius: 999px;
+  border: 1px solid var(--ifm-color-emphasis-300);
   border: 1px solid color-mix(in srgb, var(--ifm-color-primary) 18%, var(--ifm-color-emphasis-300));
   background: var(--ifm-background-surface-color);
   color: var(--ifm-font-color-base) !important;
@@ -75,6 +76,11 @@
   color: var(--ifm-color-primary) !important;
 }
 
+.share-btn-circle.copy.copy-error {
+  border-color: var(--ifm-color-danger);
+  color: var(--ifm-color-danger) !important;
+}
+
 @media (max-width: 576px) {
   .share-buttons-row {
     gap: 0.75rem;

src/components/SocialShare/index.tsx

@@ -6,6 +6,9 @@ import { FaXTwitter } from "react-icons/fa6";
 import "./SocialShare.css";
 
 const COPY_RESET_DELAY_MS = 2000;
+const COPY_DEFAULT_LABEL = "Copy link";
+const COPY_SUCCESS_LABEL = "Link copied";
+const COPY_ERROR_LABEL = "Unable to copy link";
 
 type SocialShareProps = {
   permalink?: string;
@@ -17,17 +20,17 @@ export default function SocialShare({
   title,
 }: SocialShareProps): JSX.Element | null {
   const { siteConfig } = useDocusaurusContext();
-  const [copied, setCopied] = useState(false);
+  const [copyState, setCopyState] = useState<"idle" | "copied" | "error">("idle");
 
   useEffect(() => {
-    if (!copied) {
+    if (copyState === "idle") {
       return undefined;
     }
 
-    const timeout = window.setTimeout(() => setCopied(false), COPY_RESET_DELAY_MS);
+    const timeout = window.setTimeout(() => setCopyState("idle"), COPY_RESET_DELAY_MS);
 
     return () => window.clearTimeout(timeout);
-  }, [copied]);
+  }, [copyState]);
 
   if (!permalink || !title) {
     return null;
@@ -61,13 +64,25 @@ export default function SocialShare({
 
   const handleCopyLink = async () => {
     if (typeof navigator === "undefined" || !navigator.clipboard) {
+      setCopyState("error");
       return;
     }
 
-    await navigator.clipboard.writeText(blogUrl);
-    setCopied(true);
+    try {
+      await navigator.clipboard.writeText(blogUrl);
+      setCopyState("copied");
+    } catch {
+      setCopyState("error");
+    }
   };
 
+  const copyLabel =
+    copyState === "copied"
+      ? COPY_SUCCESS_LABEL
+      : copyState === "error"
+        ? COPY_ERROR_LABEL
+        : COPY_DEFAULT_LABEL;
+
   return (
     <section className="blog-post-share-section" aria-label="Share this post">
       <p className="share-title">Share this post</p>
@@ -87,12 +102,12 @@ export default function SocialShare({
         ))}
         <button
           type="button"
-          className={`share-btn-circle copy${copied ? " copied" : ""}`}
+          className={`share-btn-circle copy${copyState === "copied" ? " copied" : ""}${copyState === "error" ? " copy-error" : ""}`}
           onClick={() => {
             void handleCopyLink();
           }}
-          title={copied ? "Link copied" : "Copy link"}
-          aria-label={copied ? "Link copied" : "Copy link"}
+          title={copyLabel}
+          aria-label={copyLabel}
         >
           <FaLink aria-hidden="true" />
         </button>