fix(ui): clipboard copy for http://0.0.0.0:3000 and unify implementations

martin/martin-ui/__tests__/components/catalogs/__snapshots__/sprite.test.tsx.snap

@@ -78,7 +78,7 @@ exports[`SpriteCatalog Component > matches snapshot for loaded state with mock d
                     map-icons
                   </div>
                   <div
-                    class="text-xs pt-3 flex flex-row text-slate-400 p-0.5"
+                    class="text-xs pt-3 flex flex-row gap-1 text-slate-400 p-0.5"
                   >
                     <span
                       role="img"
@@ -228,7 +228,7 @@ exports[`SpriteCatalog Component > matches snapshot for loaded state with mock d
                     transportation
                   </div>
                   <div
-                    class="text-xs pt-3 flex flex-row text-slate-400 p-0.5"
+                    class="text-xs pt-3 flex flex-row gap-1 text-slate-400 p-0.5"
                   >
                     <span
                       role="img"
@@ -390,7 +390,7 @@ exports[`SpriteCatalog Component > matches snapshot for loaded state with mock d
                     ui-elements
                   </div>
                   <div
-                    class="text-xs pt-3 flex flex-row text-slate-400 p-0.5"
+                    class="text-xs pt-3 flex flex-row gap-1 text-slate-400 p-0.5"
                   >
                     <span
                       role="img"

martin/martin-ui/__tests__/components/error/__snapshots__/error-state.test.tsx.snap

@@ -410,7 +410,7 @@ exports[`InlineErrorState Component > renders with retry button when onRetry is
       </span>
     </div>
     <button
-      class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
+      class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md px-3 has-[>svg]:px-2.5 border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 gap-1"
       data-slot="button"
     >
       <span
@@ -445,7 +445,7 @@ exports[`InlineErrorState Component > shows retrying state when isRetrying is tr
       </span>
     </div>
     <button
-      class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
+      class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-8 rounded-md px-3 has-[>svg]:px-2.5 border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 gap-1"
       data-slot="button"
       disabled=""
     >

martin/martin-ui/__tests__/hooks/use-copy-to-clipboard.test.tsx

@@ -0,0 +1,72 @@
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mockToast = vi.fn();
+vi.mock('@/hooks/use-toast', () => ({
+  useToast: () => ({ toast: mockToast }),
+}));
+
+const mockCopyToClipboard = vi.fn();
+vi.mock('@/lib/utils', () => ({
+  copyToClipboard: (text: string) => mockCopyToClipboard(text),
+}));
+
+const { useCopyToClipboard } = await import('@/hooks/use-copy-to-clipboard');
+
+describe('useCopyToClipboard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockCopyToClipboard.mockResolvedValue(undefined);
+  });
+
+  it('copies text and shows toast', async () => {
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    expect(result.current.copied).toBe(false);
+
+    let success: boolean | undefined;
+    await act(async () => {
+      success = await result.current.copy('test text');
+    });
+
+    expect(success).toBe(true);
+    expect(result.current.copied).toBe(true);
+    expect(mockCopyToClipboard).toHaveBeenCalledWith('test text');
+    expect(mockToast).toHaveBeenCalledWith({
+      description: 'Copied!',
+      title: 'Copied!',
+    });
+  });
+
+  it('uses custom success message from options', async () => {
+    const { result } = renderHook(() => useCopyToClipboard({ successMessage: 'URL copied!' }));
+
+    await act(async () => {
+      await result.current.copy('http://example.com');
+    });
+
+    expect(mockToast).toHaveBeenCalledWith({
+      description: 'URL copied!',
+      title: 'Copied!',
+    });
+  });
+
+  it('handles errors and shows error toast', async () => {
+    mockCopyToClipboard.mockRejectedValue(new Error('Copy failed'));
+
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    let success: boolean | undefined;
+    await act(async () => {
+      success = await result.current.copy('test text');
+    });
+
+    expect(success).toBe(false);
+    expect(result.current.copied).toBe(false);
+    expect(mockToast).toHaveBeenCalledWith({
+      description: 'Failed to copy to clipboard',
+      title: 'Error',
+      variant: 'destructive',
+    });
+  });
+});

martin/martin-ui/__tests__/lib/utils.test.ts

@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
-import { formatFileSize } from '@/lib/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { copyToClipboard, formatFileSize } from '@/lib/utils';
 
 describe('formatFileSize', () => {
   it("returns '0 Bytes' for 0", () => {
@@ -42,3 +42,59 @@ describe('formatFileSize', () => {
     expect(formatFileSize(Number.MAX_SAFE_INTEGER)).toBe('File too large');
   });
 });
+
+describe('copyToClipboard', () => {
+  const execCommandMock = vi.fn().mockReturnValue(true);
+  // Store reference to original execCommand if it exists
+  // biome-ignore lint/suspicious/noExplicitAny: jsdom doesn't define execCommand, we need to add it
+  const originalDocument = globalThis.document as any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    execCommandMock.mockReturnValue(true);
+    // Add execCommand to the document object (jsdom doesn't have this)
+    originalDocument.execCommand = execCommandMock;
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+    // Clean up execCommand
+    originalDocument.execCommand = undefined;
+  });
+
+  it('uses navigator.clipboard.writeText when available and succeeds', async () => {
+    const writeTextMock = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal('navigator', {
+      clipboard: { writeText: writeTextMock },
+    });
+
+    await copyToClipboard('test text');
+    expect(writeTextMock).toHaveBeenCalledWith('test text');
+  });
+
+  it('falls back to execCommand when navigator.clipboard is unavailable', async () => {
+    vi.stubGlobal('navigator', { clipboard: undefined });
+
+    await copyToClipboard('fallback text');
+    expect(execCommandMock).toHaveBeenCalledWith('copy');
+  });
+
+  it('falls back to execCommand when navigator.clipboard.writeText fails', async () => {
+    const writeTextMock = vi.fn().mockRejectedValue(new Error('Clipboard API error'));
+    vi.stubGlobal('navigator', {
+      clipboard: { writeText: writeTextMock },
+    });
+
+    await copyToClipboard('test text');
+    expect(writeTextMock).toHaveBeenCalledWith('test text');
+    expect(execCommandMock).toHaveBeenCalledWith('copy');
+  });
+
+  it('throws when both clipboard API and execCommand fail', async () => {
+    vi.stubGlobal('navigator', { clipboard: undefined });
+    execCommandMock.mockReturnValue(false);
+
+    await expect(copyToClipboard('will fail')).rejects.toThrow('Copy command failed');
+  });
+});