fix(frontend): make copy buttons work over plain HTTP (#757)

The Clipboard API requires a secure context, so navigator.clipboard is
undefined when Sencho is accessed over HTTP on a LAN IP. Most copy
buttons therefore failed silently and a few even fired success toasts
without writing anything to the clipboard.

Extract a shared copyToClipboard helper that prefers the modern API in
secure contexts and falls back to a hidden-textarea execCommand path
otherwise, then route every existing call site through it.

frontend/src/lib/clipboard.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { copyToClipboard } from './clipboard';
+
+const originalIsSecureContext = Object.getOwnPropertyDescriptor(window, 'isSecureContext');
+const originalClipboard = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
+const originalExecCommand = Object.getOwnPropertyDescriptor(document, 'execCommand');
+
+function setSecureContext(value: boolean): void {
+  Object.defineProperty(window, 'isSecureContext', {
+    configurable: true,
+    value,
+  });
+}
+
+function setNavigatorClipboard(clipboard: Clipboard | undefined): void {
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: clipboard,
+  });
+}
+
+function setExecCommand(impl: () => boolean): ReturnType<typeof vi.fn> {
+  const fn = vi.fn(impl);
+  Object.defineProperty(document, 'execCommand', {
+    configurable: true,
+    writable: true,
+    value: fn,
+  });
+  return fn;
+}
+
+describe('copyToClipboard', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    if (originalIsSecureContext) Object.defineProperty(window, 'isSecureContext', originalIsSecureContext);
+    if (originalClipboard) Object.defineProperty(navigator, 'clipboard', originalClipboard);
+    else delete (navigator as { clipboard?: unknown }).clipboard;
+    if (originalExecCommand) Object.defineProperty(document, 'execCommand', originalExecCommand);
+    else delete (document as { execCommand?: unknown }).execCommand;
+  });
+
+  it('uses navigator.clipboard in a secure context', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    setSecureContext(true);
+    setNavigatorClipboard({ writeText } as unknown as Clipboard);
+
+    await copyToClipboard('hello');
+
+    expect(writeText).toHaveBeenCalledWith('hello');
+  });
+
+  it('falls back to execCommand when not in a secure context', async () => {
+    setSecureContext(false);
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    setNavigatorClipboard({ writeText } as unknown as Clipboard);
+    const execCommand = setExecCommand(() => true);
+
+    await copyToClipboard('lan-host');
+
+    expect(writeText).not.toHaveBeenCalled();
+    expect(execCommand).toHaveBeenCalledWith('copy');
+  });
+
+  it('falls back to execCommand when clipboard API rejects', async () => {
+    setSecureContext(true);
+    const writeText = vi.fn().mockRejectedValue(new Error('blocked'));
+    setNavigatorClipboard({ writeText } as unknown as Clipboard);
+    const execCommand = setExecCommand(() => true);
+
+    await copyToClipboard('rejected');
+
+    expect(writeText).toHaveBeenCalled();
+    expect(execCommand).toHaveBeenCalledWith('copy');
+  });
+
+  it('rejects when both modern API and execCommand fail and removes the textarea', async () => {
+    setSecureContext(false);
+    setNavigatorClipboard(undefined);
+    setExecCommand(() => false);
+
+    await expect(copyToClipboard('nope')).rejects.toThrow();
+    expect(document.querySelectorAll('textarea').length).toBe(0);
+  });
+
+  it('removes the textarea after using the fallback', async () => {
+    setSecureContext(false);
+    setNavigatorClipboard(undefined);
+    setExecCommand(() => true);
+
+    await copyToClipboard('cleanup');
+
+    expect(document.querySelectorAll('textarea').length).toBe(0);
+  });
+});

frontend/src/lib/clipboard.ts

@@ -0,0 +1,43 @@
+/**
+ * Copy text to the clipboard with a fallback for non-secure contexts.
+ *
+ * The Clipboard API (`navigator.clipboard`) is only available in secure
+ * contexts (HTTPS, localhost, or 127.0.0.1). Self-hosted Sencho is commonly
+ * accessed over plain HTTP on LAN IPs, so we fall back to the legacy
+ * `document.execCommand('copy')` path when the modern API is unavailable
+ * or rejects.
+ *
+ * Rejects only when both paths fail.
+ */
+export async function copyToClipboard(text: string): Promise<void> {
+  if (
+    typeof navigator !== 'undefined' &&
+    navigator.clipboard &&
+    typeof window !== 'undefined' &&
+    window.isSecureContext
+  ) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch {
+      // fall through to legacy fallback
+    }
+  }
+
+  const ta = document.createElement('textarea');
+  ta.value = text;
+  ta.setAttribute('readonly', '');
+  ta.style.position = 'fixed';
+  ta.style.top = '0';
+  ta.style.left = '0';
+  ta.style.opacity = '0';
+  document.body.appendChild(ta);
+  ta.focus();
+  ta.select();
+  try {
+    const ok = document.execCommand('copy');
+    if (!ok) throw new Error('execCommand copy returned false');
+  } finally {
+    document.body.removeChild(ta);
+  }
+}