From e91cddbc25f139a66009d3903c5a70319c42aef7 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 09:58:38 +0530
Subject: [PATCH 01/10] Restore clickable header

---
 .../new/photos/components/SearchBar.tsx       | 59 +++++++++++++------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/web/packages/new/photos/components/SearchBar.tsx b/web/packages/new/photos/components/SearchBar.tsx
index 524a9d5f37..b66b62dfe8 100644
--- a/web/packages/new/photos/components/SearchBar.tsx
+++ b/web/packages/new/photos/components/SearchBar.tsx
@@ -73,9 +73,13 @@ export interface SearchBarProps {
      */
     onSelectSearchOption: (o: SearchOption | undefined) => void;
     /**
-     * Select a person.
+     * Called when the user selects a person shown in the empty state view, or
+     * clicks the people list header itself.
+     *
+     * @param person The selected person, or `undefined` if the user clicked the
+     * generic people header.
      */
-    onSelectPerson: (person: Person) => void;
+    onSelectPerson: (person: Person | undefined) => void;
 }
 
 /**
@@ -184,7 +188,7 @@ const SearchInput: React.FC<Omit<SearchBarProps, "onShowSearchInput">> = ({
         onSelectSearchOption(undefined);
     };
 
-    const handleSelectPerson = (person: Person) => {
+    const handleSelectPerson = (person: Person | undefined) => {
         resetSearch();
         onSelectPerson(person);
     };
@@ -368,16 +372,13 @@ const shouldShowEmptyState = (inputValue: string) => {
     return true;
 };
 
-interface EmptyStateProps {
-    /** Called when the user selects a person shown in the empty state view. */
-    onSelectPerson: (person: Person) => void;
-}
-
 /**
  * The view shown in the menu area when the user has not typed anything in the
  * search box.
  */
