Initial commit: igny8 project

frontend/src/components/common/GlobalErrorDisplay.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { useErrorHandler } from '../../hooks/useErrorHandler';
+
+export default function GlobalErrorDisplay() {
+  const { errors, clearError, clearAllErrors } = useErrorHandler('GlobalErrorDisplay');
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(errors.length > 0);
+  }, [errors.length]);
+
+  if (!isVisible || errors.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-4 right-4 z-[9999] max-w-md space-y-2">
+      {errors.map((error, index) => (
+        <div
+          key={index}
+          className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg shadow-lg p-4 animate-in slide-in-from-right"
+        >
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-red-600 dark:text-red-400 text-lg">⚠️</span>
+                <span className="text-sm font-semibold text-red-800 dark:text-red-200">
+                  {error.source}
+                </span>
+              </div>
+              <p className="text-sm text-red-700 dark:text-red-300 mb-2">
+                {error.message}
+              </p>
+              {error.stack && (
+                <details className="mt-2">
+                  <summary className="text-xs text-red-600 dark:text-red-400 cursor-pointer hover:underline">
+                    Show stack trace
+                  </summary>
+                  <pre className="mt-2 text-xs bg-red-100 dark:bg-red-900/40 p-2 rounded overflow-auto max-h-32">
+                    {error.stack}
+                  </pre>
+                </details>
+              )}
+            </div>
+            <button
+              onClick={() => clearError(index)}
+              className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 text-xl leading-none"
+              aria-label="Dismiss error"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      ))}
+      {errors.length > 1 && (
+        <button
+          onClick={clearAllErrors}
+          className="w-full px-3 py-2 text-xs bg-red-600 text-white rounded hover:bg-red-700"
+        >
+          Clear All Errors
+        </button>
+      )}
+    </div>
+  );
+}
+