Add Toast Notification System (#227)

* [jules] enhance: Add global toast notification system

- Added `ToastContext` and `ToastProvider` for managing global toast state.
- Added `Toast` component supporting `success`, `error`, and `info` variants.
- Implemented dual-theme support (Glassmorphism & Neobrutalism) for toasts.
- Integrated toast notifications into `Auth.tsx` for login/signup feedback.
- Updated `App.tsx` to include `ToastProvider`.

* Update web/contexts/ToastContext.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* [jules] enhance: Add toasts to C,U,D operations

- Added toast notifications to Group creation/joining in `Groups.tsx`.
- Added toast notifications to Expense C/U/D, Payment recording, and Group management in `GroupDetails.tsx`.
- Added toast notifications to Profile updates in `Profile.tsx`.
- Ensured toasts are triggered on both success and error states.

* [jules] style: Enhance Toast dark mode support

- Updated `Toast.tsx` to use `mode` from `ThemeContext`.
- Adjusted border colors for Glassmorphism toasts in dark mode.

* [jules] fix: Toast cleanup and button type

- Added `type="button"` to Toast close button to prevent form submission.
- Moved auto-dismiss logic to `ToastItem` using `useEffect` for proper cleanup.
- Removed `setTimeout` from `ToastContext` to prevent memory leaks.

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: Devasy Patel <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

.Jules/changelog.md

@@ -9,6 +9,7 @@
 ### Added
 - Dashboard skeleton loading state (`DashboardSkeleton`) to improve perceived performance during data fetch.
 - Comprehensive `EmptyState` component for Groups and Friends pages to better guide new users.
+- Toast notification system (`ToastContext`, `Toast` component) for providing non-blocking user feedback.
 
 ### Planned
 - See `todo.md` for queued tasks

.Jules/knowledge.md

@@ -134,6 +134,21 @@ colors: {
 </Modal>
 ```
 
+### Toast Notification Pattern
+
+**Date:** 2026-01-01
+**Context:** ToastContext.tsx and Toast.tsx
+
+```tsx
+const { addToast } = useToast();
+addToast('Message', 'success|error|info');
+```
+
+- Supports `success`, `error`, `info` types
+- Automatically adapts to current theme (Glassmorphism/Neobrutalism)
+- Auto-dismisses after 3 seconds
+- Stacks vertically in bottom-right
+
 ---
 
 ## Mobile Patterns

.Jules/todo.md

@@ -15,12 +15,10 @@
   - Files modified: `web/pages/Dashboard.tsx`, `web/components/skeletons/DashboardSkeleton.tsx`
   - Impact: Professional loading experience that mimics actual content layout
 
-- [ ] **[ux]** Toast notification system for user actions
-  - Files: Create `web/components/ui/Toast.tsx`, integrate into actions
-  - Context: Show success/error toasts for create/delete actions (not alerts)
-  - Impact: Modern feedback without blocking user
-  - Size: ~80 lines
-  - Added: 2026-01-01
+- [x] **[ux]** Toast notification system for user actions
+  - Completed: 2026-01-01
+  - Files modified: `web/contexts/ToastContext.tsx`, `web/components/ui/Toast.tsx`, `web/App.tsx`, `web/pages/Auth.tsx`
+  - Impact: Modern feedback system that supports both themes
 
 - [ ] **[a11y]** Complete keyboard navigation for Groups page
   - File: `web/pages/Groups.tsx`

web/App.tsx

@@ -4,6 +4,8 @@ import { Layout } from './components/layout/Layout';
 import { ThemeWrapper } from './components/layout/ThemeWrapper';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { ThemeProvider } from './contexts/ThemeContext';
+import { ToastProvider } from './contexts/ToastContext';
+import { ToastContainer } from './components/ui/Toast';
 import { Auth } from './pages/Auth';
 import { Dashboard } from './pages/Dashboard';
 import { Friends } from './pages/Friends';
@@ -46,11 +48,14 @@ const AppRoutes = () => {
 const App = () => {
   return (
     <ThemeProvider>
-      <AuthProvider>
-        <HashRouter>
-            <AppRoutes />
-        </HashRouter>
-      </AuthProvider>
+      <ToastProvider>
+        <AuthProvider>
+          <HashRouter>
+              <AppRoutes />
+              <ToastContainer />
+          </HashRouter>
+        </AuthProvider>
+      </ToastProvider>
     </ThemeProvider>
   );
 };

web/components/ui/Toast.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
+import { useToast, Toast } from '../../contexts/ToastContext';
+import { useTheme } from '../../contexts/ThemeContext';
+import { THEMES } from '../../constants';
+
+import { useEffect } from 'react';
+
+const ToastItem: React.FC<{ toast: Toast }> = ({ toast }) => {
+  const { removeToast } = useToast();
+  const { style, mode } = useTheme();
+
+  const isNeo = style === THEMES.NEOBRUTALISM;
+  const isDark = mode === 'dark';
+
+  useEffect(() => {
+    if (toast.duration && toast.duration > 0) {
+      const timer = setTimeout(() => {
+        removeToast(toast.id);
+      }, toast.duration);
+      return () => clearTimeout(timer);
+    }
+  }, [toast.id, toast.duration, removeToast]);
+
+  const icons = {
+    success: <CheckCircle className="w-5 h-5" />,
+    error: <AlertCircle className="w-5 h-5" />,
+    info: <Info className="w-5 h-5" />,
+  };
+
+  const colors = {
+    success: isNeo
+      ? 'bg-[#00cc88] text-black border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none'
+      : `bg-green-500/90 text-white backdrop-blur-md shadow-lg rounded-lg border ${isDark ? 'border-green-500/30' : 'border-white/20'}`,
+    error: isNeo
+      ? 'bg-[#ff5555] text-black border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none'
+      : `bg-red-500/90 text-white backdrop-blur-md shadow-lg rounded-lg border ${isDark ? 'border-red-500/30' : 'border-white/20'}`,
+    info: isNeo
+      ? 'bg-[#8855ff] text-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none'
+      : `bg-blue-500/90 text-white backdrop-blur-md shadow-lg rounded-lg border ${isDark ? 'border-blue-500/30' : 'border-white/20'}`,
+  };
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 50, scale: 0.3 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}
+      className={`
+        flex items-center gap-3 px-4 py-3 mb-3 min-w-[300px] max-w-md pointer-events-auto
+        ${colors[toast.type]}
+      `}
+    >
+      <span className="shrink-0">{icons[toast.type]}</span>
+      <p className="flex-1 text-sm font-medium">{toast.message}</p>
+      <button
+        type="button"
+        onClick={() => removeToast(toast.id)}
+        className="shrink-0 hover:opacity-70 transition-opacity"
+        aria-label="Close notification"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </motion.div>
+  );
+};
+
+export const ToastContainer: React.FC = () => {
+  const { toasts } = useToast();
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col items-end pointer-events-none p-4">
+      <AnimatePresence mode="popLayout">
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} />
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+};

web/contexts/ToastContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+export type ToastType = 'success' | 'error' | 'info';
+
+export interface Toast {
+  id: string;
+  type: ToastType;
+  message: string;
+  duration?: number;
+}
+
+interface ToastContextType {
+  toasts: Toast[];
+  addToast: (message: string, type?: ToastType, duration?: number) => void;
+  removeToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const addToast = useCallback((message: string, type: ToastType = 'info', duration: number = 3000) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    setToasts((prev) => [...prev, { id, message, type, duration }]);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = (): ToastContextType => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};

web/pages/Auth.tsx

@@ -8,6 +8,7 @@ import { Spinner } from '../components/ui/Spinner';
 import { THEMES } from '../constants';
 import { useAuth } from '../contexts/AuthContext';
 import { useTheme } from '../contexts/ThemeContext';
+import { useToast } from '../contexts/ToastContext';
 import {
   login as apiLogin,
   signup as apiSignup,
@@ -26,6 +27,7 @@ export const Auth = () => {
 
   const { login } = useAuth();
   const { style, toggleStyle } = useTheme();
+  const { addToast } = useToast();
   const navigate = useNavigate();
 
   const handleGoogleSignIn = async () => {
@@ -40,6 +42,7 @@ export const Auth = () => {
         throw new Error('Invalid response from server');
       }
       login(access_token, user);
+      addToast('Welcome back!', 'success');
       navigate('/dashboard');
     } catch (err: any) {
       console.error('Google login error:', err);
@@ -75,6 +78,7 @@ export const Auth = () => {
 
       const { access_token, user } = res.data;
       login(access_token, user);
+      addToast(isLogin ? 'Welcome back!' : 'Account created successfully!', 'success');
       navigate('/dashboard');
     } catch (err: any) {
       if (err.response) {

web/pages/GroupDetails.tsx

@@ -9,6 +9,7 @@ import { Skeleton } from '../components/ui/Skeleton';
 import { THEMES } from '../constants';
 import { useAuth } from '../contexts/AuthContext';
 import { useTheme } from '../contexts/ThemeContext';
+import { useToast } from '../contexts/ToastContext';
 import {
     createExpense,
     createSettlement,
@@ -39,6 +40,7 @@ export const GroupDetails = () => {
     const navigate = useNavigate();
     const { user } = useAuth();
     const { style } = useTheme();
+    const { addToast } = useToast();
 
     const [group, setGroup] = useState<Group | null>(null);
     const [expenses, setExpenses] = useState<Expense[]>([]);
@@ -240,14 +242,16 @@ export const GroupDetails = () => {
         try {
             if (editingExpenseId) {
                 await updateExpense(id, editingExpenseId, payload);
+                addToast('Expense updated successfully!', 'success');
             } else {
                 await createExpense(id, payload);
+                addToast('Expense created successfully!', 'success');
             }
             setIsExpenseModalOpen(false);
             fetchData();
         } catch (err) {
             console.error(err);
-            alert('Error saving expense');
+            addToast('Error saving expense', 'error');
         }
     };
 
@@ -258,8 +262,9 @@ export const GroupDetails = () => {
                 await deleteExpense(id, editingExpenseId);
                 setIsExpenseModalOpen(false);
                 fetchData();
+                addToast('Expense deleted successfully', 'success');
             } catch (err) {
-                alert("Failed to delete expense");
+                addToast("Failed to delete expense", 'error');
             }
         }
     };
@@ -287,8 +292,9 @@ export const GroupDetails = () => {
             setIsPaymentModalOpen(false);
             setPaymentAmount('');
             fetchData();
+            addToast('Payment recorded successfully!', 'success');
         } catch (err) {
-            alert("Failed to record payment");
+            addToast("Failed to record payment", 'error');
         }
     };
 
@@ -299,8 +305,9 @@ export const GroupDetails = () => {
             await updateGroup(id, { name: editGroupName });
             setIsSettingsModalOpen(false);
             fetchData();
+            addToast('Group updated successfully!', 'success');
         } catch (err) {
-            alert("Failed to update group");
+            addToast("Failed to update group", 'error');
         }
     };
 
@@ -310,8 +317,9 @@ export const GroupDetails = () => {
             try {
                 await deleteGroup(id);
                 navigate('/groups');
+                addToast('Group deleted successfully', 'success');
             } catch (err) {
-                alert("Failed to delete group");
+                addToast("Failed to delete group", 'error');
             }
         }
     };
@@ -321,10 +329,10 @@ export const GroupDetails = () => {
         if (window.confirm("You can only leave when your balances are settled. Continue?")) {
             try {
                 await leaveGroup(id);
-                alert('You have left the group');
+                addToast('You have left the group', 'success');
                 navigate('/groups');
             } catch (err: any) {
-                alert(err.response?.data?.detail || "Cannot leave - please settle balances first");
+                addToast(err.response?.data?.detail || "Cannot leave - please settle balances first", 'error');
             }
         }
     };
@@ -344,8 +352,9 @@ export const GroupDetails = () => {
                 }
                 await removeMember(id, memberId);
                 fetchData();
+                addToast(`Removed ${memberName} from group`, 'success');
             } catch (err: any) {
-                alert(err.response?.data?.detail || "Failed to remove member");
+                addToast(err.response?.data?.detail || "Failed to remove member", 'error');
             }
         }
     };

web/pages/Groups.tsx

@@ -9,6 +9,7 @@ import { Modal } from '../components/ui/Modal';
 import { Skeleton } from '../components/ui/Skeleton';
 import { THEMES } from '../constants';
 import { useTheme } from '../contexts/ThemeContext';
+import { useToast } from '../contexts/ToastContext';
 import { createGroup, getBalanceSummary, getGroups, joinGroup } from '../services/api';
 import { BalanceSummary, Group, GroupBalanceSummary } from '../types';
 
@@ -24,6 +25,7 @@ export const Groups = () => {
 
   const navigate = useNavigate();
   const { style, mode } = useTheme();
+  const { addToast } = useToast();
   const isNeo = style === THEMES.NEOBRUTALISM;
 
   useEffect(() => {
@@ -57,8 +59,9 @@ export const Groups = () => {
       setNewGroupName('');
       setIsCreateModalOpen(false);
       loadData();
+      addToast('Group created successfully!', 'success');
     } catch (err) {
-      alert('Failed to create group');
+      addToast('Failed to create group', 'error');
     }
   };
 
@@ -69,8 +72,9 @@ export const Groups = () => {
       setJoinCode('');
       setIsJoinModalOpen(false);
       loadData();
+      addToast('Joined group successfully!', 'success');
     } catch (err) {
-      alert('Failed to join group (Invalid code or already joined)');
+      addToast('Failed to join group (Invalid code or already joined)', 'error');
     }
   };