From d537b8f00be00a441fc6c4f4cc4cac384380aef6 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 28 May 2025 09:45:17 +0530 Subject: [PATCH] Props --- web/apps/photos/src/components/Upload.tsx | 3 +- web/apps/photos/src/pages/gallery.tsx | 5 +- web/packages/gallery/components/Upload.tsx | 7 + .../new/photos/components/gallery/index.tsx | 157 +++++++++--------- 4 files changed, 94 insertions(+), 78 deletions(-) create mode 100644 web/packages/gallery/components/Upload.tsx diff --git a/web/apps/photos/src/components/Upload.tsx b/web/apps/photos/src/components/Upload.tsx index 80b3400c29..ec828e1d1a 100644 --- a/web/apps/photos/src/components/Upload.tsx +++ b/web/apps/photos/src/components/Upload.tsx @@ -27,6 +27,7 @@ import { useBaseContext } from "ente-base/context"; import { basename, dirname, joinPath } from "ente-base/file-name"; import log from "ente-base/log"; import type { CollectionMapping, Electron, ZipItem } from "ente-base/types/ipc"; +import { type UploadTypeSelectorIntent } from "ente-gallery/components/Upload"; import { useFileInput } from "ente-gallery/components/utils/use-file-input"; import { groupItemsBasedOnParentFolder, @@ -77,8 +78,6 @@ import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; import { SetCollectionNamerAttributes } from "./Collections/CollectionNamer"; import { UploadProgress } from "./UploadProgress"; -export type UploadTypeSelectorIntent = "upload" | "import" | "collect"; - interface UploadProps { syncWithRemote: (force?: boolean, silent?: boolean) => Promise; closeUploadTypeSelector: () => void; diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index f807ba44f6..f777aaea92 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -15,7 +15,7 @@ import { } from "components/FilesDownloadProgress"; import { FixCreationTime } from "components/FixCreationTime"; import { Sidebar } from "components/Sidebar"; -import { Upload, type UploadTypeSelectorIntent } from "components/Upload"; +import { Upload } from "components/Upload"; import SelectedFileOptions from "components/pages/gallery/SelectedFileOptions"; import { sessionExpiredDialogAttributes } from "ente-accounts/components/utils/dialog"; import { stashRedirect } from "ente-accounts/services/redirect"; @@ -37,6 +37,7 @@ import { masterKeyFromSessionIfLoggedIn, } from "ente-base/session"; import { FullScreenDropZone } from "ente-gallery/components/FullScreenDropZone"; +import { type UploadTypeSelectorIntent } from "ente-gallery/components/Upload"; import { type Collection } from "ente-media/collection"; import { type EnteFile } from "ente-media/file"; import { @@ -1093,8 +1094,8 @@ const Page: React.FC = () => { !hiddenFiles?.length && activeCollectionID === ALL_SECTION ? ( ) : !isInSearchMode && !isFirstLoad && diff --git a/web/packages/gallery/components/Upload.tsx b/web/packages/gallery/components/Upload.tsx new file mode 100644 index 0000000000..7f723875cf --- /dev/null +++ b/web/packages/gallery/components/Upload.tsx @@ -0,0 +1,7 @@ +/** + * The upload can be triggered by different buttons and flows in the UI, each of + * which is referred to as an "intent". + * + * The "intent" does not change the eventual upload outcome, only the UX flow. + */ +export type UploadTypeSelectorIntent = "upload" | "import" | "collect"; diff --git a/web/packages/new/photos/components/gallery/index.tsx b/web/packages/new/photos/components/gallery/index.tsx index aeafebf2fe..3ab4af51bc 100644 --- a/web/packages/new/photos/components/gallery/index.tsx +++ b/web/packages/new/photos/components/gallery/index.tsx @@ -7,11 +7,20 @@ * there. */ -import { Paper, Stack, Typography } from "@mui/material"; +import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined"; +import FolderIcon from "@mui/icons-material/FolderOutlined"; +import { Button, Paper, Stack, styled, Typography } from "@mui/material"; import { CenteredFill } from "ente-base/components/containers"; +import { EnteLogo } from "ente-base/components/EnteLogo"; +import { type UploadTypeSelectorIntent } from "ente-gallery/components/Upload"; import type { SearchSuggestion } from "ente-new/photos/services/search/types"; +import { + FlexWrapper, + VerticallyCentered, +} from "ente-shared/components/Container"; import { t } from "i18next"; import React, { useState } from "react"; +import { Trans } from "react-i18next"; import { enableML } from "../../services/ml"; import { EnableML, FaceConsent } from "../sidebar/MLSettings"; import { useMLStatusSnapshot } from "../utils/use-snapshot"; @@ -51,81 +60,81 @@ export const SearchResultsHeader: React.FC = ({ ); -import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined"; -import FolderIcon from "@mui/icons-material/FolderOutlined"; -import { Button, styled } from "@mui/material"; -import { EnteLogo } from "ente-base/components/EnteLogo"; -import { - FlexWrapper, - VerticallyCentered, -} from "ente-shared/components/Container"; -import { Trans } from "react-i18next"; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -export function GalleryEmptyState({ openUploader, isUploadInProgress }) { - return ( - - - - - }} - /> - - - {t("welcome_to_ente_subtitle")} - - - - - - - - - - ); +interface GalleryEmptyStateProps { + /** + * If `true`, then an upload is already in progress (the empty state will + * then disable the prompts for uploads). + */ + isUploadInProgress: boolean; + /** + * Called when the user selects one of the upload buttons. It is passed the + * "intent" of the user. + */ + onUpload: (intent: UploadTypeSelectorIntent) => void; } +export const GalleryEmptyState: React.FC = ({ + isUploadInProgress, + onUpload, +}) => ( + + + + + }} + /> + + + {t("welcome_to_ente_subtitle")} + + + + + + + + + +); + const Wrapper = styled("div")` display: flex; flex-direction: column;