feat(desktop): apply friend nicknames in header / bubble / mentions / call tile

apps/desktop/src/components/MessageBubble.tsx

@@ -10,6 +10,7 @@ import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../context/AuthContext';
+import { useNickname } from '../lib/friendNicknames';
 import { ensureInstallId } from '../lib/installId';
 import { supabase } from '../lib/supabase';
 import { cachedUserKey } from '../lib/userIdentity';
@@ -100,6 +101,12 @@ export function MessageBubble({
   const { t } = useTranslation(['app']);
   const { session } = useAuth();
 
+  // Per-viewer nickname override for the message sender. Fallback chain
+  // keeps the existing behavior when no nickname is set. Skipped for the
+  // quoted-sender snippet — that's a different user.
+  const senderName = useNickname(message.senderId, senderDisplayName ?? '');
+  const resolvedSenderDisplayName = senderName.length > 0 ? senderName : null;
+
   const parsed = parseMessagePayload(message.plaintext);
   const initialText = parsed.kind === 'text' ? parsed.text : '';
   const initialAttachments = parsed.kind === 'text' ? parsed.attachments : [];
@@ -281,7 +288,7 @@ export function MessageBubble({
         <AvatarSlot
           show={isLastOfRun}
           url={senderAvatarUrl ?? null}
-          displayName={senderDisplayName ?? null}
+          displayName={resolvedSenderDisplayName}
           {...(onAvatarClick
             ? { onClick: (ev: React.MouseEvent) => onAvatarClick(message.senderId, ev) }
             : {})}
@@ -299,7 +306,7 @@ export function MessageBubble({
         parsed={parsed}
         mine={mine}
         time={time}
-        senderDisplayName={senderDisplayName ?? null}
+        senderDisplayName={resolvedSenderDisplayName}
       />
     );
   }
@@ -315,7 +322,7 @@ export function MessageBubble({
       <AvatarSlot
         show={isLastOfRun}
         url={senderAvatarUrl ?? null}
-        displayName={senderDisplayName ?? null}
+        displayName={resolvedSenderDisplayName}
         {...(onAvatarClick
           ? { onClick: (ev: React.MouseEvent) => onAvatarClick(message.senderId, ev) }
           : {})}