fix p2p conversation avatars

web/src/features/messages/ChatListColumn.tsx

@@ -6,6 +6,7 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Avatar } from '@/app/Avatar';
 import { Icon } from '@/app/Icon';
 import { CreateGroupModal } from '@/features/groups/CreateGroupModal';
+import { friendAvatarLookup } from '@/features/messages/chat-list';
 import { fetchAllPages } from '@/lib/api/client';
 import { getFriends } from '@/lib/api/friends';
 import { getGroups } from '@/lib/api/groups';
@@ -74,7 +75,7 @@ export function ChatListColumn() {
   // to carry the REST-only `avatar_file_id` this app uploads avatars through -- shares ContactsListColumn's
   // exact `['friends']` query key, so this is a cache read whenever that page has already been visited.
   const friendsQuery = useQuery({ queryKey: ['friends'], queryFn: () => fetchAllPages((cursor) => getFriends('', cursor)) });
-  const avatarByUserId = new Map(friendsQuery.data?.map((f) => [f.user_id, f.avatar_file_id]));
+  const avatarByPeer = friendAvatarLookup(friendsQuery.data);
   const [query, setQuery] = useState('');
   const [creatingGroup, setCreatingGroup] = useState(false);
   const sorted = [...contacts].sort((a, b) => {
@@ -158,7 +159,7 @@ export function ChatListColumn() {
             const memberCount = isGroup ? memberCountByTopic.get(contact.topic) : undefined;
             const muted = !!contact.private?.mute_notifications;
             const avatarFileId =
-              contact.topic === 'slf' ? meQuery.data?.profile.avatar_file_id : isGroup ? avatarByGroupTopic.get(contact.topic) : avatarByUserId.get(contact.topic);
+              contact.topic === 'slf' ? meQuery.data?.profile.avatar_file_id : isGroup ? avatarByGroupTopic.get(contact.topic) : avatarByPeer.get(contact.topic);
             return (
               <Link
                 key={contact.topic}