stabilize new messages pill

components/brain/my-stream/MyStreamWaveChat.tsx

@@ -7,7 +7,11 @@ import MobileMemesArtSubmissionBtn from "@/components/waves/memes/submission/Mob
 import PrivilegedDropCreator, {
   DropMode,
 } from "@/components/waves/PrivilegedDropCreator";
-import { UnreadDividerProvider } from "@/contexts/wave/UnreadDividerContext";
+import { useNotificationsContext } from "@/components/notifications/NotificationsContext";
+import {
+  UnreadDividerProvider,
+  useUnreadDivider,
+} from "@/contexts/wave/UnreadDividerContext";
 import type { ApiDrop } from "@/generated/models/ApiDrop";
 import type { ApiWave } from "@/generated/models/ApiWave";
 import { getHomeRoute } from "@/helpers/navigation.helpers";
@@ -18,6 +22,7 @@ import type { WaveViewMode } from "@/hooks/useWaveViewMode";
 import { selectEditingDropId } from "@/store/editSlice";
 import type { ActiveDropState } from "@/types/dropInteractionTypes";
 import { ActiveDropAction } from "@/types/dropInteractionTypes";
+import { commonApiPostWithoutBodyAndResponse } from "@/services/api/common-api";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useSelector } from "react-redux";
@@ -36,6 +41,35 @@ interface MyStreamWaveChatProps {
   readonly onDropClick: (drop: ExtendedDrop) => void;
 }
 
+interface WaveChatLeaveHandlerProps {
+  readonly waveId: string;
+}
+
+const WaveChatLeaveHandler: React.FC<WaveChatLeaveHandlerProps> = ({
+  waveId,
+}) => {
+  const { setUnreadDividerSerialNo } = useUnreadDivider();
+  const { removeWaveDeliveredNotifications } = useNotificationsContext();
+
+  useEffect(() => {
+    return () => {
+      setUnreadDividerSerialNo(null);
+      void (async () => {
+        try {
+          await Promise.resolve(removeWaveDeliveredNotifications(waveId));
+          await commonApiPostWithoutBodyAndResponse({
+            endpoint: `notifications/wave/${waveId}/read`,
+          });
+        } catch (error: unknown) {
+          console.error("Failed to mark feed as read:", error);
+        }
+      })();
+    };
+  }, [waveId, setUnreadDividerSerialNo, removeWaveDeliveredNotifications]);
+
+  return null;
+};
+
 const MyStreamWaveChat: React.FC<MyStreamWaveChatProps> = ({
   wave,
   firstUnreadSerialNo,
@@ -65,21 +99,6 @@ const MyStreamWaveChat: React.FC<MyStreamWaveChatProps> = ({
     setActiveDropState({ waveId: wave.id, activeDrop: nextActiveDrop });
   };
 
-  const capturedDividerRef = useRef<{
-    waveId: string;
-    serialNo: number | null;
-  } | null>(null);
-
-  if (
-    !capturedDividerRef.current ||
-    capturedDividerRef.current.waveId !== wave.id
-  ) {
-    capturedDividerRef.current = {
-      waveId: wave.id,
-      serialNo: firstUnreadSerialNo,
-    };
-  }
-
   const initialDropState = useMemo<InitialDropState | null>(() => {
     const dropParam = searchParams.get("serialNo");
     if (!dropParam) {
@@ -107,33 +126,35 @@ const MyStreamWaveChat: React.FC<MyStreamWaveChatProps> = ({
     };
   }, [searchParams, wave.id, firstUnreadSerialNo]);
 
-  useEffect(() => {
+  const [capturedDividerState] = useState<{
+    readonly waveId: string;
+    readonly serialNo: number | null;
+  }>(() => {
     if (
       initialDropState?.waveId === wave.id &&
       initialDropState.dividerSerialNo !== null
     ) {
-      capturedDividerRef.current = {
+      return {
         waveId: wave.id,
         serialNo: initialDropState.dividerSerialNo,
       };
-    } else if (
-      !capturedDividerRef.current ||
-      capturedDividerRef.current.waveId !== wave.id
-    ) {
-      capturedDividerRef.current = {
-        waveId: wave.id,
-        serialNo: firstUnreadSerialNo,
-      };
     }
-  }, [initialDropState, wave.id, firstUnreadSerialNo]);
+
+    return {
+      waveId: wave.id,
+      serialNo: firstUnreadSerialNo,
+    };
+  });
 
   const scrollTarget =
     initialDropState?.waveId === wave.id ? initialDropState.serialNo : null;
 
-  const dividerTarget =
-    initialDropState?.waveId === wave.id
-      ? initialDropState.dividerSerialNo
-      : (capturedDividerRef.current?.serialNo ?? null);
+  let dividerTarget = firstUnreadSerialNo;
+  if (initialDropState?.waveId === wave.id) {
+    dividerTarget = initialDropState.dividerSerialNo;
+  } else if (capturedDividerState.waveId === wave.id) {
+    dividerTarget = capturedDividerState.serialNo;
+  }
 
   useEffect(() => {
     if (!initialDropState) {
@@ -208,6 +229,7 @@ const MyStreamWaveChat: React.FC<MyStreamWaveChatProps> = ({
       initialSerialNo={dividerTarget ?? null}
       key={`unread-divider-${wave.id}`}
     >
+      <WaveChatLeaveHandler waveId={wave.id} />
       <div
         ref={containerRef}
         className={`${containerClassName}`}