sorting avatars for uniformity across

packages/desktop/src/tree/ConversationList.tsx

@@ -122,6 +122,21 @@ export function ConversationRow({
 
   useKeyPressEvent(`${keyboardShortcut?.toString()}`, handleSelectConversation);
 
+  const sortedMembers = useMemo(() => {
+    const sortedUserMembers = [...conversation.members];
+    sortedUserMembers.sort((convoUserA, convoUserB) => {
+      if (convoUserA._id.toString() === user?._id.toString()) return 2;
+
+      if (conversation.tunedInUsers?.includes(convoUserA._id.toString())) return 1;
+
+      if (conversation.tunedInUsers?.includes(convoUserB._id.toString())) return -1;
+
+      return -2;
+    });
+
+    return sortedUserMembers;
+  }, [conversation.members, user, conversation.tunedInUsers]);
+
   return (
     <ListItem>
       <ListItemButton
@@ -154,7 +169,7 @@ export function ConversationRow({
 
         <ListItemAvatar>
           <AvatarGroup variant={'rounded'}>
-            {conversation.members?.map((conversationUser, index) => {
+            {sortedMembers?.map((conversationUser, index) => {
               return (
                 <Avatar
                   key={`${conversation._id.toString()}-${conversationUser._id.toString()}-convoIcon`}

packages/desktop/src/tree/FooterControls.tsx

@@ -319,6 +319,23 @@ function OverlayConversationAvatars({
   tunedInUserIds: string[];
   conversationUserMembers: ConversationUserMember[];
 }) {
+  const { user } = useAuth();
+
+  const sortedMembers = useMemo(() => {
+    const sortedUserMembers = [...conversationUserMembers];
+    sortedUserMembers.sort((convoUserA, convoUserB) => {
+      if (convoUserA._id.toString() === user?._id.toString()) return 2;
+
+      if (tunedInUserIds?.includes(convoUserA._id.toString())) return 1;
+
+      if (tunedInUserIds?.includes(convoUserB._id.toString())) return -1;
+
+      return -2;
+    });
+
+    return sortedUserMembers;
+  }, [conversationUserMembers, user, tunedInUserIds]);
+
   return (
     <AvatarGroup
       variant={'rounded'}
@@ -335,7 +352,7 @@ function OverlayConversationAvatars({
       }}
       max={3}
     >
-      {conversationUserMembers?.map((conversationUserMember, index) => (
+      {sortedMembers?.map((conversationUserMember, index) => (
         <OverlayConversationAvatar
           key={`${conversationUserMember._id.toString()}-overlayConvoAvatar`}
           isTunedIn={tunedInUserIds?.includes(conversationUserMember._id.toString())}