Move

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

@@ -1,4 +1,8 @@
 import type { Collection } from "@/media/collection";
+import {
+    GalleryItemsHeaderAdapter,
+    GalleryItemsSummary,
+} from "@/new/photos/components/Gallery/ListHeader";
 import { SpaceBetweenFlex } from "@ente/shared/components/Container";
 import ArchiveOutlined from "@mui/icons-material/ArchiveOutlined";
 import Favorite from "@mui/icons-material/FavoriteRounded";
@@ -10,7 +14,6 @@ import type { Dispatch, SetStateAction } from "react";
 import { CollectionSummary, CollectionSummaryType } from "types/collection";
 import { SetFilesDownloadProgressAttributesCreator } from "types/gallery";
 import { shouldShowOptions } from "utils/collection";
-import { CollectionInfo, CollectionInfoBarWrapper } from "./CollectionInfo";
 
 interface Iprops {
     activeCollection: Collection;
@@ -52,9 +55,9 @@ export default function CollectionInfoWithOptions({
     };
 
     return (
-        <CollectionInfoBarWrapper>
+        <GalleryItemsHeaderAdapter>
             <SpaceBetweenFlex>
-                <CollectionInfo
+                <GalleryItemsSummary
                     name={name}
                     fileCount={fileCount}
                     endIcon={<EndIcon type={type} />}
@@ -66,6 +69,6 @@ export default function CollectionInfoWithOptions({
                     />
                 )}
             </SpaceBetweenFlex>
-        </CollectionInfoBarWrapper>
+        </GalleryItemsHeaderAdapter>
     );
 }

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

@@ -3,6 +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 {
+    GalleryItemsHeaderAdapter,
+    GalleryItemsSummary,
+} from "@/new/photos/components/Gallery/ListHeader";
 import {
     SearchBar,
     type SearchBarProps,
@@ -55,10 +59,6 @@ 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,
-    CollectionInfoBarWrapper,
-} from "components/Collections/CollectionInfo";
 import CollectionNamer, {
     CollectionNamerAttributes,
 } from "components/Collections/CollectionNamer";
@@ -1380,13 +1380,13 @@ interface SearchResultsHeaderProps {
 const SearchResultsHeader: React.FC<SearchResultsHeaderProps> = ({
     selectedOption,
 }) => (
-    <CollectionInfoBarWrapper>
+    <GalleryItemsHeaderAdapter>
         <Typography color="text.muted" variant="large">
             {t("search_results")}
         </Typography>
-        <CollectionInfo
+        <GalleryItemsSummary
             name={selectedOption.suggestion.label}
             fileCount={selectedOption.fileCount}
         />
-    </CollectionInfoBarWrapper>
+    </GalleryItemsHeaderAdapter>
 );

web/apps/photos/src/pages/shared-albums.tsx

@@ -3,6 +3,10 @@ import { sharedCryptoWorker } from "@/base/crypto";
 import { useIsMobileWidth, useIsTouchscreen } from "@/base/hooks";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
+import {
+    GalleryItemsHeaderAdapter,
+    GalleryItemsSummary,
+} from "@/new/photos/components/Gallery/ListHeader";
 import downloadManager from "@/new/photos/services/download";
 import { EnteFile } from "@/new/photos/types/file";
 import { mergeMetadata } from "@/new/photos/utils/file";
@@ -32,10 +36,6 @@ 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,
-    CollectionInfoBarWrapper,
-} from "components/Collections/CollectionInfo";
 import { EnteLogo } from "components/EnteLogo";
 import {
     FilesDownloadProgress,
@@ -306,9 +306,9 @@ export default function PublicCollectionGallery() {
             publicFiles &&
             setPhotoListHeader({
                 item: (
-                    <CollectionInfoBarWrapper>
+                    <GalleryItemsHeaderAdapter>
                         <SpaceBetweenFlex>
-                            <CollectionInfo
+                            <GalleryItemsSummary
                                 name={publicCollection.name}
                                 fileCount={publicFiles.length}
                             />
@@ -328,7 +328,7 @@ export default function PublicCollectionGallery() {
                                 <div />
                             )}
                         </SpaceBetweenFlex>
-                    </CollectionInfoBarWrapper>
+                    </GalleryItemsHeaderAdapter>
                 ),
                 itemType: ITEM_TYPE.HEADER,
                 height: 68,

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

@@ -3,18 +3,17 @@ import { Box, styled, Typography } from "@mui/material";
 import { t } from "i18next";
 import React from "react";
 
-interface CollectionInfoProps {
+interface GalleryItemsSummaryProps {
     name: string;
     fileCount: number;
     endIcon?: React.ReactNode;
 }
 
 /**
- * A component suitable for being used as a (non-sticky) header / summary view
- * displayed on top of the of a list of photos (or other items) being displayed
- * in the gallery view.
+ * A component suitable for being used as a (non-sticky) summary displayed on
+ * top of the of a list of photos (or other items) shown in the gallery.
  */
-export const CollectionInfo: React.FC<CollectionInfoProps> = ({
+export const GalleryItemsSummary: React.FC<GalleryItemsSummaryProps> = ({
     name,
     fileCount,
     endIcon,
@@ -41,15 +40,15 @@ export const CollectionInfo: React.FC<CollectionInfoProps> = ({
 };
 
 /**
- * A component suitable for wrapping a {@link GalleryItemsSummary} so that it
- * fills the entire width (and acts like a "header") when it is displayed in the
- * gallery view.
+ * A component suitable for wrapping a component which is acting like a gallery
+ * items header so that it fills the entire width (and acts like a "header")
+ * when it is displayed in the gallery view.
  *
- * The {@link GalleryItemsSummary} is displayed as part of the actual gallery
- * items list itself so that it scrolls alongwith the items. This wrapper makes
- * it take the full width of the conceptual "row" that it occupies.
+ * The header view (e.g. a {@link GalleryItemsSummary}) is displayed as part of
+ * the gallery items list itself so that it scrolls alongwith the items. This
+ * wrapper makes it take the full width of the "row" that it occupies.
  */
-export const CollectionInfoBarWrapper = styled(Box)`
+export const GalleryItemsHeaderAdapter = styled(Box)`
     width: 100%;
     margin-bottom: 12px;
 `;