Add toast notifications for user feedback

- Created ToastContext with showToast hook
- Toast notifications appear in bottom-right, auto-dismiss after 3s
- Added success/error toasts for:
  - Saving notification settings
  - Refreshing prices
  - Updating check interval
  - Deleting products
- Replaced alert() calls with toast notifications

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider, useAuth } from './context/AuthContext';
+import { ToastProvider } from './context/ToastContext';
 import Login from './pages/Login';
 import Register from './pages/Register';
 import Dashboard from './pages/Dashboard';
@@ -120,7 +121,9 @@ export default function App() {
     <ThemeInitializer>
       <BrowserRouter>
         <AuthProvider>
-          <AppRoutes />
+          <ToastProvider>
+            <AppRoutes />
+          </ToastProvider>
         </AuthProvider>
       </BrowserRouter>
     </ThemeInitializer>

frontend/src/context/ToastContext.tsx

@@ -0,0 +1,168 @@
+import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+interface Toast {
+  id: number;
+  message: string;
+  type: 'success' | 'error' | 'info';
+}
+
+interface ToastContextType {
+  showToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+interface ToastProviderProps {
+  children: ReactNode;
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = useCallback((message: string, type: 'success' | 'error' | 'info' = 'success') => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, type }]);
+
+    // Auto-dismiss after 3 seconds
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    }, 3000);
+  }, []);
+
+  const removeToast = useCallback((id: number) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </ToastContext.Provider>
+  );
+}
+
+interface ToastContainerProps {
+  toasts: Toast[];
+  onRemove: (id: number) => void;
+}
+
+function ToastContainer({ toasts, onRemove }: ToastContainerProps) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <>
+      <style>{`
+        .toast-container {
+          position: fixed;
+          bottom: 1.5rem;
+          right: 1.5rem;
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+          z-index: 9999;
+          pointer-events: none;
+        }
+
+        .toast {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 0.875rem 1.25rem;
+          border-radius: 0.5rem;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          font-size: 0.9375rem;
+          font-weight: 500;
+          pointer-events: auto;
+          animation: toast-slide-in 0.3s ease-out;
+          max-width: 360px;
+        }
+
+        @keyframes toast-slide-in {
+          from {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+
+        .toast.toast-success {
+          background: #10b981;
+          color: white;
+        }
+
+        .toast.toast-error {
+          background: #ef4444;
+          color: white;
+        }
+
+        .toast.toast-info {
+          background: #6366f1;
+          color: white;
+        }
+
+        .toast-icon {
+          font-size: 1.125rem;
+          flex-shrink: 0;
+        }
+
+        .toast-message {
+          flex: 1;
+        }
+
+        .toast-close {
+          background: none;
+          border: none;
+          color: inherit;
+          opacity: 0.7;
+          cursor: pointer;
+          padding: 0.25rem;
+          font-size: 1.125rem;
+          line-height: 1;
+          flex-shrink: 0;
+        }
+
+        .toast-close:hover {
+          opacity: 1;
+        }
+
+        @media (max-width: 480px) {
+          .toast-container {
+            left: 1rem;
+            right: 1rem;
+            bottom: 1rem;
+          }
+
+          .toast {
+            max-width: none;
+          }
+        }
+      `}</style>
+      <div className="toast-container">
+        {toasts.map((toast) => (
+          <div key={toast.id} className={`toast toast-${toast.type}`}>
+            <span className="toast-icon">
+              {toast.type === 'success' && '✓'}
+              {toast.type === 'error' && '✕'}
+              {toast.type === 'info' && 'ℹ'}
+            </span>
+            <span className="toast-message">{toast.message}</span>
+            <button className="toast-close" onClick={() => onRemove(toast.id)}>
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

frontend/src/pages/ProductDetail.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import Layout from '../components/Layout';
 import PriceChart from '../components/PriceChart';
+import { useToast } from '../context/ToastContext';
 import {
   productsApi,
   pricesApi,
@@ -14,6 +15,7 @@ import {
 export default function ProductDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const { showToast } = useToast();
 
   const [product, setProduct] = useState<ProductWithStats | null>(null);
   const [prices, setPrices] = useState<PriceHistory[]>([]);
@@ -83,8 +85,9 @@ export default function ProductDetail() {
     try {
       await pricesApi.refresh(productId);
       await fetchData(30);
+      showToast('Price refreshed');
     } catch {
-      alert('Failed to refresh price');
+      showToast('Failed to refresh price', 'error');
     } finally {
       setIsRefreshing(false);
     }
@@ -99,7 +102,7 @@ export default function ProductDetail() {
       await productsApi.delete(productId);
       navigate('/');
     } catch {
-      alert('Failed to delete product');
+      showToast('Failed to delete product', 'error');
     }
   };
 
@@ -113,8 +116,9 @@ export default function ProductDetail() {
     try {
       await productsApi.update(productId, { refresh_interval: newInterval });
       setProduct({ ...product, refresh_interval: newInterval });
+      showToast('Check interval updated');
     } catch {
-      alert('Failed to update refresh interval');
+      showToast('Failed to update refresh interval', 'error');
     } finally {
       setIsSaving(false);
     }
@@ -137,8 +141,9 @@ export default function ProductDetail() {
         target_price: target,
         notify_back_in_stock: notifyBackInStock,
       });
+      showToast('Notification settings saved');
     } catch {
-      alert('Failed to save notification settings');
+      showToast('Failed to save notification settings', 'error');
     } finally {
       setIsSavingNotifications(false);
     }

frontend/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/components/authform.tsx","./src/components/layout.tsx","./src/components/pricechart.tsx","./src/components/productcard.tsx","./src/components/productform.tsx","./src/components/sparkline.tsx","./src/context/authcontext.tsx","./src/context/toastcontext.tsx","./src/hooks/useauth.ts","./src/pages/dashboard.tsx","./src/pages/login.tsx","./src/pages/productdetail.tsx","./src/pages/register.tsx","./src/pages/settings.tsx"],"version":"5.9.3"}

frontend/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

frontend/vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 5173,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:3001',
+                changeOrigin: true,
+            },
+        },
+    },
+});