Is your feature request related to a problem? Please describe.

The app uses native window.confirm() in at least two places — document
deletion in DocumentSidebar and API key revocation in ApiKeyManager. These
dialogs are visually jarring (browser-native), block the main thread, don't
match the app's dark/light theme, and provide a poor user experience. There's
no reusable component to standardize confirmation flows across the app.

Describe the solution you'd like

Create a reusable ConfirmationDialog at frontend/src/components/ui/confirm-dialog.tsx:

• Renders as a styled modal matching the existing shadcn/base-ui design system
• Configurable title, message, confirm/cancel button text
• variant prop: 'danger' (red for deletes), 'warning', 'default'
• Handles async confirm actions (loading state on confirm button)
• Keyboard accessible (Enter to confirm, Escape to cancel, focus trap)
• Supports custom content beyond simple text

Component signature:
ConfirmationDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
title: string
message: string | React.ReactNode
confirmLabel?: string
cancelLabel?: string
variant?: 'default' | 'danger' | 'warning'
loading?: boolean
onConfirm: () => void | Promise
}

After creation, replace window.confirm() calls in:

• frontend/src/components/document/DocumentSidebar.tsx
• frontend/src/components/auth/ApiKeyManager.tsx

Describe alternatives you've considered

• Third-party libraries (sweetalert2, react-confirm-alert): unnecessary
  dependency when @base-ui/react/dialog is already present
• Keeping window.confirm(): functional but inconsistent UI, blocks thread
• Building into each component separately: violates DRY, inconsistent UX

Additional Context

Build on top of the existing @base-ui/react/dialog primitive at
frontend/src/components/ui/dialog.tsx which already provides:
Dialog, DialogContent, DialogHeader, DialogFooter.

GSSoC '26

• Yes, I am participating in GirlScript Summer of Code and would like to build this.