Introduce

web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx

@@ -270,7 +270,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
 
                 {isMLEnabled() && (
                     <>
-                        {/* <PhotoPeopleList file={file} /> */}
+                        {/* TODO-Cluster <PhotoPeopleList file={file} /> */}
                         <UnidentifiedFaces enteFile={file} />
                     </>
                 )}

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

@@ -6,11 +6,16 @@ import { t } from "i18next";
 import React, { useEffect, useState } from "react";
 
 export interface PeopleListProps {
+    /** The list of {@link Person} entities to show. */
     people: Person[];
+    /** Limit to display to whatever fits within {@link maxRows} rows. */
     maxRows: number;
+    /** Optional callback invoked when a particular person is selected. */
     onSelect?: (person: Person, index: number) => void;
 }
-
+/**
+ * Shows a list of {@link Person} (named cluster groups).
+ */
 export const PeopleList: React.FC<PeopleListProps> = ({
     people,
     maxRows,

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

@@ -5,6 +5,8 @@ import {
     isMLSupported,
     mlStatusSnapshot,
     mlStatusSubscribe,
+    peopleSnapshot,
+    peopleSubscribe,
 } from "@/new/photos/services/ml";
 import { searchOptionsForString } from "@/new/photos/services/search";
 import type { SearchOption } from "@/new/photos/services/search/types";
@@ -37,6 +39,7 @@ import {
     type StylesConfig,
 } from "react-select";
 import AsyncSelect from "react-select/async";
+import { PeopleList } from "./PeopleList";
 
 export interface SearchBarProps {
     /**
@@ -358,7 +361,9 @@ interface EmptyStateProps {
  */
 const EmptyState: React.FC<EmptyStateProps> = () => {
     const mlStatus = useSyncExternalStore(mlStatusSubscribe, mlStatusSnapshot);
+    const people = useSyncExternalStore(peopleSubscribe, peopleSnapshot);
 
+    // TODO-Cluster
     if (!mlStatus || mlStatus.phase == "disabled") {
         assertionFailed();
         return <></>;
@@ -383,11 +388,16 @@ const EmptyState: React.FC<EmptyStateProps> = () => {
             break;
     }
 
-    // TODO-Cluster this is where it'll go.
-    // const people = wipPersons();
-
     return (
         <Box>
+            {people && (
+                <PeopleList
+                    people={people}
+                    maxRows={2}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    onSelect={(...args: any) => console.log(args)}
+                />
+            )}
             <Typography variant="mini" sx={{ textAlign: "left" }}>
                 {label}
             </Typography>

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

@@ -440,6 +440,7 @@ export const wipClusterDebugPageContents = async (
     _wip_isClustering = false;
     _wip_people = people;
     triggerStatusUpdate();
+    triggerPeopleUpdate();
 
     return {
         clusters,
@@ -654,7 +655,7 @@ export const peopleSubscribe = (onChange: () => void): (() => void) => {
 export const peopleSnapshot = (): Person[] | undefined => {
     const result = _state.peopleSnapshot;
     // We don't have it yet, trigger an update.
-    if (!result) triggerPeopleUpdate();
+    // if (!result) triggerPeopleUpdate();
     return result;
 };
 
@@ -678,9 +679,9 @@ const setPeopleSnapshot = (snapshot: Person[] | undefined) => {
  * people might be updated in a push based manner.
  */
 const getPeople = async (): Promise<Person[] | undefined> => {
-    if (!_state.isMLEnabled) return undefined;
+    if (!_state.isMLEnabled) return [];
     // TODO-Cluster additional check for now as it is heavily WIP.
-    if (!process.env.NEXT_PUBLIC_ENTE_WIP_CL) return undefined;
+    if (!process.env.NEXT_PUBLIC_ENTE_WIP_CL) return [];
     if (!(await wipClusterEnable())) return [];
     return _wip_people;
 };