From ee685bcc5df69520bb7f2ac7f26b5de79a1d1604 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 21 Sep 2024 05:47:49 +0530
Subject: [PATCH] Rearrange

---
 .../components/Collections/CollectionInfo.tsx | 34 +++++++++++++------
 .../Collections/CollectionInfoWithOptions.tsx |  3 +-
 .../src/components/Collections/index.tsx      |  3 ++
 .../Collections/styledComponents.ts           |  7 +---
 web/apps/photos/src/pages/gallery.tsx         |  6 ++--
 web/apps/photos/src/pages/shared-albums.tsx   |  6 ++--
 6 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionInfo.tsx b/web/apps/photos/src/components/Collections/CollectionInfo.tsx
index a952687308..517976efcc 100644
--- a/web/apps/photos/src/components/Collections/CollectionInfo.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionInfo.tsx
@@ -1,14 +1,24 @@
 import { FlexWrapper } from "@ente/shared/components/Container";
-import { Box, Typography } from "@mui/material";
+import { Box, styled, Typography } from "@mui/material";
 import { t } from "i18next";
 import React from "react";
-interface Iprops {
+
+interface CollectionInfoProps {
     name: string;
     fileCount: number;
     endIcon?: React.ReactNode;
 }
 
-export function CollectionInfo({ name, fileCount, endIcon }: Iprops) {
+/**
+ * A component suitable for being used as a sticky header / summary view
+ * (displayed below the gallery bar) when showing a list of photos (or other
+ * items) in the gallery view.
+ */
+export const CollectionInfo: React.FC<CollectionInfoProps> = ({
+    name,
+    fileCount,
+    endIcon,
+}) => {
     return (
         <div>
             <Typography variant="h3">{name}</Typography>
@@ -19,12 +29,7 @@ export function CollectionInfo({ name, fileCount, endIcon }: Iprops) {
                 </Typography>
                 {endIcon && (
                     <Box
-                        sx={{
-                            svg: {
-                                fontSize: "17px",
-                                color: "text.muted",
-                            },
-                        }}
+                        sx={{ svg: { fontSize: "17px", color: "text.muted" } }}
                         ml={1.5}
                     >
                         {endIcon}
@@ -33,4 +38,13 @@ export function CollectionInfo({ name, fileCount, endIcon }: Iprops) {
             </FlexWrapper>
         </div>
     );
-}
+};
+
+/**
+ * A component suitable for wrapping a {@link CollectionInfo} in cases where
+ * the actual gallery bar is not being displayed.
+ */
+export const CollectionInfoBarWrapper = styled(Box)`
+    width: 100%;
+    margin-bottom: 12px;
+`;
diff --git a/web/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx b/web/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx
index 7a2cbd2453..79bc94f2e0 100644
--- a/web/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionInfoWithOptions.tsx
@@ -10,8 +10,7 @@ import type { Dispatch, SetStateAction } from "react";
 import { CollectionSummary, CollectionSummaryType } from "types/collection";
 import { SetFilesDownloadProgressAttributesCreator } from "types/gallery";
 import { shouldShowOptions } from "utils/collection";
-import { CollectionInfo } from "./CollectionInfo";
-import { CollectionInfoBarWrapper } from "./styledComponents";
+import { CollectionInfo, CollectionInfoBarWrapper } from "./CollectionInfo";
 
 interface Iprops {
     activeCollection: Collection;
diff --git a/web/apps/photos/src/components/Collections/index.tsx b/web/apps/photos/src/components/Collections/index.tsx
index 50d635a37a..3bb3e298c6 100644
--- a/web/apps/photos/src/components/Collections/index.tsx
+++ b/web/apps/photos/src/components/Collections/index.tsx
@@ -145,9 +145,12 @@ export const Collections: React.FC<CollectionsProps> = ({
         });
     }, [
         shouldHide,
+        mode,
         toShowCollectionSummaries,
         activeCollectionID,
         isActiveCollectionDownloadInProgress,
+        people,
+        activePerson,
     ]);
 
     if (shouldBeHidden) {
diff --git a/web/apps/photos/src/components/Collections/styledComponents.ts b/web/apps/photos/src/components/Collections/styledComponents.ts
index 3efc4942f2..daedc736b5 100644
--- a/web/apps/photos/src/components/Collections/styledComponents.ts
+++ b/web/apps/photos/src/components/Collections/styledComponents.ts
@@ -1,10 +1,5 @@
 import { Overlay } from "@ente/shared/components/Container";
-import { Box, styled } from "@mui/material";
-
-export const CollectionInfoBarWrapper = styled(Box)`
-    width: 100%;
-    margin-bottom: 12px;
-`;
+import { styled } from "@mui/material";
 
 export const ScrollContainer = styled("div")`
     width: 100%;
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index 932ed55334..575f953c96 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -55,14 +55,16 @@ import type { ButtonProps, IconButtonProps } from "@mui/material";
 import { Box, Button, IconButton, Typography, styled } from "@mui/material";
 import AuthenticateUserModal from "components/AuthenticateUserModal";
 import { Collections, type GalleryBarMode } from "components/Collections";
-import { CollectionInfo } from "components/Collections/CollectionInfo";
+import {
+    CollectionInfo,
+    CollectionInfoBarWrapper,
+} from "components/Collections/CollectionInfo";
 import CollectionNamer, {
     CollectionNamerAttributes,
 } from "components/Collections/CollectionNamer";
 import CollectionSelector, {
     CollectionSelectorAttributes,
 } from "components/Collections/CollectionSelector";
-import { CollectionInfoBarWrapper } from "components/Collections/styledComponents";
 import ExportModal from "components/ExportModal";
 import {
     FilesDownloadProgress,
diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx
index 73c6bc592c..8edd0bbcab 100644
--- a/web/apps/photos/src/pages/shared-albums.tsx
+++ b/web/apps/photos/src/pages/shared-albums.tsx
@@ -32,8 +32,10 @@ import type { ButtonProps, IconButtonProps } from "@mui/material";
 import { Box, Button, IconButton, Stack, Tooltip } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import bs58 from "bs58";
-import { CollectionInfo } from "components/Collections/CollectionInfo";
-import { CollectionInfoBarWrapper } from "components/Collections/styledComponents";
+import {
+    CollectionInfo,
+    CollectionInfoBarWrapper,
+} from "components/Collections/CollectionInfo";
 import { EnteLogo } from "components/EnteLogo";
 import {
     FilesDownloadProgress,