chore: modify the display of errors (#1000)

src/components/Common/ErrorNotification/index.tsx

@@ -35,45 +35,53 @@ const ErrorNotification = ({
 
   if (errors.length === 0 || suppressErrors) return null;
 
+  // Only show the latest error to avoid overwhelming the user
+  const visibleError = errors[errors.length - 1];
+  const remainingCount = Math.max(0, errors.length - 1);
+
   return (
     <div
       className={`${
         isTauri ? "fixed" : "absolute"
       } bottom-10 right-4 z-50 max-w-[calc(100%-32px)] space-y-2`}
     >
-      {errors.map((error) => (
-        <div
-          key={error.id}
-          className={`flex justify-between gap-4 items-center p-4 rounded-lg shadow-lg ${
-            error.type === "error"
-              ? "bg-red-50 dark:bg-red-900"
-              : error.type === "warning"
-              ? "bg-yellow-50 dark:bg-yellow-900"
-              : "bg-blue-50 dark:bg-blue-900"
-          }`}
-        >
-          <div className="flex">
-            {error.type === "error" && (
-              <AlertCircle className="w-5 h-5 text-red-500 mr-2" />
-            )}
-            {error.type === "warning" && (
-              <AlertTriangle className="w-5 h-5 text-yellow-500 mr-2" />
-            )}
-            {error.type === "info" && (
-              <Info className="w-5 h-5 text-blue-500 mr-2" />
-            )}
+      <div
+        key={visibleError.id}
+        className={`flex justify-between gap-4 items-center p-4 rounded-lg shadow-lg ${
+          visibleError.type === "error"
+            ? "bg-red-50 dark:bg-red-900"
+            : visibleError.type === "warning"
+            ? "bg-yellow-50 dark:bg-yellow-900"
+            : "bg-blue-50 dark:bg-blue-900"
+        }`}
+      >
+        <div className="flex items-center">
+          {visibleError.type === "error" && (
+            <AlertCircle className="w-5 h-5 text-red-500 mr-2" />
+          )}
+          {visibleError.type === "warning" && (
+            <AlertTriangle className="w-5 h-5 text-yellow-500 mr-2" />
+          )}
+          {visibleError.type === "info" && (
+            <Info className="w-5 h-5 text-blue-500 mr-2" />
+          )}
 
-            <span className="text-sm text-gray-700 dark:text-gray-200">
-              {error.message}
+          <span className="text-sm text-gray-700 dark:text-gray-200">
+            {visibleError.message}
+          </span>
+
+          {remainingCount > 0 && (
+            <span className="ml-2 px-2 py-1 text-xs rounded-md bg-black/5 dark:bg-white/10 text-gray-600 dark:text-gray-300">
+              +{remainingCount}
             </span>
-          </div>
-
-          <X
-            className="w-5 h-5 ml-4 cursor-pointer text-gray-400 hover:text-gray-600"
-            onClick={() => removeError(error.id)}
-          />
+          )}
         </div>
-      ))}
+
+        <X
+          className="w-5 h-5 ml-4 cursor-pointer text-gray-400 hover:text-gray-600"
+          onClick={() => removeError(visibleError.id)}
+        />
+      </div>
     </div>
   );
 };