Add Confirmation Dialog System

.Jules/changelog.md

@@ -7,6 +7,14 @@
 ## [Unreleased]
 
 ### Added
+- **Confirmation Dialog System:** Replaced native `window.confirm` with a custom, dual-theme `ConfirmDialog`.
+  - **Features:**
+    - Promise-based `useConfirm` hook for easy integration.
+    - Specialized "Danger" variant for destructive actions (red styling).
+    - Fully accessible (`role="alertdialog"`, focus management).
+    - Integrated into `GroupDetails` for deleting expenses, groups, and removing members.
+  - **Technical:** Created `web/contexts/ConfirmContext.tsx` and `web/components/ui/ConfirmDialog.tsx`.
+
 - **Error Boundary System:** Implemented a global React Error Boundary to catch render errors gracefully.
   - **Features:**
     - Dual-theme support (Glassmorphism & Neobrutalism) for the error fallback UI.

.Jules/knowledge.md

@@ -245,6 +245,31 @@ const clearFieldError = (field: string) => {
 </form>
 ```
 
+### Confirmation Dialog Pattern
+
+**Date:** 2026-01-14
+**Context:** Replacing native `window.confirm`
+
+Use the `useConfirm` hook to trigger a modal confirmation.
+
+```tsx
+const { confirm } = useConfirm();
+
+const handleDelete = async () => {
+  const isConfirmed = await confirm({
+    title: 'Delete Item',
+    message: 'Are you sure?',
+    variant: 'danger', // or 'info'
+    confirmText: 'Delete',
+    cancelText: 'Cancel'
+  });
+
+  if (isConfirmed) {
+    await deleteItem();
+  }
+};
+```
+
 ---
 
 ## Mobile Patterns

.Jules/todo.md

@@ -77,11 +77,12 @@
   - Size: ~35 lines
   - Added: 2026-01-01
 
-- [ ] **[ux]** Confirmation dialog for destructive actions
-  - Files: Create `web/components/ui/ConfirmDialog.tsx`, integrate
-  - Context: Confirm before deleting groups/expenses
-  - Impact: Prevents accidental data loss
-  - Size: ~70 lines
+- [x] **[ux]** Confirmation dialog for destructive actions
+  - Completed: 2026-01-14
+  - Files: `web/components/ui/ConfirmDialog.tsx`, `web/contexts/ConfirmContext.tsx`, `web/pages/GroupDetails.tsx`
+  - Context: Replaced window.confirm with custom dialog
+  - Impact: Prevents accidental data loss with native-feeling UI
+  - Size: ~120 lines
   - Added: 2026-01-01
 
 ### Mobile

web/App.tsx

@@ -5,6 +5,7 @@ import { ThemeWrapper } from './components/layout/ThemeWrapper';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { ToastProvider } from './contexts/ToastContext';
+import { ConfirmProvider } from './contexts/ConfirmContext';
 import { ToastContainer } from './components/ui/Toast';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { Auth } from './pages/Auth';
@@ -53,7 +54,9 @@ const App = () => {
         <AuthProvider>
           <HashRouter>
               <ErrorBoundary>
-                <AppRoutes />
+                <ConfirmProvider>
+                  <AppRoutes />
+                </ConfirmProvider>
               </ErrorBoundary>
               <ToastContainer />
           </HashRouter>

web/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { AlertTriangle, Info } from 'lucide-react';
+import { Button } from './Button';
+import { Modal } from './Modal';
+import { ConfirmOptions } from '../../contexts/ConfirmContext';
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  options: ConfirmOptions;
+}
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  onConfirm,
+  onCancel,
+  options,
+}) => {
+  const {
+    title = 'Confirm Action',
+    message,
+    variant = 'info',
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+  } = options;
+
+  const isDanger = variant === 'danger';
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onCancel}
+      title={title}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onCancel}>
+            {cancelText}
+          </Button>
+          <Button
+            variant={isDanger ? 'danger' : 'primary'}
+            onClick={onConfirm}
+            autoFocus
+          >
+            {confirmText}
+          </Button>
+        </>
+      }
+    >
+      <div className="flex items-start gap-4">
+        <div
+          className={`p-3 rounded-full flex-shrink-0 ${
+            isDanger ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600'
+          }`}
+        >
+          {isDanger ? <AlertTriangle size={24} /> : <Info size={24} />}
+        </div>
+        <div className="mt-1">
+          <p className="text-base opacity-90 leading-relaxed">{message}</p>
+        </div>
+      </div>
+    </Modal>
+  );
+};

web/contexts/ConfirmContext.tsx

@@ -0,0 +1,64 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { ConfirmDialog } from '../components/ui/ConfirmDialog';
+
+export interface ConfirmOptions {
+  title?: string;
+  message: string;
+  variant?: 'info' | 'danger';
+  confirmText?: string;
+  cancelText?: string;
+}
+
+interface ConfirmContextType {
+  confirm: (options: ConfirmOptions) => Promise<boolean>;
+}
+
+const ConfirmContext = createContext<ConfirmContextType | undefined>(undefined);
+
+export const useConfirm = () => {
+  const context = useContext(ConfirmContext);
+  if (!context) {
+    throw new Error('useConfirm must be used within a ConfirmProvider');
+  }
+  return context;
+};
+
+interface ConfirmProviderProps {
+  children: ReactNode;
+}
+
+export const ConfirmProvider: React.FC<ConfirmProviderProps> = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [options, setOptions] = useState<ConfirmOptions>({ message: '' });
+  const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null);
+
+  const confirm = useCallback((options: ConfirmOptions) => {
+    setOptions(options);
+    setIsOpen(true);
+    return new Promise<boolean>((resolve) => {
+      setResolvePromise(() => resolve);
+    });
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    if (resolvePromise) resolvePromise(true);
+    setIsOpen(false);
+  }, [resolvePromise]);
+
+  const handleCancel = useCallback(() => {
+    if (resolvePromise) resolvePromise(false);
+    setIsOpen(false);
+  }, [resolvePromise]);
+
+  return (
+    <ConfirmContext.Provider value={{ confirm }}>
+      {children}
+      <ConfirmDialog
+        isOpen={isOpen}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+        options={options}
+      />
+    </ConfirmContext.Provider>
+  );
+};