feat(web): confirmation flow for destructive actions (#120)

Closes #67

## Summary

- New `ConfirmDialog` component wrapping shadcn `AlertDialog` with two
optional modes: type-to-confirm input (blocks Confirm until text
matches) and "don't ask again" session checkbox
- New `lib/confirm-skip.ts` session store: `isSuppressed(key)` /
`suppress(key)` backed by a module-level `Set` — resets on hard reload,
persists across SPA navigation
- **Stop server** (`GameCard`): simple confirm with "Don't ask again for
this session"; suppressed path fires `api.stop()` directly
- **Remove allowed guild** (`GuildsSection`): type-to-confirm — user
must type the guild ID exactly to enable Confirm; no "don't ask again"
- **Clear per-game permissions** (`PermissionRow`): simple confirm with
"don't ask again"
- **Remove admin user/role ID** (`AdminsSection`): simple confirm with
"don't ask again"; added `onRemoveChip` prop to `SnowflakeChipsInput` so
Backspace-to-pop also routes through confirmation
- 20 new tests across `ConfirmDialog.test.tsx`, `GameCard.test.tsx`, and
`DiscordPage.test.tsx`; 335 total passing

## Implementation notes

- The "don't ask again" state is intentionally in-memory (module-level
`Set`) — not `localStorage` — so it resets on hard reload per the spec.
SPA navigation leaves the module loaded, so suppression persists across
routes.
- ESC, focus-trap, and `prefers-reduced-motion` are handled
automatically by the Radix `AlertDialog` primitive — no custom code
needed for AC#4.
- Admin removal confirms before local-state update, not before the API
call (the API call is deferred to "Save admins" per the existing
`AdminsSection` draft-editor design). The dialog description reflects
this.
- **Merge note**: if `issue-114` (file naming convention) lands after
this PR, the new files (`confirm-skip.ts`, `ConfirmDialog.tsx`,
`GameCard.test.tsx`) will need to be renamed to the kebab-case +
type-suffix convention.

## Test plan

- [ ] `npm run app:test` — 335 tests pass
- [ ] `npm run app:lint` — exits clean
- [ ] Manual: click Stop on a running server → dialog appears; check
"Don't ask again" and confirm → subsequent clicks skip dialog until page
reload
- [ ] Manual: Remove an allowed guild → Confirm disabled until guild ID
is typed exactly; confirm → guild removed
- [ ] Manual: Clear per-game permissions → confirm → permissions
cleared; cancel → no change
- [ ] Manual: X a chip in Admin User/Role IDs → dialog appears; confirm
→ chip removed (API call deferred to Save admins)

---
_Generated with [Claude Code](https://claude.ai/code)_

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: CoderCoco

app/packages/web/src/components/confirm-dialog.component.test.tsx

@@ -0,0 +1,82 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ConfirmDialog } from './confirm-dialog.component.js';
+import { isSuppressed } from '../lib/confirm-skip.utils.js';
+
+const mockStore = new Set<string>();
+
+vi.mock('../lib/confirm-skip.utils.js', () => ({
+  isSuppressed: (key: string) => mockStore.has(key),
+  suppress: (key: string) => mockStore.add(key),
+}));
+
+function open(overrides: Partial<Parameters<typeof ConfirmDialog>[0]> = {}) {
+  const onConfirm = vi.fn();
+  const onOpenChange = vi.fn();
+  render(
+    <ConfirmDialog
+      open
+      onOpenChange={onOpenChange}
+      title="Delete this?"
+      description="This cannot be undone."
+      onConfirm={onConfirm}
+      {...overrides}
+    />,
+  );
+  return { onConfirm, onOpenChange };
+}
+
+describe('ConfirmDialog', () => {
+  beforeEach(() => {
+    mockStore.clear();
+  });
+
+  it('should render the title and description', () => {
+    open();
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+    expect(screen.getByText('Delete this?')).toBeInTheDocument();
+    expect(screen.getByText('This cannot be undone.')).toBeInTheDocument();
+  });
+
+  it('should call onConfirm when the confirm button is clicked', async () => {
+    const { onConfirm } = open();
+    await userEvent.click(screen.getByRole('button', { name: /confirm/i }));
+    expect(onConfirm).toHaveBeenCalledOnce();
+  });
+
+  it('should not call onConfirm when cancel is clicked', async () => {
+    const { onConfirm, onOpenChange } = open();
+    await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+    expect(onConfirm).not.toHaveBeenCalled();
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('should disable Confirm until the typed value matches typeToConfirm', async () => {
+    open({ typeToConfirm: 'abc123' });
+    const confirmBtn = screen.getByRole('button', { name: /confirm/i });
+    expect(confirmBtn).toBeDisabled();
+
+    await userEvent.type(screen.getByRole('textbox'), 'abc123');
+    expect(confirmBtn).not.toBeDisabled();
+  });
+
+  it('should suppress the key and call onConfirm when "don\'t ask again" is checked', async () => {
+    const { onConfirm } = open({ confirmKey: 'test-key' });
+    await userEvent.click(screen.getByRole('checkbox'));
+    await userEvent.click(screen.getByRole('button', { name: /confirm/i }));
+    expect(onConfirm).toHaveBeenCalledOnce();
+    expect(isSuppressed('test-key')).toBe(true);
+  });
+
+  it('should not suppress the key when "don\'t ask again" is NOT checked', async () => {
+    open({ confirmKey: 'other-key' });
+    await userEvent.click(screen.getByRole('button', { name: /confirm/i }));
+    expect(isSuppressed('other-key')).toBe(false);
+  });
+
+  it('should use a custom confirmLabel when provided', () => {
+    open({ confirmLabel: 'Yes, stop it' });
+    expect(screen.getByRole('button', { name: 'Yes, stop it' })).toBeInTheDocument();
+  });
+});

app/packages/web/src/components/confirm-dialog.component.tsx

@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react';
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog.component';
+import { Input } from '@/components/ui/input.component';
+import { suppress } from '../lib/confirm-skip.utils.js';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  onConfirm: () => void;
+  /** Label for the confirm button. Defaults to "Confirm". */
+  confirmLabel?: string;
+  /**
+   * When provided, shows a "Don't ask again for this session" checkbox.
+   * The key is stored in the module-level session store so the caller can
+   * bypass opening the dialog on future clicks via `isSuppressed(confirmKey)`.
+   */
+  confirmKey?: string;
+  /**
+   * When provided, shows a text input; the confirm button stays disabled
+   * until the typed value exactly matches this string (e.g. a guild ID).
+   */
+  typeToConfirm?: string;
+}
+
+/**
+ * Generic confirmation dialog for destructive actions. Wraps shadcn AlertDialog
+ * with optional type-to-confirm input and "don't ask again" session suppression.
+ * ESC, focus-trap, and reduce-motion are handled by Radix automatically.
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  confirmLabel = 'Confirm',
+  confirmKey,
+  typeToConfirm,
+}: ConfirmDialogProps) {
+  const [typed, setTyped] = useState('');
+  const [skipSession, setSkipSession] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setTyped('');
+      setSkipSession(false);
+    }
+  }, [open]);
+
+  const confirmDisabled = typeToConfirm !== undefined && typed !== typeToConfirm;
+
+  function handleConfirm() {
+    if (confirmKey && skipSession) suppress(confirmKey);
+    onConfirm();
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+
+        {typeToConfirm !== undefined && (
+          <Input
+            value={typed}
+            onChange={(e) => setTyped(e.target.value)}
+            placeholder={typeToConfirm}
+            className="font-[var(--font-mono)]"
+            aria-label="Type to confirm"
+          />
+        )}
+
+        {confirmKey && (
+          <label className="flex items-center gap-2 text-sm text-[var(--color-muted-foreground)] cursor-pointer">
+            <input
+              type="checkbox"
+              checked={skipSession}
+              onChange={(e) => setSkipSession(e.target.checked)}
+              className="size-3.5 rounded"
+            />
+            Don&apos;t ask again for this session
+          </label>
+        )}
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleConfirm} disabled={confirmDisabled}>
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

app/packages/web/src/components/game-card.component.test.tsx

@@ -0,0 +1,77 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { GameCard } from './game-card.component.js';
+
+const apiMock = vi.hoisted(() => ({
+  stop: vi.fn().mockResolvedValue(undefined),
+  start: vi.fn().mockResolvedValue(undefined),
+}));
+vi.mock('../api.service.js', () => ({ api: apiMock }));
+
+const mockIsSuppressed = vi.hoisted(() => vi.fn().mockReturnValue(false));
+vi.mock('../lib/confirm-skip.utils.js', () => ({
+  isSuppressed: mockIsSuppressed,
+  suppress: vi.fn(),
+}));
+
+/** A minimal running-server status fixture. */
+const runningStatus = {
+  game: 'minecraft',
+  state: 'running' as const,
+};
+
+function renderCard() {
+  return render(
+    <MemoryRouter>
+      <GameCard
+        status={runningStatus}
+        onRefresh={vi.fn()}
+        onOpenFiles={vi.fn()}
+      />
+    </MemoryRouter>,
+  );
+}
+
+describe('GameCard — Stop confirmation', () => {
+  it('should show the confirmation dialog when Stop is clicked and the action is not suppressed', async () => {
+    mockIsSuppressed.mockReturnValue(false);
+    renderCard();
+
+    await userEvent.click(screen.getByRole('button', { name: /stop/i }));
+
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+    expect(screen.getByText('Stop minecraft?')).toBeInTheDocument();
+  });
+
+  it('should call api.stop directly without showing the dialog when the action is suppressed', async () => {
+    mockIsSuppressed.mockReturnValue(true);
+    renderCard();
+
+    await userEvent.click(screen.getByRole('button', { name: /stop/i }));
+
+    expect(apiMock.stop).toHaveBeenCalledWith('minecraft');
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+  });
+
+  it('should call api.stop after the user confirms the dialog', async () => {
+    mockIsSuppressed.mockReturnValue(false);
+    renderCard();
+
+    await userEvent.click(screen.getByRole('button', { name: /stop/i }));
+    await userEvent.click(screen.getByRole('button', { name: /stop server/i }));
+
+    expect(apiMock.stop).toHaveBeenCalledWith('minecraft');
+  });
+
+  it('should not call api.stop when the user cancels the dialog', async () => {
+    mockIsSuppressed.mockReturnValue(false);
+    renderCard();
+
+    await userEvent.click(screen.getByRole('button', { name: /stop/i }));
+    await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+
+    expect(apiMock.stop).not.toHaveBeenCalled();
+  });
+});