perf(P6A.T3): memoize MessageBubble + stabilize parent callbacks

apps/desktop/src/pages/ConversationPage.tsx

@@ -35,6 +35,7 @@ import { CallPreviewPanel } from '../components/CallPreviewPanel';
 import { MediaFilesDrawer } from '../components/MediaFilesDrawer';
 import { MentionAutocomplete } from '../components/MentionAutocomplete';
 import { MessageBubble, type QuotedRef } from '../components/MessageBubble';
+import type { AggregatedReaction } from '../lib/useMessageReactions';
 import { PinnedMessagesPanel } from '../components/PinnedMessagesPanel';
 import { PollComposerDialog } from '../components/PollComposerDialog';
 import { UserProfilePopover } from '../components/UserProfilePopover';
@@ -78,6 +79,12 @@ import { useTypingChannel } from '../lib/useTypingChannel';
 
 const STICK_THRESHOLD = 80;
 
+// Stable empty-reactions sentinel. We pass this when a message has no
+// reactions instead of `[]` literal — a fresh array per render would defeat
+// `React.memo` on `MessageBubble` since the `reactions` prop reference would
+// change on every parent render.
+const EMPTY_REACTIONS: AggregatedReaction[] = [];
+
 // Per-conversation scroll memory. Module-scoped so it survives re-mounts
 // of ConversationPage when the route param (`id`) changes — switching
 // chats unmounts/remounts the page in our router setup. Session-only
@@ -369,6 +376,20 @@ export function ConversationPage() {
     [messageById, senderNameFor, t],
   );
 
+  // Pre-compute quoted refs per message into a stable map. Calling
+  // `buildQuoted(m.replyToId)` inline inside the `.map` returned a fresh
+  // object on every parent render, defeating `React.memo` on MessageBubble.
+  // With the map memoized on the same deps as `buildQuoted`, each bubble
+  // gets a stable `quoted` reference until the underlying data actually
+  // changes (new messages, sender renames, language switch).
+  const quotedByMessage = useMemo(() => {
+    const out = new Map<string, QuotedRef | null>();
+    for (const m of messages) {
+      out.set(m.id, buildQuoted(m.replyToId));
+    }
+    return out;
+  }, [messages, buildQuoted]);
+
   const jumpToMessage = useCallback((targetId: string) => {
     const el = scrollRef.current?.querySelector<HTMLElement>(
       '[data-message-id="' + CSS.escape(targetId) + '"]',
@@ -388,6 +409,19 @@ export function ConversationPage() {
     setForwardTarget(m);
   }, []);
 
+  // Stable handler for MessageBubble's `onAvatarClick`. Previously this was
+  // an inline arrow in the `.map`, which gave every row a fresh callback ref
+  // and defeated `React.memo` on the bubble (every parent re-render — every
+  // keystroke in the composer — re-rendered all 200 bubbles).
+  const handleAvatarClick = useCallback((uid: string, ev: React.MouseEvent) => {
+    ev.stopPropagation();
+    setProfilePopover({
+      userId: uid,
+      x: ev.clientX,
+      y: ev.clientY,
+    });
+  }, []);
+
   const searchActive = useMemo(
     () =>
       searchQuery.trim().length > 0 ||
@@ -912,9 +946,9 @@ export function ConversationPage() {
                     senderDisplayName={senderProfile?.displayName}
                     senderAvatarUrl={senderProfile?.avatarUrl}
                     conversationId={id ?? ''}
-                    reactions={reactionsByMessage.get(m.id) ?? []}
-                    onToggleReaction={(emoji) => toggleReaction(m.id, emoji)}
-                    onVotePoll={(emoji, optionEmojis) => votePoll(m.id, emoji, optionEmojis)}
+                    reactions={reactionsByMessage.get(m.id) ?? EMPTY_REACTIONS}
+                    onToggleReaction={toggleReaction}
+                    onVotePoll={votePoll}
                     showSeen={m.id === lastSeenMessageId}
                     {...(m.senderId === myId
                       ? {
@@ -929,18 +963,11 @@ export function ConversationPage() {
                           }),
                         }
                       : {})}
-                    quoted={buildQuoted(m.replyToId)}
+                    quoted={quotedByMessage.get(m.id) ?? null}
                     onJumpToMessage={jumpToMessage}
                     onReply={handleReply}
                     onForward={handleForward}
-                    onAvatarClick={(uid, ev) => {
-                      ev.stopPropagation();
-                      setProfilePopover({
-                        userId: uid,
-                        x: ev.clientX,
-                        y: ev.clientY,
-                      });
-                    }}
+                    onAvatarClick={handleAvatarClick}
                     highlighted={highlightedId === m.id}
                     isPinned={pinnedIds.has(m.id)}
                     onTogglePin={handleTogglePin}