From aa39b6a5be93f16f227f0c20498beeab86390f13 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Mon, 6 Jul 2026 19:41:19 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20read=20indicator=20=E2=80=94=20NEW=20di?=
 =?UTF-8?q?vider=20line=20between=20read=20and=20unread=20messages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ChatArea.tsx | 57 +++++++++++++++++++++------------
 web/src/components/DMChat.tsx   | 40 +++++++++++++++--------
 2 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/web/src/components/ChatArea.tsx b/web/src/components/ChatArea.tsx
index e831f23..95608d4 100644
--- a/web/src/components/ChatArea.tsx
+++ b/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) => (
-                  <MessageItem
-                    key={message.id}
-                    message={message}
-                    memberUsernames={memberUsernames}
-                    selectMode={selectMode}
-                    isSelected={selectedIds.has(message.id)}
-                    onAuthorClick={handleAuthorClick}
-                    onToggleSelect={handleToggleSelect}
-                    onContextMenu={handleMessageContextMenu}
-                    onAddReaction={handleAddReaction}
-                    currentUserId={currentUser?.id}
-                    activeReactionMessageId={activeReactionMessageId}
-                    setActiveReactionMessageId={setActiveReactionMessageId}
-                    activeNativeReactionMessageId={activeNativeReactionMessageId}
-                    setActiveNativeReactionMessageId={setActiveNativeReactionMessageId}
-                    members={members}
-                    parentMessage={message.reply_to ? messages.find((m) => m.id === message.reply_to) : null}
-                    onJumpToParent={handleJumpToMessage}
-                  />
-                ))}
+                {messages.map((message, i) => {
+                  // ponytail: last-read divider — show after the message matching the user's read state
+                  const lastReadId = activeChannelId ? readStates[activeChannelId] : undefined;
+                  const showDivider = lastReadId && message.id === lastReadId && i < messages.length - 1;
+                  return (
+                    <>
+                      <MessageItem
+                        key={message.id}
+                        message={message}
+                        memberUsernames={memberUsernames}
+                        selectMode={selectMode}
+                        isSelected={selectedIds.has(message.id)}
+                        onAuthorClick={handleAuthorClick}
+                        onToggleSelect={handleToggleSelect}
+                        onContextMenu={handleMessageContextMenu}
+                        onAddReaction={handleAddReaction}
+                        currentUserId={currentUser?.id}
+                        activeReactionMessageId={activeReactionMessageId}
+                        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">
diff --git a/web/src/components/DMChat.tsx b/web/src/components/DMChat.tsx
index f25fc13..f1d0c4b 100644
--- a/web/src/components/DMChat.tsx
+++ b/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">