From 535963b2294cabbc25eb15bd0843b180a2d73aa1 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 14:52:35 +0530 Subject: [PATCH 01/21] Remove double negation --- .../components/Collections/GalleryBarAndListHeader.tsx | 4 ++-- web/apps/photos/src/pages/gallery.tsx | 8 ++++---- web/packages/new/photos/services/collection/ui.ts | 9 ++------- 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx index d45aab5330..fdc2900fc8 100644 --- a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx +++ b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx @@ -5,8 +5,8 @@ import { } from "@/new/photos/components/Gallery/BarImpl"; import { PeopleHeader } from "@/new/photos/components/Gallery/PeopleHeader"; import { + areOnlySystemCollections, collectionsSortBy, - hasNonSystemCollections, isSystemCollection, shouldShowOnCollectionBar, type CollectionsSortBy, @@ -122,7 +122,7 @@ export const GalleryBarAndListHeader: React.FC = ({ const shouldBeHidden = useMemo( () => shouldHide || - (!hasNonSystemCollections(toShowCollectionSummaries) && + (areOnlySystemCollections(toShowCollectionSummaries) && activeCollectionID === ALL_SECTION), [shouldHide, toShowCollectionSummaries, activeCollectionID], ); diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index ff7243e133..318bab8408 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -16,7 +16,7 @@ import { import { WhatsNew } from "@/new/photos/components/WhatsNew"; import { shouldShowWhatsNew } from "@/new/photos/services/changelog"; import type { CollectionSummaries } from "@/new/photos/services/collection/ui"; -import { hasNonSystemCollections } from "@/new/photos/services/collection/ui"; +import { areOnlySystemCollections } from "@/new/photos/services/collection/ui"; import downloadManager from "@/new/photos/services/download"; import { getLocalFiles, @@ -1264,9 +1264,9 @@ export default function Gallery() { setShouldDisableDropzone={setShouldDisableDropzone} setFiles={setFiles} setCollections={setCollections} - isFirstUpload={ - !hasNonSystemCollections(collectionSummaries) - } + isFirstUpload={areOnlySystemCollections( + collectionSummaries, + )} {...{ dragAndDropFiles, openFileSelector, diff --git a/web/packages/new/photos/services/collection/ui.ts b/web/packages/new/photos/services/collection/ui.ts index b17c48b1d0..3ab3c9ba51 100644 --- a/web/packages/new/photos/services/collection/ui.ts +++ b/web/packages/new/photos/services/collection/ui.ts @@ -114,14 +114,9 @@ const hideFromCollectionBarCSTypes = new Set([ "defaultHidden", ]); -export const hasNonSystemCollections = ( +export const areOnlySystemCollections = ( collectionSummaries: CollectionSummaries, -) => { - for (const collectionSummary of collectionSummaries.values()) { - if (!isSystemCollection(collectionSummary.type)) return true; - } - return false; -}; +) => collectionSummaries.values().every(({ type }) => isSystemCollection(type)); export const canMoveToCollection = (type: CollectionSummaryType) => !moveToDisabledCSTypes.has(type); From 211d2ac4a9c7614934f7783ba7b20184f1b2dd12 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 14:55:29 +0530 Subject: [PATCH 02/21] Move --- web/apps/photos/src/components/Upload/Uploader.tsx | 2 +- .../components/pages/gallery/SelectedFileOptions.tsx | 2 +- web/apps/photos/src/pages/gallery.tsx | 10 +++++----- web/apps/photos/src/types/gallery/index.ts | 2 +- .../photos/components/CollectionSelectionDialog.tsx} | 6 +++++- 5 files changed, 13 insertions(+), 9 deletions(-) rename web/{apps/photos/src/components/Collections/CollectionSelector.tsx => packages/new/photos/components/CollectionSelectionDialog.tsx} (96%) diff --git a/web/apps/photos/src/components/Upload/Uploader.tsx b/web/apps/photos/src/components/Upload/Uploader.tsx index f9e0e5c728..9bdbbd60eb 100644 --- a/web/apps/photos/src/components/Upload/Uploader.tsx +++ b/web/apps/photos/src/components/Upload/Uploader.tsx @@ -3,6 +3,7 @@ import log from "@/base/log"; import type { CollectionMapping, Electron, ZipItem } from "@/base/types/ipc"; import type { Collection } from "@/media/collection"; import { CollectionMappingChoiceDialog } from "@/new/photos/components/CollectionMappingChoiceDialog"; +import { CollectionSelectorIntent } from "@/new/photos/components/CollectionSelectionDialog"; import { exportMetadataDirectoryName } from "@/new/photos/services/export"; import type { FileAndPath, @@ -13,7 +14,6 @@ import { firstNonEmpty } from "@/utils/array"; import { ensure } from "@/utils/ensure"; import { CustomError } from "@ente/shared/error"; import DiscFullIcon from "@mui/icons-material/DiscFull"; -import { CollectionSelectorIntent } from "components/Collections/CollectionSelector"; import UserNameInputDialog from "components/UserNameInputDialog"; import { t } from "i18next"; import isElectron from "is-electron"; diff --git a/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx b/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx index bae62e864f..3e919266c7 100644 --- a/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx @@ -1,5 +1,6 @@ import { SelectionBar } from "@/base/components/Navbar"; import type { Collection } from "@/media/collection"; +import { CollectionSelectorIntent } from "@/new/photos/components/CollectionSelectionDialog"; import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl"; import { FluidContainer } from "@ente/shared/components/Container"; import ClockIcon from "@mui/icons-material/AccessTime"; @@ -15,7 +16,6 @@ import UnArchiveIcon 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 { CollectionSelectorIntent } from "components/Collections/CollectionSelector"; import { t } from "i18next"; import { AppContext } from "pages/_app"; import { useContext } from "react"; diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 318bab8408..90ae18afb4 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/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 { + CollectionSelectionDialog, + CollectionSelectorAttributes, +} from "@/new/photos/components/CollectionSelectionDialog"; import { PeopleEmptyState, SearchResultsHeader, @@ -67,10 +71,6 @@ import AuthenticateUserModal from "components/AuthenticateUserModal"; import CollectionNamer, { CollectionNamerAttributes, } from "components/Collections/CollectionNamer"; -import { - CollectionSelector, - CollectionSelectorAttributes, -} from "components/Collections/CollectionSelector"; import { GalleryBarAndListHeader } from "components/Collections/GalleryBarAndListHeader"; import ExportModal from "components/ExportModal"; import { @@ -1172,7 +1172,7 @@ export default function Gallery() { onHide={setCollectionNamerView.bind(null, false)} attributes={collectionNamerAttributes} /> - void; + /** + * The same {@link CollectionSelectionDialog} can be used for multiple purposes by + * providing attributes specific to each use case. + */ attributes: CollectionSelectorAttributes; collectionSummaries: CollectionSummaries; /** @@ -63,7 +67,7 @@ interface CollectionSelectorProps { * A dialog allowing the user to select one of their existing collections or * create a new one. */ -export const CollectionSelector: React.FC = ({ +export const CollectionSelectionDialog: React.FC = ({ attributes, collectionSummaries, collectionForCollectionID, From 64065b9a2f0bf402d0656a6abf0c7e7b6bb50cdc Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 15:03:59 +0530 Subject: [PATCH 03/21] Cleanup --- .../CollectionMappingChoiceDialog.tsx | 7 +++- .../components/CollectionSelectionDialog.tsx | 37 ++++++++++--------- .../new/photos/components/NameInputDialog.tsx | 4 +- .../new/photos/components/mui/Dialog.tsx | 4 +- 4 files changed, 29 insertions(+), 23 deletions(-) diff --git a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx index 0281d040b2..5c16915dc9 100644 --- a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx +++ b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx @@ -12,9 +12,12 @@ import { import { t } from "i18next"; import React from "react"; import { SpaceBetweenFlex } from "./mui"; -import { DialogCloseIconButton, type DialogVisiblityProps } from "./mui/Dialog"; +import { + DialogCloseIconButton, + type DialogVisibilityProps, +} from "./mui/Dialog"; -type CollectionMappingChoiceModalProps = DialogVisiblityProps & { +type CollectionMappingChoiceModalProps = DialogVisibilityProps & { didSelect: (mapping: CollectionMapping) => void; }; diff --git a/web/packages/new/photos/components/CollectionSelectionDialog.tsx b/web/packages/new/photos/components/CollectionSelectionDialog.tsx index ae1c800f51..8ef8f58057 100644 --- a/web/packages/new/photos/components/CollectionSelectionDialog.tsx +++ b/web/packages/new/photos/components/CollectionSelectionDialog.tsx @@ -23,6 +23,7 @@ import { } from "@mui/material"; import { t } from "i18next"; import { useEffect, useState } from "react"; +import type { DialogVisibilityProps } from "./mui/Dialog"; export enum CollectionSelectorIntent { upload, @@ -44,14 +45,15 @@ export interface CollectionSelectorAttributes { onCancel?: () => void; } -interface CollectionSelectorProps { - open: boolean; - onClose: () => void; +type CollectionSelectionDialogProps = DialogVisibilityProps & { /** - * The same {@link CollectionSelectionDialog} can be used for multiple purposes by - * providing attributes specific to each use case. + * The same {@link CollectionSelectionDialog} can be used for different + * purposes by customizing the {@link attributes} prop before opening it. */ attributes: CollectionSelectorAttributes; + /** + * The collections to list. + */ collectionSummaries: CollectionSummaries; /** * A function to map from a collection ID to a {@link Collection}. @@ -61,17 +63,20 @@ interface CollectionSelectorProps { * {@link callback} attribute of {@link CollectionSelectorAttributes}. */ collectionForCollectionID: (collectionID: number) => Promise; -} +}; /** * A dialog allowing the user to select one of their existing collections or * create a new one. */ -export const CollectionSelectionDialog: React.FC = ({ +export const CollectionSelectionDialog: React.FC< + CollectionSelectionDialogProps +> = ({ + open, + onClose, attributes, collectionSummaries, collectionForCollectionID, - ...props }) => { // Make the dialog fullscreen if the screen is <= the dialog's max width. const isFullScreen = useMediaQuery("(max-width: 494px)"); @@ -81,7 +86,7 @@ export const CollectionSelectionDialog: React.FC = ({ >([]); useEffect(() => { - if (!attributes || !props.open) { + if (!attributes || !open) { return; } const main = async () => { @@ -119,13 +124,13 @@ export const CollectionSelectionDialog: React.FC = ({ ); }); if (collectionsToShow.length === 0) { - props.onClose(); + onClose(); attributes.showNextModal(); } setCollectionsToShow(collectionsToShow); }; main(); - }, [collectionSummaries, attributes, props.open]); + }, [collectionSummaries, attributes, open]); if (!collectionsToShow?.length) { return <>; @@ -133,18 +138,18 @@ export const CollectionSelectionDialog: React.FC = ({ const handleCollectionClick = async (collectionID: number) => { attributes.callback(await collectionForCollectionID(collectionID)); - props.onClose(); + onClose(); }; const onUserTriggeredClose = () => { attributes.onCancel?.(); - props.onClose(); + onClose(); }; return ( @@ -180,9 +185,7 @@ export const CollectionSelectionDialog: React.FC = ({ ); }; -export const AllCollectionMobileBreakpoint = 559; - -export const Dialog_ = styled(Dialog)(({ theme }) => ({ +const Dialog_ = styled(Dialog)(({ theme }) => ({ "& .MuiPaper-root": { maxWidth: "494px", }, diff --git a/web/packages/new/photos/components/NameInputDialog.tsx b/web/packages/new/photos/components/NameInputDialog.tsx index 636c69f2a4..a270a861a8 100644 --- a/web/packages/new/photos/components/NameInputDialog.tsx +++ b/web/packages/new/photos/components/NameInputDialog.tsx @@ -5,9 +5,9 @@ import SingleInputForm, { import { Dialog, DialogContent, DialogTitle } from "@mui/material"; import { t } from "i18next"; import React from "react"; -import { type DialogVisiblityProps } from "./mui/Dialog"; +import { type DialogVisibilityProps } from "./mui/Dialog"; -type NameInputDialogProps = DialogVisiblityProps & { +type NameInputDialogProps = DialogVisibilityProps & { /** Title of the dialog. */ title: string; /** Placeholder string to show in the text input when it is empty. */ diff --git a/web/packages/new/photos/components/mui/Dialog.tsx b/web/packages/new/photos/components/mui/Dialog.tsx index 56e86aba88..59cf2084d9 100644 --- a/web/packages/new/photos/components/mui/Dialog.tsx +++ b/web/packages/new/photos/components/mui/Dialog.tsx @@ -6,14 +6,14 @@ import React from "react"; /** * Common props to control the display of a dialog-like component. */ -export interface DialogVisiblityProps { +export interface DialogVisibilityProps { /** If `true`, the dialog is shown. */ open: boolean; /** Callback fired when the dialog wants to be closed. */ onClose: () => void; } -type DialogCloseIconButtonProps = Omit; +type DialogCloseIconButtonProps = Omit; /** * A convenience {@link IconButton} commonly needed on {@link Dialog}s, at the From 5c6b0b8679c8050474b431ff4c34b8fda8e2675f Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 15:16:45 +0530 Subject: [PATCH 04/21] Fix some --- .../photos/src/components/Upload/Uploader.tsx | 3 +- .../pages/gallery/SelectedFileOptions.tsx | 9 +- web/apps/photos/src/pages/gallery.tsx | 2 +- .../components/CollectionSelectionDialog.tsx | 139 +++++++++--------- 4 files changed, 75 insertions(+), 78 deletions(-) diff --git a/web/apps/photos/src/components/Upload/Uploader.tsx b/web/apps/photos/src/components/Upload/Uploader.tsx index 9bdbbd60eb..68c1620051 100644 --- a/web/apps/photos/src/components/Upload/Uploader.tsx +++ b/web/apps/photos/src/components/Upload/Uploader.tsx @@ -3,7 +3,6 @@ import log from "@/base/log"; import type { CollectionMapping, Electron, ZipItem } from "@/base/types/ipc"; import type { Collection } from "@/media/collection"; import { CollectionMappingChoiceDialog } from "@/new/photos/components/CollectionMappingChoiceDialog"; -import { CollectionSelectorIntent } from "@/new/photos/components/CollectionSelectionDialog"; import { exportMetadataDirectoryName } from "@/new/photos/services/export"; import type { FileAndPath, @@ -461,10 +460,10 @@ export default function Uploader({ } props.setCollectionSelectorAttributes({ + action: "upload", callback: uploadFilesToExistingCollection, onCancel: handleCollectionSelectorCancel, showNextModal, - intent: CollectionSelectorIntent.upload, }); })(); }, [webFiles, desktopFiles, desktopFilePaths, desktopZipItems]); diff --git a/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx b/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx index 3e919266c7..cdabbed760 100644 --- a/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx @@ -1,6 +1,5 @@ import { SelectionBar } from "@/base/components/Navbar"; import type { Collection } from "@/media/collection"; -import { CollectionSelectorIntent } from "@/new/photos/components/CollectionSelectionDialog"; import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl"; import { FluidContainer } from "@ente/shared/components/Container"; import ClockIcon from "@mui/icons-material/AccessTime"; @@ -73,9 +72,9 @@ const SelectedFileOptions = ({ const addToCollection = () => setCollectionSelectorAttributes({ + action: "add", callback: handleCollectionOps(COLLECTION_OPS_TYPE.ADD), showNextModal: showCreateCollectionModal(COLLECTION_OPS_TYPE.ADD), - intent: CollectionSelectorIntent.add, fromCollection: !isInSearchMode && !peopleMode ? activeCollectionID : undefined, }); @@ -99,11 +98,11 @@ const SelectedFileOptions = ({ const restoreHandler = () => setCollectionSelectorAttributes({ + action: "restore", callback: handleCollectionOps(COLLECTION_OPS_TYPE.RESTORE), showNextModal: showCreateCollectionModal( COLLECTION_OPS_TYPE.RESTORE, ), - intent: CollectionSelectorIntent.restore, }); const removeFromCollectionHandler = () => { @@ -142,9 +141,9 @@ const SelectedFileOptions = ({ const moveToCollection = () => { setCollectionSelectorAttributes({ + action: "move", callback: handleCollectionOps(COLLECTION_OPS_TYPE.MOVE), showNextModal: showCreateCollectionModal(COLLECTION_OPS_TYPE.MOVE), - intent: CollectionSelectorIntent.move, fromCollection: !isInSearchMode && !peopleMode ? activeCollectionID : undefined, }); @@ -152,11 +151,11 @@ const SelectedFileOptions = ({ const unhideToCollection = () => { setCollectionSelectorAttributes({ + action: "unhide", callback: handleCollectionOps(COLLECTION_OPS_TYPE.UNHIDE), showNextModal: showCreateCollectionModal( COLLECTION_OPS_TYPE.UNHIDE, ), - intent: CollectionSelectorIntent.unhide, }); }; diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 90ae18afb4..7f6bf6dcdd 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -1175,8 +1175,8 @@ export default function Gallery() { findCollectionCreatingUncategorizedIfNeeded( collections, diff --git a/web/packages/new/photos/components/CollectionSelectionDialog.tsx b/web/packages/new/photos/components/CollectionSelectionDialog.tsx index 8ef8f58057..255c0e393a 100644 --- a/web/packages/new/photos/components/CollectionSelectionDialog.tsx +++ b/web/packages/new/photos/components/CollectionSelectionDialog.tsx @@ -1,3 +1,5 @@ +// TODO +/* eslint-disable @typescript-eslint/no-non-null-assertion */ import type { Collection } from "@/media/collection"; import { AllCollectionTile, @@ -22,25 +24,25 @@ import { useMediaQuery, } from "@mui/material"; import { t } from "i18next"; -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import type { DialogVisibilityProps } from "./mui/Dialog"; -export enum CollectionSelectorIntent { - upload, - add, - move, - restore, - unhide, -} +export type CollectionSelectionAction = + | "upload" + | "add" + | "move" + | "restore" + | "unhide"; export interface CollectionSelectorAttributes { + /** + * The {@link action} modifies the title of the dialog, and also removes + * some system collections that don't might not make sense for that + * particular action. + */ + action: CollectionSelectionAction; callback: (collection: Collection) => void; showNextModal: () => void; - /** - * The {@link intent} modifies the title of the dialog, and also filters - * the list of collections the user can select from appropriately. - */ - intent: CollectionSelectorIntent; fromCollection?: number; onCancel?: () => void; } @@ -50,7 +52,7 @@ type CollectionSelectionDialogProps = DialogVisibilityProps & { * The same {@link CollectionSelectionDialog} can be used for different * purposes by customizing the {@link attributes} prop before opening it. */ - attributes: CollectionSelectorAttributes; + attributes: CollectionSelectorAttributes | undefined; /** * The collections to list. */ @@ -89,60 +91,49 @@ export const CollectionSelectionDialog: React.FC< if (!attributes || !open) { return; } - const main = async () => { - const collectionsToShow = [...collectionSummaries.values()] - ?.filter(({ id, type }) => { - if (id === attributes.fromCollection) { - return false; - } else if ( - attributes.intent === CollectionSelectorIntent.add - ) { - return canAddToCollection(type); - } else if ( - attributes.intent === CollectionSelectorIntent.upload - ) { - return ( - canMoveToCollection(type) || type == "uncategorized" - ); - } else if ( - attributes.intent === CollectionSelectorIntent.restore - ) { - return ( - canMoveToCollection(type) || type == "uncategorized" - ); - } else { - return canMoveToCollection(type); - } - }) - .sort((a, b) => { - return a.name.localeCompare(b.name); - }) - .sort((a, b) => { - return ( - CollectionSummaryOrder.get(a.type) - - CollectionSummaryOrder.get(b.type) - ); - }); - if (collectionsToShow.length === 0) { - onClose(); - attributes.showNextModal(); - } - setCollectionsToShow(collectionsToShow); - }; - main(); + + const collectionsToShow = [...collectionSummaries.values()] + .filter(({ id, type }) => { + if (id === attributes.fromCollection) { + return false; + } else if (attributes.action == "add") { + return canAddToCollection(type); + } else if (attributes.action == "upload") { + return canMoveToCollection(type) || type == "uncategorized"; + } else if (attributes.action == "restore") { + return canMoveToCollection(type) || type == "uncategorized"; + } else { + return canMoveToCollection(type); + } + }) + .sort((a, b) => { + return a.name.localeCompare(b.name); + }) + .sort((a, b) => { + return ( + CollectionSummaryOrder.get(a.type)! - + CollectionSummaryOrder.get(b.type)! + ); + }); + if (collectionsToShow.length === 0) { + onClose(); + attributes.showNextModal(); + } + setCollectionsToShow(collectionsToShow); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [collectionSummaries, attributes, open]); - if (!collectionsToShow?.length) { + if (!collectionsToShow.length) { return <>; } const handleCollectionClick = async (collectionID: number) => { - attributes.callback(await collectionForCollectionID(collectionID)); + attributes?.callback(await collectionForCollectionID(collectionID)); onClose(); }; const onUserTriggeredClose = () => { - attributes.onCancel?.(); + attributes?.onCancel?.(); onClose(); }; @@ -154,18 +145,7 @@ export const CollectionSelectionDialog: React.FC< fullWidth > - {attributes.intent === CollectionSelectorIntent.upload - ? t("upload_to_album") - : attributes.intent === CollectionSelectorIntent.add - ? t("add_to_album") - : attributes.intent === CollectionSelectorIntent.move - ? t("move_to_album") - : attributes.intent === CollectionSelectorIntent.restore - ? t("restore_to_album") - : attributes.intent === - CollectionSelectorIntent.unhide - ? t("unhide_to_album") - : t("select_album")} + {dialogTitleForAction(attributes?.action)} @@ -198,6 +178,25 @@ const Dialog_ = styled(Dialog)(({ theme }) => ({ }, })); +const dialogTitleForAction = ( + action: CollectionSelectionAction | undefined, +) => { + switch (action) { + case "upload": + return t("upload_to_album"); + case "add": + return t("add_to_album"); + case "move": + return t("move_to_album"); + case "restore": + return t("restore_to_album"); + case "unhide": + return t("unhide_to_album"); + case undefined: + return t("select_album"); + } +}; + interface CollectionSelectorCardProps { collectionSummary: CollectionSummary; onCollectionClick: (collectionID: number) => void; From b51bacb3f8163a40e4639910f7cc975550a3cc8c Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 15:28:39 +0530 Subject: [PATCH 05/21] Early exit --- .../components/CollectionSelectionDialog.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/web/packages/new/photos/components/CollectionSelectionDialog.tsx b/web/packages/new/photos/components/CollectionSelectionDialog.tsx index 255c0e393a..4d9cbf95cf 100644 --- a/web/packages/new/photos/components/CollectionSelectionDialog.tsx +++ b/web/packages/new/photos/components/CollectionSelectionDialog.tsx @@ -123,17 +123,21 @@ export const CollectionSelectionDialog: React.FC< // eslint-disable-next-line react-hooks/exhaustive-deps }, [collectionSummaries, attributes, open]); + if (!attributes) { + return <>; + } + if (!collectionsToShow.length) { return <>; } const handleCollectionClick = async (collectionID: number) => { - attributes?.callback(await collectionForCollectionID(collectionID)); + attributes.callback(await collectionForCollectionID(collectionID)); onClose(); }; const onUserTriggeredClose = () => { - attributes?.onCancel?.(); + attributes.onCancel?.(); onClose(); }; @@ -145,7 +149,7 @@ export const CollectionSelectionDialog: React.FC< fullWidth > - {dialogTitleForAction(attributes?.action)} + {dialogTitleForAction(attributes.action)} @@ -178,9 +182,7 @@ const Dialog_ = styled(Dialog)(({ theme }) => ({ }, })); -const dialogTitleForAction = ( - action: CollectionSelectionAction | undefined, -) => { +const dialogTitleForAction = (action: CollectionSelectionAction) => { switch (action) { case "upload": return t("upload_to_album"); @@ -192,8 +194,6 @@ const dialogTitleForAction = ( return t("restore_to_album"); case "unhide": return t("unhide_to_album"); - case undefined: - return t("select_album"); } }; From 8b6ae562027489052166ec8629e563029d3b0ab0 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 15:32:39 +0530 Subject: [PATCH 06/21] Rename --- web/apps/photos/src/pages/gallery.tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 7f6bf6dcdd..74dfa20733 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -214,7 +214,8 @@ export default function Gallery() { const [blockingLoad, setBlockingLoad] = useState(false); const [collectionSelectorAttributes, setCollectionSelectorAttributes] = useState(null); - const [collectionSelectorView, setCollectionSelectorView] = useState(false); + const [openCollectionSelectionDialog, setOpenCollectionSelectionDialog] = + useState(false); const [collectionNamerAttributes, setCollectionNamerAttributes] = useState(null); const [collectionNamerView, setCollectionNamerView] = useState(false); @@ -475,7 +476,7 @@ export default function Gallery() { }, [user, collections, familyData]); useEffect(() => { - collectionSelectorAttributes && setCollectionSelectorView(true); + collectionSelectorAttributes && setOpenCollectionSelectionDialog(true); }, [collectionSelectorAttributes]); useEffect(() => { @@ -700,7 +701,7 @@ export default function Gallery() { if ( sidebarView || uploadTypeSelectorView || - collectionSelectorView || + openCollectionSelectionDialog || collectionNamerView || fixCreationTimeView || planModalView || @@ -943,7 +944,7 @@ export default function Gallery() { (ops: COLLECTION_OPS_TYPE) => async (collection: Collection) => { startLoading(); try { - setCollectionSelectorView(false); + setOpenCollectionSelectionDialog(false); const selectedFiles = getSelectedFiles(selected, filteredData); const toProcessFiles = ops === COLLECTION_OPS_TYPE.REMOVE @@ -1067,10 +1068,6 @@ export default function Gallery() { setUploadTypeSelectorIntent(intent ?? "upload"); }; - const closeCollectionSelector = () => { - setCollectionSelectorView(false); - }; - const openExportModal = () => { setExportModalView(true); }; @@ -1173,8 +1170,8 @@ export default function Gallery() { attributes={collectionNamerAttributes} /> setOpenCollectionSelectionDialog(false)} attributes={collectionSelectorAttributes} collectionSummaries={collectionSummaries} collectionForCollectionID={(id) => @@ -1244,7 +1241,7 @@ export default function Gallery() { Date: Sat, 5 Oct 2024 15:45:10 +0530 Subject: [PATCH 07/21] wip: checkpoint --- web/apps/photos/src/pages/gallery.tsx | 2 + .../components/CollectionSelectionDialog.tsx | 74 ++++++++++++------- 2 files changed, 49 insertions(+), 27 deletions(-) diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 74dfa20733..3aa8490bed 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -1113,6 +1113,8 @@ export default function Gallery() { return
; } + const handleOpenCollectionSelectionDialog = (attributes: CollectionSelectorAttributes) + // `people` will be undefined only when ML is disabled, otherwise it'll be // an empty array (even if people are loading). const showPeopleSectionButton = people !== undefined; diff --git a/web/packages/new/photos/components/CollectionSelectionDialog.tsx b/web/packages/new/photos/components/CollectionSelectionDialog.tsx index 4d9cbf95cf..356630813c 100644 --- a/web/packages/new/photos/components/CollectionSelectionDialog.tsx +++ b/web/packages/new/photos/components/CollectionSelectionDialog.tsx @@ -34,17 +34,34 @@ export type CollectionSelectionAction = | "restore" | "unhide"; -export interface CollectionSelectorAttributes { +export interface CollectionSelectionAttributes { /** * The {@link action} modifies the title of the dialog, and also removes * some system collections that don't might not make sense for that * particular action. */ action: CollectionSelectionAction; - callback: (collection: Collection) => void; - showNextModal: () => void; - fromCollection?: number; + /** + * Callback invoked when the user selects one the existing collections + * listed in the dialog. + */ + onSelectCollection: (collection: Collection) => void; + /** + * Callback invoked when the user selects the option to create a new + * collection. + */ + onCreateCollection: () => void; + /** + * Callback invoked when the user cancels the collection selection dialog. + */ onCancel?: () => void; + /** + * Some actions, like "add" and "move", happen in the context of an existing + * collection. In such cases, their ID can be set as the + * {@link ignoredCollectionID} to omit showing them again in the list of + * collections. + */ + ignoredCollectionID?: number; } type CollectionSelectionDialogProps = DialogVisibilityProps & { @@ -52,7 +69,7 @@ type CollectionSelectionDialogProps = DialogVisibilityProps & { * The same {@link CollectionSelectionDialog} can be used for different * purposes by customizing the {@link attributes} prop before opening it. */ - attributes: CollectionSelectorAttributes | undefined; + attributes: CollectionSelectionAttributes | undefined; /** * The collections to list. */ @@ -83,7 +100,7 @@ export const CollectionSelectionDialog: React.FC< // Make the dialog fullscreen if the screen is <= the dialog's max width. const isFullScreen = useMediaQuery("(max-width: 494px)"); - const [collectionsToShow, setCollectionsToShow] = useState< + const [filteredCollections, setFilteredCollections] = useState< CollectionSummary[] >([]); @@ -92,9 +109,9 @@ export const CollectionSelectionDialog: React.FC< return; } - const collectionsToShow = [...collectionSummaries.values()] + const collections = [...collectionSummaries.values()] .filter(({ id, type }) => { - if (id === attributes.fromCollection) { + if (id === attributes.ignoredCollectionID) { return false; } else if (attributes.action == "add") { return canAddToCollection(type); @@ -115,48 +132,51 @@ export const CollectionSelectionDialog: React.FC< CollectionSummaryOrder.get(b.type)! ); }); - if (collectionsToShow.length === 0) { + + if (collections.length === 0) { onClose(); - attributes.showNextModal(); + attributes.onCreateCollection(); } - setCollectionsToShow(collectionsToShow); + + setFilteredCollections(collections); // eslint-disable-next-line react-hooks/exhaustive-deps }, [collectionSummaries, attributes, open]); + if (!filteredCollections.length) { + return <>; + } + if (!attributes) { return <>; } - if (!collectionsToShow.length) { - return <>; - } + const { action, onSelectCollection, onCancel, onCreateCollection } = + attributes; const handleCollectionClick = async (collectionID: number) => { - attributes.callback(await collectionForCollectionID(collectionID)); + onSelectCollection(await collectionForCollectionID(collectionID)); onClose(); }; - const onUserTriggeredClose = () => { - attributes.onCancel?.(); + const handleClose = () => { + onCancel?.(); onClose(); }; return ( - - {dialogTitleForAction(attributes.action)} + + {dialogTitleForAction(action)} - - {collectionsToShow.map((collectionSummary) => ( + + {filteredCollections.map((collectionSummary) => ( = ({ ); interface AddCollectionButtonProps { - showNextModal: () => void; + onClick: () => void; } const AddCollectionButton: React.FC = ({ - showNextModal, + onClick, }) => ( - + {t("create_albums")} + From c10317ae2ae03f788a33a752d1b70f72d1bfe70b Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 16:06:20 +0530 Subject: [PATCH 08/21] wip checkpoint --- .../photos/src/components/Upload/Uploader.tsx | 28 +++++++------ web/apps/photos/src/pages/gallery.tsx | 39 +++++++++---------- ...ctionDialog.tsx => CollectionSelector.tsx} | 18 ++++----- 3 files changed, 43 insertions(+), 42 deletions(-) rename web/packages/new/photos/components/{CollectionSelectionDialog.tsx => CollectionSelector.tsx} (93%) diff --git a/web/apps/photos/src/components/Upload/Uploader.tsx b/web/apps/photos/src/components/Upload/Uploader.tsx index 68c1620051..65e6b6ed62 100644 --- a/web/apps/photos/src/components/Upload/Uploader.tsx +++ b/web/apps/photos/src/components/Upload/Uploader.tsx @@ -3,6 +3,7 @@ import log from "@/base/log"; import type { CollectionMapping, Electron, ZipItem } from "@/base/types/ipc"; import type { Collection } from "@/media/collection"; import { CollectionMappingChoiceDialog } from "@/new/photos/components/CollectionMappingChoiceDialog"; +import type { CollectionSelectorAttributes } from "@/new/photos/components/CollectionSelector"; import { exportMetadataDirectoryName } from "@/new/photos/services/export"; import type { FileAndPath, @@ -35,12 +36,7 @@ import type { } from "services/upload/uploadManager"; import uploadManager from "services/upload/uploadManager"; import watcher from "services/watch"; -import { - SetCollectionSelectorAttributes, - SetCollections, - SetFiles, - SetLoading, -} from "types/gallery"; +import { SetCollections, SetFiles, SetLoading } from "types/gallery"; import { NotificationAttributes } from "types/Notification"; import { getOrCreateAlbum } from "utils/collection"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; @@ -63,9 +59,17 @@ enum PICKED_UPLOAD_TYPE { interface Props { syncWithRemote: (force?: boolean, silent?: boolean) => Promise; - closeCollectionSelector?: () => void; closeUploadTypeSelector: () => void; - setCollectionSelectorAttributes?: SetCollectionSelectorAttributes; + /** + * Show the collection selector with the given {@link attributes}. + */ + onOpenCollectionSelector?: ( + attributes: CollectionSelectorAttributes, + ) => void; + /** + * Close the collection selector if it is open. + */ + onCloseCollectionSelector?: () => void; setCollectionNamerAttributes?: SetCollectionNamerAttributes; setLoading: SetLoading; setShouldDisableDropzone: (value: boolean) => void; @@ -459,17 +463,17 @@ export default function Uploader({ showCollectionCreateModal(importSuggestion.rootFolderName); } - props.setCollectionSelectorAttributes({ + props.onOpenCollectionSelector({ action: "upload", - callback: uploadFilesToExistingCollection, + onSelectCollection: uploadFilesToExistingCollection, + onCreateCollection: showNextModal, onCancel: handleCollectionSelectorCancel, - showNextModal, }); })(); }, [webFiles, desktopFiles, desktopFilePaths, desktopZipItems]); const preCollectionCreationAction = async () => { - props.closeCollectionSelector?.(); + props.onCloseCollectionSelector?.(); props.setShouldDisableDropzone(!uploadManager.shouldAllowNewUpload()); setUploadStage(UPLOAD_STAGES.START); setUploadProgressView(true); diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 3aa8490bed..11d5e1ec87 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -4,9 +4,9 @@ import { useIsMobileWidth } from "@/base/hooks"; import log from "@/base/log"; import type { Collection } from "@/media/collection"; import { - CollectionSelectionDialog, - CollectionSelectorAttributes, -} from "@/new/photos/components/CollectionSelectionDialog"; + CollectionSelector, + type CollectionSelectorAttributes, +} from "@/new/photos/components/CollectionSelector"; import { PeopleEmptyState, SearchResultsHeader, @@ -212,10 +212,6 @@ export default function Gallery() { }); const [planModalView, setPlanModalView] = useState(false); const [blockingLoad, setBlockingLoad] = useState(false); - const [collectionSelectorAttributes, setCollectionSelectorAttributes] = - useState(null); - const [openCollectionSelectionDialog, setOpenCollectionSelectionDialog] = - useState(false); const [collectionNamerAttributes, setCollectionNamerAttributes] = useState(null); const [collectionNamerView, setCollectionNamerView] = useState(false); @@ -351,6 +347,10 @@ export default function Gallery() { new Set(), ); + const [openCollectionSelector, setOpenCollectionSelector] = useState(false); + const [collectionSelectorAttributes, setCollectionSelectorAttributes] = + useState(); + const router = useRouter(); // Ensure that the keys in local storage are not malformed by verifying that @@ -475,10 +475,6 @@ export default function Gallery() { setEmailList(emailList); }, [user, collections, familyData]); - useEffect(() => { - collectionSelectorAttributes && setOpenCollectionSelectionDialog(true); - }, [collectionSelectorAttributes]); - useEffect(() => { collectionNamerAttributes && setCollectionNamerView(true); }, [collectionNamerAttributes]); @@ -701,7 +697,7 @@ export default function Gallery() { if ( sidebarView || uploadTypeSelectorView || - openCollectionSelectionDialog || + openCollectionSelector || collectionNamerView || fixCreationTimeView || planModalView || @@ -944,7 +940,7 @@ export default function Gallery() { (ops: COLLECTION_OPS_TYPE) => async (collection: Collection) => { startLoading(); try { - setOpenCollectionSelectionDialog(false); + setOpenCollectionSelector(false); const selectedFiles = getSelectedFiles(selected, filteredData); const toProcessFiles = ops === COLLECTION_OPS_TYPE.REMOVE @@ -1113,7 +1109,12 @@ export default function Gallery() { return
; } - const handleOpenCollectionSelectionDialog = (attributes: CollectionSelectorAttributes) + const handleOpenCollectionSelector = ( + attributes: CollectionSelectorAttributes, + ) => { + setCollectionSelectorAttributes(attributes); + setOpenCollectionSelector(true); + }; // `people` will be undefined only when ML is disabled, otherwise it'll be // an empty array (even if people are loading). @@ -1171,9 +1172,9 @@ export default function Gallery() { onHide={setCollectionNamerView.bind(null, false)} attributes={collectionNamerAttributes} /> - setOpenCollectionSelectionDialog(false)} + setOpenCollectionSelector(false)} attributes={collectionSelectorAttributes} collectionSummaries={collectionSummaries} collectionForCollectionID={(id) => @@ -1251,9 +1252,7 @@ export default function Gallery() { null, false, )} - setCollectionSelectorAttributes={ - setCollectionSelectorAttributes - } + onOpenCollectionSelection={handleOpenCollectionSelection} closeCollectionSelector={setOpenCollectionSelectionDialog.bind( null, false, diff --git a/web/packages/new/photos/components/CollectionSelectionDialog.tsx b/web/packages/new/photos/components/CollectionSelector.tsx similarity index 93% rename from web/packages/new/photos/components/CollectionSelectionDialog.tsx rename to web/packages/new/photos/components/CollectionSelector.tsx index 356630813c..6a545e3b80 100644 --- a/web/packages/new/photos/components/CollectionSelectionDialog.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -27,20 +27,20 @@ import { t } from "i18next"; import React, { useEffect, useState } from "react"; import type { DialogVisibilityProps } from "./mui/Dialog"; -export type CollectionSelectionAction = +export type CollectionSelectorAction = | "upload" | "add" | "move" | "restore" | "unhide"; -export interface CollectionSelectionAttributes { +export interface CollectionSelectorAttributes { /** * The {@link action} modifies the title of the dialog, and also removes * some system collections that don't might not make sense for that * particular action. */ - action: CollectionSelectionAction; + action: CollectionSelectorAction; /** * Callback invoked when the user selects one the existing collections * listed in the dialog. @@ -64,12 +64,12 @@ export interface CollectionSelectionAttributes { ignoredCollectionID?: number; } -type CollectionSelectionDialogProps = DialogVisibilityProps & { +type CollectionSelectorProps = DialogVisibilityProps & { /** - * The same {@link CollectionSelectionDialog} can be used for different + * The same {@link CollectionSelector} can be used for different * purposes by customizing the {@link attributes} prop before opening it. */ - attributes: CollectionSelectionAttributes | undefined; + attributes: CollectionSelectorAttributes | undefined; /** * The collections to list. */ @@ -88,9 +88,7 @@ type CollectionSelectionDialogProps = DialogVisibilityProps & { * A dialog allowing the user to select one of their existing collections or * create a new one. */ -export const CollectionSelectionDialog: React.FC< - CollectionSelectionDialogProps -> = ({ +export const CollectionSelector: React.FC = ({ open, onClose, attributes, @@ -202,7 +200,7 @@ const Dialog_ = styled(Dialog)(({ theme }) => ({ }, })); -const dialogTitleForAction = (action: CollectionSelectionAction) => { +const dialogTitleForAction = (action: CollectionSelectorAction) => { switch (action) { case "upload": return t("upload_to_album"); From 7737d162ce77ea64e0b0ee3bfc8bca2fd163a750 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 16:15:32 +0530 Subject: [PATCH 09/21] Fin --- .../pages/gallery/SelectedFileOptions.tsx | 52 ++++++++++++------- web/apps/photos/src/pages/gallery.tsx | 17 +++--- web/apps/photos/src/types/gallery/index.ts | 4 -- .../photos/components/CollectionSelector.tsx | 2 +- 4 files changed, 40 insertions(+), 35 deletions(-) diff --git a/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx b/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx index cdabbed760..a876ae4ae3 100644 --- a/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx @@ -1,5 +1,6 @@ import { SelectionBar } from "@/base/components/Navbar"; import type { Collection } from "@/media/collection"; +import type { CollectionSelectorAttributes } from "@/new/photos/components/CollectionSelector"; import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl"; import { FluidContainer } from "@ente/shared/components/Container"; import ClockIcon from "@mui/icons-material/AccessTime"; @@ -18,7 +19,6 @@ import { Box, IconButton, Stack, Tooltip } from "@mui/material"; import { t } from "i18next"; import { AppContext } from "pages/_app"; import { useContext } from "react"; -import { SetCollectionSelectorAttributes } from "types/gallery"; import { ALL_SECTION, ARCHIVE_SECTION, @@ -35,7 +35,15 @@ interface Props { ) => (...args: any[]) => void; handleFileOps: (opsType: FILE_OPS_TYPE) => (...args: any[]) => void; showCreateCollectionModal: (opsType: COLLECTION_OPS_TYPE) => () => void; - setCollectionSelectorAttributes: SetCollectionSelectorAttributes; + /** + * Callback to open a dialog where the user can choose a collection. + * + * The reason for opening the dialog and other properties are passed as the + * {@link attributes} argument. + */ + onOpenCollectionSelector: ( + attributes: CollectionSelectorAttributes, + ) => void; count: number; ownCount: number; clearSelection: () => void; @@ -51,7 +59,7 @@ interface Props { const SelectedFileOptions = ({ showCreateCollectionModal, - setCollectionSelectorAttributes, + onOpenCollectionSelector, handleCollectionOps, handleFileOps, selectedCollection, @@ -71,12 +79,14 @@ const SelectedFileOptions = ({ const peopleMode = barMode == "people"; const addToCollection = () => - setCollectionSelectorAttributes({ + onOpenCollectionSelector({ action: "add", - callback: handleCollectionOps(COLLECTION_OPS_TYPE.ADD), - showNextModal: showCreateCollectionModal(COLLECTION_OPS_TYPE.ADD), - fromCollection: - !isInSearchMode && !peopleMode ? activeCollectionID : undefined, + onSelectCollection: handleCollectionOps(COLLECTION_OPS_TYPE.ADD), + onCreateCollection: showCreateCollectionModal( + COLLECTION_OPS_TYPE.ADD, + ), + ignoredCollectionID: + isInSearchMode || peopleMode ? undefined : activeCollectionID, }); const trashHandler = () => @@ -97,10 +107,12 @@ const SelectedFileOptions = ({ }); const restoreHandler = () => - setCollectionSelectorAttributes({ + onOpenCollectionSelector({ action: "restore", - callback: handleCollectionOps(COLLECTION_OPS_TYPE.RESTORE), - showNextModal: showCreateCollectionModal( + onSelectCollection: handleCollectionOps( + COLLECTION_OPS_TYPE.RESTORE, + ), + onCreateCollection: showCreateCollectionModal( COLLECTION_OPS_TYPE.RESTORE, ), }); @@ -140,20 +152,22 @@ const SelectedFileOptions = ({ }; const moveToCollection = () => { - setCollectionSelectorAttributes({ + onOpenCollectionSelector({ action: "move", - callback: handleCollectionOps(COLLECTION_OPS_TYPE.MOVE), - showNextModal: showCreateCollectionModal(COLLECTION_OPS_TYPE.MOVE), - fromCollection: - !isInSearchMode && !peopleMode ? activeCollectionID : undefined, + onSelectCollection: handleCollectionOps(COLLECTION_OPS_TYPE.MOVE), + onCreateCollection: showCreateCollectionModal( + COLLECTION_OPS_TYPE.MOVE, + ), + ignoredCollectionID: + isInSearchMode || peopleMode ? undefined : activeCollectionID, }); }; const unhideToCollection = () => { - setCollectionSelectorAttributes({ + onOpenCollectionSelector({ action: "unhide", - callback: handleCollectionOps(COLLECTION_OPS_TYPE.UNHIDE), - showNextModal: showCreateCollectionModal( + onSelectCollection: handleCollectionOps(COLLECTION_OPS_TYPE.UNHIDE), + onCreateCollection: showCreateCollectionModal( COLLECTION_OPS_TYPE.UNHIDE, ), }); diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index 11d5e1ec87..b7cf163de6 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -1244,19 +1244,14 @@ export default function Gallery() { + setOpenCollectionSelector(false) + } setLoading={setBlockingLoad} setCollectionNamerAttributes={setCollectionNamerAttributes} setShouldDisableDropzone={setShouldDisableDropzone} @@ -1334,8 +1329,8 @@ export default function Gallery() { showCreateCollectionModal={ showCreateCollectionModal } - setCollectionSelectorAttributes={ - setCollectionSelectorAttributes + onOpenCollectionSelector={ + handleOpenCollectionSelector } count={selected.count} ownCount={selected.ownCount} diff --git a/web/apps/photos/src/types/gallery/index.ts b/web/apps/photos/src/types/gallery/index.ts index b9720b71aa..7998dea3dc 100644 --- a/web/apps/photos/src/types/gallery/index.ts +++ b/web/apps/photos/src/types/gallery/index.ts @@ -1,5 +1,4 @@ import type { Collection } from "@/media/collection"; -import { CollectionSelectorAttributes } from "@/new/photos/components/CollectionSelectionDialog"; import { type SelectionContext } from "@/new/photos/components/Gallery"; import { EnteFile } from "@/new/photos/types/file"; import type { User } from "@ente/shared/user/types"; @@ -24,9 +23,6 @@ export type SetSelectedState = React.Dispatch< export type SetFiles = React.Dispatch>; export type SetCollections = React.Dispatch>; export type SetLoading = React.Dispatch>; -export type SetCollectionSelectorAttributes = React.Dispatch< - React.SetStateAction ->; export type SetFilesDownloadProgressAttributes = ( value: | Partial diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index 6a545e3b80..978639011a 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -61,7 +61,7 @@ export interface CollectionSelectorAttributes { * {@link ignoredCollectionID} to omit showing them again in the list of * collections. */ - ignoredCollectionID?: number; + ignoredCollectionID?: number | undefined; } type CollectionSelectorProps = DialogVisibilityProps & { From 29ae5bfb09e5cd07259891b9e91788a2e64fd850 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 16:20:33 +0530 Subject: [PATCH 10/21] Lints + usecb to prevent unnecessary rerenders after adding onClose as dep --- web/apps/photos/src/pages/gallery.tsx | 27 +++++++++++-------- .../photos/components/CollectionSelector.tsx | 10 +++---- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index b7cf163de6..34b004ce9f 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -96,6 +96,7 @@ import { useRouter } from "next/router"; import { AppContext } from "pages/_app"; import { createContext, + useCallback, useContext, useEffect, useMemo, @@ -1105,17 +1106,23 @@ export default function Gallery() { setBarMode("people"); }; + const handleOpenCollectionSelector = useCallback( + (attributes: CollectionSelectorAttributes) => { + setCollectionSelectorAttributes(attributes); + setOpenCollectionSelector(true); + }, + [], + ); + + const handleCloseCollectionSelector = useCallback( + () => setOpenCollectionSelector(false), + [], + ); + if (!collectionSummaries || !filteredData) { return
; } - const handleOpenCollectionSelector = ( - attributes: CollectionSelectorAttributes, - ) => { - setCollectionSelectorAttributes(attributes); - setOpenCollectionSelector(true); - }; - // `people` will be undefined only when ML is disabled, otherwise it'll be // an empty array (even if people are loading). const showPeopleSectionButton = people !== undefined; @@ -1174,7 +1181,7 @@ export default function Gallery() { /> setOpenCollectionSelector(false)} + onClose={handleCloseCollectionSelector} attributes={collectionSelectorAttributes} collectionSummaries={collectionSummaries} collectionForCollectionID={(id) => @@ -1249,9 +1256,7 @@ export default function Gallery() { false, )} onOpenCollectionSelector={handleOpenCollectionSelector} - onCloseCollectionSelector={() => - setOpenCollectionSelector(false) - } + onCloseCollectionSelector={handleCloseCollectionSelector} setLoading={setBlockingLoad} setCollectionNamerAttributes={setCollectionNamerAttributes} setShouldDisableDropzone={setShouldDisableDropzone} diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index 978639011a..757973a771 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -1,5 +1,3 @@ -// TODO -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import type { Collection } from "@/media/collection"; import { AllCollectionTile, @@ -14,6 +12,7 @@ import { type CollectionSummaries, type CollectionSummary, } from "@/new/photos/services/collection/ui"; +import { ensure } from "@/utils/ensure"; import { FlexWrapper } from "@ente/shared/components/Container"; import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton"; import { @@ -126,8 +125,8 @@ export const CollectionSelector: React.FC = ({ }) .sort((a, b) => { return ( - CollectionSummaryOrder.get(a.type)! - - CollectionSummaryOrder.get(b.type)! + ensure(CollectionSummaryOrder.get(a.type)) - + ensure(CollectionSummaryOrder.get(b.type)) ); }); @@ -137,8 +136,7 @@ export const CollectionSelector: React.FC = ({ } setFilteredCollections(collections); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [collectionSummaries, attributes, open]); + }, [collectionSummaries, attributes, open, onClose]); if (!filteredCollections.length) { return <>; From 6fc1f8c2d023ee01660350be56809ec6a0ac020b Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 16:40:11 +0530 Subject: [PATCH 11/21] Tweaks --- .../photos/components/CollectionSelector.tsx | 6 ++--- .../new/photos/services/collection/ui.ts | 25 ++++++------------- 2 files changed, 10 insertions(+), 21 deletions(-) diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index 757973a771..51ae28c5c9 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -163,8 +163,8 @@ export const CollectionSelector: React.FC = ({ {dialogTitleForAction(action)} @@ -242,11 +242,11 @@ const AddCollectionButton: React.FC = ({ }) => ( {t("create_albums")} - + + + ); -const ImageContainer = styled(ItemTileOverlay)` +const PlusOverlay = styled(ItemTileOverlay)` display: flex; justify-content: center; align-items: center; diff --git a/web/packages/new/photos/services/collection/ui.ts b/web/packages/new/photos/services/collection/ui.ts index 3ab3c9ba51..f34706d920 100644 --- a/web/packages/new/photos/services/collection/ui.ts +++ b/web/packages/new/photos/services/collection/ui.ts @@ -87,24 +87,13 @@ const systemCSTypes = new Set([ ]); const addToDisabledCSTypes = new Set([ - "all", - "archive", + ...systemCSTypes, "incomingShareViewer", - "trash", - "uncategorized", - "defaultHidden", - "hiddenItems", ]); const moveToDisabledCSTypes = new Set([ - "all", - "archive", - "incomingShareViewer", + ...addToDisabledCSTypes, "incomingShareCollaborator", - "trash", - "uncategorized", - "defaultHidden", - "hiddenItems", ]); const hideFromCollectionBarCSTypes = new Set([ @@ -114,18 +103,18 @@ const hideFromCollectionBarCSTypes = new Set([ "defaultHidden", ]); +export const isSystemCollection = (type: CollectionSummaryType) => + systemCSTypes.has(type); + export const areOnlySystemCollections = ( collectionSummaries: CollectionSummaries, ) => collectionSummaries.values().every(({ type }) => isSystemCollection(type)); -export const canMoveToCollection = (type: CollectionSummaryType) => - !moveToDisabledCSTypes.has(type); - export const canAddToCollection = (type: CollectionSummaryType) => !addToDisabledCSTypes.has(type); -export const isSystemCollection = (type: CollectionSummaryType) => - systemCSTypes.has(type); +export const canMoveToCollection = (type: CollectionSummaryType) => + !moveToDisabledCSTypes.has(type); export const shouldShowOnCollectionBar = (type: CollectionSummaryType) => !hideFromCollectionBarCSTypes.has(type); From 14c5ea5b86b8761fe1ef8eaeb06e57e19430a507 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 16:58:32 +0530 Subject: [PATCH 12/21] Remove theme dep --- .../photos/components/CollectionSelector.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index 51ae28c5c9..a9fcfbf3fe 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -185,18 +185,18 @@ export const CollectionSelector: React.FC = ({ ); }; -const Dialog_ = styled(Dialog)(({ theme }) => ({ - "& .MuiPaper-root": { - maxWidth: "494px", - }, - "& .MuiDialogTitle-root": { - padding: "16px", - paddingRight: theme.spacing(1), - }, - "& .MuiDialogContent-root": { - padding: "16px", - }, -})); +const Dialog_ = styled(Dialog)` + & .MuiPaper-root { + max-width: 494px; + } + & .MuiDialogTitle-root { + padding: 16px; + padding-right: 8px; + } + & .MuiDialogContent-root { + padding: 16px; + } +`; const dialogTitleForAction = (action: CollectionSelectorAction) => { switch (action) { From 5605c5b7945aab3349f4c2cc376bc765a89276a0 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 17:01:27 +0530 Subject: [PATCH 13/21] Remove override chains that nop each other --- web/packages/new/photos/components/CollectionSelector.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index a9fcfbf3fe..3b9afc1a75 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -169,8 +169,8 @@ export const CollectionSelector: React.FC = ({ {dialogTitleForAction(action)} - - + + {filteredCollections.map((collectionSummary) => ( { From 4fd3fb09c99ee8107364d6509257df124140790e Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 17:08:20 +0530 Subject: [PATCH 14/21] Fix --- web/packages/new/photos/services/collection/ui.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web/packages/new/photos/services/collection/ui.ts b/web/packages/new/photos/services/collection/ui.ts index f34706d920..4258bf288c 100644 --- a/web/packages/new/photos/services/collection/ui.ts +++ b/web/packages/new/photos/services/collection/ui.ts @@ -108,7 +108,10 @@ export const isSystemCollection = (type: CollectionSummaryType) => export const areOnlySystemCollections = ( collectionSummaries: CollectionSummaries, -) => collectionSummaries.values().every(({ type }) => isSystemCollection(type)); +) => + [...collectionSummaries.values()].every(({ type }) => + isSystemCollection(type), + ); export const canAddToCollection = (type: CollectionSummaryType) => !addToDisabledCSTypes.has(type); From 9a7a3383392cbb4802bc42a2291e5f2d0fe3bfbc Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 17:36:02 +0530 Subject: [PATCH 15/21] Don't nest div in h2 --- .../photos/components/CollectionSelector.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index 3b9afc1a75..c35085ee16 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -14,17 +14,21 @@ import { } from "@/new/photos/services/collection/ui"; import { ensure } from "@/utils/ensure"; import { FlexWrapper } from "@ente/shared/components/Container"; -import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton"; import { Dialog, DialogContent, + DialogTitle, styled, Typography, useMediaQuery, } from "@mui/material"; import { t } from "i18next"; import React, { useEffect, useState } from "react"; -import type { DialogVisibilityProps } from "./mui/Dialog"; +import { SpaceBetweenFlex } from "./mui"; +import { + DialogCloseIconButton, + type DialogVisibilityProps, +} from "./mui/Dialog"; export type CollectionSelectorAction = | "upload" @@ -166,9 +170,13 @@ export const CollectionSelector: React.FC = ({ fullWidth fullScreen={isFullScreen} > - - {dialogTitleForAction(action)} - + + + {dialogTitleForAction(action)} + + + + @@ -189,10 +197,6 @@ const Dialog_ = styled(Dialog)` & .MuiPaper-root { max-width: 494px; } - & .MuiDialogTitle-root { - padding: 16px; - padding-right: 8px; - } `; const dialogTitleForAction = (action: CollectionSelectorAction) => { From 4a1db1edccf29133cbad7382a01babd6a0c5697c Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 17:48:23 +0530 Subject: [PATCH 16/21] Use same as choice modal --- .../new/photos/components/CollectionSelector.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index c35085ee16..d7e4bde401 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -164,11 +164,12 @@ export const CollectionSelector: React.FC = ({ }; return ( - @@ -189,16 +190,10 @@ export const CollectionSelector: React.FC = ({ ))} - + ); }; -const Dialog_ = styled(Dialog)` - & .MuiPaper-root { - max-width: 494px; - } -`; - const dialogTitleForAction = (action: CollectionSelectorAction) => { switch (action) { case "upload": From 51e8c2797ded09c752a6eb6e51bb2d1be0858d8e Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 17:55:01 +0530 Subject: [PATCH 17/21] Remove unnecessary wrapper --- .../photos/components/CollectionSelector.tsx | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index d7e4bde401..a5c7753d44 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -13,7 +13,6 @@ import { type CollectionSummary, } from "@/new/photos/services/collection/ui"; import { ensure } from "@/utils/ensure"; -import { FlexWrapper } from "@ente/shared/components/Container"; import { Dialog, DialogContent, @@ -173,28 +172,32 @@ export const CollectionSelector: React.FC = ({ > - {dialogTitleForAction(action)} + {titleForAction(action)} - - - - {filteredCollections.map((collectionSummary) => ( - - ))} - - + + + {filteredCollections.map((collectionSummary) => ( + + ))} + ); }; -const dialogTitleForAction = (action: CollectionSelectorAction) => { +const DialogContent_ = styled(DialogContent)` + display: flex; + flex-wrap: wrap; + gap: 4px; +`; + +const titleForAction = (action: CollectionSelectorAction) => { switch (action) { case "upload": return t("upload_to_album"); From 61763ed16f3ed0b82e885f9aa7e285050e93f4e0 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 18:00:03 +0530 Subject: [PATCH 18/21] Rename --- .../src/components/Collections/AllCollections/content.tsx | 4 ++-- web/packages/new/photos/components/CollectionSelector.tsx | 6 +++--- web/packages/new/photos/components/ItemCards.tsx | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/web/apps/photos/src/components/Collections/AllCollections/content.tsx b/web/apps/photos/src/components/Collections/AllCollections/content.tsx index 27a7bc733c..05876f1ad1 100644 --- a/web/apps/photos/src/components/Collections/AllCollections/content.tsx +++ b/web/apps/photos/src/components/Collections/AllCollections/content.tsx @@ -1,5 +1,5 @@ import { - AllCollectionTile, + CollectionTile, ItemCard, LargeTileTextOverlay, } from "@/new/photos/components/ItemCards"; @@ -166,7 +166,7 @@ const AllCollectionCard: React.FC = ({ isScrolling, }) => ( onCollectionClick(collectionSummary.id)} isScrolling={isScrolling} diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index a5c7753d44..ccd510dca8 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -1,6 +1,6 @@ import type { Collection } from "@/media/collection"; import { - AllCollectionTile, + CollectionTile, ItemCard, ItemTileOverlay, LargeTileTextOverlay, @@ -222,7 +222,7 @@ const CollectionSelectorCard: React.FC = ({ onCollectionClick, }) => ( onCollectionClick(collectionSummary.id)} > @@ -239,7 +239,7 @@ interface AddCollectionButtonProps { const AddCollectionButton: React.FC = ({ onClick, }) => ( - + {t("create_albums")} + diff --git a/web/packages/new/photos/components/ItemCards.tsx b/web/packages/new/photos/components/ItemCards.tsx index 8c73fb3ad6..f4ff88912d 100644 --- a/web/packages/new/photos/components/ItemCards.tsx +++ b/web/packages/new/photos/components/ItemCards.tsx @@ -135,10 +135,10 @@ export const BarItemTile = styled(ItemTile)` `; /** - * A large 150x150 TileComponent used when showing the list of all collections - * in the all collections view. + * A large 150x150 TileComponent used when showing the list of collections in + * the all collections view and in the collection selector. */ -export const AllCollectionTile = styled(ItemTile)` +export const CollectionTile = styled(ItemTile)` width: 150px; height: 150px; `; @@ -171,7 +171,7 @@ export const TileTextOverlay = styled(ItemTileOverlay)` /** * A variation of {@link TileTextOverlay} for use with larger tiles like the - * {@link AllCollectionTile}. + * {@link CollectionTile}. */ export const LargeTileTextOverlay = styled(ItemTileOverlay)` padding: 8px; From 02e059989eab305a881ddcd6a042f6e7154c31d6 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 18:14:13 +0530 Subject: [PATCH 19/21] Improve accessibility by using a button --- .../Collections/AllCollections/content.tsx | 8 +++--- .../photos/components/CollectionSelector.tsx | 12 ++++----- .../new/photos/components/ItemCards.tsx | 25 ++++++++++++++++++- 3 files changed, 34 insertions(+), 11 deletions(-) diff --git a/web/apps/photos/src/components/Collections/AllCollections/content.tsx b/web/apps/photos/src/components/Collections/AllCollections/content.tsx index 05876f1ad1..807587b295 100644 --- a/web/apps/photos/src/components/Collections/AllCollections/content.tsx +++ b/web/apps/photos/src/components/Collections/AllCollections/content.tsx @@ -1,5 +1,5 @@ import { - CollectionTile, + CollectionTileButton, ItemCard, LargeTileTextOverlay, } from "@/new/photos/components/ItemCards"; @@ -68,7 +68,7 @@ const AllCollectionRow = React.memo(
{collectionRow.map((item: any) => ( - = ({ +const CollectionButton: React.FC = ({ onCollectionClick, collectionSummary, isScrolling, }) => ( onCollectionClick(collectionSummary.id)} isScrolling={isScrolling} diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index ccd510dca8..f2341e350e 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -1,6 +1,6 @@ import type { Collection } from "@/media/collection"; import { - CollectionTile, + CollectionTileButton, ItemCard, ItemTileOverlay, LargeTileTextOverlay, @@ -180,7 +180,7 @@ export const CollectionSelector: React.FC = ({ {filteredCollections.map((collectionSummary) => ( - { } }; -interface CollectionSelectorCardProps { +interface CollectionButtonProps { collectionSummary: CollectionSummary; onCollectionClick: (collectionID: number) => void; } -const CollectionSelectorCard: React.FC = ({ +const CollectionButton: React.FC = ({ collectionSummary, onCollectionClick, }) => ( onCollectionClick(collectionSummary.id)} > @@ -239,7 +239,7 @@ interface AddCollectionButtonProps { const AddCollectionButton: React.FC = ({ onClick, }) => ( - + {t("create_albums")} + diff --git a/web/packages/new/photos/components/ItemCards.tsx b/web/packages/new/photos/components/ItemCards.tsx index f4ff88912d..c687f26224 100644 --- a/web/packages/new/photos/components/ItemCards.tsx +++ b/web/packages/new/photos/components/ItemCards.tsx @@ -7,6 +7,7 @@ import { type EnteFile } from "@/new/photos/types/file"; import { styled } from "@mui/material"; import React, { useEffect, useState } from "react"; import { faceCrop } from "../services/ml"; +import { UnstyledButton } from "./UnstyledButton"; interface ItemCardProps { /** @@ -134,11 +135,33 @@ export const BarItemTile = styled(ItemTile)` height: 64px; `; +/** + * A variant of {@link ItemTile} meant for use when the tile is interactable. + */ +export const ItemTileButton = styled(UnstyledButton)` + /* Buttons reset this to center */ + text-align: inherit; + + /* Rest of this is mostly verbatim from ItemTile ... */ + + display: flex; + /* Act as container for the absolutely positioned ItemTileOverlays. */ + position: relative; + border-radius: 4px; + overflow: hidden; + & > img { + object-fit: cover; + width: 100%; + height: 100%; + pointer-events: none; + } +`; + /** * A large 150x150 TileComponent used when showing the list of collections in * the all collections view and in the collection selector. */ -export const CollectionTile = styled(ItemTile)` +export const CollectionTileButton = styled(ItemTileButton)` width: 150px; height: 150px; `; From d5216886d8d9d59edaad001864f5bfda588b0bf1 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 18:16:30 +0530 Subject: [PATCH 20/21] Rename --- .../components/Collections/AllCollections/content.tsx | 2 +- web/apps/photos/src/components/ExportPendingList.tsx | 2 +- .../new/photos/components/CollectionSelector.tsx | 2 +- web/packages/new/photos/components/Gallery/BarImpl.tsx | 10 +++++----- web/packages/new/photos/components/SearchBar.tsx | 2 +- .../new/photos/components/{ItemCards.tsx => Tiles.tsx} | 0 6 files changed, 9 insertions(+), 9 deletions(-) rename web/packages/new/photos/components/{ItemCards.tsx => Tiles.tsx} (100%) diff --git a/web/apps/photos/src/components/Collections/AllCollections/content.tsx b/web/apps/photos/src/components/Collections/AllCollections/content.tsx index 807587b295..5b8be1e863 100644 --- a/web/apps/photos/src/components/Collections/AllCollections/content.tsx +++ b/web/apps/photos/src/components/Collections/AllCollections/content.tsx @@ -2,7 +2,7 @@ import { CollectionTileButton, ItemCard, LargeTileTextOverlay, -} from "@/new/photos/components/ItemCards"; +} from "@/new/photos/components/Tiles"; import type { CollectionSummary } from "@/new/photos/services/collection/ui"; import { FlexWrapper } from "@ente/shared/components/Container"; import useWindowSize from "@ente/shared/hooks/useWindowSize"; diff --git a/web/apps/photos/src/components/ExportPendingList.tsx b/web/apps/photos/src/components/ExportPendingList.tsx index 371d295165..51b8ac87e9 100644 --- a/web/apps/photos/src/components/ExportPendingList.tsx +++ b/web/apps/photos/src/components/ExportPendingList.tsx @@ -1,4 +1,4 @@ -import { ItemCard, PreviewItemTile } from "@/new/photos/components/ItemCards"; +import { ItemCard, PreviewItemTile } from "@/new/photos/components/Tiles"; import { EnteFile } from "@/new/photos/types/file"; import { FlexWrapper } from "@ente/shared/components/Container"; import DialogBoxV2 from "@ente/shared/components/DialogBoxV2"; diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index f2341e350e..e7690be1bb 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -4,7 +4,7 @@ import { ItemCard, ItemTileOverlay, LargeTileTextOverlay, -} from "@/new/photos/components/ItemCards"; +} from "@/new/photos/components/Tiles"; import { canAddToCollection, canMoveToCollection, diff --git a/web/packages/new/photos/components/Gallery/BarImpl.tsx b/web/packages/new/photos/components/Gallery/BarImpl.tsx index 1c1ef216e8..288ddd95c6 100644 --- a/web/packages/new/photos/components/Gallery/BarImpl.tsx +++ b/web/packages/new/photos/components/Gallery/BarImpl.tsx @@ -1,15 +1,15 @@ import { useIsMobileWidth } from "@/base/hooks"; import { CollectionsSortOptions } from "@/new/photos/components/CollectionsSortOptions"; -import { - BarItemTile, - ItemCard, - TileTextOverlay, -} from "@/new/photos/components/ItemCards"; import { FilledIconButton } from "@/new/photos/components/mui"; import { IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS, } from "@/new/photos/components/PhotoList"; +import { + BarItemTile, + ItemCard, + TileTextOverlay, +} from "@/new/photos/components/Tiles"; import { UnstyledButton } from "@/new/photos/components/UnstyledButton"; import type { CollectionSummary, diff --git a/web/packages/new/photos/components/SearchBar.tsx b/web/packages/new/photos/components/SearchBar.tsx index f934d1307b..cb78f649a7 100644 --- a/web/packages/new/photos/components/SearchBar.tsx +++ b/web/packages/new/photos/components/SearchBar.tsx @@ -1,6 +1,6 @@ import { assertionFailed } from "@/base/assert"; import { useIsMobileWidth } from "@/base/hooks"; -import { ItemCard, PreviewItemTile } from "@/new/photos/components/ItemCards"; +import { ItemCard, PreviewItemTile } from "@/new/photos/components/Tiles"; import { isMLSupported, mlStatusSnapshot, diff --git a/web/packages/new/photos/components/ItemCards.tsx b/web/packages/new/photos/components/Tiles.tsx similarity index 100% rename from web/packages/new/photos/components/ItemCards.tsx rename to web/packages/new/photos/components/Tiles.tsx From dd65f4f1561b229946fe11b212a4e14657c39d45 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 5 Oct 2024 18:17:26 +0530 Subject: [PATCH 21/21] Remove unused translation --- web/packages/base/locales/en-US/translation.json | 1 - 1 file changed, 1 deletion(-) diff --git a/web/packages/base/locales/en-US/translation.json b/web/packages/base/locales/en-US/translation.json index a007165892..fbf70c191d 100644 --- a/web/packages/base/locales/en-US/translation.json +++ b/web/packages/base/locales/en-US/translation.json @@ -303,7 +303,6 @@ "LARGER_THAN_AVAILABLE_STORAGE_INFO": "These files were not uploaded as they exceed the maximum size limit for your storage plan", "TOO_LARGE_INFO": "These files were not uploaded as they exceed our maximum file size limit", "THUMBNAIL_GENERATION_FAILED_INFO": "These files were uploaded, but unfortunately we could not generate the thumbnails for them.", - "select_album": "Select album", "upload_to_album": "Upload to album", "add_to_album": "Add to album", "move_to_album": "Move to album",