Fix/245 notification read unread distinction

frontend/src/App.jsx

@@ -43,7 +43,7 @@ function App() {
   const { healthy, error: healthError, checking: healthChecking, retry: retryHealth } = useContractHealth();
 
   const userAddress = getMainnetAddress(userData);
-  const { notifications, unreadCount, markAllRead, loading: notificationsLoading } = useNotifications(userAddress);
+  const { notifications, unreadCount, lastSeenTimestamp, markAllRead, loading: notificationsLoading } = useNotifications(userAddress);
   const { isOwner } = useAdmin(userAddress);
 
   usePageTitle();
@@ -137,6 +137,7 @@ function App() {
         authLoading={authLoading}
         notifications={notifications}
         unreadCount={unreadCount}
+        lastSeenTimestamp={lastSeenTimestamp}
         onMarkNotificationsRead={markAllRead}
         notificationsLoading={notificationsLoading}
         apiReachable={healthy}

frontend/src/components/Header.jsx

@@ -24,7 +24,7 @@ import { Sun, Moon } from 'lucide-react';
  * @param {Function} props.onMarkNotificationsRead - Callback to mark all read.
  * @param {boolean} props.notificationsLoading - Whether notifications are loading.
  */
-export default function Header({ userData, onAuth, authLoading, notifications, unreadCount, onMarkNotificationsRead, notificationsLoading, apiReachable = null }) {
+export default function Header({ userData, onAuth, authLoading, notifications, unreadCount, lastSeenTimestamp, onMarkNotificationsRead, notificationsLoading, apiReachable = null }) {
     const { theme, toggleTheme } = useTheme();
     const isOnline = useOnlineStatus();
 
@@ -85,6 +85,7 @@ export default function Header({ userData, onAuth, authLoading, notifications, u
                                 unreadCount={unreadCount}
                                 onMarkRead={onMarkNotificationsRead}
                                 loading={notificationsLoading}
+                                lastSeenTimestamp={lastSeenTimestamp}
                             />
                         )}
 

frontend/src/components/NotificationBell.jsx

@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react';
 import { formatSTX, formatAddress } from '../lib/utils';
 import { Bell } from 'lucide-react';
 
-export default function NotificationBell({ notifications, unreadCount, onMarkRead, loading }) {
+export default function NotificationBell({ notifications, unreadCount, onMarkRead, loading, lastSeenTimestamp }) {
     const [open, setOpen] = useState(false);
     const dropdownRef = useRef(null);
 
@@ -25,6 +25,11 @@ export default function NotificationBell({ notifications, unreadCount, onMarkRea
 
     const truncateAddr = (addr) => formatAddress(addr, 6, 4);
 
+    const isUnread = (tip) => {
+        if (lastSeenTimestamp == null) return false;
+        return tip.timestamp > lastSeenTimestamp;
+    };
+
     return (
         <div className="relative" ref={dropdownRef}>
             <button
@@ -75,7 +80,7 @@ export default function NotificationBell({ notifications, unreadCount, onMarkRea
                             notifications.slice(0, 20).map((tip, i) => (
                                 <div
                                     key={tip.txId || i}
-                                    className="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors border-b border-gray-50 dark:border-gray-800/50 last:border-0"
+                                    className={`px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors border-b border-gray-50 dark:border-gray-800/50 last:border-0${isUnread(tip) ? ' bg-blue-50 dark:bg-blue-900/20' : ''}`}
                                 >
                                     <div className="flex items-start justify-between gap-2">
                                         <div className="flex-1 min-w-0">
@@ -94,7 +99,9 @@ export default function NotificationBell({ notifications, unreadCount, onMarkRea
                                                 </p>
                                             )}
                                         </div>
-                                        <div className="w-2 h-2 rounded-full bg-green-400 flex-shrink-0 mt-1.5" />
+                                        {isUnread(tip) && (
+                                            <div className="w-2 h-2 rounded-full bg-green-400 flex-shrink-0 mt-1.5" />
+                                        )}
                                     </div>
                                 </div>
                             ))

frontend/src/hooks/useNotifications.js

@@ -12,9 +12,9 @@ const STORAGE_KEY = 'tipstream_last_seen_tip_ts';
 export function useNotifications(userAddress) {
     const { events, eventsLoading } = useTipContext();
     const [unreadCount, setUnreadCount] = useState(0);
-    const lastSeenRef = useRef(
-        parseInt(localStorage.getItem(STORAGE_KEY) || '0', 10)
-    );
+    const initialLastSeen = parseInt(localStorage.getItem(STORAGE_KEY) || '0', 10);
+    const lastSeenRef = useRef(initialLastSeen);
+    const [lastSeenTimestamp, setLastSeenTimestamp] = useState(initialLastSeen);
 
     /** Derive received tips from the shared event cache. */
     const notifications = useMemo(() => {
@@ -41,9 +41,10 @@ export function useNotifications(userAddress) {
     const markAllRead = useCallback(() => {
         const now = Math.floor(Date.now() / 1000);
         lastSeenRef.current = now;
+        setLastSeenTimestamp(now);
         localStorage.setItem(STORAGE_KEY, String(now));
         setUnreadCount(0);
     }, []);
 
-    return { notifications, unreadCount, loading: eventsLoading, markAllRead, refetch: () => {} };
+    return { notifications, unreadCount, lastSeenTimestamp, loading: eventsLoading, markAllRead, refetch: () => {} };
 }