Reset selection

web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx

@@ -174,9 +174,10 @@ export const GalleryBarAndListHeader: React.FC<CollectionsProps> = ({
                 ) : (
                     <PeopleHeader
                         person={ensure(
-                            people.find((p) => p.id == activePersonID),
+                            people.find((p) => p.id == activePersonID) ??
+                                people[0],
                         )}
-                        appContext={appContext}
+                        {...{ onSelectPerson, appContext }}
                     />
                 ),
             itemType: ITEM_TYPE.HEADER,

web/apps/photos/src/pages/gallery.tsx

@@ -553,7 +553,7 @@ export default function Gallery() {
             );
         } else if (barMode == "people") {
             const activePerson = ensure(
-                people.find((p) => p.id == activePersonID),
+                people.find((p) => p.id == activePersonID) ?? people[0],
             );
             const pfSet = new Set(activePerson.fileIDs);
             filteredFiles = getUniqueFiles(
@@ -1058,7 +1058,7 @@ export default function Gallery() {
         // when the user clicks the "People" header in the search empty state (it
         // is guaranteed that this header will only be shown if there is at
         // least one person).
-        setActivePersonID(person.id ?? ensure(people[0]).id);
+        setActivePersonID(person?.id ?? ensure(people[0]).id);
         setBarMode("people");
     };
 

web/packages/new/photos/components/Gallery/BarImpl.tsx

@@ -100,9 +100,10 @@ export interface GalleryBarImplProps {
      */
     activePersonID: string | undefined;
     /**
-     * Called when the user selects a new person in the bar.
+     * Called when the selection should be moved to a new person in the bar, or
+     * reset to the default state (when {@link person} is `undefined`).
      */
-    onSelectPerson: (person: Person) => void;
+    onSelectPerson: (person: Person | undefined) => void;
 }
 
 export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
@@ -212,7 +213,8 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
                       type: "people",
                       people,
                       activePerson: ensure(
-                          people.find((p) => p.id == activePersonID),
+                          people.find((p) => p.id == activePersonID) ??
+                              people[0],
                       ),
                       onSelectPerson,
                   },

web/packages/new/photos/components/Gallery/PeopleHeader.tsx

@@ -28,17 +28,18 @@ import type { CGroup } from "../../services/user-entity";
 import type { NewAppContextPhotos } from "../../types/context";
 import { SpaceBetweenFlex } from "../mui-custom";
 import { NameInputDialog } from "../NameInputDialog";
-import { useWrapLoadError } from "../use-wrap";
+import type { GalleryBarImplProps } from "./BarImpl";
 import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader";
 
-interface PeopleHeaderProps {
+type PeopleHeaderProps = Pick<GalleryBarImplProps, "onSelectPerson"> & {
     person: Person;
     appContext: NewAppContextPhotos;
-}
+};
 
 export const PeopleHeader: React.FC<PeopleHeaderProps> = ({
     person,
     appContext,
+    onSelectPerson,
 }) => {
     return (
         <GalleryItemsHeaderAdapter>
@@ -53,7 +54,7 @@ export const PeopleHeader: React.FC<PeopleHeaderProps> = ({
                 {person.type == "cgroup" ? (
                     <CGroupPersonOptions
                         cgroup={person.cgroup}
-                        appContext={appContext}
+                        {...{ onSelectPerson, appContext }}
                     />
                 ) : (
                     <ClusterPersonOptions
@@ -66,19 +67,24 @@ export const PeopleHeader: React.FC<PeopleHeaderProps> = ({
     );
 };
 
-interface CGroupPersonOptionsProps {
+type CGroupPersonOptionsProps = Pick<
+    PeopleHeaderProps,
+    "appContext" | "onSelectPerson"
+> & {
     cgroup: CGroup;
-    appContext: NewAppContextPhotos;
-}
+};
 
 const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
     cgroup,
     appContext,
+    onSelectPerson,
 }) => {
-    const { startLoading, finishLoading, setDialogBoxAttributesV2 } =
-        appContext;
-
-    const wrap = useWrapLoadError(appContext);
+    const {
+        startLoading,
+        finishLoading,
+        onGenericError,
+        setDialogBoxAttributesV2,
+    } = appContext;
 
     const [openAddNameInput, setOpenAddNameInput] = useState(false);
 
@@ -102,11 +108,24 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
             close: { text: t("cancel") },
             proceed: {
                 text: t("RESET"),
-                action: wrap(() => deletePerson(cgroup)),
+                action: doDeletePerson,
             },
             buttonDirection: "row",
         });
 
+    const doDeletePerson = async () => {
+        startLoading();
+        try {
+            await deletePerson(cgroup);
+            // Reset the selection to the default state.
+            onSelectPerson(undefined);
+        } catch (e) {
+            onGenericError(e);
+        } finally {
+            finishLoading();
+        }
+    };
+
     return (
         <>
             <OverflowMenu
@@ -142,10 +161,9 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
     );
 };
 
-interface ClusterPersonOptionsProps {
+type ClusterPersonOptionsProps = Pick<PeopleHeaderProps, "appContext"> & {
     cluster: FaceCluster;
-    appContext: NewAppContextPhotos;
-}
+};
 
 const ClusterPersonOptions: React.FC<ClusterPersonOptionsProps> = ({
     cluster,