fix(notifications): reopen on click

Author: emir-karabeg

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

@@ -13,6 +13,7 @@ interface NotificationDropdownItemProps {
   message: string
   timestamp: number
   options?: NotificationOptions
+  setDropdownOpen?: (open: boolean) => void
 }
 
 const NotificationIcon = {
@@ -37,6 +38,7 @@ export function NotificationDropdownItem({
   message,
   timestamp,
   options,
+  setDropdownOpen,
 }: NotificationDropdownItemProps) {
   const { showNotification } = useNotificationStore()
   const Icon = NotificationIcon[type]
@@ -48,15 +50,23 @@ export function NotificationDropdownItem({
     return () => clearInterval(interval)
   }, [])
 
+  // Handle click to show the notification
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    showNotification(id)
+    // Close the dropdown after clicking
+    if (setDropdownOpen) {
+      setDropdownOpen(false)
+    }
+  }
+
   // Format time and replace "less than a minute ago" with "<1 minute ago"
   const rawTimeAgo = formatDistanceToNow(timestamp, { addSuffix: true })
   const timeAgo = rawTimeAgo.replace('less than a minute ago', '<1 minute ago')
 
   return (
-    <DropdownMenuItem
-      className="flex items-start gap-2 p-3 cursor-pointer"
-      onClick={() => showNotification(id)}
-    >
+    <DropdownMenuItem className="flex items-start gap-2 p-3 cursor-pointer" onClick={handleClick}>
       <Icon className={cn('h-4 w-4', NotificationColors[type])} />
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">

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

@@ -559,6 +559,7 @@ export function ControlBar() {
                   message={notification.message}
                   timestamp={notification.timestamp}
                   options={notification.options}
+                  setDropdownOpen={setNotificationsOpen}
                 />
               ))}
           </DropdownMenuContent>

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

@@ -148,6 +148,28 @@ export function NotificationList() {
       !removedIds.has(n.id)
   )
 
+  // Reset removedIds whenever a notification's visibility changes from false to true
+  useEffect(() => {
+    const newlyVisibleNotifications = notifications.filter(
+      (n) => n.isVisible && removedIds.has(n.id)
+    )
+
+    if (newlyVisibleNotifications.length > 0) {
+      setRemovedIds((prev) => {
+        const next = new Set(prev)
+        newlyVisibleNotifications.forEach((n) => next.delete(n.id))
+        return next
+      })
+
+      // Also reset fading state for these notifications
+      setFadingNotifications((prev) => {
+        const next = new Set(prev)
+        newlyVisibleNotifications.forEach((n) => next.delete(n.id))
+        return next
+      })
+    }
+  }, [notifications, removedIds])
+
   // Handle auto-dismissal of non-persistent notifications
   useEffect(() => {
     // Setup timers for each notification

sim/stores/notifications/store.ts

@@ -61,9 +61,16 @@ export const useNotificationStore = create<NotificationStore>()(
 
       showNotification: (id) =>
         set((state) => {
-          const newNotifications = state.notifications.map((n) =>
-            n.id === id ? { ...n, isVisible: true } : n
-          )
+          // Find the notification first to ensure it exists
+          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 }
+          
+          // Put the notification at the top so it's easily visible in dropdowns
+          const newNotifications = [updatedNotification, ...filteredNotifications]
           persistNotifications(newNotifications)
           return { notifications: newNotifications }
         }),