Rearrange

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;
+`;

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;

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) {

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%;

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,

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,