rename

web/apps/photos/src/components/Collections/AllCollections/index.tsx

@@ -23,7 +23,7 @@ interface AllCollectionsProps {
     open: boolean;
     onClose: () => void;
     collectionSummaries: CollectionSummary[];
-    setActiveCollectionID: (id?: number) => void;
+    onSelectCollectionID: (id: number) => void;
     collectionsSortBy: CollectionsSortBy;
     onChangeCollectionsSortBy: (by: CollectionsSortBy) => void;
     isInHiddenSection: boolean;
@@ -36,7 +36,7 @@ export default function AllCollections(props: AllCollectionsProps) {
         collectionSummaries,
         open,
         onClose,
-        setActiveCollectionID,
+        onSelectCollectionID,
         collectionsSortBy,
         onChangeCollectionsSortBy,
         isInHiddenSection,
@@ -44,7 +44,7 @@ export default function AllCollections(props: AllCollectionsProps) {
     const isMobile = useMediaQuery("(max-width: 428px)");
 
     const onCollectionClick = (collectionID: number) => {
-        setActiveCollectionID(collectionID);
+        onSelectCollectionID(collectionID);
         onClose();
     };
 

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

@@ -1,9 +1,8 @@
 import type { Collection } from "@/media/collection";
 import {
     GalleryBarImpl,
-    type GalleryBarMode,
+    type GalleryBarImplProps,
 } from "@/new/photos/components/Gallery/BarImpl";
-import type { Person } from "@/new/photos/services/ml/cgroups";
 import {
     collectionsSortBy,
     type CollectionsSortBy,
@@ -36,31 +35,34 @@ import {
 } from "../FilesDownloadProgress";
 import { AlbumCastDialog } from "./AlbumCastDialog";
 
-interface CollectionsProps {
-    /** `true` if the bar should be hidden altogether. */
+type CollectionsProps = Omit<
+    GalleryBarImplProps,
+    | "collectionSummaries"
+    | "hiddenCollectionSummaries"
+    | "onSelectCollectionID"
+    | "collectionsSortBy"
+    | "onChangeCollectionsSortBy"
+    | "onShowAllCollections"
+> & {
+    /**
+     * When `true`, the bar is be hidden altogether.
+     */
     shouldHide: boolean;
-    /** otherwise show stuff that belongs to this mode. */
-    mode: GalleryBarMode;
-    setMode: (mode: GalleryBarMode) => void;
     collectionSummaries: CollectionSummaries;
     activeCollection: Collection;
-    activeCollectionID?: number;
-    setActiveCollectionID: (id?: number) => void;
+    setActiveCollectionID: (collectionID: number) => void;
     hiddenCollectionSummaries: CollectionSummaries;
-    people: Person[];
-    activePerson: Person | undefined;
-    onSelectPerson: (person: Person) => void;
     setCollectionNamerAttributes: SetCollectionNamerAttributes;
     setPhotoListHeader: (value: TimeStampListItem) => void;
     filesDownloadProgressAttributesList: FilesDownloadProgressAttributes[];
     setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
-}
+};
 
 // TODO-Cluster Rename me to GalleryBar and subsume GalleryBarImpl
 export const Collections: React.FC<CollectionsProps> = ({
     shouldHide,
     mode,
-    setMode,
+    onChangeMode,
     collectionSummaries,
     activeCollection,
     activeCollectionID,
@@ -165,14 +167,14 @@ export const Collections: React.FC<CollectionsProps> = ({
             <GalleryBarImpl
                 {...{
                     mode,
-                    setMode,
+                    onChangeMode,
                     activeCollectionID,
-                    setActiveCollectionID,
                     people,
                     activePerson,
                     onSelectPerson,
                     collectionsSortBy,
                 }}
+                onSelectCollectionID={setActiveCollectionID}
                 onChangeCollectionsSortBy={setCollectionsSortBy}
                 onShowAllCollections={() => setOpenAllCollectionDialog(true)}
                 collectionSummaries={sortedCollectionSummaries.filter((x) =>
@@ -186,7 +188,7 @@ export const Collections: React.FC<CollectionsProps> = ({
                 collectionSummaries={sortedCollectionSummaries.filter(
                     (x) => !isSystemCollection(x.type),
                 )}
-                setActiveCollectionID={setActiveCollectionID}
+                onSelectCollectionID={setActiveCollectionID}
                 onChangeCollectionsSortBy={setCollectionsSortBy}
                 collectionsSortBy={collectionsSortBy}
                 isInHiddenSection={mode == "hidden-albums"}

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

@@ -1116,7 +1116,7 @@ export default function Gallery() {
                 <Collections
                     shouldHide={isInSearchMode}
                     mode={barMode}
-                    setMode={setBarMode}
+                    onChangeMode={setBarMode}
                     {...{
                         collectionSummaries,
                         activeCollection,

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

@@ -50,21 +50,25 @@ export interface GalleryBarImplProps {
      */
     mode: GalleryBarMode;
     /**
-     * Called when the user switches to a different view.
+     * Called when the user selects to a different mode than the current one.
      */
-    setMode: (mode: GalleryBarMode) => void;
+    onChangeMode: (mode: GalleryBarMode) => void;
     /**
      * Massaged data about the collections that should be shown in the bar.
      */
     collectionSummaries: CollectionSummary[];
     /**
-     * The ID of the currently active collection (if any)
+     * The ID of the currently active collection (if any).
+     *
+     * Required if mode is not "albums" or "hidden-albums".
      */
-    activeCollectionID: number;
+    activeCollectionID: number | undefined;
     /**
-     * Called when the user changes the active collection.
+     * Called when the user selects a new collection in the bar.
+     *
+     * This callback is passed the id of the selected collection.
      */
-    setActiveCollectionID: (id?: number) => void;
+    onSelectCollectionID: (collectionID: number) => void;
     /**
      * Called when the user selects the option to show a modal with all the
      * collections.
@@ -83,23 +87,23 @@ export interface GalleryBarImplProps {
      */
     people: Person[];
     /**
-     * The currently selected person (if any).
+     * The currently selected person.
      *
      * Required if mode is "people".
      */
     activePerson: Person | undefined;
     /**
-     * Called when the user selects the given person in the bar.
+     * Called when the user selects a new person in the bar.
      */
     onSelectPerson: (person: Person) => void;
 }
 
 export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
     mode,
-    setMode,
+    onChangeMode,
     collectionSummaries,
     activeCollectionID,
-    setActiveCollectionID,
+    onSelectCollectionID,
     onShowAllCollections,
     collectionsSortBy,
     onChangeCollectionsSortBy,
@@ -194,8 +198,8 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
                 ? {
                       type: "collections",
                       collectionSummaries,
-                      activeCollectionID,
-                      onCollectionClick: setActiveCollectionID,
+                      activeCollectionID: ensure(activeCollectionID),
+                      onCollectionClick: onSelectCollectionID,
                   }
                 : {
                       type: "people",
@@ -207,7 +211,7 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
             mode,
             collectionSummaries,
             activeCollectionID,
-            setActiveCollectionID,
+            onSelectCollectionID,
             people,
             activePerson,
             onSelectPerson,
@@ -242,7 +246,7 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
     return (
         <BarWrapper>
             <Row1>
-                <ModeIndicator {...{ mode, setMode }} />
+                <ModeIndicator {...{ mode, onChangeMode }} />
                 {controls1}
             </Row1>
             <Row2>
@@ -299,7 +303,7 @@ export const Row2 = styled(Box)`
 `;
 
 const ModeIndicator: React.FC<
-    Pick<GalleryBarImplProps, "mode" | "setMode">
+    Pick<GalleryBarImplProps, "mode" | "onChangeMode">
 > = ({ mode }) => (
     <Stack direction="row" sx={{ gap: "10px" }}>
         <Typography color={mode == "people" ? "text.muted" : "text.base"}>