From 17937f8c5442bbcc3506b07e294f32090438686e Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Fri, 27 Jun 2025 18:37:26 +0530
Subject: [PATCH] Fix avatar on share menu

---
 .../Collections/CollectionShare.tsx           | 31 +++++++++++++++++--
 .../Collections/GalleryBarAndListHeader.tsx   |  4 ++-
 .../src/components/pages/gallery/Avatar.tsx   |  9 +++---
 web/apps/photos/src/pages/gallery.tsx         |  1 +
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx
index 7fe2d6c097..4559cbd3a0 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx
@@ -92,6 +92,10 @@ export type CollectionShareProps = ModalVisibilityProps & {
     user: LocalUser;
     collection: Collection;
     collectionSummary: CollectionSummary;
+    /**
+     * A map from known Ente user IDs to their emails
+     */
+    emailByUserID: Map<number, string>;
     /**
      * A list of emails that can be served up as suggestions when the user is
      * trying to share an album with another Ente user.
@@ -110,6 +114,7 @@ export const CollectionShare: React.FC<CollectionShareProps> = ({
     user,
     collection,
     collectionSummary,
+    emailByUserID,
     shareSuggestionEmails,
     setBlockingLoad,
     onRemotePull,
@@ -172,6 +177,7 @@ export const CollectionShare: React.FC<CollectionShareProps> = ({
                                 {...{
                                     user,
                                     collection,
+                                    emailByUserID,
                                     shareSuggestionEmails,
                                     wrap,
                                     onRemotePull,
@@ -300,13 +306,18 @@ type EmailShareProps = {
     wrap: (f: () => Promise<void>) => () => void;
 } & Pick<
     CollectionShareProps,
-    "user" | "collection" | "shareSuggestionEmails" | "onRemotePull"
+    | "user"
+    | "collection"
+    | "emailByUserID"
+    | "shareSuggestionEmails"
+    | "onRemotePull"
 >;
 
 const EmailShare: React.FC<EmailShareProps> = ({
     onRootClose,
     user,
     collection,
+    emailByUserID,
     shareSuggestionEmails,
     wrap,
     onRemotePull,
@@ -344,7 +355,10 @@ const EmailShare: React.FC<EmailShareProps> = ({
                             <RowButton
                                 fontWeight="regular"
                                 startIcon={
-                                    <AvatarGroup sharees={collection.sharees} />
+                                    <AvatarGroup
+                                        {...{ user, emailByUserID }}
+                                        sharees={collection.sharees}
+                                    />
                                 }
                                 label={
                                     collection.sharees.length === 1
@@ -420,7 +434,17 @@ const AvatarCounter = styled(NumberAvatar)({
 
 const SHAREE_AVATAR_LIMIT = 6;
 
-const AvatarGroup = ({ sharees }: { sharees: Collection["sharees"] }) => {
+interface AvatarGroupProps {
+    user?: LocalUser;
+    emailByUserID?: Map<number, string>;
+    sharees: Collection["sharees"];
+}
+
+const AvatarGroup: React.FC<AvatarGroupProps> = ({
+    sharees,
+    user,
+    emailByUserID,
+}) => {
     const hasShareesOverLimit = sharees?.length > SHAREE_AVATAR_LIMIT;
     const countOfShareesOverLimit = sharees?.length - SHAREE_AVATAR_LIMIT;
 
@@ -429,6 +453,7 @@ const AvatarGroup = ({ sharees }: { sharees: Collection["sharees"] }) => {
             {sharees?.slice(0, 6).map((sharee) => (
                 <AvatarContainer key={sharee.email}>
                     <Avatar
+                        {...{ user, emailByUserID }}
                         key={sharee.email}
                         email={sharee.email}
                         opacity={100}
diff --git a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
index 8943d55ca9..2630464b25 100644
--- a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
+++ b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
@@ -60,7 +60,7 @@ type GalleryBarAndListHeaderProps = Omit<
     > &
     Pick<
         CollectionShareProps,
-        "user" | "shareSuggestionEmails" | "setBlockingLoad"
+        "user" | "emailByUserID" | "shareSuggestionEmails" | "setBlockingLoad"
     >;
 
 /**
@@ -96,6 +96,7 @@ export const GalleryBarAndListHeader: React.FC<
     hiddenCollectionSummaries,
     people,
     activePerson,
+    emailByUserID,
     shareSuggestionEmails,
     onRemotePull,
     onSelectPerson,
@@ -236,6 +237,7 @@ export const GalleryBarAndListHeader: React.FC<
                 collection={activeCollection}
                 {...{
                     user,
+                    emailByUserID,
                     shareSuggestionEmails,
                     setBlockingLoad,
                     onRemotePull,
diff --git a/web/apps/photos/src/components/pages/gallery/Avatar.tsx b/web/apps/photos/src/components/pages/gallery/Avatar.tsx
index 9fd056c6ae..31da162bb0 100644
--- a/web/apps/photos/src/components/pages/gallery/Avatar.tsx
+++ b/web/apps/photos/src/components/pages/gallery/Avatar.tsx
@@ -80,14 +80,15 @@ const Avatar: React.FC<AvatarProps> = ({
             if (!email) {
                 return;
             }
-            if (user.email === email) {
+
+            if (user?.email === email) {
                 setUserLetter(email[0].toUpperCase());
                 setColorCode(avatarBackgroundColorPublicCollectedFile);
                 return;
             }
 
-            const id = Array.from(emailByUserID.keys()).find(
-                (key) => emailByUserID.get(key) === email,
+            const id = Array.from(emailByUserID?.keys() ?? []).find(
+                (key) => emailByUserID?.get(key) === email,
             );
             if (!id) {
                 log.error(`ID not found for email: ${email}`);
@@ -98,7 +99,7 @@ const Avatar: React.FC<AvatarProps> = ({
         } catch (e) {
             log.error("AvatarIcon.tsx - useLayoutEffect email failed", e);
         }
-    }, [email]);
+    }, [user, email, emailByUserID]);
 
     if (!colorCode || !userLetter) {
         return <></>;
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index e43e9e7b4a..af4a3c83bb 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -969,6 +969,7 @@ const Page: React.FC = () => {
                 shouldHide={isInSearchMode}
                 collectionSummaries={normalCollectionSummaries}
                 hiddenCollectionSummaries={state.hiddenCollectionSummaries}
+                emailByUserID={state.emailByUserID}
                 shareSuggestionEmails={state.shareSuggestionEmails}
                 people={
                     (state.view.type == "people"