refactor(toast): streamline toast component structure and improve cleanup logic

- Adjusted class names for consistency in the Toast component.
- Refactored the toastHandler.clear function to improve cleanup logic by using a dedicated unmountAndRemove function.
- Ensured proper handling of the timer for toast notifications.

web/app/components/base/toast/index.tsx

@@ -77,11 +77,11 @@ const Toast = ({
         </div>
         <div className={cn('flex grow flex-col items-start gap-1 py-1', size === 'md' ? 'px-1' : 'px-0.5')}>
           <div className="flex items-center gap-1">
-            <div className="system-sm-semibold text-text-primary [word-break:break-word]">{message}</div>
+            <div className="text-text-primary system-sm-semibold [word-break:break-word]">{message}</div>
             {customComponent}
           </div>
           {!!children && (
-            <div className="system-xs-regular text-text-secondary">
+            <div className="text-text-secondary system-xs-regular">
               {children}
             </div>
           )}
@@ -149,25 +149,26 @@ Toast.notify = ({
   if (typeof window === 'object') {
     const holder = document.createElement('div')
     const root = createRoot(holder)
+    let timerId: ReturnType<typeof setTimeout> | undefined
 
-    toastHandler.clear = () => {
-      if (holder) {
+    const unmountAndRemove = () => {
+      if (timerId) {
+        clearTimeout(timerId)
+        timerId = undefined
+      }
+      if (typeof window !== 'undefined' && holder) {
         root.unmount()
         holder.remove()
       }
       onClose?.()
     }
 
+    toastHandler.clear = unmountAndRemove
+
     root.render(
       <ToastContext.Provider value={{
         notify: noop,
-        close: () => {
-          if (holder) {
-            root.unmount()
-            holder.remove()
-          }
-          onClose?.()
-        },
+        close: unmountAndRemove,
       }}
       >
         <Toast type={type} size={size} message={message} duration={duration} className={className} customComponent={customComponent} />
@@ -176,7 +177,7 @@ Toast.notify = ({
     document.body.appendChild(holder)
     const d = duration ?? defaultDuring
     if (d > 0)
-      setTimeout(toastHandler.clear, d)
+      timerId = setTimeout(unmountAndRemove, d)
   }
 
   return toastHandler

web/eslint-suppressions.json

@@ -1856,11 +1856,6 @@
       "count": 4
     }
   },
-  "app/components/base/file-uploader/utils.spec.ts": {
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "app/components/base/file-uploader/utils.ts": {
     "ts/no-explicit-any": {
       "count": 3
@@ -2033,11 +2028,6 @@
       "count": 1
     }
   },
-  "app/components/base/input/index.spec.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "app/components/base/input/index.stories.tsx": {
     "no-console": {
       "count": 2
@@ -2590,9 +2580,6 @@
   "app/components/base/toast/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/tooltip/index.tsx": {
@@ -2618,11 +2605,6 @@
       "count": 4
     }
   },
-  "app/components/base/with-input-validation/index.spec.tsx": {
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "app/components/base/with-input-validation/index.stories.tsx": {
     "no-console": {
       "count": 1