web: fix reply sender fallback naming

web/src/components/MessageList.tsx

@@ -561,7 +561,7 @@ export function MessageList() {
           );
           const replySource = message.reply_to_message_id ? messagesMap.get(message.reply_to_message_id) : null;
           const showSenderName = !own && activeChat?.type === "group" && !groupedWithPrev;
-          const senderName = formatSenderName(message.sender_id, senderProfiles);
+          const senderName = resolveSenderName(message.sender_id, senderProfiles, me, activeChat);
           const senderColor = senderNameColor(message.sender_id);
           const isSelected = selectedIds.has(message.id);
           const messageReactions = reactionsByMessage[message.id] ?? [];
@@ -659,7 +659,7 @@ export function MessageList() {
                         className="truncate font-semibold"
                         style={replySource.sender_id === me?.id ? undefined : activeChat?.type === "group" ? { color: senderNameColor(replySource.sender_id) } : undefined}
                       >
-                        {replySource.sender_id === me?.id ? "You" : formatSenderName(replySource.sender_id, senderProfiles)}
+                        {replySource.sender_id === me?.id ? "You" : resolveSenderName(replySource.sender_id, senderProfiles, me, activeChat)}
                       </p>
                       <p className="truncate">{replySource.text || "[media]"}</p>
                     </div>
@@ -1682,6 +1682,51 @@ function formatSenderName(
   return `User #${senderId}`;
 }
 
+function resolveSenderName(
+  senderId: number,
+  profiles: Record<number, Pick<AuthUser, "id" | "name" | "username" | "avatar_url">>,
+  me: AuthUser | null,
+  activeChat:
+    | {
+        type: "private" | "group" | "channel";
+        is_saved?: boolean;
+        counterpart_user_id?: number | null;
+        counterpart_name?: string | null;
+        counterpart_username?: string | null;
+        display_title?: string | null;
+      }
+    | undefined
+): string {
+  const byProfile = formatSenderName(senderId, profiles);
+  if (!byProfile.startsWith("User #")) {
+    return byProfile;
+  }
+
+  if (senderId === me?.id) {
+    if (me.name?.trim()) {
+      return me.name.trim();
+    }
+    if (me.username?.trim()) {
+      return `@${me.username.trim()}`;
+    }
+    return "You";
+  }
+
+  if (activeChat?.type === "private" && !activeChat.is_saved && activeChat.counterpart_user_id === senderId) {
+    if (activeChat.counterpart_name?.trim()) {
+      return activeChat.counterpart_name.trim();
+    }
+    if (activeChat.display_title?.trim()) {
+      return activeChat.display_title.trim();
+    }
+    if (activeChat.counterpart_username?.trim()) {
+      return `@${activeChat.counterpart_username.trim()}`;
+    }
+  }
+
+  return byProfile;
+}
+
 function senderNameColor(senderId: number): string {
   const hue = (senderId * 67) % 360;
   return `hsl(${hue} 85% 65%)`;