fix and update

apps/frontend/components/notifications/realtime-provider.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useAuth } from '@/components/id/auth-provider';
-import { ensureApiGatewayReady, getWsUrl, type ChatMessage } from '@/lib/api';
+import { ensureApiGatewayReady, fetchUnreadNotificationCount, getWsUrl, type ChatMessage } from '@/lib/api';
 import { dispatchAvatarUpdated, dispatchChatRoomAvatarUpdated } from '@/lib/avatar-events';
 
 export interface RealtimeEvent {
@@ -31,7 +31,7 @@ interface RealtimeContextValue {
 const RealtimeContext = React.createContext<RealtimeContextValue | null>(null);
 
 export function RealtimeProvider({ children }: { children: React.ReactNode }) {
-  const { user, token, isPinLocked, isLoading, isApiReady } = useAuth();
+  const { user, token, isPinLocked, isLoading, isContentReady } = useAuth();
   const [unreadCount, setUnreadCount] = React.useState(0);
   const [connected, setConnected] = React.useState(false);
   const listenersRef = React.useRef(new Set<Listener>());
@@ -48,7 +48,26 @@ export function RealtimeProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   React.useEffect(() => {
-    if (!user || !token || isPinLocked || isLoading || !isApiReady) {
+    if (!user || !token || isPinLocked || isLoading || !isContentReady) {
+      setUnreadCount(0);
+      return;
+    }
+    let cancelled = false;
+    const timer = window.setTimeout(() => {
+      void fetchUnreadNotificationCount(token)
+        .then((result) => {
+          if (!cancelled) setUnreadCount(result.count ?? 0);
+        })
+        .catch(() => undefined);
+    }, 400);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [isContentReady, isLoading, isPinLocked, token, user]);
+
+  React.useEffect(() => {
+    if (!user || !token || isPinLocked || isLoading || !isContentReady) {
       socketRef.current?.close();
       socketRef.current = null;
       setConnected(false);
@@ -121,7 +140,7 @@ export function RealtimeProvider({ children }: { children: React.ReactNode }) {
       socketRef.current = null;
       setConnected(false);
     };
-  }, [emit, isApiReady, isLoading, isPinLocked, token, user]);
+  }, [emit, isContentReady, isLoading, isPinLocked, token, user]);
 
   return (
     <RealtimeContext.Provider value={{ unreadCount, setUnreadCount, subscribe, connected }}>