[web] New dedupe WIP + overflow menu cleanup (#4451)

web/apps/auth/src/pages/auth.tsx

@@ -3,17 +3,17 @@ import { stashRedirect } from "@/accounts/services/redirect";
 import { EnteLogo } from "@/base/components/EnteLogo";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { NavbarBase } from "@/base/components/Navbar";
+import {
+    OverflowMenu,
+    OverflowMenuOption,
+} from "@/base/components/OverflowMenu";
 import { isHTTP401Error } from "@/base/http";
 import log from "@/base/log";
 import { masterKeyFromSessionIfLoggedIn } from "@/base/session-store";
 import {
     HorizontalFlex,
     VerticallyCentered,
 } from "@ente/shared/components/Container";
-import {
-    OverflowMenu,
-    OverflowMenuOption,
-} from "@ente/shared/components/OverflowMenu";
 import { AUTH_PAGES as PAGES } from "@ente/shared/constants/pages";
 import LogoutOutlined from "@mui/icons-material/LogoutOutlined";
 import {
@@ -154,7 +154,7 @@ const AuthNavbar: React.FC = () => {
                 <EnteLogo />
             </HorizontalFlex>
             <HorizontalFlex position={"absolute"} right="24px">
-                <OverflowMenu ariaID={"auth-options"}>
+                <OverflowMenu ariaID="auth-options">
                     <OverflowMenuOption
                         color="critical"
                         startIcon={<LogoutOutlined />}

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

@@ -1,6 +1,10 @@
 import { assertionFailed } from "@/base/assert";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { SpaceBetweenFlex } from "@/base/components/mui/Container";
+import {
+    OverflowMenu,
+    OverflowMenuOption,
+} from "@/base/components/OverflowMenu";
 import { useModalVisibility } from "@/base/components/utils/modal";
 import type { Collection } from "@/media/collection";
 import { ItemVisibility } from "@/media/file-metadata";
@@ -23,11 +27,6 @@ import {
 } from "@/new/photos/services/magic-metadata";
 import { useAppContext } from "@/new/photos/types/context";
 import { HorizontalFlex } from "@ente/shared/components/Container";
-import {
-    OverflowMenu,
-    OverflowMenuOption,
-    StyledMenu,
-} from "@ente/shared/components/OverflowMenu";
 import ArchiveOutlined from "@mui/icons-material/ArchiveOutlined";
 import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
 import EditIcon from "@mui/icons-material/Edit";
@@ -44,7 +43,7 @@ import TvIcon from "@mui/icons-material/Tv";
 import Unarchive from "@mui/icons-material/Unarchive";
 import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
 import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
-import { Box, IconButton, Stack, Tooltip } from "@mui/material";
+import { Box, IconButton, Menu, Stack, Tooltip } from "@mui/material";
 import { SetCollectionNamerAttributes } from "components/Collections/CollectionNamer";
 import { t } from "i18next";
 import { GalleryContext } from "pages/gallery";
@@ -330,7 +329,7 @@ const CollectionOptions: React.FC<CollectionOptionsProps> = ({
             />
 
             <OverflowMenu
-                ariaID={"collection-options"}
+                ariaID="collection-options"
                 triggerButtonIcon={<MoreHoriz ref={overFlowMenuIconRef} />}
             >
                 {collectionSummaryType == "trash" ? (
@@ -721,8 +720,8 @@ const CollectionSortOrderMenu: React.FC<CollectionSortOrderMenuProps> = ({
     };
 
     return (
-        <StyledMenu
-            id={"collection-files-sort"}
+        <Menu
+            id="collection-files-sort"
             anchorEl={overFlowMenuIconRef.current}
             open={open}
             onClose={onClose}
@@ -745,6 +744,6 @@ const CollectionSortOrderMenu: React.FC<CollectionSortOrderMenuProps> = ({
             <OverflowMenuOption onClick={handleAscClick}>
                 {t("oldest_first")}
             </OverflowMenuOption>
-        </StyledMenu>
+        </Menu>
     );
 };

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

@@ -1,5 +1,9 @@
 import { isDesktop } from "@/base/app";
 import { EnteSwitch } from "@/base/components/EnteSwitch";
+import {
+    OverflowMenu,
+    OverflowMenuOption,
+} from "@/base/components/OverflowMenu";
 import type { ButtonishProps } from "@/base/components/mui";
 import type { ModalVisibilityProps } from "@/base/components/utils/modal";
 import { ensureElectron } from "@/base/electron";
@@ -12,10 +16,6 @@ import {
     VerticallyCenteredFlex,
 } from "@ente/shared/components/Container";
 import LinkButton from "@ente/shared/components/LinkButton";
-import {
-    OverflowMenu,
-    OverflowMenuOption,
-} from "@ente/shared/components/OverflowMenu";
 import { CustomError } from "@ente/shared/error";
 import FolderIcon from "@mui/icons-material/Folder";
 import {

web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx

@@ -11,6 +11,7 @@ import { downloadAndRevokeObjectURL } from "@/base/utils/web";
 import { downloadManager } from "@/gallery/services/download";
 import { EnteFile } from "@/media/file";
 import { photosDialogZIndex } from "@/new/photos/components/utils/z-index";
+import { getLocalCollections } from "@/new/photos/services/collections";
 import { AppContext } from "@/new/photos/types/context";
 import {
     CenteredFlex,
@@ -52,7 +53,6 @@ import React, {
     type MutableRefObject,
     type Ref,
 } from "react";
-import { getLocalCollections } from "services/collectionService";
 import uploadManager from "services/upload/uploadManager";
 
 interface ImageEditorOverlayProps {

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

@@ -1,3 +1,7 @@
+import {
+    OverflowMenu,
+    OverflowMenuOption,
+} from "@/base/components/OverflowMenu";
 import { EllipsizedTypography } from "@/base/components/Typography";
 import {
     useModalVisibility,
@@ -15,10 +19,6 @@ import {
     SpaceBetweenFlex,
     VerticallyCentered,
 } from "@ente/shared/components/Container";
-import {
-    OverflowMenu,
-    OverflowMenuOption,
-} from "@ente/shared/components/OverflowMenu";
 import CheckIcon from "@mui/icons-material/Check";
 import DoNotDisturbOutlinedIcon from "@mui/icons-material/DoNotDisturbOutlined";
 import FolderCopyOutlinedIcon from "@mui/icons-material/FolderCopyOutlined";

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

@@ -189,6 +189,9 @@ export default function App({ Component, pageProps }: AppProps) {
         [
             showLoadingBar,
             hideLoadingBar,
+            watchFolderView,
+            watchFolderFiles,
+            themeColor,
             showMiniDialog,
             onGenericError,
             logout,

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

@@ -3,6 +3,7 @@ import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { errorDialogAttributes } from "@/base/components/utils/dialog";
 import log from "@/base/log";
 import { ALL_SECTION } from "@/new/photos/services/collection";
+import { getLocalCollections } from "@/new/photos/services/collections";
 import { createFileCollectionIDs } from "@/new/photos/services/file";
 import { getLocalFiles } from "@/new/photos/services/files";
 import { useAppContext } from "@/new/photos/types/context";
@@ -19,10 +20,7 @@ import PhotoFrame from "components/PhotoFrame";
 import { t } from "i18next";
 import { default as Router, default as router } from "next/router";
 import { createContext, useEffect, useState } from "react";
-import {
-    getAllLatestCollections,
-    getLocalCollections,
-} from "services/collectionService";
+import { getAllLatestCollections } from "services/collectionService";
 import { Duplicate, getDuplicates } from "services/deduplicationService";
 import { syncFiles, trashFiles } from "services/fileService";
 import { syncTrash } from "services/trashService";

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

@@ -32,6 +32,7 @@ import { shouldShowWhatsNew } from "@/new/photos/services/changelog";
 import {
     ALL_SECTION,
     DUMMY_UNCATEGORIZED_COLLECTION,
+    getAllLocalCollections,
     isHiddenCollection,
 } from "@/new/photos/services/collection";
 import { areOnlySystemCollections } from "@/new/photos/services/collection/ui";
@@ -113,7 +114,6 @@ import {
     createAlbum,
     createUnCategorizedCollection,
     getAllLatestCollections,
-    getAllLocalCollections,
 } from "services/collectionService";
 import { syncFiles } from "services/fileService";
 import { preFileInfoSync, sync } from "services/sync";

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

@@ -3,6 +3,10 @@ import { FormPaper, FormPaperTitle } from "@/base/components/FormPaper";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { SpaceBetweenFlex } from "@/base/components/mui/Container";
 import { NavbarBase, SelectionBar } from "@/base/components/Navbar";
+import {
+    OverflowMenu,
+    OverflowMenuOption,
+} from "@/base/components/OverflowMenu";
 import {
     useIsSmallWidth,
     useIsTouchscreen,
@@ -30,10 +34,6 @@ import {
     FluidContainer,
     VerticallyCentered,
 } from "@ente/shared/components/Container";
-import {
-    OverflowMenu,
-    OverflowMenuOption,
-} from "@ente/shared/components/OverflowMenu";
 import SingleInputForm, {
     type SingleInputFormProps,
 } from "@ente/shared/components/SingleInputForm";
@@ -703,7 +703,7 @@ const ListHeader: React.FC<ListHeaderProps> = ({
                     fileCount={publicFiles.length}
                 />
                 {downloadEnabled && (
-                    <OverflowMenu ariaID={"collection-options"}>
+                    <OverflowMenu ariaID="collection-options">
                         <OverflowMenuOption
                             startIcon={<FileDownloadOutlinedIcon />}
                             onClick={downloadAllFiles}

web/apps/photos/src/services/collectionService.ts

@@ -29,6 +29,10 @@ import {
     CollectionSummaryOrder,
     CollectionsSortBy,
 } from "@/new/photos/services/collection/ui";
+import {
+    getAllLocalCollections,
+    getLocalCollections,
+} from "@/new/photos/services/collections";
 import { groupFilesByCollectionID } from "@/new/photos/services/file";
 import { getLocalFiles, sortFiles } from "@/new/photos/services/files";
 import { updateMagicMetadata } from "@/new/photos/services/magic-metadata";
@@ -42,15 +46,14 @@ import { getActualKey } from "@ente/shared/user";
 import type { User } from "@ente/shared/user/types";
 import {
     changeCollectionSubType,
-    getHiddenCollections,
-    getNonHiddenCollections,
     isQuickLinkCollection,
     isValidMoveTarget,
 } from "utils/collection";
 import { UpdateMagicMetadataRequest } from "./fileService";
 import { getPublicKey } from "./userService";
 
 const COLLECTION_TABLE = "collections";
+
 const COLLECTION_UPDATION_TIME = "collection-updation-time";
 const HIDDEN_COLLECTION_IDS = "hidden-collection-ids";
 
@@ -192,21 +195,6 @@ const getCollections = async (
     }
 };
 
-export const getLocalCollections = async (
-    type: "normal" | "hidden" = "normal",
-): Promise<Collection[]> => {
-    const collections = await getAllLocalCollections();
-    return type === "normal"
-        ? getNonHiddenCollections(collections)
-        : getHiddenCollections(collections);
-};
-
-export const getAllLocalCollections = async (): Promise<Collection[]> => {
-    const collections: Collection[] =
-        (await localForage.getItem(COLLECTION_TABLE)) ?? [];
-    return collections;
-};
-
 export const getCollectionUpdationTime = async (): Promise<number> =>
     (await localForage.getItem<number>(COLLECTION_UPDATION_TIME)) ?? 0;
 
@@ -217,10 +205,11 @@ export const getLatestCollections = async (
     type: "normal" | "hidden" = "normal",
 ): Promise<Collection[]> => {
     const collections = await getAllLatestCollections();
-    return type === "normal"
-        ? getNonHiddenCollections(collections)
-        : getHiddenCollections(collections);
+    return type == "normal"
+        ? collections.filter((c) => !isHiddenCollection(c))
+        : collections.filter((c) => isHiddenCollection(c));
 };
+
 export const getAllLatestCollections = async (): Promise<Collection[]> => {
     const collections = await syncCollections();
     return collections;

web/apps/photos/src/services/export/index.ts

@@ -14,6 +14,7 @@ import { FileType } from "@/media/file-type";
 import { decodeLivePhoto } from "@/media/live-photo";
 import {
     createCollectionNameByID,
+    getAllLocalCollections,
     getCollectionUserFacingName,
 } from "@/new/photos/services/collection";
 import {
@@ -26,7 +27,6 @@ import { PromiseQueue } from "@/utils/promise";
 import { CustomError } from "@ente/shared/error";
 import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
 import i18n from "i18next";
-import { getAllLocalCollections } from "../collectionService";
 import { migrateExport, type ExportRecord } from "./migration";
 
 /** Name of the JSON file in which we keep the state of the export. */

web/apps/photos/src/services/export/migration.ts

@@ -6,6 +6,7 @@ import type { Collection } from "@/media/collection";
 import { mergeMetadata, type EnteFile } from "@/media/file";
 import { FileType } from "@/media/file-type";
 import { decodeLivePhoto } from "@/media/live-photo";
+import { getLocalCollections } from "@/new/photos/services/collections";
 import { exportMetadataDirectoryName } from "@/new/photos/services/export";
 import { getAllLocalFiles } from "@/new/photos/services/files";
 import {
@@ -16,7 +17,6 @@ import {
 import { wait } from "@/utils/promise";
 import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
 import type { User } from "@ente/shared/user/types";
-import { getLocalCollections } from "services/collectionService";
 import { getIDBasedSortedFiles, getPersonalFiles } from "utils/file";
 import {
     getCollectionIDFromFileUID,

web/apps/photos/src/utils/collection.ts

@@ -17,6 +17,10 @@ import {
     isHiddenCollection,
     isIncomingShare,
 } from "@/new/photos/services/collection";
+import {
+    getAllLocalCollections,
+    getLocalCollections,
+} from "@/new/photos/services/collections";
 import { getAllLocalFiles, getLocalFiles } from "@/new/photos/services/files";
 import { updateMagicMetadata } from "@/new/photos/services/magic-metadata";
 import { safeDirectoryName } from "@/new/photos/utils/native-fs";
@@ -26,8 +30,6 @@ import { t } from "i18next";
 import {
     addToCollection,
     createAlbum,
-    getAllLocalCollections,
-    getLocalCollections,
     moveToCollection,
     removeFromCollection,
     restoreToCollection,
@@ -343,16 +345,6 @@ export function getCollectionNameMap(
     );
 }
 
-export function getNonHiddenCollections(
-    collections: Collection[],
-): Collection[] {
-    return collections.filter((collection) => !isHiddenCollection(collection));
-}
-
-export function getHiddenCollections(collections: Collection[]): Collection[] {
-    return collections.filter((collection) => isHiddenCollection(collection));
-}
-
 export const getOrCreateAlbum = async (
     albumName: string,
     existingCollections: Collection[],

web/apps/photos/tests/upload.test.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/dot-notation */
 import { FileType } from "@/media/file-type";
+import { getLocalCollections } from "@/new/photos/services/collections";
 import { groupFilesByCollectionID } from "@/new/photos/services/file";
 import { getLocalFiles } from "@/new/photos/services/files";
-import { getLocalCollections } from "services/collectionService";
 import { parseDateFromDigitGroups } from "services/upload/date";
 import {
     MAX_FILE_NAME_LENGTH_GOOGLE_EXPORT,