diff --git a/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx b/web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx index f384c7a70d..89d1c751e6 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"; 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/packages/new/photos/components/AddPersonDialog.tsx b/web/packages/new/photos/components/AddPersonDialog.tsx index 9b62d5b35d..0a4b3a8f96 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 "./SingleInputFormV2"; import { ItemCard, LargeTileButton, @@ -111,12 +111,15 @@ export const AddPersonDialog: React.FC = ({ - setOpenNameInput(false)} title={pt("New person") /* TODO-Cluster */} + label={pt("Add name")} placeholder={t("enter_name")} - submitButtonTitle={t("add")} + autoComplete="name" + autoFocus + submitButtonTitle={pt("Add person")} onSubmit={handleAddPersonWithName} /> diff --git a/web/packages/new/photos/components/SingleInputFormV2.tsx b/web/packages/new/photos/components/SingleInputFormV2.tsx index eeb4b47fe8..b1c40f461f 100644 --- a/web/packages/new/photos/components/SingleInputFormV2.tsx +++ b/web/packages/new/photos/components/SingleInputFormV2.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); }; @@ -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 SingleInputFormV2}. + * + * 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}