Unread indicator (#115)

* Unread indicator and last seen for groups

* Switch to store

Author: laurikjk

src/pages/chats/group/GroupChatPage.tsx

@@ -1,4 +1,4 @@
-import {useState} from "react"
+import {useState, useEffect, useCallback} from "react"
 import {useLocation} from "@/navigation"
 import {useGroupsStore} from "@/stores/groups"
 import {usePrivateMessagesStore} from "@/stores/privateMessages"
@@ -8,6 +8,7 @@ import GroupChatHeader from "./GroupChatHeader"
 import {SortedMap} from "@/utils/SortedMap/SortedMap"
 import {MessageType} from "../message/Message"
 import {comparator} from "../utils/messageGrouping"
+import {getMillisecondTimestamp} from "nostr-double-ratchet/src"
 
 const GroupChatPage = () => {
   const location = useLocation()
@@ -18,13 +19,51 @@ const GroupChatPage = () => {
   const groups = useGroupsStore((state) => state.groups)
   const group = id ? groups[id] : undefined
   const {events} = usePrivateMessagesStore()
+  const markOpened = usePrivateMessagesStore((state) => state.markOpened)
   const [replyingTo, setReplyingTo] = useState<MessageType | undefined>(undefined)
 
   if (!id || !group) {
     return <div className="p-4">Group not found</div>
   }
 
   const messages = events.get(id) ?? new SortedMap<string, MessageType>([], comparator)
+  const lastMessageEntry = messages.last()
+  const lastMessage = lastMessageEntry ? lastMessageEntry[1] : undefined
+  const lastMessageTimestamp = lastMessage ? getMillisecondTimestamp(lastMessage) : undefined
+
+  const markGroupOpened = useCallback(() => {
+    if (!id) return
+    markOpened(id)
+  }, [id, markOpened])
+
+  useEffect(() => {
+    if (!id) return
+
+    markGroupOpened()
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        markGroupOpened()
+      }
+    }
+
+    const handleFocus = () => {
+      markGroupOpened()
+    }
+
+    document.addEventListener("visibilitychange", handleVisibilityChange)
+    window.addEventListener("focus", handleFocus)
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange)
+      window.removeEventListener("focus", handleFocus)
+    }
+  }, [id, markGroupOpened])
+
+  useEffect(() => {
+    if (!id || lastMessageTimestamp === undefined) return
+    markOpened(id)
+  }, [id, lastMessageTimestamp, markOpened])
 
   return (
     <>

src/pages/chats/list/ChatListItem.tsx

@@ -67,7 +67,7 @@ const ChatListItem = ({id, isPublic = false, type}: ChatListItemProps) => {
   const lastSeenPrivateTime = usePrivateMessagesStore(
     (state) => state.lastSeen.get(id) || 0
   )
-  const updateLastSeenPrivate = usePrivateMessagesStore((state) => state.updateLastSeen)
+  const markPrivateChatOpened = usePrivateMessagesStore((state) => state.markOpened)
 
   // Use ref to avoid effect recreation when store updates
   const updateLatestMessageRef = useRef(updateLatestMessage)
@@ -230,7 +230,15 @@ const ChatListItem = ({id, isPublic = false, type}: ChatListItemProps) => {
         unreadBadge = <div className="indicator-item badge badge-primary badge-xs" />
       }
     }
-  } else if (!group) {
+  } else if (group) {
+    if (actualLatest?.created_at && actualLatest.pubkey !== myPubKey) {
+      const latestTimestamp = getMillisecondTimestamp(actualLatest as MessageType)
+      const hasUnread = latestTimestamp > lastSeenPrivateTime
+      if (!lastSeenPrivateTime || hasUnread) {
+        unreadBadge = <div className="indicator-item badge badge-primary badge-xs" />
+      }
+    }
+  } else {
     if (actualLatest?.created_at && actualLatest.pubkey !== myPubKey) {
       const latestTimestamp = getMillisecondTimestamp(actualLatest as MessageType)
       const hasUnread = latestTimestamp > lastSeenPrivateTime
@@ -259,8 +267,8 @@ const ChatListItem = ({id, isPublic = false, type}: ChatListItemProps) => {
       onClick={() => {
         if (isPublic) {
           updateLastSeenPublic(id)
-        } else if (!group) {
-          updateLastSeenPrivate(id)
+        } else {
+          markPrivateChatOpened(id)
         }
       }}
       className={classNames("px-2 py-4 flex items-center border-b border-custom", {

src/pages/chats/private/PrivateChat.tsx

@@ -22,28 +22,18 @@ const Chat = ({id}: {id: string}) => {
 
   // Get messages reactively from events store - this will update when new messages are added
   const eventsMap = usePrivateMessagesStore((state) => state.events)
-  const updateLastSeen = usePrivateMessagesStore((state) => state.updateLastSeen)
+  const markOpened = usePrivateMessagesStore((state) => state.markOpened)
   const messages = eventsMap.get(id) ?? new SortedMap<string, MessageType>([], comparator)
   const lastMessageEntry = messages.last()
   const lastMessage = lastMessageEntry ? lastMessageEntry[1] : undefined
   const lastMessageTimestamp = lastMessage
     ? getMillisecondTimestamp(lastMessage)
     : undefined
-  const lastMessageId = lastMessage?.id
 
   const markChatOpened = useCallback(() => {
     if (!id) return
-    const events = usePrivateMessagesStore.getState().events
-    const latestMessage = events.get(id)?.last()?.[1]
-    const latestTimestamp = latestMessage
-      ? getMillisecondTimestamp(latestMessage)
-      : undefined
-    const targetTimestamp = Math.max(Date.now(), latestTimestamp ?? 0)
-    const current = usePrivateMessagesStore.getState().lastSeen.get(id) || 0
-    if (targetTimestamp > current) {
-      updateLastSeen(id, targetTimestamp)
-    }
-  }, [id, updateLastSeen])
+    markOpened(id)
+  }, [id, markOpened])
 
   useEffect(() => {
     if (!id) {
@@ -89,11 +79,8 @@ const Chat = ({id}: {id: string}) => {
 
   useEffect(() => {
     if (!id || lastMessageTimestamp === undefined) return
-    const existing = usePrivateMessagesStore.getState().lastSeen.get(id) || 0
-    if (lastMessageTimestamp > existing) {
-      updateLastSeen(id, lastMessageTimestamp)
-    }
-  }, [id, lastMessageId, lastMessageTimestamp, updateLastSeen])
+    markOpened(id)
+  }, [id, lastMessageTimestamp, markOpened])
 
   const handleSendReaction = async (messageId: string, emoji: string) => {
     const myPubKey = useUserStore.getState().publicKey

src/stores/privateMessages.ts

@@ -4,6 +4,7 @@ import * as messageRepository from "@/utils/messageRepository"
 import {KIND_REACTION} from "@/utils/constants"
 import {SortedMap} from "@/utils/SortedMap/SortedMap"
 import {create} from "zustand"
+import {getMillisecondTimestamp} from "nostr-double-ratchet/src"
 import {useUserStore} from "./user"
 
 const addToMap = (
@@ -32,14 +33,15 @@ interface PrivateMessagesStoreActions {
     updates: Partial<MessageType>
   ) => Promise<void>
   updateLastSeen: (chatId: string, timestamp?: number) => void
+  markOpened: (chatId: string) => void
   removeSession: (chatId: string) => Promise<void>
   removeMessage: (chatId: string, messageId: string) => Promise<void>
   clear: () => Promise<void>
 }
 
 type PrivateMessagesStore = PrivateMessagesStoreState & PrivateMessagesStoreActions
 
-export const usePrivateMessagesStore = create<PrivateMessagesStore>((set) => {
+export const usePrivateMessagesStore = create<PrivateMessagesStore>((set, get) => {
   const rehydration = Promise.all([
     messageRepository.loadAll(),
     messageRepository.loadLastSeen(),
@@ -171,5 +173,23 @@ export const usePrivateMessagesStore = create<PrivateMessagesStore>((set) => {
       })
       messageRepository.saveLastSeen(chatId, effectiveTimestamp).catch(console.error)
     },
+
+    markOpened: (chatId: string) => {
+      if (!chatId) return
+      const state = get()
+      const events = state.events
+      const messageMap = events.get(chatId)
+      const latestEntry = messageMap?.last()
+      const latestMessage = latestEntry ? latestEntry[1] : undefined
+      const latestTimestamp = latestMessage
+        ? getMillisecondTimestamp(latestMessage)
+        : undefined
+      const targetTimestamp = Math.max(Date.now(), latestTimestamp ?? 0)
+      const current = state.lastSeen.get(chatId) || 0
+      if (targetTimestamp <= current) {
+        return
+      }
+      state.updateLastSeen(chatId, targetTimestamp)
+    },
   }
 })