[desktop] Show person name in the file info panel

web/packages/new/photos/components/PeopleList.tsx

@@ -1,4 +1,4 @@
-import { Skeleton, styled } from "@mui/material";
+import { Skeleton, styled, Typography } from "@mui/material";
 import { useIsSmallWidth } from "ente-base/components/utils/hooks";
 import type { EnteFile } from "ente-media/file";
 import { faceCrop, type AnnotatedFaceID } from "ente-new/photos/services/ml";
@@ -107,6 +107,9 @@ export const FilePeopleList: React.FC<FilePeopleListProps> = ({
                     file={file}
                     placeholderDimension={65}
                 />
+                <Typography variant="small" sx={{ color: "text.muted" }}>
+                    {annotatedFaceID.personName}
+                </Typography>
             </AnnotatedFaceButton>
         ))}
     </FilePeopleList_>
@@ -122,14 +125,16 @@ const FilePeopleList_ = styled("div")`
 const AnnotatedFaceButton = styled(UnstyledButton)(
     ({ theme }) => `
     width: 65px;
-    height: 65px;
-    border-radius: 50%;
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
     & > img {
         width: 100%;
-        height: 100%;
+        aspect-ratio: 1;
+        border-radius: 50%;
+        overflow: hidden;
     }
-    :hover {
+    & > img:hover {
         outline: 1px solid ${theme.vars.palette.stroke.faint};
         outline-offset: 2px;
     }

web/packages/new/photos/services/ml/index.ts

@@ -646,6 +646,7 @@ export const clipMatches = (
 export interface AnnotatedFaceID {
     faceID: string;
     personID: string;
+    personName: string | undefined;
 }
 
 /**
@@ -667,12 +668,18 @@ export const getAnnotatedFacesForFile = async (
         const person = personByFaceID.get(faceID);
         if (!person) continue;
         sortableFaces.push([
-            { faceID, personID: person.id },
+            { faceID, personID: person.id, personName: person.name },
             person.fileIDs.length,
         ]);
     }
 
-    sortableFaces.sort(([, a], [, b]) => b - a);
+    sortableFaces.sort((a, b) => {
+        // If only one has a person name, prefer it.
+        if (a[0].personName && !b[0].personName) return -1;
+        if (!a[0].personName && b[0].personName) return 1;
+        // Otherwise (both named or both unnamed) sort by their number of files.
+        return b[1] - a[1];
+    });
     return sortableFaces.map(([f]) => f);
 };