From b6ff9a3cb64ebd48ff0e1f2e29b6610dbd500fc9 Mon Sep 17 00:00:00 2001
From: Decobus <deco@deco.sh>
Date: Sat, 19 Jul 2025 05:39:21 -0400
Subject: [PATCH] Implement professional error handling and user feedback
 system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Major UX Improvements:
- Replace all alert() dialogs with elegant toast notifications
- Add comprehensive loading states for all async operations
- Implement client-side form validation with visual feedback
- Add React Error Boundary for graceful error recovery

Components Added:
- Toast notification system with success/error/warning/info types
- useToast hook for easy notification management
- ErrorBoundary component with development error details
- Form validation with real-time feedback

User Experience:
- Professional toast notifications instead of browser alerts
- Loading indicators prevent double-clicks and show progress
- Immediate validation feedback prevents submission errors
- Graceful error recovery with retry options
- Enhanced accessibility with proper ARIA labels

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/layout.tsx               |   7 ++-
 app/teams/page.tsx           | 115 +++++++++++++++++++++++++++--------
 components/ErrorBoundary.tsx |  76 +++++++++++++++++++++++
 components/Toast.tsx         | 115 +++++++++++++++++++++++++++++++++++
 lib/useToast.ts              |  63 +++++++++++++++++++
 5 files changed, 350 insertions(+), 26 deletions(-)
 create mode 100644 components/ErrorBoundary.tsx
 create mode 100644 components/Toast.tsx
 create mode 100644 lib/useToast.ts
