fix: add clipboard fallback for navigator.clipboard unavailable contexts (closes #696) (#699)

src/app/(dashboard)/dashboard/cli-tools/components/DefaultToolCard.js

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { Card, ModelSelectModal } from "@/shared/components";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import Image from "next/image";
 
 export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, baseUrl, apiKeys, activeProviders = [], cloudEnabled = false, tunnelEnabled = false }) {
@@ -31,8 +32,10 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
       .replace(/\{\{model\}\}/g, modelValue || "provider/model-id");
   };
 
+  const { copy: copyToClipboard } = useCopyToClipboard();
+
   const handleCopy = async (text, field) => {
-    await navigator.clipboard.writeText(replaceVars(text));
+    await copyToClipboard(replaceVars(text), `toolcard-${field}`);
     setCopiedField(field);
     setTimeout(() => setCopiedField(null), 2000);
   };

src/app/(dashboard)/dashboard/translator/page.js

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { Card, Button } from "@/shared/components";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import dynamic from "next/dynamic";
 
 const Editor = dynamic(() => import("@monaco-editor/react"), { ssr: false });
@@ -187,9 +188,11 @@ export default function TranslatorPage() {
     }
   };
 
+  const { copy } = useCopyToClipboard();
+
   const handleCopy = async (id) => {
     if (!contents[id]) return;
-    await navigator.clipboard.writeText(contents[id]);
+    copy(contents[id], `translator-step-${id}`);
   };
 
   const handleFormat = (id) => {

src/app/landing/components/GetStarted.js

@@ -1,13 +1,11 @@
 "use client";
-import { useState } from "react";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 
 export default function GetStarted() {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard();
 
   const handleCopy = (text) => {
-    navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    copy(text, "landing");
   };
 
   return (
@@ -68,7 +66,7 @@ export default function GetStarted() {
                   <span className="text-green-400">$</span>
                   <span className="text-white">npx 9router</span>
                   <span className="ml-auto text-gray-500 text-xs opacity-0 group-hover:opacity-100">
-                    {copied ? "✓ Copied" : "Copy"}
+                    {copied === "landing" ? "✓ Copied" : "Copy"}
                   </span>
                 </div>
                 

src/shared/components/ManualConfigModal.js

@@ -3,18 +3,16 @@
 import { useState } from "react";
 import Modal from "./Modal";
 import Button from "./Button";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 
 export default function ManualConfigModal({ isOpen, onClose, title = "Manual Configuration", configs = [] }) {
+  const { copy } = useCopyToClipboard();
   const [copiedIndex, setCopiedIndex] = useState(null);
 
-  const copyToClipboard = async (text, index) => {
-    try {
-      await navigator.clipboard.writeText(text);
+  const copyConfig = (text, index) => {
+    copy(text, `manualconfig-${index}`);
     setCopiedIndex(index);
     setTimeout(() => setCopiedIndex(null), 2000);
-    } catch (err) {
-      console.log("Failed to copy:", err);
-    }
   };
 
   return (
@@ -27,7 +25,7 @@ export default function ManualConfigModal({ isOpen, onClose, title = "Manual Con
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={() => copyToClipboard(config.content, index)}
+                onClick={() => copyConfig(config.content, index)}
               >
                 <span className="material-symbols-outlined text-[14px] mr-1">
                   {copiedIndex === index ? "check" : "content_copy"}