diff --git a/web/apps/photos/src/components/Collections/CollectionHeader.tsx b/web/apps/photos/src/components/Collections/CollectionHeader.tsx index 96d69e693a..093fcc9273 100644 --- a/web/apps/photos/src/components/Collections/CollectionHeader.tsx +++ b/web/apps/photos/src/components/Collections/CollectionHeader.tsx @@ -6,7 +6,7 @@ import { ItemVisibility } from "@/media/file-metadata"; import { GalleryItemsHeaderAdapter, GalleryItemsSummary, -} from "@/new/photos/components/Gallery/ListHeader"; +} from "@/new/photos/components/gallery/ListHeader"; import { SpaceBetweenFlex } from "@/new/photos/components/mui"; import type { CollectionSummary, diff --git a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx index f384c7a70d..6bcfc62e0e 100644 --- a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx +++ b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx @@ -1,10 +1,10 @@ import type { Collection } from "@/media/collection"; +import { AddPersonDialog } from "@/new/photos/components/AddPersonDialog"; import { GalleryBarImpl, type GalleryBarImplProps, -} from "@/new/photos/components/Gallery/BarImpl"; -import { PeopleHeader } from "@/new/photos/components/Gallery/PeopleHeader"; -import { SingleInputDialogTest } from "@/new/photos/components/SingleInputFormV2"; +} from "@/new/photos/components/gallery/BarImpl"; +import { PeopleHeader } from "@/new/photos/components/gallery/PeopleHeader"; import { areOnlySystemCollections, collectionsSortBy, @@ -250,9 +250,11 @@ export const GalleryBarAndListHeader: React.FC = ({ onClose={() => setOpenAlbumCastDialog(false)} collection={activeCollection} /> - setOpenPeopleSelector(false)} + people={[]} + cluster={{ id: "test", faces: [] }} /> ); diff --git a/web/apps/photos/src/components/PhotoFrame.tsx b/web/apps/photos/src/components/PhotoFrame.tsx index 1930435cb5..15365d7c26 100644 --- a/web/apps/photos/src/components/PhotoFrame.tsx +++ b/web/apps/photos/src/components/PhotoFrame.tsx @@ -1,6 +1,6 @@ import log from "@/base/log"; import { FileType } from "@/media/file-type"; -import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl"; +import type { GalleryBarMode } from "@/new/photos/components/gallery/BarImpl"; import DownloadManager from "@/new/photos/services/download"; import type { LivePhotoSourceURL, SourceURLs } from "@/new/photos/types/file"; import { EnteFile } from "@/new/photos/types/file"; diff --git a/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx b/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx index 9247b1e81c..4fbe1770da 100644 --- a/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx @@ -1,7 +1,7 @@ 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 type { GalleryBarMode } from "@/new/photos/components/gallery/BarImpl"; import { FluidContainer } from "@ente/shared/components/Container"; import ClockIcon from "@mui/icons-material/AccessTime"; import AddIcon from "@mui/icons-material/Add"; diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx index db9acbfa25..3d5e7a879a 100644 --- a/web/apps/photos/src/pages/gallery.tsx +++ b/web/apps/photos/src/pages/gallery.tsx @@ -8,17 +8,17 @@ import { CollectionSelector, type CollectionSelectorAttributes, } from "@/new/photos/components/CollectionSelector"; -import { - PeopleEmptyState, - SearchResultsHeader, -} from "@/new/photos/components/Gallery"; -import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl"; -import { GalleryPeopleState } from "@/new/photos/components/Gallery/PeopleHeader"; import { SearchBar, type SearchBarProps, } from "@/new/photos/components/SearchBar"; import { WhatsNew } from "@/new/photos/components/WhatsNew"; +import { + PeopleEmptyState, + SearchResultsHeader, +} from "@/new/photos/components/gallery"; +import type { GalleryBarMode } from "@/new/photos/components/gallery/BarImpl"; +import { GalleryPeopleState } from "@/new/photos/components/gallery/PeopleHeader"; import { shouldShowWhatsNew } from "@/new/photos/services/changelog"; import type { CollectionSummaries } from "@/new/photos/services/collection/ui"; import { areOnlySystemCollections } from "@/new/photos/services/collection/ui"; diff --git a/web/apps/photos/src/pages/index.tsx b/web/apps/photos/src/pages/index.tsx index 6adb1635d2..8a7623d55a 100644 --- a/web/apps/photos/src/pages/index.tsx +++ b/web/apps/photos/src/pages/index.tsx @@ -249,7 +249,8 @@ const SlideContainer = styled("div")` `; const Logo_ = styled("div")` - margin-block-end: 64px; + margin-block-start: 32px; + margin-block-end: 48px; `; const MobileBox = styled("div")` diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx index fad0080f8e..3005c47045 100644 --- a/web/apps/photos/src/pages/shared-albums.tsx +++ b/web/apps/photos/src/pages/shared-albums.tsx @@ -8,7 +8,7 @@ import type { Collection } from "@/media/collection"; import { GalleryItemsHeaderAdapter, GalleryItemsSummary, -} from "@/new/photos/components/Gallery/ListHeader"; +} from "@/new/photos/components/gallery/ListHeader"; import { SpaceBetweenFlex } from "@/new/photos/components/mui"; import downloadManager from "@/new/photos/services/download"; import { sortFiles } from "@/new/photos/services/files"; diff --git a/web/apps/photos/src/types/gallery/index.ts b/web/apps/photos/src/types/gallery/index.ts index 7998dea3dc..9519fa79aa 100644 --- a/web/apps/photos/src/types/gallery/index.ts +++ b/web/apps/photos/src/types/gallery/index.ts @@ -1,5 +1,5 @@ import type { Collection } from "@/media/collection"; -import { type SelectionContext } from "@/new/photos/components/Gallery"; +import { type SelectionContext } from "@/new/photos/components/gallery"; import { EnteFile } from "@/new/photos/types/file"; import type { User } from "@ente/shared/user/types"; import { FilesDownloadProgressAttributes } from "components/FilesDownloadProgress"; diff --git a/web/apps/photos/src/utils/photoFrame/index.ts b/web/apps/photos/src/utils/photoFrame/index.ts index fef9b72b30..b26d7e7013 100644 --- a/web/apps/photos/src/utils/photoFrame/index.ts +++ b/web/apps/photos/src/utils/photoFrame/index.ts @@ -1,7 +1,7 @@ import log from "@/base/log"; import { FileType } from "@/media/file-type"; -import type { SelectionContext } from "@/new/photos/components/Gallery"; -import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl"; +import type { SelectionContext } from "@/new/photos/components/gallery"; +import type { GalleryBarMode } from "@/new/photos/components/gallery/BarImpl"; import type { LivePhotoSourceURL, SourceURLs } from "@/new/photos/types/file"; import { EnteFile } from "@/new/photos/types/file"; import { ensure } from "@/utils/ensure"; diff --git a/web/packages/new/photos/components/AddPersonDialog.tsx b/web/packages/new/photos/components/AddPersonDialog.tsx index 9b62d5b35d..07306130a7 100644 --- a/web/packages/new/photos/components/AddPersonDialog.tsx +++ b/web/packages/new/photos/components/AddPersonDialog.tsx @@ -16,7 +16,7 @@ import { DialogCloseIconButton, type DialogVisibilityProps, } from "./mui/Dialog"; -import { NameInputDialog } from "./NameInputDialog"; +import { SingleInputDialog } from "./SingleInputForm"; import { ItemCard, LargeTileButton, @@ -111,11 +111,14 @@ export const AddPersonDialog: React.FC = ({ - setOpenNameInput(false)} title={pt("New person") /* TODO-Cluster */} + label={pt("Add name")} placeholder={t("enter_name")} + autoComplete="name" + autoFocus submitButtonTitle={t("add")} onSubmit={handleAddPersonWithName} /> diff --git a/web/packages/new/photos/components/SingleInputFormV2.tsx b/web/packages/new/photos/components/SingleInputForm.tsx similarity index 79% rename from web/packages/new/photos/components/SingleInputFormV2.tsx rename to web/packages/new/photos/components/SingleInputForm.tsx index eeb4b47fe8..1943e72470 100644 --- a/web/packages/new/photos/components/SingleInputFormV2.tsx +++ b/web/packages/new/photos/components/SingleInputForm.tsx @@ -1,7 +1,6 @@ import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton"; import { LoadingButton } from "@/base/components/mui/LoadingButton"; import log from "@/base/log"; -import { wait } from "@/utils/promise"; import { Box, Dialog, @@ -35,10 +34,15 @@ type SingleInputFormProps = Pick< */ onCancel: () => void; /** - * Submission handler. + * Submission handler. A callback invoked when the submit button is pressed. * * During submission, the text input and the submit button are disabled, and * an indeterminate progress indicator is shown. + * + * If this function rejects then a generic error helper text is shown below + * the text input, and the input (/ buttons) reenabled. + * + * @param name The current value of the text input. */ onSubmit: ((name: string) => void) | ((name: string) => Promise); }; @@ -55,7 +59,7 @@ type SingleInputFormProps = Pick< * disabled and a loading indicator is shown. Errors during submission are shown * as the helper text associated with the text field. */ -export const SingleInputFormV2: React.FC = ({ +export const SingleInputForm: React.FC = ({ initialValue, submitButtonTitle, onCancel, @@ -122,26 +126,31 @@ export const SingleInputFormV2: React.FC = ({ ); }; -export const SingleInputDialogTest: React.FC = ({ +type SingleInputDialogProps = DialogVisibilityProps & + Omit & { + /** Title of the dialog. */ + title: string; + }; + +/** + * A dialog that can be used to ask for a single text input using a + * {@link SingleInputForm}. + * + * If the submission handler provided to this component resolves successfully, + * then the dialog is closed. + * + * See also: {@link CollectionNamer}, its older sibling. + */ +export const SingleInputDialog: React.FC = ({ open, onClose, + onSubmit, + title, + ...rest }) => { - // const handleSubmit: SingleInputFormProps["callback"] = async ( - // inputValue, - // setFieldError, - // ) => { - // try { - // await onSubmit(inputValue); - // onClose(); - // } catch (e) { - // log.error(`Error when submitting value ${inputValue}`, e); - // setFieldError(t("generic_error_retry")); - // } - // }; - const handleSubmit = async (value: string) => { - await wait(3000); - if (value == "t") throw new Error("test"); + await onSubmit(value); + onClose(); }; return ( @@ -152,17 +161,12 @@ export const SingleInputDialogTest: React.FC = ({ fullWidth PaperProps={{ sx: { padding: "8px 4px 4px 4px" } }} > - {"New person"} + {title} - diff --git a/web/packages/new/photos/components/Gallery/BarImpl.tsx b/web/packages/new/photos/components/gallery/BarImpl.tsx similarity index 100% rename from web/packages/new/photos/components/Gallery/BarImpl.tsx rename to web/packages/new/photos/components/gallery/BarImpl.tsx diff --git a/web/packages/new/photos/components/Gallery/ListHeader.tsx b/web/packages/new/photos/components/gallery/ListHeader.tsx similarity index 100% rename from web/packages/new/photos/components/Gallery/ListHeader.tsx rename to web/packages/new/photos/components/gallery/ListHeader.tsx diff --git a/web/packages/new/photos/components/Gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx similarity index 95% rename from web/packages/new/photos/components/Gallery/PeopleHeader.tsx rename to web/packages/new/photos/components/gallery/PeopleHeader.tsx index 1e02c8e65b..d58c9a72a9 100644 --- a/web/packages/new/photos/components/Gallery/PeopleHeader.tsx +++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx @@ -1,12 +1,3 @@ -/** - * @file code that really belongs to pages/gallery.tsx itself (or related - * files), but it written here in a separate file so that we can write in this - * package that has TypeScript strict mode enabled. - * - * Once the original gallery.tsx is strict mode, this code can be inlined back - * there. - */ - import { pt } from "@/base/i18n"; import { addPerson, @@ -29,6 +20,7 @@ import type { NewAppContextPhotos } from "../../types/context"; import { AddPersonDialog } from "../AddPersonDialog"; import { SpaceBetweenFlex } from "../mui"; import { NameInputDialog } from "../NameInputDialog"; +import { SingleInputDialog } from "../SingleInputForm"; import type { GalleryBarImplProps } from "./BarImpl"; import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader"; @@ -174,11 +166,14 @@ const CGroupPersonOptions: React.FC = ({ - setOpenAddNameInput(false)} title={pt("Rename person") /* TODO-Cluster pt()'s */} + label={pt("Name")} placeholder={t("enter_name")} + autoComplete="name" + autoFocus initialValue={cgroup.data.name ?? ""} submitButtonTitle={t("rename")} onSubmit={renamePersonUsingName} diff --git a/web/packages/new/photos/components/Gallery/index.tsx b/web/packages/new/photos/components/gallery/index.tsx similarity index 100% rename from web/packages/new/photos/components/Gallery/index.tsx rename to web/packages/new/photos/components/gallery/index.tsx