make shared-album collection info header scrollable

src/components/Collections/index.tsx

@@ -69,7 +69,7 @@ export default function Collections(props: Iprops) {
                         }
                     />
                 ),
-                itemType: ITEM_TYPE.STATIC,
+                itemType: ITEM_TYPE.OTHER,
                 height: 68,
             }),
         [collectionSummaries, activeCollectionID, shouldBeHidden]

src/components/PhotoList.tsx

@@ -30,7 +30,7 @@ export enum ITEM_TYPE {
     TIME = 'TIME',
     FILE = 'FILE',
     SIZE_AND_COUNT = 'SIZE_AND_COUNT',
-    STATIC = 'static',
+    OTHER = 'OTHER',
 }
 
 export interface TimeStampListItem {
@@ -141,6 +141,7 @@ export function PhotoList({
     resetFetching,
 }: Props) {
     const galleryContext = useContext(GalleryContext);
+
     const timeStampListRef = useRef([]);
     const timeStampList = timeStampListRef?.current ?? [];
     const filteredDataCopyRef = useRef([]);
@@ -170,7 +171,15 @@ export function PhotoList({
         let timeStampList: TimeStampListItem[] = [];
 
         if (galleryContext.photoListHeader) {
-            timeStampList.push(getPhotoListHeader());
+            timeStampList.push(
+                getPhotoListHeader(galleryContext.photoListHeader)
+            );
+        } else if (publicCollectionGalleryContext.photoListHeader) {
+            timeStampList.push(
+                getPhotoListHeader(
+                    publicCollectionGalleryContext.photoListHeader
+                )
+            );
         }
         if (deduplicateContext.isOnDeduplicatePage) {
             skipMerge = true;
@@ -303,12 +312,12 @@ export function PhotoList({
         first.getMonth() === second.getMonth() &&
         first.getDate() === second.getDate();
 
-    const getPhotoListHeader = () => {
+    const getPhotoListHeader = (photoListHeader) => {
         return {
-            ...galleryContext.photoListHeader,
+            ...photoListHeader,
             item: (
                 <ListItemContainer span={columns}>
-                    {galleryContext.photoListHeader.item}
+                    {photoListHeader.item}
                 </ListItemContainer>
             ),
         };
@@ -316,7 +325,7 @@ export function PhotoList({
 
     const getEmptyListItem = () => {
         return {
-            itemType: ITEM_TYPE.STATIC,
+            itemType: ITEM_TYPE.OTHER,
             item: (
                 <NothingContainer span={columns}>
                     <div>{constants.NOTHING_HERE}</div>
@@ -339,7 +348,7 @@ export function PhotoList({
             return sum;
         })();
         return {
-            itemType: ITEM_TYPE.STATIC,
+            itemType: ITEM_TYPE.OTHER,
             item: <></>,
             height: Math.max(height - photoFrameHeight - FOOTER_HEIGHT, 0),
         };
@@ -347,7 +356,7 @@ export function PhotoList({
 
     const getAppDownloadFooter = () => {
         return {
-            itemType: ITEM_TYPE.STATIC,
+            itemType: ITEM_TYPE.OTHER,
             height: FOOTER_HEIGHT,
             item: (
                 <FooterContainer span={columns}>
@@ -359,7 +368,7 @@ export function PhotoList({
 
     const getAlbumsFooter = () => {
         return {
-            itemType: ITEM_TYPE.STATIC,
+            itemType: ITEM_TYPE.OTHER,
             height: FOOTER_HEIGHT,
             item: (
                 <FooterContainer span={columns}>

src/pages/gallery/index.tsx

@@ -317,7 +317,7 @@ export default function Gallery() {
                         searchResultSummary={searchResultSummary}
                     />
                 ),
-                itemType: ITEM_TYPE.STATIC,
+                itemType: ITEM_TYPE.OTHER,
             });
         }
     }, [isInSearchMode, searchResultSummary]);

src/pages/shared-albums/index.tsx

@@ -35,6 +35,7 @@ import { logError } from 'utils/sentry';
 import SharedAlbumNavbar from 'components/pages/sharedAlbum/Navbar';
 import { CollectionInfo } from 'components/Collections/CollectionInfo';
 import { CollectionInfoBarWrapper } from 'components/Collections/styledComponents';
+import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
 
 const Loader = () => (
     <VerticallyCentered>
@@ -61,6 +62,8 @@ export default function PublicCollectionGallery() {
     const router = useRouter();
     const [isPasswordProtected, setIsPasswordProtected] =
         useState<boolean>(false);
+    const [photoListHeader, setPhotoListHeader] =
+        useState<TimeStampListItem>(null);
 
     useEffect(() => {
         const currentURL = new URL(window.location.href);
@@ -120,6 +123,25 @@ export default function PublicCollectionGallery() {
         main();
     }, []);
 
+    useEffect(
+        () =>
+            publicCollection &&
+            publicFiles &&
+            setPhotoListHeader({
+                item: (
+                    <CollectionInfoBarWrapper>
+                        <CollectionInfo
+                            name={publicCollection.name}
+                            fileCount={publicFiles.length}
+                        />
+                    </CollectionInfoBarWrapper>
+                ),
+                itemType: ITEM_TYPE.OTHER,
+                height: 68,
+            }),
+        [publicCollection, publicFiles]
+    );
+
     const syncWithRemote = async () => {
         const collectionUID = getPublicCollectionUID(token.current);
         try {
@@ -278,14 +300,9 @@ export default function PublicCollectionGallery() {
                 passwordToken: passwordJWTToken.current,
                 accessedThroughSharedURL: true,
                 openReportForm,
+                photoListHeader,
             }}>
             <SharedAlbumNavbar />
-            <CollectionInfoBarWrapper>
-                <CollectionInfo
-                    name={publicCollection.name}
-                    fileCount={publicFiles.length}
-                />
-            </CollectionInfoBarWrapper>
             <PhotoFrame
                 files={publicFiles}
                 setFiles={setPublicFiles}

src/types/publicCollection/index.ts

@@ -1,3 +1,4 @@
+import { TimeStampListItem } from 'components/PhotoList';
 import { REPORT_REASON } from 'constants/publicCollection';
 import { EnteFile } from 'types/file';
 
@@ -6,6 +7,7 @@ export interface PublicCollectionGalleryContextType {
     passwordToken: string;
     accessedThroughSharedURL: boolean;
     openReportForm: () => void;
+    photoListHeader: TimeStampListItem;
 }
 
 export interface LocalSavedPublicCollectionFiles {

src/utils/publicCollectionGallery/index.ts

@@ -7,6 +7,7 @@ export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryConte
         passwordToken: null,
         accessedThroughSharedURL: false,
         openReportForm: () => null,
+        photoListHeader: null,
     };
 
 export const PublicCollectionGalleryContext =