feat: read indicator — NEW divider line between read and unread messages

web/src/components/DMChat.tsx

@@ -168,6 +168,7 @@ export function DMChat() {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const lastTypingRef = useRef<number>(0);
   const markConvRead = useReadStatesStore((s) => s.markConvRead);
+  const convStates = useReadStatesStore((s) => s.convStates);
 
   const id = conversationId || activeId;
   const conversation = conversations.find((c) => c.id === id);
@@ -321,19 +322,32 @@ export function DMChat() {
         {isLoadingOlder && <p className="text-center text-gb-fg-f text-xs">[loading older messages...]</p>}
         {!id && <p className="text-gb-fg-f">[select a conversation]</p>}
         {id && messages.length === 0 && <p className="text-gb-fg-f">[no messages]</p>}
-        {messages.map((msg: ConversationMessage) => (
-          <DMMessageItem
-            key={msg.id}
-            msg={msg}
-            onAddReaction={handleAddReaction}
-            activeReactionMessageId={activeReactionMessageId}
-            setActiveReactionMessageId={setActiveReactionMessageId}
-            activeNativeReactionMessageId={activeNativeReactionMessageId}
-            setActiveNativeReactionMessageId={setActiveNativeReactionMessageId}
-            currentUserId={currentUser?.id}
-            conversationId={id || ""}
-          />
-        ))}
+        {messages.map((msg: ConversationMessage, i: number) => {
+          const lastReadId = id ? convStates[id] : undefined;
+          const showDivider = lastReadId && msg.id === lastReadId && i < messages.length - 1;
+          return (
+            <>
+              <DMMessageItem
+                key={msg.id}
+                msg={msg}
+                onAddReaction={handleAddReaction}
+                activeReactionMessageId={activeReactionMessageId}
+                setActiveReactionMessageId={setActiveReactionMessageId}
+                activeNativeReactionMessageId={activeNativeReactionMessageId}
+                setActiveNativeReactionMessageId={setActiveNativeReactionMessageId}
+                currentUserId={currentUser?.id}
+                conversationId={id || ""}
+              />
+              {showDivider && (
+                <div className="flex items-center gap-2 my-1">
+                  <span className="flex-1 border-t border-gb-red"></span>
+                  <span className="text-gb-red text-xs font-bold shrink-0">── NEW ──</span>
+                  <span className="flex-1 border-t border-gb-red"></span>
+                </div>
+              )}
+            </>
+          );
+        })}
         <div ref={bottomRef} />
       </div>
       <div className="px-3 pt-1 text-xs text-gb-fg-f font-mono italic h-5 select-none">