feat: make download buttons real links (copy-link-address works)

src/components/DownloadModal/DownloadModal.tsx

@@ -1,5 +1,5 @@
 import { Button, DialogModal } from "@fluffylabs/shared-ui";
-import { useContext, useState } from "react";
+import { type MouseEvent, useContext, useRef, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import { DOC_CONFIG } from "../../config/documentConfig";
 import { SHORT_COMMIT_HASH_LENGTH } from "../LocationProvider/utils/constants";
@@ -10,6 +10,7 @@ import { type IPdfContext, type ITheme, PdfContext, themesOrder } from "../PdfPr
 export function DownloadModal() {
   const [isOpen, setIsOpen] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
+  const isProcessingRef = useRef(false);
   const [error, setError] = useState<string>();
   const { version } = useVersionContext();
   const { urlGetters } = useContext(MetadataContext) as IMetadataContext;
@@ -19,6 +20,10 @@ export function DownloadModal() {
   const shortVersion = version.substring(0, SHORT_COMMIT_HASH_LENGTH);
 
   const handleGeneratePdf = async () => {
+    if (isProcessingRef.current) {
+      return;
+    }
+    isProcessingRef.current = true;
     setIsProcessing(true);
     setError(undefined);
     try {
@@ -30,11 +35,16 @@ export function DownloadModal() {
     } catch {
       setError("Failed to generate PDF. Please try again.");
     } finally {
+      isProcessingRef.current = false;
       setIsProcessing(false);
     }
   };
 
   const fetchAndSave = async (url: string, filename: string) => {
+    if (isProcessingRef.current) {
+      return;
+    }
+    isProcessingRef.current = true;
     setIsProcessing(true);
     setError(undefined);
     try {
@@ -53,17 +63,26 @@ export function DownloadModal() {
     } catch {
       setError(`Failed to download ${filename}. The file may not be available for this version.`);
     } finally {
+      isProcessingRef.current = false;
       setIsProcessing(false);
     }
   };
 
-  const handleDownloadDarkPdf = () => {
-    fetchAndSave(urlGetters.pdf(version), `${DOC_CONFIG.pdfFilePrefix}-${shortVersion}.pdf`);
+  const handleLinkClick = (url: string, filename: string) => (event: MouseEvent<HTMLAnchorElement>) => {
+    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+    event.preventDefault();
+    if (isProcessingRef.current) {
+      return;
+    }
+    void fetchAndSave(url, filename);
   };
 
-  const handleDownloadMarkdown = () => {
-    fetchAndSave(urlGetters.md(version), `${DOC_CONFIG.pdfFilePrefix}-${shortVersion}.md`);
-  };
+  const pdfUrl = urlGetters.pdf(version);
+  const pdfFilename = `${DOC_CONFIG.pdfFilePrefix}-${shortVersion}.pdf`;
+  const mdUrl = urlGetters.md(version);
+  const mdFilename = `${DOC_CONFIG.pdfFilePrefix}-${shortVersion}.md`;
 
   return (
     <div>
@@ -85,11 +104,25 @@ export function DownloadModal() {
           <DialogModal.Title>Download</DialogModal.Title>
           <DialogModal.Body>
             <div className="flex flex-col gap-3">
-              <Button variant="secondary" className="w-full" onClick={handleDownloadMarkdown} disabled={isProcessing}>
-                📝 Download Markdown
+              <Button variant="secondary" className="w-full" asChild>
+                <a
+                  href={mdUrl}
+                  download={mdFilename}
+                  onClick={handleLinkClick(mdUrl, mdFilename)}
+                  aria-disabled={isProcessing}
+                >
+                  📝 Download Markdown
+                </a>
               </Button>
-              <Button variant="secondary" className="w-full" onClick={handleDownloadDarkPdf} disabled={isProcessing}>
-                ⬇️ Download PDF (dark)
+              <Button variant="secondary" className="w-full" asChild>
+                <a
+                  href={pdfUrl}
+                  download={pdfFilename}
+                  onClick={handleLinkClick(pdfUrl, pdfFilename)}
+                  aria-disabled={isProcessing}
+                >
+                  ⬇️ Download PDF (dark)
+                </a>
               </Button>
               <hr className="border-current opacity-20" />
               <div className="flex flex-col gap-2">