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

apps/desktop/src/components/ConversationHeader.tsx

@@ -3,6 +3,7 @@ import type { PresenceState } from '@chat-app/shared/supabase';
 import { useTranslation } from 'react-i18next';
 
 import { useCall } from '../context/CallContext';
+import { useNickname } from '../lib/friendNicknames';
 import type { PeerPresence } from '../lib/usePeerPresence';
 import { Avatar } from './Avatar';
 import {
@@ -79,7 +80,13 @@ function HeaderBar({
   const { t } = useTranslation(['app']);
 
   const isDm = conversation.type === 'dm';
-  const title = isDm ? (conversation.peer?.displayName ?? '?') : (conversation.name ?? '?');
+  // For DMs, route the peer's display name through the per-viewer nickname
+  // override. Falls back to the real displayName when no nickname is set.
+  const peerName = useNickname(
+    conversation.peer?.userId,
+    conversation.peer?.displayName ?? '?',
+  );
+  const title = isDm ? peerName : (conversation.name ?? '?');
   const handle = isDm ? '@' + (conversation.peer?.username ?? '?') : '';
   const peerAvatar = isDm
     ? (conversation.peer?.avatarUrl ?? null)