[web] Add People WIP - Part x/x (#3641)

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,

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<CollectionsProps> = ({
                 onClose={() => setOpenAlbumCastDialog(false)}
                 collection={activeCollection}
             />
-            <SingleInputDialogTest
+            <AddPersonDialog
                 open={openPeopleSelector}
                 onClose={() => setOpenPeopleSelector(false)}
+                people={[]}
+                cluster={{ id: "test", faces: [] }}
             />
         </>
     );

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";

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";

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";

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")`

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";

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";

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";

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<AddPersonDialogProps> = ({
                 </DialogContent_>
             </Dialog>
 
-            <NameInputDialog
+            <SingleInputDialog
                 open={openNameInput}
                 onClose={() => setOpenNameInput(false)}
                 title={pt("New person") /* TODO-Cluster */}
+                label={pt("Add name")}
                 placeholder={t("enter_name")}
+                autoComplete="name"
+                autoFocus
                 submitButtonTitle={t("add")}
                 onSubmit={handleAddPersonWithName}
             />

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<void>);
 };
@@ -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<SingleInputFormProps> = ({
+export const SingleInputForm: React.FC<SingleInputFormProps> = ({
     initialValue,
     submitButtonTitle,
     onCancel,
@@ -122,26 +126,31 @@ export const SingleInputFormV2: React.FC<SingleInputFormProps> = ({
     );
 };
 
-export const SingleInputDialogTest: React.FC<DialogVisibilityProps> = ({
+type SingleInputDialogProps = DialogVisibilityProps &
+    Omit<SingleInputFormProps, "onCancel"> & {
+        /** 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<SingleInputDialogProps> = ({
     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<DialogVisibilityProps> = ({
             fullWidth
             PaperProps={{ sx: { padding: "8px 4px 4px 4px" } }}
         >
-            <DialogTitle>{"New person"}</DialogTitle>
+            <DialogTitle>{title}</DialogTitle>
             <DialogContent sx={{ "&&&": { paddingBlockStart: 0 } }}>
-                <SingleInputFormV2
-                    autoComplete="name"
-                    autoFocus
-                    label="Add name"
-                    placeholder="Enter name"
-                    initialValue="tt"
-                    submitButtonTitle="Add person"
+                <SingleInputForm
                     onCancel={onClose}
                     onSubmit={handleSubmit}
+                    {...rest}
                 />
             </DialogContent>
         </Dialog>

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<CGroupPersonOptionsProps> = ({
                 </OverflowMenuOption>
             </OverflowMenu>
 
-            <NameInputDialog
+            <SingleInputDialog
                 open={openAddNameInput}
                 onClose={() => 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}