[web] Reset scroll state on mode/person change (#3611)

Fixes https://github.com/ente-io/ente/issues/3603

web/apps/photos/src/components/PhotoFrame.tsx

@@ -44,12 +44,18 @@ const Container = styled("div")`
 
 const PHOTOSWIPE_HASH_SUFFIX = "&opened";
 
-interface Props {
+export interface PhotoFrameProps {
     page:
         | PHOTOS_PAGES.GALLERY
         | PHOTOS_PAGES.DEDUPLICATE
         | PHOTOS_PAGES.SHARED_ALBUMS;
     mode?: GalleryBarMode;
+    /**
+     * This is an experimental prop, to see if we can merge the separate
+     * "isInSearchMode" state kept by the gallery to be instead provided as a
+     * another mode in which the gallery operates.
+     */
+    modePlus?: GalleryBarMode | "search";
     files: EnteFile[];
     duplicates?: Duplicate[];
     syncWithRemote: () => Promise<void>;
@@ -79,6 +85,7 @@ const PhotoFrame = ({
     page,
     duplicates,
     mode,
+    modePlus,
     files,
     syncWithRemote,
     favItemIds,
@@ -97,7 +104,7 @@ const PhotoFrame = ({
     setFilesDownloadProgressAttributesCreator,
     selectable,
     onSelectPerson,
-}: Props) => {
+}: PhotoFrameProps) => {
     const [open, setOpen] = useState(false);
     const [currentIndex, setCurrentIndex] = useState<number>(0);
     const [fetching, setFetching] = useState<{ [k: number]: boolean }>({});
@@ -556,6 +563,7 @@ const PhotoFrame = ({
                             height={height}
                             getThumbnail={getThumbnail}
                             mode={mode}
+                            modePlus={modePlus}
                             displayFiles={displayFiles}
                             activeCollectionID={activeCollectionID}
                             activePersonID={activePersonID}

web/apps/photos/src/components/PhotoList/index.tsx

@@ -1,4 +1,3 @@
-import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl";
 import { EnteFile } from "@/new/photos/types/file";
 import { formattedByteSize } from "@/new/photos/utils/units";
 import { FlexWrapper } from "@ente/shared/components/Container";
@@ -17,12 +16,14 @@ import {
 import { handleSelectCreator } from "utils/photoFrame";
 import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
 
+import { assertionFailed } from "@/base/assert";
 import {
     GAP_BTW_TILES,
     IMAGE_CONTAINER_MAX_HEIGHT,
     IMAGE_CONTAINER_MAX_WIDTH,
     MIN_COLUMNS,
 } from "@/new/photos/components/PhotoList";
+import type { PhotoFrameProps } from "components/PhotoFrame";
 
 export const DATE_CONTAINER_HEIGHT = 48;
 export const SIZE_AND_COUNT_CONTAINER_HEIGHT = 72;
@@ -187,10 +188,9 @@ const NothingContainer = styled(ListItemContainer)`
     justify-content: center;
 `;
 
-interface Props {
+type Props = Pick<PhotoFrameProps, "mode" | "modePlus"> & {
     height: number;
     width: number;
-    mode?: GalleryBarMode;
     displayFiles: EnteFile[];
     showAppDownloadBanner: boolean;
     getThumbnail: (
@@ -200,7 +200,7 @@ interface Props {
     ) => JSX.Element;
     activeCollectionID: number;
     activePersonID?: string;
-}
+};
 
 interface ItemData {
     timeStampList: TimeStampListItem[];
@@ -257,6 +257,7 @@ export function PhotoList({
     height,
     width,
     mode,
+    modePlus,
     displayFiles,
     showAppDownloadBanner,
     getThumbnail,
@@ -890,9 +891,25 @@ export function PhotoList({
         renderListItem,
     );
 
+    // The old, mode unaware, behaviour.
+    let key = `${activeCollectionID}`;
+    if (modePlus) {
+        // If the new experimental modePlus prop is provided, use it to derive a
+        // mode specific key.
+        if (modePlus == "search") {
+            key = "search";
+        } else if (modePlus == "people") {
+            if (!activePersonID) {
+                assertionFailed();
+            } else {
+                key = activePersonID;
+            }
+        }
+    }
+
     return (
         <List
-            key={`${activeCollectionID}`}
+            key={key}
             itemData={itemData}
             ref={listRef}
             itemSize={getItemSize(timeStampList)}

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

@@ -1302,6 +1302,7 @@ export default function Gallery() {
                     <PhotoFrame
                         page={PAGES.GALLERY}
                         mode={barMode}
+                        modePlus={isInSearchMode ? "search" : barMode}
                         files={filteredData}
                         syncWithRemote={syncWithRemote}
                         favItemIds={favItemIds}