LobotomyLabs/dumpsterChat
2
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Dustin Newkirk
2026-07-06 19:41:19 +00:00
parent 8cf1e91b2b
commit aa39b6a5be
2 changed files with 63 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/ChatArea.tsx
+17 -2
View File
@@ -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,7 +829,12 @@ 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) => {
// 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}
@@ -848,7 +854,16 @@ export function ChatArea() {
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
+16 -2
View File
@@ -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,7 +322,11 @@ 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) => {
const lastReadId = id ? convStates[id] : undefined;
const showDivider = lastReadId && msg.id === lastReadId && i < messages.length - 1;
return (
<>
<DMMessageItem
key={msg.id}
msg={msg}
@@ -333,7 +338,16 @@ export function DMChat() {
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">