From 4341dfb314203ffada13182e7b4d46e733c24013 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 26 Mar 2021 11:55:22 +0000
Subject: [PATCH] Iterate facepiles, fix default avatar alignment and sort
 explicit avatars first

---
 res/css/views/elements/_FacePile.scss      | 4 ++++
 src/components/views/elements/FacePile.tsx | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/res/css/views/elements/_FacePile.scss b/res/css/views/elements/_FacePile.scss
index 0d772d7bd6..9a992f59d1 100644
--- a/res/css/views/elements/_FacePile.scss
+++ b/res/css/views/elements/_FacePile.scss
@@ -27,6 +27,10 @@ limitations under the License.
         .mx_BaseAvatar_image {
             border: 1px solid $primary-bg-color;
         }
+
+        .mx_BaseAvatar_initial {
+            margin: 1px; // to offset the border on the image
+        }
     }
 
     > span {
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index 025bb23aa0..0051cea94f 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
+import { sortBy } from "lodash";
 
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from "../../../languageHandler";
@@ -30,9 +31,9 @@ interface IProps {
 }
 
 const FacePile = ({ room, numShown = DEFAULT_NUM_FACES }: IProps) => {
-    const knownMembers = room.getJoinedMembers().filter(member => {
+    const knownMembers = sortBy(room.getJoinedMembers().filter(member => {
         return !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
-    });
+    }), member => member.getMxcAvatarUrl() ? 0 : 1); // sort users with an explicit avatar first
 
     if (knownMembers.length < 1) return null;
     const shownMembers = knownMembers.slice(0, numShown);