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) => {