@janovix/blocks 1.2.0-rc.10 → 1.2.0-rc.12

package/dist/index.cjs

@@ -4842,19 +4842,19 @@ var sizeConfig = {
     button: "h-8 w-8",
     icon: "w-4 h-4",
     badge: "min-w-[16px] h-4 text-[10px] -top-1 -right-1",
-    dot: "w-2.5 h-2.5 -top-0.5 -right-0.5"
+    dot: "w-2.5 h-2.5 top-0 right-0"
   },
   md: {
     button: "h-9 w-9",
     icon: "w-5 h-5",
     badge: "min-w-[18px] h-[18px] text-[11px] -top-1 -right-1",
-    dot: "w-3 h-3 -top-0.5 -right-0.5"
+    dot: "w-3 h-3 top-0 right-0"
   },
   lg: {
     button: "h-10 w-10",
     icon: "w-6 h-6",
     badge: "min-w-[20px] h-5 text-xs -top-1.5 -right-1.5",
-    dot: "w-3.5 h-3.5 -top-0.5 -right-0.5"
+    dot: "w-3.5 h-3.5 top-0 right-0"
   }
 };
 var typeConfig = {
@@ -5026,6 +5026,24 @@ function NotificationsWidget({
     getIsReadRef.current = getIsRead;
   }, [getIsRead]);
   const unreadCount = notifications.filter((n) => !getIsRead(n)).length;
+  React2__namespace.useEffect(() => {
+    setOptimisticReadIds((prev) => {
+      const next = new Set(prev);
+      let changed = false;
+      prev.forEach((id) => {
+        const notification = notifications.find((n) => n.id === id);
+        if (notification?.read === true) {
+          next.delete(id);
+          changed = true;
+          console.log(
+            "[NotificationsWidget] Clearing optimistic state for server-confirmed read:",
+            id
+          );
+        }
+      });
+      return changed ? next : prev;
+    });
+  }, [notifications]);
   React2__namespace.useEffect(() => {
     console.log(
       "[NotificationsWidget] Notifications received:",
@@ -5086,14 +5104,9 @@ function NotificationsWidget({
       try {
         await Promise.resolve(onMarkAsRead(notificationId));
         console.log(
-          "[NotificationsWidget] Successfully marked as read:",
+          "[NotificationsWidget] Successfully marked as read (keeping optimistic state):",
           notificationId
         );
-        setOptimisticReadIds((prev) => {
-          const next = new Set(prev);
-          next.delete(notificationId);
-          return next;
-        });
       } catch (error) {
         console.error(
           "[NotificationsWidget] Failed to mark as read, reverting:",
@@ -5240,7 +5253,11 @@ function NotificationsWidget({
               initial: { scale: 0, opacity: 0 },
               animate: { scale: 1, opacity: 1 },
               exit: { scale: 0, opacity: 0 },
-              className: cn("absolute rounded-full", dotBgColor, styles.dot)
+              className: cn(
+                "absolute rounded-full z-10",
+                dotBgColor,
+                styles.dot
+              )
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: unreadCount > 0 && showPulse && pulseStyle !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5249,7 +5266,11 @@ function NotificationsWidget({
               initial: { scale: 1, opacity: 0.5 },
               animate: pulseVariants[pulseStyle].animate,
               transition: pulseVariants[pulseStyle].transition,
-              className: cn("absolute rounded-full", dotBgColor, styles.dot)
+              className: cn(
+                "absolute rounded-full z-0",
+                dotBgColor,
+                styles.dot
+              )
             }
           ) })
         ]