{text}
-
-
Click to copy
+
+ Click to copy
diff --git a/martin/martin-ui/src/hooks/use-copy-to-clipboard.ts b/martin/martin-ui/src/hooks/use-copy-to-clipboard.ts
new file mode 100644
index 000000000..2872796cf
--- /dev/null
+++ b/martin/martin-ui/src/hooks/use-copy-to-clipboard.ts
@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useToast } from '@/hooks/use-toast';
+import { copyToClipboard } from '@/lib/utils';
+
+const RESET_DELAY = 2000;
+const ERROR_MESSAGE = 'Failed to copy to clipboard';
+
+interface UseCopyToClipboardOptions {
+ successMessage?: string;
+}
+
+interface UseCopyToClipboardReturn {
+ copied: boolean;
+ copiedValue: string | null;
+ copy: (text: string, customSuccessMessage?: string) => Promise
;
+}
+
+/** Hook for clipboard operations with toast notifications and auto-reset state. */
+export function useCopyToClipboard(
+ options: UseCopyToClipboardOptions = {},
+): UseCopyToClipboardReturn {
+ const { successMessage = 'Copied!' } = options;
+ const { toast } = useToast();
+ const [copied, setCopied] = useState(false);
+ const [copiedValue, setCopiedValue] = useState(null);
+ const timeoutRef = useRef | null>(null);
+
+ useEffect(() => {
+ return () => {
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ };
+ }, []);
+
+ const copy = useCallback(
+ async (text: string, customSuccessMessage?: string): Promise => {
+ try {
+ await copyToClipboard(text);
+ setCopied(true);
+ setCopiedValue(text);
+
+ toast({
+ description: customSuccessMessage ?? successMessage,
+ title: 'Copied!',
+ });
+
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ timeoutRef.current = setTimeout(() => {
+ setCopied(false);
+ setCopiedValue(null);
+ timeoutRef.current = null;
+ }, RESET_DELAY);
+
+ return true;
+ } catch (err) {
+ console.error('Failed to copy to clipboard:', err);
+ toast({
+ description: ERROR_MESSAGE,
+ title: 'Error',
+ variant: 'destructive',
+ });
+ return false;
+ }
+ },
+ [successMessage, toast],
+ );
+
+ return { copied, copiedValue, copy };
+}
diff --git a/martin/martin-ui/src/lib/utils.ts b/martin/martin-ui/src/lib/utils.ts
index 9831f07bc..07cc77771 100644
--- a/martin/martin-ui/src/lib/utils.ts
+++ b/martin/martin-ui/src/lib/utils.ts
@@ -5,6 +5,48 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
+/**
+ * Copies text to the clipboard, with a fallback for non-HTTPS/non-localhost contexts.
+ *
+ * The modern navigator.clipboard API only works in secure contexts (HTTPS or localhost).
+ * When Martin starts at http://0.0.0.0:3000, the clipboard API won't work, so we fall
+ * back to the legacy document.execCommand('copy') method.
+ *
+ * @param text The text to copy to the clipboard
+ * @returns A promise that resolves when the text is copied, or rejects on failure
+ */
+export async function copyToClipboard(text: string): Promise {
+ // Try the modern clipboard API first (works in secure contexts)
+ if (navigator.clipboard?.writeText) {
+ try {
+ await navigator.clipboard.writeText(text);
+ return;
+ } catch {
+ // Fall through to legacy method
+ }
+ }
+
+ // Fallback for non-HTTPS/non-localhost contexts (e.g., http://0.0.0.0:3000)
+ const textarea = document.createElement('textarea');
+ textarea.value = text;
+ textarea.style.position = 'fixed';
+ textarea.style.left = '-9999px';
+ textarea.style.top = '-9999px';
+ textarea.style.pointerEvents = 'none';
+ textarea.setAttribute('aria-hidden', 'true');
+ document.body.appendChild(textarea);
+ textarea.focus();
+ textarea.setSelectionRange(0, text.length);
+ try {
+ const success = document.execCommand('copy');
+ if (!success) {
+ throw new Error('Copy command failed');
+ }
+ } finally {
+ document.body.removeChild(textarea);
+ }
+}
+
/**
* Formats a file size in bytes to a human-readable string
* @param bytes The file size in bytes
diff --git a/martin/martin-ui/vitest.setup.tsx b/martin/martin-ui/vitest.setup.tsx
index fece7c1ea..015456513 100644
--- a/martin/martin-ui/vitest.setup.tsx
+++ b/martin/martin-ui/vitest.setup.tsx
@@ -1,4 +1,3 @@
-import { Rocket } from 'lucide-react';
import React from 'react';
import { vi } from 'vitest';