Segue

web/packages/new/photos/components/NameInputDialog.tsx

@@ -21,7 +21,7 @@ type NameInputDialogProps = DialogVisibilityProps & {
      *
      * @param name The current value of the text input.
      * */
-    onSubmit: (name: string) => Promise<void>;
+    onSubmit: ((name: string) => void) | ((name: string) => Promise<void>);
 };
 
 /**
@@ -53,7 +53,13 @@ export const NameInputDialog: React.FC<NameInputDialogProps> = ({
     };
 
     return (
-        <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="xs"
+            fullWidth
+            PaperProps={{ sx: { padding: "8px 4px 4px 4px" } }}
+        >
             <DialogTitle>{title}</DialogTitle>
             <DialogContent>
                 <SingleInputForm
@@ -62,7 +68,7 @@ export const NameInputDialog: React.FC<NameInputDialogProps> = ({
                     initialValue={initialValue}
                     callback={handleSubmit}
                     buttonText={submitButtonTitle}
-                    submitButtonProps={{ sx: { mt: 1, mb: 2 } }}
+                    submitButtonProps={{ sx: { mt: 2, mb: 1 } }}
                     secondaryButtonAction={onClose}
                 />
             </DialogContent>

web/packages/new/photos/components/PeopleSelector.tsx

@@ -8,13 +8,14 @@ import {
     useMediaQuery,
 } from "@mui/material";
 import { t } from "i18next";
-import React from "react";
+import React, { useState } from "react";
 import type { CollectionSummary } from "../services/collection/ui";
 import { SpaceBetweenFlex, type ButtonishProps } from "./mui";
 import {
     DialogCloseIconButton,
     type DialogVisibilityProps,
 } from "./mui/Dialog";
+import { NameInputDialog } from "./NameInputDialog";
 import {
     ItemCard,
     LargeTileButton,
@@ -30,39 +31,59 @@ export const PeopleSelector: React.FC<PeopleSelectorProps> = ({
 }) => {
     const isFullScreen = useMediaQuery("(max-width: 490px)");
 
+    const [openNameInput, setOpenNameInput] = useState(false);
+
     const filteredCollections: CollectionSummary[] = [];
+
     const handleAddPerson = () => {
         console.log("handleAddPerson");
+        setOpenNameInput(true);
     };
+
     const handleSelectPerson = (id: string) => {
         console.log("handleSelectPerson", id);
     };
 
-    return (
-        <Dialog
-            {...{ open, onClose }}
-            fullWidth
-            fullScreen={isFullScreen}
-            PaperProps={{ sx: { maxWidth: "490px" } }}
-        >
-            <SpaceBetweenFlex sx={{ padding: "10px 8px 6px 0" }}>
-                <DialogTitle variant="h3" fontWeight={"bold"}>
-                    {pt("Add name")}
-                </DialogTitle>
-                <DialogCloseIconButton {...{ onClose }} />
-            </SpaceBetweenFlex>
+    const handleAddPersonWithName = (name: string) => {
+        console.log("handleAddPersonWithName", name);
+    };
 
-            <DialogContent_>
-                <AddPerson onClick={handleAddPerson} />
-                {filteredCollections.map((person) => (
-                    <PersonButton
-                        key={person.id}
-                        person={person}
-                        onPersonClick={handleSelectPerson}
-                    />
-                ))}
-            </DialogContent_>
-        </Dialog>
+    return (
+        <>
+            <Dialog
+                {...{ open, onClose }}
+                fullWidth
+                fullScreen={isFullScreen}
+                PaperProps={{ sx: { maxWidth: "490px" } }}
+            >
+                <SpaceBetweenFlex sx={{ padding: "10px 8px 6px 0" }}>
+                    <DialogTitle variant="h3" fontWeight={"bold"}>
+                        {pt("Add name")}
+                    </DialogTitle>
+                    <DialogCloseIconButton {...{ onClose }} />
+                </SpaceBetweenFlex>
+                <DialogContent_>
+                    <AddPerson onClick={handleAddPerson} />
+                    {filteredCollections.map((person) => (
+                        <PersonButton
+                            key={person.id}
+                            person={person}
+                            onPersonClick={handleSelectPerson}
+                        />
+                    ))}
+                </DialogContent_>
+            </Dialog>
+
+            <NameInputDialog
+                open={openNameInput}
+                onClose={() => setOpenNameInput(false)}
+                title={pt("New person") /* TODO-Cluster */}
+                placeholder={t("enter_name")}
+                initialValue={""}
+                submitButtonTitle={t("add")}
+                onSubmit={handleAddPersonWithName}
+            />
+        </>
     );
 };