Mirrors/coco-app
1
0
Fork 0
mirror of https://github.com/infinilabs/coco-app.git synced 2025-12-16 11:37:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: modify the display of errors (#1000)

Browse Source
This commit is contained in:
BiggerRain
2025-12-05 15:15:42 +08:00
committed by GitHub
parent 3b80eb77b4
commit 18828ab043
1 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/Common/ErrorNotification/index.tsx
View File

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