fix: chat UI

app/(app)/chats/[id]/page.tsx

@@ -34,12 +34,14 @@ import { toast } from "sonner";
 import { channelAuthorizer } from "@/lib/realtime";
 import { cn } from "@/lib/utils";
 import { useVisualViewport } from "@/lib/use-visual-viewport";
+import { useNotifications } from "@/components/notifications/notifications-provider";
 import {
   chat,
   conversationTitle,
   groupAvatarUrl,
   isMuted,
   senderName,
+  senderPeer,
   type ChatMessage,
   type ConversationDetail,
   type Receipts,
@@ -69,6 +71,7 @@ export default function ChatThreadPage() {
   // instead of dvh — see useVisualViewport for why dvh can't do this on iOS.
   // Declared with the other hooks: the early return below means anything
   // placed after it would run conditionally.
+  const { refreshChatUnread } = useNotifications();
   const viewport = useVisualViewport();
   const keyboardOpen = viewport?.keyboardOpen ?? false;
   // Guards against two loads racing (scroll handler + the short-page effect).
@@ -322,9 +325,15 @@ export default function ChatThreadPage() {
   const markRead = useCallback(
     (seq: number) => {
       if (!seq) return;
-      chat.markRead(id, seq).catch(() => {});
+      // Refresh the nav badge afterwards: without this it stays lit until the
+      // next incoming message, since nothing else tells it this thread was
+      // read.
+      chat
+        .markRead(id, seq)
+        .then(refreshChatUnread)
+        .catch(() => {});
     },
-    [id],
+    [id, refreshChatUnread],
   );
 
   useEffect(() => {
@@ -416,6 +425,10 @@ export default function ChatThreadPage() {
 
   const nameFor = (senderId: string | null | undefined) =>
     senderName(senderId, meta?.participants ?? [], user.id);
+  // Groups need the actual sender, not the conversation's `peer` — `peer` is
+  // only set on DMs, so a group has no single counterpart to read from.
+  const senderFor = (senderId: string | null | undefined) =>
+    senderPeer(senderId, meta?.participants ?? []);
   const title = meta ? conversationTitle(meta) : "Chat";
   const muted = meta ? isMuted(meta) : false;
 
@@ -524,7 +537,7 @@ export default function ChatThreadPage() {
         <MessageList
           messages={messages}
           selfId={user.id}
-          peer={meta?.peer}
+          senderFor={senderFor}
           receipts={receipts}
           isGroup={meta?.kind === "group"}
           hasMore={hasMore}