diff --git a/app/layout.tsx b/app/layout.tsx
index 2d6c46e..d81d0a1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import './globals.css';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
 
 export const metadata = {
   title: 'OBS Source Switcher',
@@ -12,7 +13,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en">
       <body className="min-h-screen flex flex-col">
         <Header />
-        <main className="flex-1">{children}</main>
+        <main className="flex-1">
+          <ErrorBoundary>
+            {children}
+          </ErrorBoundary>
+        </main>
         <Footer />
       </body>
     </html>
diff --git a/app/teams/page.tsx b/app/teams/page.tsx
index 1613e3e..19b7a3b 100644
--- a/app/teams/page.tsx
+++ b/app/teams/page.tsx
@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import { Team } from '@/types';
+import { useToast } from '@/lib/useToast';
+import { ToastContainer } from '@/components/Toast';
 
 export default function Teams() {
   const [teams, setTeams] = useState<Team[]>([]);
@@ -10,6 +12,10 @@ export default function Teams() {
   const [editingTeam, setEditingTeam] = useState<Team | null>(null);
   const [editingName, setEditingName] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [updatingTeamId, setUpdatingTeamId] = useState<number | null>(null);
+  const [deletingTeamId, setDeletingTeamId] = useState<number | null>(null);
+  const [validationErrors, setValidationErrors] = useState<{[key: string]: string}>({});
+  const { toasts, removeToast, showSuccess, showError } = useToast();
 
   useEffect(() => {
     fetchTeams();
@@ -30,7 +36,22 @@ export default function Teams() {
 
   const handleAddTeam = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!newTeamName.trim()) return;
+    
+    // Client-side validation
+    const errors: {[key: string]: string} = {};
+    if (!newTeamName.trim()) {
+      errors.newTeamName = 'Team name is required';
+    } else if (newTeamName.trim().length < 2) {
+      errors.newTeamName = 'Team name must be at least 2 characters';
+    } else if (newTeamName.trim().length > 50) {
+      errors.newTeamName = 'Team name must be less than 50 characters';
+    }
+    
+    setValidationErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      showError('Validation Error', 'Please fix the form errors');
+      return;
+    }
     
     setIsSubmitting(true);
     try {
@@ -43,21 +64,35 @@ export default function Teams() {
       if (res.ok) {
         setNewTeamName('');
         fetchTeams();
+        showSuccess('Team Added', `"${newTeamName}" has been added successfully`);
       } else {
         const error = await res.json();
-        alert(`Error adding team: ${error.error}`);
+        showError('Failed to Add Team', error.error || 'Unknown error occurred');
       }
     } catch (error) {
       console.error('Error adding team:', error);
-      alert('Failed to add team');
+      showError('Failed to Add Team', 'Network error or server unavailable');
     } finally {
       setIsSubmitting(false);
     }
   };
 
   const handleUpdateTeam = async (teamId: number) => {
-    if (!editingName.trim()) return;
+    // Client-side validation
+    if (!editingName.trim()) {
+      showError('Validation Error', 'Team name cannot be empty');
+      return;
+    }
+    if (editingName.trim().length < 2) {
+      showError('Validation Error', 'Team name must be at least 2 characters');
+      return;
+    }
+    if (editingName.trim().length > 50) {
+      showError('Validation Error', 'Team name must be less than 50 characters');
+      return;
+    }
 
+    setUpdatingTeamId(teamId);
     try {
       const res = await fetch(`/api/teams/${teamId}`, {
         method: 'PUT',
@@ -69,21 +104,26 @@ export default function Teams() {
         setEditingTeam(null);
         setEditingName('');
         fetchTeams();
+        showSuccess('Team Updated', `Team name changed to "${editingName}"`);
       } else {
         const error = await res.json();
-        alert(`Error updating team: ${error.error}`);
+        showError('Failed to Update Team', error.error || 'Unknown error occurred');
       }
     } catch (error) {
       console.error('Error updating team:', error);
-      alert('Failed to update team');
+      showError('Failed to Update Team', 'Network error or server unavailable');
+    } finally {
+      setUpdatingTeamId(null);
     }
   };
 
   const handleDeleteTeam = async (teamId: number) => {
+    const teamToDelete = teams.find(t => t.team_id === teamId);
     if (!confirm('Are you sure you want to delete this team? This will also delete all associated streams.')) {
       return;
     }
 
+    setDeletingTeamId(teamId);
     try {
       const res = await fetch(`/api/teams/${teamId}`, {
         method: 'DELETE',
@@ -91,13 +131,16 @@ export default function Teams() {
 
       if (res.ok) {
         fetchTeams();
+        showSuccess('Team Deleted', `"${teamToDelete?.team_name || 'Team'}" has been deleted`);
       } else {
         const error = await res.json();
-        alert(`Error deleting team: ${error.error}`);
+        showError('Failed to Delete Team', error.error || 'Unknown error occurred');
       }
     } catch (error) {
       console.error('Error deleting team:', error);
-      alert('Failed to delete team');
+      showError('Failed to Delete Team', 'Network error or server unavailable');
+    } finally {
+      setDeletingTeamId(null);
     }
   };
 
@@ -125,24 +168,39 @@ export default function Teams() {
       <div className="glass p-6 mb-6">
         <h2 className="card-title">Add New Team</h2>
         <form onSubmit={handleAddTeam} className="max-w-md mx-auto">
-          <div className="form-row">
-            <input
-              type="text"
-              value={newTeamName}
-              onChange={(e) => setNewTeamName(e.target.value)}
-              placeholder="Enter team name"
-              className="input"
-              style={{ flex: 1 }}
-              required
-            />
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className="btn btn-success"
+          <div>
+            <div className="form-row">
+              <input
+                type="text"
+                value={newTeamName}
+                onChange={(e) => {
+                  setNewTeamName(e.target.value);
+                  // Clear validation error when user starts typing
+                  if (validationErrors.newTeamName) {
+                    setValidationErrors(prev => ({ ...prev, newTeamName: '' }));
+                  }
+                }}
+                placeholder="Enter team name"
+                className={`input ${
+                  validationErrors.newTeamName ? 'border-red-500/60 bg-red-500/10' : ''
+                }`}
+                style={{ flex: 1 }}
+                required
+              />
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="btn btn-success"
             >
               <span className="icon">➕</span>
               {isSubmitting ? 'Adding...' : 'Add Team'}
-            </button>
+              </button>
+            </div>
+            {validationErrors.newTeamName && (
+              <div className="text-red-400 text-sm mt-2 text-center">
+                {validationErrors.newTeamName}
+              </div>
+            )}
           </div>
         </form>
       </div>
@@ -180,14 +238,16 @@ export default function Teams() {
                     />
                     <button
                       onClick={() => handleUpdateTeam(team.team_id)}
+                      disabled={updatingTeamId === team.team_id}
                       className="btn btn-success btn-sm"
                       title="Save changes"
                     >
                       <span className="icon">✅</span>
-                      Save
+                      {updatingTeamId === team.team_id ? 'Saving...' : 'Save'}
                     </button>
                     <button
                       onClick={cancelEditing}
+                      disabled={updatingTeamId === team.team_id}
                       className="btn-secondary btn-sm"
                       title="Cancel editing"
                     >
@@ -209,6 +269,7 @@ export default function Teams() {
                     <div className="button-group">
                       <button
                         onClick={() => startEditing(team)}
+                        disabled={deletingTeamId === team.team_id || updatingTeamId === team.team_id}
                         className="btn-secondary btn-sm"
                         title="Edit team"
                       >
@@ -217,11 +278,12 @@ export default function Teams() {
                       </button>
                       <button
                         onClick={() => handleDeleteTeam(team.team_id)}
+                        disabled={deletingTeamId === team.team_id || updatingTeamId === team.team_id}
                         className="btn-danger btn-sm"
                         title="Delete team"
                       >
                         <span className="icon">🗑️</span>
-                        Delete
+                        {deletingTeamId === team.team_id ? 'Deleting...' : 'Delete'}
                       </button>
                     </div>
                   </div>
@@ -231,6 +293,9 @@ export default function Teams() {
           </div>
         )}
       </div>
+      
+      {/* Toast Notifications */}
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
     </div>
   );
 }
\ No newline at end of file
diff --git a/components/ErrorBoundary.tsx b/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..76143f7
--- /dev/null
+++ b/components/ErrorBoundary.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="glass p-8 text-center max-w-md mx-auto mt-8">
+          <div className="text-6xl mb-4">⚠️</div>
+          <h2 className="text-xl font-semibold mb-4 text-red-400">
+            Something went wrong
+          </h2>
+          <p className="text-white/80 mb-6">
+            An unexpected error occurred. Please refresh the page or try again later.
+          </p>
+          <div className="button-group" style={{ justifyContent: 'center' }}>
+            <button
+              onClick={() => window.location.reload()}
+              className="btn btn-success"
+            >
+              <span className="icon">🔄</span>
+              Refresh Page
+            </button>
+            <button
+              onClick={() => this.setState({ hasError: false, error: undefined })}
+              className="btn-secondary"
+            >
+              <span className="icon">🔄</span>
+              Try Again
+            </button>
+          </div>
+          
+          {process.env.NODE_ENV === 'development' && this.state.error && (
+            <details className="mt-6 text-left">
+              <summary className="text-red-400 cursor-pointer font-mono text-sm">
+                Error Details (Development)
+              </summary>
+              <pre className="text-red-300 text-xs mt-2 p-3 bg-red-500/10 rounded border border-red-500/20 overflow-auto">
+                {this.state.error.stack}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/components/Toast.tsx b/components/Toast.tsx
new file mode 100644
index 0000000..26c64b2
--- /dev/null
+++ b/components/Toast.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export interface Toast {
+  id: string;
+  type: ToastType;
+  title: string;
+  message?: string;
+  duration?: number;
+}
+
+interface ToastProps {
+  toast: Toast;
+  onRemove: (id: string) => void;
+}
+
+export function ToastComponent({ toast, onRemove }: ToastProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Animate in
+    setTimeout(() => setIsVisible(true), 10);
+
+    // Auto remove after duration
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(() => onRemove(toast.id), 300);
+    }, toast.duration || 5000);
+
+    return () => clearTimeout(timer);
+  }, [toast.id, toast.duration, onRemove]);
+
+  const getToastStyles = () => {
+    switch (toast.type) {
+      case 'success':
+        return 'bg-green-500/20 border-green-500/40 text-green-300';
+      case 'error':
+        return 'bg-red-500/20 border-red-500/40 text-red-300';
+      case 'warning':
+        return 'bg-yellow-500/20 border-yellow-500/40 text-yellow-300';
+      case 'info':
+        return 'bg-blue-500/20 border-blue-500/40 text-blue-300';
+      default:
+        return 'bg-gray-500/20 border-gray-500/40 text-gray-300';
+    }
+  };
+
+  const getIcon = () => {
+    switch (toast.type) {
+      case 'success':
+        return '✅';
+      case 'error':
+        return '❌';
+      case 'warning':
+        return '⚠️';
+      case 'info':
+        return 'ℹ️';
+      default:
+        return '📢';
+    }
+  };
+
+  return (
+    <div
+      className={`
+        glass p-4 border rounded-lg min-w-80 max-w-md
+        transform transition-all duration-300 ease-out
+        ${isVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
+        ${getToastStyles()}
+      `}
+    >
+      <div className="flex items-start gap-3">
+        <span className="text-lg flex-shrink-0">{getIcon()}</span>
+        <div className="flex-1 min-w-0">
+          <div className="font-semibold text-sm">{toast.title}</div>
+          {toast.message && (
+            <div className="text-sm opacity-90 mt-1">{toast.message}</div>
+          )}
+        </div>
+        <button
+          onClick={() => {
+            setIsVisible(false);
+            setTimeout(() => onRemove(toast.id), 300);
+          }}
+          className="text-white/60 hover:text-white text-lg leading-none flex-shrink-0"
+          aria-label="Close notification"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+  );
+}
+
+interface ToastContainerProps {
+  toasts: Toast[];
+  onRemove: (id: string) => void;
+}
+
+export function ToastContainer({ toasts, onRemove }: ToastContainerProps) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed top-4 right-4 z-50 space-y-3 pointer-events-none">
+      <div className="space-y-3 pointer-events-auto">
+        {toasts.map((toast) => (
+          <ToastComponent key={toast.id} toast={toast} onRemove={onRemove} />
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/lib/useToast.ts b/lib/useToast.ts
new file mode 100644
index 0000000..a885331
--- /dev/null
+++ b/lib/useToast.ts
@@ -0,0 +1,63 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Toast, ToastType } from '@/components/Toast';
+
+export function useToast() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((
+    type: ToastType,
+    title: string,
+    message?: string,
+    duration?: number
+  ) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    const toast: Toast = {
+      id,
+      type,
+      title,
+      message,
+      duration: duration ?? (type === 'error' ? 7000 : 5000), // Errors stay longer
+    };
+
+    setToasts((prev) => [...prev, toast]);
+    return id;
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const clearAllToasts = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  // Convenience methods
+  const showSuccess = useCallback((title: string, message?: string) => {
+    return addToast('success', title, message);
+  }, [addToast]);
+
+  const showError = useCallback((title: string, message?: string) => {
+    return addToast('error', title, message);
+  }, [addToast]);
+
+  const showWarning = useCallback((title: string, message?: string) => {
+    return addToast('warning', title, message);
+  }, [addToast]);
+
+  const showInfo = useCallback((title: string, message?: string) => {
+    return addToast('info', title, message);
+  }, [addToast]);
+
+  return {
+    toasts,
+    addToast,
+    removeToast,
+    clearAllToasts,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+  };
+}
\ No newline at end of file
