From 2aaa23312b35e5f12228242c0af25eab1a601a36 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 27 Sep 2024 19:15:12 +0530
Subject: [PATCH] Both buttons

---
 .../Collections/GalleryBarAndListHeader.tsx   |  2 +
 web/apps/photos/src/pages/gallery.tsx         | 10 ++++-
 .../new/photos/components/Gallery/BarImpl.tsx | 44 +++++++++++++------
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
index e34768d212..af963430c5 100644
--- a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
+++ b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx
@@ -86,6 +86,7 @@ type CollectionsProps = Omit<
  */
 export const GalleryBarAndListHeader: React.FC<CollectionsProps> = ({
     shouldHide,
+    showPeopleSectionButton,
     mode,
     onChangeMode,
     collectionSummaries,
@@ -199,6 +200,7 @@ export const GalleryBarAndListHeader: React.FC<CollectionsProps> = ({
         <>
             <GalleryBarImpl
                 {...{
+                    showPeopleSectionButton,
                     mode,
                     onChangeMode,
                     activeCollectionID,
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index 4723ddd02c..4a18a425cc 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -3,7 +3,10 @@ import { NavbarBase } from "@/base/components/Navbar";
 import { useIsMobileWidth } from "@/base/hooks";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
-import { PeopleEmptyState, SearchResultsHeader } from "@/new/photos/components/Gallery";
+import {
+    PeopleEmptyState,
+    SearchResultsHeader,
+} from "@/new/photos/components/Gallery";
 import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl";
 import { GalleryPeopleState } from "@/new/photos/components/Gallery/PeopleHeader";
 import {
@@ -1103,6 +1106,10 @@ export default function Gallery() {
         return <div></div>;
     }
 
+    // `people` will be undefined only when ML is disabled, otherwise it'll be
+    // an empty array (even if people are loading).
+    const showPeopleSectionButton = people !== undefined;
+
     return (
         <GalleryContext.Provider
             value={{
@@ -1207,6 +1214,7 @@ export default function Gallery() {
                         activeCollectionID,
                         setActiveCollectionID,
                         hiddenCollectionSummaries,
+                        showPeopleSectionButton,
                         people: galleryPeopleState?.people ?? [],
                         activePerson: galleryPeopleState?.activePerson,
                         onSelectPerson: handleSelectPerson,
diff --git a/web/packages/new/photos/components/Gallery/BarImpl.tsx b/web/packages/new/photos/components/Gallery/BarImpl.tsx
index a3db5a1e5e..b076e9eecd 100644
--- a/web/packages/new/photos/components/Gallery/BarImpl.tsx
+++ b/web/packages/new/photos/components/Gallery/BarImpl.tsx
@@ -52,6 +52,10 @@ import {
 export type GalleryBarMode = "albums" | "hidden-albums" | "people";
 
 export interface GalleryBarImplProps {
+    /**
+     * When `true`, the bar shows a button to switch to the people section.
+     */
+    showPeopleSectionButton: boolean;
     /**
      * What are we displaying currently.
      */
@@ -105,6 +109,7 @@ export interface GalleryBarImplProps {
 }
 
 export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
+    showPeopleSectionButton,
     mode,
     onChangeMode,
     collectionSummaries,
@@ -255,7 +260,9 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
             sx={people.length ? {} : { borderBlockEndColor: "transparent" }}
         >
             <Row1>
-                <ModeIndicator {...{ mode, onChangeMode }} />
+                <ModeIndicator
+                    {...{ showPeopleSectionButton, mode, onChangeMode }}
+                />
                 {controls1}
             </Row1>
             <Row2>
@@ -312,33 +319,44 @@ export const Row2 = styled(Box)`
 `;
 
 const ModeIndicator: React.FC<
-    Pick<GalleryBarImplProps, "mode" | "onChangeMode">
-> = ({ mode, onChangeMode }) => {
+    Pick<
+        GalleryBarImplProps,
+        "showPeopleSectionButton" | "mode" | "onChangeMode"
+    >
+> = ({ showPeopleSectionButton, mode, onChangeMode }) => {
     // Mode switcher is not shown in the hidden albums section.
     if (mode == "hidden-albums") {
         return <Typography>{t("hidden_albums")}</Typography>;
     }
 
-    // Show the static mode indicator with only the "Albums" title unless we
-    // come here with the people mode already set. This is because we don't
-    // currently have an empty state for the People mode when ML is not enabled.
-    if (mode == "albums") {
+    // Show the static mode indicator with only the "Albums" title if we have
+    // not been asked to show the people button (there are no other sections to
+    // switch to in such a case).
+    if (!showPeopleSectionButton) {
         return <Typography>{t("albums")}</Typography>;
     }
 
     return (
         <Stack direction="row" sx={{ gap: "10px" }}>
-            <AlbumModeButton onClick={() => onChangeMode("albums")}>
+            <ModeButton
+                $active={mode == "albums"}
+                onClick={() => onChangeMode("albums")}
+            >
                 <Typography>{t("albums")}</Typography>
-            </AlbumModeButton>
-            <Typography>{t("people")}</Typography>
+            </ModeButton>
+            <ModeButton
+                $active={mode == "people"}
+                onClick={() => onChangeMode("people")}
+            >
+                <Typography>{t("people")}</Typography>
+            </ModeButton>
         </Stack>
     );
 };
 
-const AlbumModeButton = styled(UnstyledButton)(
-    ({ theme }) => `
-    p { color: ${theme.colors.text.muted} }
+const ModeButton = styled(UnstyledButton)<{ $active: boolean }>(
+    ({ $active, theme }) => `
+    p { color: ${$active ? theme.colors.text.base : theme.colors.text.muted} }
     p:hover { color: ${theme.colors.text.base} }
 `,
 );