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

web/src/components/ChatArea.tsx

@@ -326,6 +326,7 @@ export function ChatArea() {
   const members = activeServerId ? membersByServer[activeServerId] || [] : [];
   const memberUsernames = useMemo(() => new Set(members.map((m) => m.username)), [members]);
   const markRead = useReadStatesStore((s) => s.markRead);
+  const readStates = useReadStatesStore((s) => s.states);
 
   const [showPinned, setShowPinned] = useState(false);
   const [showFeatureRequests, setShowFeatureRequests] = useState(false);
@@ -828,27 +829,41 @@ export function ChatArea() {
                 {!isLoading && messages.length === 0 && (
                   <p className="text-gb-fg-f">[no messages in this channel]</p>
                 )}
-                {messages.map((message) => (
+                {messages.map((message, i) => {
-                  <MessageItem
+                  // ponytail: last-read divider — show after the message matching the user's read state
-                    key={message.id}
+                  const lastReadId = activeChannelId ? readStates[activeChannelId] : undefined;
-                    message={message}
+                  const showDivider = lastReadId && message.id === lastReadId && i < messages.length - 1;
-                    memberUsernames={memberUsernames}
+                  return (
-                    selectMode={selectMode}
+                    <>
-                    isSelected={selectedIds.has(message.id)}
+                      <MessageItem
-                    onAuthorClick={handleAuthorClick}
+                        key={message.id}
-                    onToggleSelect={handleToggleSelect}
+                        message={message}
-                    onContextMenu={handleMessageContextMenu}
+                        memberUsernames={memberUsernames}
-                    onAddReaction={handleAddReaction}
+                        selectMode={selectMode}
-                    currentUserId={currentUser?.id}
+                        isSelected={selectedIds.has(message.id)}
-                    activeReactionMessageId={activeReactionMessageId}
+                        onAuthorClick={handleAuthorClick}
-                    setActiveReactionMessageId={setActiveReactionMessageId}
+                        onToggleSelect={handleToggleSelect}
-                    activeNativeReactionMessageId={activeNativeReactionMessageId}
+                        onContextMenu={handleMessageContextMenu}
-                    setActiveNativeReactionMessageId={setActiveNativeReactionMessageId}
+                        onAddReaction={handleAddReaction}
-                    members={members}
+                        currentUserId={currentUser?.id}
-                    parentMessage={message.reply_to ? messages.find((m) => m.id === message.reply_to) : null}
+                        activeReactionMessageId={activeReactionMessageId}
-                    onJumpToParent={handleJumpToMessage}
+                        setActiveReactionMessageId={setActiveReactionMessageId}
-                  />
+                        activeNativeReactionMessageId={activeNativeReactionMessageId}
-                ))}
+                        setActiveNativeReactionMessageId={setActiveNativeReactionMessageId}
+                        members={members}
+                        parentMessage={message.reply_to ? messages.find((m) => m.id === message.reply_to) : null}
+                        onJumpToParent={handleJumpToMessage}
+                      />
+                      {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">

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) => (
+        {messages.map((msg: ConversationMessage, i: number) => {
-          <DMMessageItem
+          const lastReadId = id ? convStates[id] : undefined;
-            key={msg.id}
+          const showDivider = lastReadId && msg.id === lastReadId && i < messages.length - 1;
-            msg={msg}
+          return (
-            onAddReaction={handleAddReaction}
+            <>
-            activeReactionMessageId={activeReactionMessageId}
+              <DMMessageItem
-            setActiveReactionMessageId={setActiveReactionMessageId}
+                key={msg.id}
-            activeNativeReactionMessageId={activeNativeReactionMessageId}
+                msg={msg}
-            setActiveNativeReactionMessageId={setActiveNativeReactionMessageId}
+                onAddReaction={handleAddReaction}
-            currentUserId={currentUser?.id}
+                activeReactionMessageId={activeReactionMessageId}
-            conversationId={id || ""}
+                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">