fix(notifications): dropdown logic and styling

sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx

@@ -29,7 +29,7 @@ const NotificationColors = {
   console: 'text-foreground',
   api: 'text-[#802FFF]',
   marketplace: 'text-foreground',
-  info: 'text-blue-500',
+  info: 'text-foreground',
 }
 
 export function NotificationDropdownItem({
@@ -64,41 +64,8 @@ export function NotificationDropdownItem({
     const notification = getFullNotification()
 
     if (notification) {
-      // For persistent notifications like API info, just re-show them
-      if (notification.options?.isPersistent) {
-        showNotification(id)
-      } else {
-        // For non-persistent notifications, we have different strategies:
-
-        if (notification.isVisible) {
-          if (notification.isFading) {
-            // If it's currently fading, remove and re-add it to restart animation sequence
-            removeNotification(id)
-
-            // Re-add with same properties but new ID
-            addNotification(
-              notification.type,
-              notification.message,
-              notification.workflowId,
-              notification.options
-            )
-          } else {
-            // If visible but not fading, just make sure it's at the top of the stack
-            showNotification(id)
-          }
-        } else {
-          // If not visible, we re-add it instead of just showing it
-          // This ensures a fresh animation sequence
-
-          // Create a new notification with same properties
-          addNotification(
-            notification.type,
-            notification.message,
-            notification.workflowId,
-            notification.options
-          )
-        }
-      }
+      // Simply show the notification regardless of its current state
+      showNotification(id)
     } else {
       // Fallback for any case where the notification doesn't exist anymore
       addNotification(type, message, null, options)

sim/app/w/[id]/components/notifications/notifications.tsx

@@ -577,9 +577,8 @@ export function NotificationAlert({ notification, isFading, onHide }: Notificati
               <Icon
                 className={cn('h-4 w-4', {
                   '!text-red-500 mt-[-3px]': type === 'error',
-                  'text-foreground mt-[-3px]': type === 'console',
-                  'mt-[-4.5px] text-foreground ': type === 'marketplace',
-                  '!text-blue-500 mt-[-3px]': type === 'info',
+                  'text-foreground mt-[-4px]': type === 'console' || type === 'info',
+                  'text-foreground': type === 'marketplace',
                 })}
               />
             </div>

sim/stores/notifications/store.ts

@@ -120,22 +120,31 @@ export const useNotificationStore = create<NotificationStore>()(
           const notification = state.notifications.find((n) => n.id === id)
           if (!notification) return { notifications: state.notifications }
 
-          // Bring the notification to the top and make it visible
-          const filteredNotifications = state.notifications.filter((n) => n.id !== id)
-          const updatedNotification = { ...notification, isVisible: true, read: false, isFading: false }
-          
-          // Put the notification at the top so it's easily visible in dropdowns
-          let newNotifications = [updatedNotification, ...filteredNotifications]
+          // Update the notification in place without changing its position
+          const newNotifications = state.notifications.map((n) => {
+            if (n.id === id) {
+              // Only update visibility state, preserve timestamp and position
+              return { 
+                ...n, 
+                isVisible: true, 
+                read: false, 
+                isFading: false
+              }
+            }
+            return n
+          })
           
           // Check if we need to auto-fade older notifications due to the limit
           const workflowId = notification.workflowId;
           const workflowVisibleCount = get().getVisibleNotificationCount(workflowId);
           
+          let updatedNotifications = [...newNotifications];
+          
           if (workflowVisibleCount > MAX_VISIBLE_NOTIFICATIONS) {
             // Find the oldest non-persistent visible notification to fade out
-            newNotifications = newNotifications.map((n, index) => {
+            updatedNotifications = updatedNotifications.map((n) => {
               // Don't touch the newly shown notification
-              if (index === 0) return n;
+              if (n.id === id) return n;
               
               // Only target notifications from the same workflow that are visible, not persistent, and not already fading
               if (
@@ -152,8 +161,22 @@ export const useNotificationStore = create<NotificationStore>()(
             });
           }
           
-          persistNotifications(newNotifications)
-          return { notifications: newNotifications }
+          // If notification is not persistent, restart the fade timer
+          if (!notification.options?.isPersistent) {
+            setTimeout(() => {
+              // Start fade out animation
+              set((state) => {
+                const newNotifications = state.notifications.map((n) =>
+                  n.id === id ? { ...n, isFading: true } : n
+                )
+                persistNotifications(newNotifications)
+                return { notifications: newNotifications }
+              })
+            }, NOTIFICATION_TIMEOUT)
+          }
+          
+          persistNotifications(updatedNotifications)
+          return { notifications: updatedNotifications }
         }),
 
       markAsRead: (id) =>