ux: in-app confirm for asset/sitesmith delete + safe copy

- AssetsPanel: asset delete now requires an in-app two-step confirm
  (tile-button turns into "Delete?" + cancel, auto-resets after 4s or on
  click-elsewhere) instead of deleting with no confirmation at all.
- AssetsPanel: copyUrl uses a new copyToClipboard() helper that tries the
  async Clipboard API and falls back to a hidden-textarea execCommand copy
  in non-secure contexts, surfacing a visible "Copy failed" state instead
  of silently doing nothing.
- SitesmithModal: replaced window.confirm(...) for "Clear chat" with the
  same in-app two-step confirm pattern -- no native dialogs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 14:51:00 -07:00
parent 46ebd253f3
commit 4b8dd8baee
4 changed files with 293 additions and 52 deletions
+64
View File
@@ -0,0 +1,64 @@
import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
import { copyToClipboard } from './clipboard';
describe('copyToClipboard', () => {
const originalClipboard = (navigator as any).clipboard;
const originalIsSecureContext = window.isSecureContext;
const originalExecCommand = (document as any).execCommand;
afterEach(() => {
Object.defineProperty(navigator, 'clipboard', { value: originalClipboard, configurable: true });
Object.defineProperty(window, 'isSecureContext', { value: originalIsSecureContext, configurable: true });
(document as any).execCommand = originalExecCommand;
vi.restoreAllMocks();
});
test('uses navigator.clipboard.writeText when available in a secure context', async () => {
const writeText = vi.fn().mockResolvedValue(undefined);
Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
Object.defineProperty(window, 'isSecureContext', { value: true, configurable: true });
const ok = await copyToClipboard('hello');
expect(ok).toBe(true);
expect(writeText).toHaveBeenCalledWith('hello');
});
test('falls back to execCommand when clipboard API is unavailable', async () => {
Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
Object.defineProperty(window, 'isSecureContext', { value: false, configurable: true });
(document as any).execCommand = vi.fn().mockReturnValue(true);
const ok = await copyToClipboard('hello');
expect(ok).toBe(true);
expect((document as any).execCommand).toHaveBeenCalledWith('copy');
});
test('falls back to execCommand when clipboard.writeText rejects', async () => {
const writeText = vi.fn().mockRejectedValue(new Error('denied'));
Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
Object.defineProperty(window, 'isSecureContext', { value: true, configurable: true });
(document as any).execCommand = vi.fn().mockReturnValue(true);
const ok = await copyToClipboard('hello');
expect(ok).toBe(true);
expect((document as any).execCommand).toHaveBeenCalledWith('copy');
});
test('returns false when both clipboard API and execCommand fail', async () => {
Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
Object.defineProperty(window, 'isSecureContext', { value: false, configurable: true });
(document as any).execCommand = vi.fn().mockReturnValue(false);
const ok = await copyToClipboard('hello');
expect(ok).toBe(false);
});
test('returns false and does not throw when execCommand itself throws', async () => {
Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
Object.defineProperty(window, 'isSecureContext', { value: false, configurable: true });
(document as any).execCommand = vi.fn().mockImplementation(() => { throw new Error('nope'); });
const ok = await copyToClipboard('hello');
expect(ok).toBe(false);
});
});
+35
View File
@@ -0,0 +1,35 @@
/**
* Copies `text` to the clipboard, preferring the async Clipboard API and
* falling back to a hidden-textarea + `document.execCommand('copy')` when
* the Clipboard API is unavailable or unusable (e.g. a non-secure-context
* local/dev origin, or a browser/permission that rejects the write).
* Never throws -- resolves `false` on failure so callers can show a
* visible error state instead of silently doing nothing.
*/
export async function copyToClipboard(text: string): Promise<boolean> {
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
return true;
}
} catch {
// Fall through to the legacy fallback below.
}
try {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.top = '-9999px';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, textarea.value.length);
const ok = document.execCommand('copy');
document.body.removeChild(textarea);
return ok;
} catch {
return false;
}
}