Move

web/apps/accounts/src/pages/passkeys/index.tsx

@@ -1,11 +1,11 @@
 import { FormPaper } from "@/base/components/FormPaper";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
 import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
+import { SingleInputDialog } from "@/base/components/SingleInputDialog";
 import { Titlebar } from "@/base/components/Titlebar";
 import { errorDialogAttributes } from "@/base/components/utils/dialog";
 import { useModalVisibility } from "@/base/components/utils/modal";
 import log from "@/base/log";
-import { SingleInputDialog } from "@/new/photos/components/SingleInputForm";
 import { CenteredFlex } from "@ente/shared/components/Container";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import SingleInputForm from "@ente/shared/components/SingleInputForm";

web/packages/base/components/SingleInputDialog.tsx

@@ -0,0 +1,51 @@
+import type { ModalVisibilityProps } from "@/base/components/utils/modal";
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import React from "react";
+import { SingleInputForm, type SingleInputFormProps } from "./SingleInputForm";
+
+type SingleInputDialogProps = ModalVisibilityProps &
+    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 = async (value: string) => {
+        await onSubmit(value);
+        onClose();
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="xs"
+            fullWidth
+            PaperProps={{ sx: { padding: "8px 4px 4px 4px" } }}
+        >
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent sx={{ "&&&": { paddingBlockStart: 0 } }}>
+                <SingleInputForm
+                    onCancel={onClose}
+                    onSubmit={handleSubmit}
+                    {...rest}
+                />
+            </DialogContent>
+        </Dialog>
+    );
+};

web/packages/base/components/SingleInputForm.tsx

@@ -1,20 +1,12 @@
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
-import type { ModalVisibilityProps } from "@/base/components/utils/modal";
 import log from "@/base/log";
-import {
-    Dialog,
-    DialogContent,
-    DialogTitle,
-    Stack,
-    TextField,
-    type TextFieldProps,
-} from "@mui/material";
+import { Stack, TextField, type TextFieldProps } from "@mui/material";
 import { useFormik } from "formik";
 import { t } from "i18next";
 import React from "react";
 
-type SingleInputFormProps = Pick<
+export type SingleInputFormProps = Pick<
     TextFieldProps,
     "label" | "placeholder" | "autoComplete" | "autoFocus"
 > & {
@@ -125,50 +117,3 @@ export const SingleInputForm: React.FC<SingleInputFormProps> = ({
         </form>
     );
 };
-
-type SingleInputDialogProps = ModalVisibilityProps &
-    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 = async (value: string) => {
-        await onSubmit(value);
-        onClose();
-    };
-
-    return (
-        <Dialog
-            open={open}
-            onClose={onClose}
-            maxWidth="xs"
-            fullWidth
-            PaperProps={{ sx: { padding: "8px 4px 4px 4px" } }}
-        >
-            <DialogTitle>{title}</DialogTitle>
-            <DialogContent sx={{ "&&&": { paddingBlockStart: 0 } }}>
-                <SingleInputForm
-                    onCancel={onClose}
-                    onSubmit={handleSubmit}
-                    {...rest}
-                />
-            </DialogContent>
-        </Dialog>
-    );
-};

web/packages/new/photos/components/gallery/PeopleHeader.tsx

@@ -11,6 +11,7 @@ import {
     OverflowMenu,
     OverflowMenuOption,
 } from "@/base/components/OverflowMenu";
+import { SingleInputDialog } from "@/base/components/SingleInputDialog";
 import { useIsSmallWidth } from "@/base/components/utils/hooks";
 import {
     useModalVisibility,
@@ -64,7 +65,6 @@ import type { FaceCluster } from "../../services/ml/cluster";
 import { useAppContext } from "../../types/context";
 import { DialogCloseIconButton } from "../mui/Dialog";
 import { SuggestionFaceList } from "../PeopleList";
-import { SingleInputDialog } from "../SingleInputForm";
 import {
     ItemCard,
     LargeTileButton,

web/packages/shared/components/SingleInputForm.tsx

@@ -54,6 +54,9 @@ export interface SingleInputFormProps {
     disableAutoComplete?: boolean;
 }
 
+/**
+ * Deprecated version, gradually migrate to use the one from @/base.
+ */
 export default function SingleInputForm(props: SingleInputFormProps) {
     const { submitButtonProps } = props;
     const { sx: buttonSx, ...restSubmitButtonProps } = submitButtonProps ?? {};