-const EmptyState: React.FC<EmptyStateProps> = ({ onSelectPerson }) => {
+const EmptyState: React.FC<Pick<SearchBarProps, "onSelectPerson">> = ({
+    onSelectPerson,
+}) => {
     const mlStatus = useSyncExternalStore(mlStatusSubscribe, mlStatusSnapshot);
     const people = useSyncExternalStore(peopleSubscribe, peopleSnapshot);
 
@@ -411,7 +412,7 @@ const EmptyState: React.FC<EmptyStateProps> = ({ onSelectPerson }) => {
         <Box sx={{ textAlign: "left" }}>
             {people && people.length > 0 && (
                 <>
-                    <PeopleHeader />
+                    <PeopleHeader onClick={() => onSelectPerson(undefined)} />
                     <SearchPeopleList {...{ people, onSelectPerson }} />
                 </>
             )}
@@ -422,13 +423,37 @@ const EmptyState: React.FC<EmptyStateProps> = ({ onSelectPerson }) => {
     );
 };
 
-const PeopleHeader: React.FC = () => (
-    <Stack direction="row" color="text.muted">
-        <Typography color="text.base" variant="large">
-            {t("people")}
-        </Typography>
-        <ChevronRightIcon />
-    </Stack>
+interface PeopleHeaderProps {
+    onClick: () => void;
+}
+
+const PeopleHeader: React.FC<PeopleHeaderProps> = ({ onClick }) => (
+    <PeopleHeaderButton {...{ onClick }}>
+        <Stack direction="row" color="text.muted">
+            <Typography color="text.base" variant="large">
+                {t("people")}
+            </Typography>
+            <ChevronRightIcon />
+        </Stack>
+    </PeopleHeaderButton>
+);
+
+const PeopleHeaderButton = styled("button")(
+    ({ theme }) => `
+    /* Reset some button defaults that are affecting us */
+    background: transparent;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    /* Button should do this for us, but it isn't working inside the select */
+    cursor: pointer;
+    /* The color for the chevron */
+    color: ${theme.colors.stroke.muted};
+    /* Hover indication */
+    && :hover {
+        color: ${theme.colors.stroke.base};
+    }
+`,
 );
 
 const Option: React.FC<OptionProps<SearchOption, false>> = (props) => (

From 9ce432681e673fd8424af754e044f84137b1062c Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 10:08:29 +0530
Subject: [PATCH 02/10] Reorder

---
 .../components/Collections/CollectionListBar.tsx   | 14 +++++++-------
 web/apps/photos/src/pages/gallery.tsx              |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index 083ec64f25..b7692765ab 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -248,13 +248,6 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     );
 };
 
-const CollectionListWrapper = styled(Box)`
-    position: relative;
-    overflow: hidden;
-    height: 86px;
-    width: 100%;
-`;
-
 const CollectionListBarWrapper = styled(Box)`
     padding: 0 24px;
     @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * MIN_COLUMNS}px) {
@@ -264,6 +257,13 @@ const CollectionListBarWrapper = styled(Box)`
     border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 `;
 
+const CollectionListWrapper = styled(Box)`
+    position: relative;
+    overflow: hidden;
+    height: 86px;
+    width: 100%;
+`;
+
 // // TODO-Cluster
 // const PeopleHeaderButton = styled("button")(
 //     ({ theme }) => `
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index 448eedd934..2c072df5fc 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -1034,7 +1034,7 @@ export default function Gallery() {
         setActiveCollectionID(ALL_SECTION);
     };
 
-    const handleSelectPerson = (person: Person) => {
+    const handleSelectPerson = (person: Person | undefined) => {
         setActivePerson(person);
         setBarMode("people");
     };

From 80416d5b90b62f210fb30c67da3a09173521fd90 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 10:11:20 +0530
Subject: [PATCH 03/10] tweak

---
 .../src/components/Collections/CollectionListBar.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index b7692765ab..7af63a450d 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -249,12 +249,12 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
 };
 
 const CollectionListBarWrapper = styled(Box)`
-    padding: 0 24px;
+    padding-inline: 24px;
     @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * MIN_COLUMNS}px) {
-        padding: 0 4px;
+        padding-inline: 4px;
     }
-    margin-bottom: 16px;
-    border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+    margin-block-end: 16px;
+    border-block-end: 1px solid ${({ theme }) => theme.palette.divider};
 `;
 
 const CollectionListWrapper = styled(Box)`

From d31d7592cb53b2bd7525a60cf71b17f2262d2765 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 10:57:12 +0530
Subject: [PATCH 04/10] Use standard memo

Too many renders for this component (both before and after):
- page load - 23
- click - 6
---
 .../Collections/CollectionListBar.tsx         | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index 7af63a450d..01cba65fc4 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -1,4 +1,5 @@
 import { useIsMobileWidth } from "@/base/hooks";
+import log from "@/base/log";
 import type { Person } from "@/new/photos/services/ml/cgroups";
 import type { CollectionSummary } from "@/new/photos/types/collection";
 import {
@@ -22,8 +23,7 @@ import {
     MIN_COLUMNS,
 } from "components/PhotoList/constants";
 import { t } from "i18next";
-import memoize from "memoize-one";
-import React, { useEffect, useRef, useState } from "react";
+import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList, ListChildComponentProps, areEqual } from "react-window";
 import { ALL_SECTION, COLLECTION_LIST_SORT_BY } from "utils/collection";
@@ -96,7 +96,7 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     const isMobile = useIsMobileWidth();
 
     const collectionListWrapperRef = useRef<HTMLDivElement>(null);
-    const collectionListRef = React.useRef(null);
+    const collectionListRef = useRef(null);
 
     const [scrollObj, setScrollObj] = useState<{
         scrollLeft?: number;
@@ -156,16 +156,19 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
         collectionListRef.current.scrollToItem(activeCollectionIndex, "smart");
     }, [activeCollectionID]);
 
-    const onCollectionClick = (collectionID?: number) => {
-        setActiveCollectionID(collectionID ?? ALL_SECTION);
-    };
-
-    const itemData = createItemData(
-        collectionSummaries,
-        activeCollectionID,
-        onCollectionClick,
+    const itemData = useMemo(
+        () => ({
+            collectionSummaries,
+            activeCollectionID,
+            onCollectionClick: (id?: number) =>
+                setActiveCollectionID(id ?? ALL_SECTION),
+        }),
+        [collectionSummaries, activeCollectionID, setActiveCollectionID],
     );
 
+    // TODO-Cluster
+    log.debug(() => ["renderering collection-bar", itemData]);
+
     return (
         <CollectionListBarWrapper>
             <SpaceBetweenFlex mb={1}>
@@ -284,6 +287,7 @@ const CollectionListWrapper = styled(Box)`
 // );
 
 interface ItemData {
+    mode: GalleryBarMode;
     collectionSummaries: CollectionSummary[];
     activeCollectionID?: number;
     onCollectionClick: (id?: number) => void;
@@ -291,15 +295,7 @@ interface ItemData {
 
 const CollectionListBarCardWidth = 94;
 
-const createItemData = memoize(
-    (collectionSummaries, activeCollectionID, onCollectionClick) => ({
-        collectionSummaries,
-        activeCollectionID,
-        onCollectionClick,
-    }),
-);
-
-const CollectionCardContainer = React.memo(
+const CollectionCardContainer = memo(
     ({
         data,
         index,

From 28095ca935ebb47218c236ace5cee10ff901e5ad Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 11:04:00 +0530
Subject: [PATCH 05/10] Extract

---
 .../Collections/CollectionListBar.tsx         | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index 01cba65fc4..92155d0a64 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -82,6 +82,7 @@ export interface CollectionListBarProps {
 
 export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     mode,
+    setMode,
     collectionSummaries,
     activeCollectionID,
     setActiveCollectionID,
@@ -158,12 +159,13 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
 
     const itemData = useMemo(
         () => ({
+            type: "collections",
             collectionSummaries,
             activeCollectionID,
             onCollectionClick: (id?: number) =>
                 setActiveCollectionID(id ?? ALL_SECTION),
         }),
-        [collectionSummaries, activeCollectionID, setActiveCollectionID],
+        [mode, collectionSummaries, activeCollectionID, setActiveCollectionID],
     );
 
     // TODO-Cluster
@@ -172,24 +174,7 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     return (
         <CollectionListBarWrapper>
             <SpaceBetweenFlex mb={1}>
-                <Stack direction="row" gap={1}>
-                    <Typography
-                        color={mode == "people" ? "text.muted" : "text.base"}
-                    >
-                        {mode == "hidden-albums"
-                            ? t("hidden_albums")
-                            : t("albums")}
-                    </Typography>
-                    {process.env.NEXT_PUBLIC_ENTE_WIP_CL && (
-                        <Typography
-                            color={
-                                mode == "people" ? "text.base" : "text.muted"
-                            }
-                        >
-                            {t("people")}
-                        </Typography>
-                    )}
-                </Stack>
+                <ModeIndicator {...{ mode, setMode }} />
                 {isMobile && (
                     <Box display="flex" alignItems={"center"} gap={1}>
                         <CollectionListSortBy
@@ -260,6 +245,21 @@ const CollectionListBarWrapper = styled(Box)`
     border-block-end: 1px solid ${({ theme }) => theme.palette.divider};
 `;
 
+const ModeIndicator: React.FC<
+    Pick<CollectionListBarProps, "mode" | "setMode">
+> = ({ mode, setMode }) => (
+    <Stack direction="row" gap={1}>
+        <Typography color={mode == "people" ? "text.muted" : "text.base"}>
+            {mode == "hidden-albums" ? t("hidden_albums") : t("albums")}
+        </Typography>
+        {process.env.NEXT_PUBLIC_ENTE_WIP_CL && (
+            <Typography color={mode == "people" ? "text.base" : "text.muted"}>
+                {t("people")}
+            </Typography>
+        )}
+    </Stack>
+);
+
 const CollectionListWrapper = styled(Box)`
     position: relative;
     overflow: hidden;
@@ -287,7 +287,7 @@ const CollectionListWrapper = styled(Box)`
 // );
 
 interface ItemData {
-    mode: GalleryBarMode;
+    type: "collections" | "people";
     collectionSummaries: CollectionSummary[];
     activeCollectionID?: number;
     onCollectionClick: (id?: number) => void;

From 53cf029f00a3144a3d8ebb94ee65c2bd7bf72943 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 11:20:31 +0530
Subject: [PATCH 06/10] wip: checkpoint

---
 .../Collections/CollectionListBar.tsx         | 97 +++++++++++++------
 1 file changed, 67 insertions(+), 30 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index 92155d0a64..c85bcdb35f 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -89,8 +89,8 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     onShowAllCollections,
     collectionListSortBy,
     setCollectionListSortBy,
-    // people,
-    // activePerson,
+    people,
+    activePerson,
     // onSelectPerson
 }) => {
     const windowSize = useWindowSize();
@@ -158,14 +158,24 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     }, [activeCollectionID]);
 
     const itemData = useMemo(
-        () => ({
-            type: "collections",
+        () =>
+            mode == "albums" || mode == "hidden-albums"
+                ? {
+                      type: "collections",
+                      collectionSummaries,
+                      activeCollectionID,
+                      onCollectionClick: (id?: number) =>
+                          setActiveCollectionID(id ?? ALL_SECTION),
+                  }
+                : { type: "people", people, activePerson },
+        [
+            mode,
             collectionSummaries,
             activeCollectionID,
-            onCollectionClick: (id?: number) =>
-                setActiveCollectionID(id ?? ALL_SECTION),
-        }),
-        [mode, collectionSummaries, activeCollectionID, setActiveCollectionID],
+            setActiveCollectionID,
+            people,
+            activePerson,
+        ],
     );
 
     // TODO-Cluster
@@ -247,7 +257,7 @@ const CollectionListBarWrapper = styled(Box)`
 
 const ModeIndicator: React.FC<
     Pick<CollectionListBarProps, "mode" | "setMode">
-> = ({ mode, setMode }) => (
+> = ({ mode }) => (
     <Stack direction="row" gap={1}>
         <Typography color={mode == "people" ? "text.muted" : "text.base"}>
             {mode == "hidden-albums" ? t("hidden_albums") : t("albums")}
@@ -286,12 +296,18 @@ const CollectionListWrapper = styled(Box)`
 // `,
 // );
 
-interface ItemData {
-    type: "collections" | "people";
-    collectionSummaries: CollectionSummary[];
-    activeCollectionID?: number;
-    onCollectionClick: (id?: number) => void;
-}
+type ItemData =
+    | {
+          type: "collections";
+          collectionSummaries: CollectionSummary[];
+          activeCollectionID?: number;
+          onCollectionClick: (id?: number) => void;
+      }
+    | {
+          type: "people";
+          people: Person[];
+          activePerson: Person;
+      };
 
 const CollectionListBarCardWidth = 94;
 
@@ -302,28 +318,49 @@ const CollectionCardContainer = memo(
         style,
         isScrolling,
     }: ListChildComponentProps<ItemData>) => {
-        const { collectionSummaries, activeCollectionID, onCollectionClick } =
-            data;
+        let card: React.ReactNode;
+        switch (data.type) {
+            case "collections": {
+                const {
+                    collectionSummaries,
+                    activeCollectionID,
+                    onCollectionClick,
+                } = data;
+                const collectionSummary = collectionSummaries[index];
 
-        const collectionSummary = collectionSummaries[index];
+                card = (
+                    <CollectionListBarCard
+                        key={collectionSummary.id}
+                        activeCollectionID={activeCollectionID}
+                        isScrolling={isScrolling}
+                        collectionSummary={collectionSummary}
+                        onCollectionClick={onCollectionClick}
+                    />
+                );
 
-        return (
-            <div style={style}>
-                <CollectionListBarCard
-                    key={collectionSummary.id}
-                    activeCollectionID={activeCollectionID}
-                    isScrolling={isScrolling}
-                    collectionSummary={collectionSummary}
-                    onCollectionClick={onCollectionClick}
-                />
-            </div>
-        );
+                break;
+            }
+            case "people":
+                card = "Person";
+                break;
+        }
+
+        return <div style={style}>{card}</div>;
     },
     areEqual,
 );
 
 const getItemKey = (index: number, data: ItemData) => {
-    return `${data.collectionSummaries[index].id}-${data.collectionSummaries[index].coverFile?.id}`;
+    switch (data.type) {
+        case "collections": {
+            const collectionSummary = data.collectionSummaries[index];
+            return `${data.type}-${collectionSummary.id}-${collectionSummary.coverFile?.id}`;
+        }
+        case "people": {
+            const person = data.people[index];
+            return `${data.type}-${person.id}-${person.displayFaceID}`;
+        }
+    }
 };
 
 const ScrollButtonBase: React.FC<

From c4021a82f5e965cb3e7f7356c24c0751da240300 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 11:29:04 +0530
Subject: [PATCH 07/10] Help out tsc

Ref: https://stackoverflow.com/questions/45555748/assign-to-union-type-in-typescript
---
 .../photos/src/components/Collections/CollectionListBar.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index c85bcdb35f..f35c61dd1c 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -157,7 +157,7 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
         collectionListRef.current.scrollToItem(activeCollectionIndex, "smart");
     }, [activeCollectionID]);
 
-    const itemData = useMemo(
+    const itemData = useMemo<ItemData>(
         () =>
             mode == "albums" || mode == "hidden-albums"
                 ? {

From 2865113c4d1fda7c4c5c47be05e9b2d64d3b4fef Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 11:40:12 +0530
Subject: [PATCH 08/10] wip: checkpoint

---
 .../Collections/CollectionListBar.tsx         | 75 ++++++++++---------
 web/apps/photos/src/pages/gallery.tsx         |  4 +-
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index f35c61dd1c..883ec5cfc7 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -96,8 +96,8 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     const windowSize = useWindowSize();
     const isMobile = useIsMobileWidth();
 
-    const collectionListWrapperRef = useRef<HTMLDivElement>(null);
-    const collectionListRef = useRef(null);
+    const listWrapperRef = useRef<HTMLDivElement>(null);
+    const listRef = useRef(null);
 
     const [scrollObj, setScrollObj] = useState<{
         scrollLeft?: number;
@@ -106,40 +106,36 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     }>({});
 
     const updateScrollObj = () => {
-        if (!collectionListWrapperRef.current) {
+        if (!listWrapperRef.current) {
             return;
         }
-        const { scrollLeft, scrollWidth, clientWidth } =
-            collectionListWrapperRef.current;
+        const { scrollLeft, scrollWidth, clientWidth } = listWrapperRef.current;
         setScrollObj({ scrollLeft, scrollWidth, clientWidth });
     };
 
     useEffect(() => {
-        if (!collectionListWrapperRef.current) {
+        if (!listWrapperRef.current) {
             return;
         }
         // Add event listener
-        collectionListWrapperRef.current?.addEventListener(
-            "scroll",
-            updateScrollObj,
-        );
+        listWrapperRef.current?.addEventListener("scroll", updateScrollObj);
 
         // Call handler right away so state gets updated with initial window size
         updateScrollObj();
         // Remove event listener on cleanup
         return () =>
-            collectionListWrapperRef.current?.removeEventListener(
+            listWrapperRef.current?.removeEventListener(
                 "resize",
                 updateScrollObj,
             );
-    }, [collectionListWrapperRef.current]);
+    }, [listWrapperRef.current]);
 
     useEffect(() => {
         updateScrollObj();
     }, [windowSize, collectionSummaries]);
 
     const scrollComponent = (direction: number) => () => {
-        collectionListWrapperRef.current.scrollBy(250 * direction, 0);
+        listWrapperRef.current.scrollBy(250 * direction, 0);
     };
 
     const onFarLeft = scrollObj.scrollLeft === 0;
@@ -147,14 +143,14 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
         scrollObj.scrollLeft + scrollObj.clientWidth === scrollObj.scrollWidth;
 
     useEffect(() => {
-        if (!collectionListRef.current) {
+        if (!listRef.current) {
             return;
         }
         // scroll the active collection into view
         const activeCollectionIndex = collectionSummaries.findIndex(
             (item) => item.id === activeCollectionID,
         );
-        collectionListRef.current.scrollToItem(activeCollectionIndex, "smart");
+        listRef.current.scrollToItem(activeCollectionIndex, "smart");
     }, [activeCollectionID]);
 
     const itemData = useMemo<ItemData>(
@@ -182,7 +178,7 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
     log.debug(() => ["renderering collection-bar", itemData]);
 
     return (
-        <CollectionListBarWrapper>
+        <BarWrapper>
             <SpaceBetweenFlex mb={1}>
                 <ModeIndicator {...{ mode, setMode }} />
                 {isMobile && (
@@ -199,22 +195,22 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
                 )}
             </SpaceBetweenFlex>
             <Box display="flex" alignItems="flex-start" gap={2}>
-                <CollectionListWrapper>
+                <ListWrapper>
                     {!onFarLeft && (
                         <ScrollButtonLeft onClick={scrollComponent(-1)} />
                     )}
                     <AutoSizer disableHeight>
                         {({ width }) => (
                             <FixedSizeList
-                                ref={collectionListRef}
-                                outerRef={collectionListWrapperRef}
+                                ref={listRef}
+                                outerRef={listWrapperRef}
                                 itemData={itemData}
                                 layout="horizontal"
                                 width={width}
                                 height={110}
                                 itemKey={getItemKey}
-                                itemCount={collectionSummaries.length}
-                                itemSize={CollectionListBarCardWidth}
+                                itemCount={getItemCount(itemData)}
+                                itemSize={94}
                                 useIsScrolling
                             >
                                 {CollectionCardContainer}
@@ -224,7 +220,7 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
                     {!onFarRight && (
                         <ScrollButtonRight onClick={scrollComponent(+1)} />
                     )}
-                </CollectionListWrapper>
+                </ListWrapper>
                 {!isMobile && (
                     <Box
                         display="flex"
@@ -242,11 +238,11 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
                     </Box>
                 )}
             </Box>
-        </CollectionListBarWrapper>
+        </BarWrapper>
     );
 };
 
-const CollectionListBarWrapper = styled(Box)`
+const BarWrapper = styled(Box)`
     padding-inline: 24px;
     @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * MIN_COLUMNS}px) {
         padding-inline: 4px;
@@ -270,13 +266,6 @@ const ModeIndicator: React.FC<
     </Stack>
 );
 
-const CollectionListWrapper = styled(Box)`
-    position: relative;
-    overflow: hidden;
-    height: 86px;
-    width: 100%;
-`;
-
 // // TODO-Cluster
 // const PeopleHeaderButton = styled("button")(
 //     ({ theme }) => `
@@ -296,6 +285,13 @@ const CollectionListWrapper = styled(Box)`
 // `,
 // );
 
+const ListWrapper = styled(Box)`
+    position: relative;
+    overflow: hidden;
+    height: 86px;
+    width: 100%;
+`;
+
 type ItemData =
     | {
           type: "collections";
@@ -309,8 +305,6 @@ type ItemData =
           activePerson: Person;
       };
 
-const CollectionListBarCardWidth = 94;
-
 const CollectionCardContainer = memo(
     ({
         data,
@@ -350,6 +344,17 @@ const CollectionCardContainer = memo(
     areEqual,
 );
 
+const getItemCount = (data: ItemData) => {
+    switch (data.type) {
+        case "collections": {
+            return data.collectionSummaries.length;
+        }
+        case "people": {
+            return data.people.length;
+        }
+    }
+};
+
 const getItemKey = (index: number, data: ItemData) => {
     switch (data.type) {
         case "collections": {
@@ -357,7 +362,9 @@ const getItemKey = (index: number, data: ItemData) => {
             return `${data.type}-${collectionSummary.id}-${collectionSummary.coverFile?.id}`;
         }
         case "people": {
-            const person = data.people[index];
+            // TODO-Cluster
+            const person =
+                data.people[index] ?? data.activePerson ?? data.people[0];
             return `${data.type}-${person.id}-${person.displayFaceID}`;
         }
     }
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index 2c072df5fc..caefaf2f8e 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -1035,7 +1035,9 @@ export default function Gallery() {
     };
 
     const handleSelectPerson = (person: Person | undefined) => {
-        setActivePerson(person);
+        // TODO-Cluster: The person bar does not have an "all" mode, use the
+        // first person.
+        setActivePerson(person || people[0]);
         setBarMode("people");
     };
 

From b97cf93c1291c6534a1b39e121cd1447812905cc Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 11:48:25 +0530
Subject: [PATCH 09/10] wip: checkpoint

---
 .../Collections/CollectionListBar.tsx         | 100 +++++++++++-------
 1 file changed, 60 insertions(+), 40 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index 883ec5cfc7..3fa4795d87 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -213,7 +213,7 @@ export const CollectionListBar: React.FC<CollectionListBarProps> = ({
                                 itemSize={94}
                                 useIsScrolling
                             >
-                                {CollectionCardContainer}
+                                {ListItem}
                             </FixedSizeList>
                         )}
                     </AutoSizer>
@@ -305,45 +305,6 @@ type ItemData =
           activePerson: Person;
       };
 
-const CollectionCardContainer = memo(
-    ({
-        data,
-        index,
-        style,
-        isScrolling,
-    }: ListChildComponentProps<ItemData>) => {
-        let card: React.ReactNode;
-        switch (data.type) {
-            case "collections": {
-                const {
-                    collectionSummaries,
-                    activeCollectionID,
-                    onCollectionClick,
-                } = data;
-                const collectionSummary = collectionSummaries[index];
-
-                card = (
-                    <CollectionListBarCard
-                        key={collectionSummary.id}
-                        activeCollectionID={activeCollectionID}
-                        isScrolling={isScrolling}
-                        collectionSummary={collectionSummary}
-                        onCollectionClick={onCollectionClick}
-                    />
-                );
-
-                break;
-            }
-            case "people":
-                card = "Person";
-                break;
-        }
-
-        return <div style={style}>{card}</div>;
-    },
-    areEqual,
-);
-
 const getItemCount = (data: ItemData) => {
     switch (data.type) {
         case "collections": {
@@ -370,6 +331,42 @@ const getItemKey = (index: number, data: ItemData) => {
     }
 };
 
+const ListItem = memo((props: ListChildComponentProps<ItemData>) => {
+    const { data, index, style, isScrolling } = props;
+
+    let card: React.ReactNode;
+
+    switch (data.type) {
+        case "collections": {
+            const {
+                collectionSummaries,
+                activeCollectionID,
+                onCollectionClick,
+            } = data;
+            const collectionSummary = collectionSummaries[index];
+            card = (
+                <CollectionListBarCard
+                    key={collectionSummary.id}
+                    activeCollectionID={activeCollectionID}
+                    isScrolling={isScrolling}
+                    collectionSummary={collectionSummary}
+                    onCollectionClick={onCollectionClick}
+                />
+            );
+            break;
+        }
+
+        case "people": {
+            const { people, activePerson } = data;
+            const person = people[index];
+            card = <PersonCard {...{ person, activePerson }} />;
+            break;
+        }
+    }
+
+    return <div style={style}>{card}</div>;
+}, areEqual);
+
 const ScrollButtonBase: React.FC<
     React.ButtonHTMLAttributes<HTMLButtonElement>
 > = (props) => (
@@ -523,3 +520,26 @@ const Ellipse = styled(Typography)`
     line-clamp: 2;
     -webkit-box-orient: vertical;
 `;
+
+interface PersondCardProps {
+    person: Person;
+    activePerson: Person;
+    // onCollectionClick: (collectionID: number) => void;
+    // isScrolling?: boolean;
+}
+
+const PersonCard = ({ person, activePerson }: PersondCardProps) => (
+    <Box>
+        <CollectionCard
+            collectionTile={CollectionBarTile}
+            coverFile={person.displayFaceFile}
+            onClick={() => {
+                //onCollectionClick(collectionSummary.id);
+            }}
+        >
+            <CollectionCardText collectionName={person.name} />
+            {/* <CollectionCardIcon collectionType={collectionSummary.type} /> */}
+        </CollectionCard>
+        {activePerson.id === person.id && <ActiveIndicator />}
+    </Box>
+);

From 6a592af94ab93e3375b918ed1d48c527d2f0679f Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 23 Sep 2024 11:50:54 +0530
Subject: [PATCH 10/10] tweak

---
 .../photos/src/components/Collections/CollectionListBar.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
index 3fa4795d87..2b710822ca 100644
--- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx
@@ -254,7 +254,7 @@ const BarWrapper = styled(Box)`
 const ModeIndicator: React.FC<
     Pick<CollectionListBarProps, "mode" | "setMode">
 > = ({ mode }) => (
-    <Stack direction="row" gap={1}>
+    <Stack direction="row" sx={{ gap: "12px" }}>
         <Typography color={mode == "people" ? "text.muted" : "text.base"}>
             {mode == "hidden-albums" ? t("hidden_albums") : t("albums")}
         </Typography>