Scaffold

web/apps/photos/src/components/Collections/GalleryBarAndListHeader.tsx

@@ -4,6 +4,7 @@ import {
     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,
@@ -107,6 +108,7 @@ export const GalleryBarAndListHeader: React.FC<CollectionsProps> = ({
     const [openCollectionShareView, setOpenCollectionShareView] =
         useState(false);
     const [openAlbumCastDialog, setOpenAlbumCastDialog] = useState(false);
+    const [openPeopleSelector, setOpenPeopleSelector] = useState(false);
 
     const [collectionsSortBy, setCollectionsSortBy] =
         useCollectionsSortByLocalState("updation-time-desc");
@@ -190,6 +192,13 @@ export const GalleryBarAndListHeader: React.FC<CollectionsProps> = ({
         people,
     ]);
 
+    // TODO-Cluster
+    useEffect(() => {
+        if (process.env.NEXT_PUBLIC_ENTE_WIP_CL) {
+            setOpenPeopleSelector(true);
+        }
+    }, []);
+
     if (shouldBeHidden) {
         return <></>;
     }
@@ -239,6 +248,10 @@ export const GalleryBarAndListHeader: React.FC<CollectionsProps> = ({
                 onClose={() => setOpenAlbumCastDialog(false)}
                 collection={activeCollection}
             />
+            <SingleInputDialogTest
+                open={openPeopleSelector}
+                onClose={() => setOpenPeopleSelector(false)}
+            />
         </>
     );
 };

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

@@ -0,0 +1,47 @@
+import { Dialog, DialogContent, DialogTitle, TextField } from "@mui/material";
+import React from "react";
+import type { DialogVisibilityProps } from "./mui/Dialog";
+
+/**
+ * A TextField and two buttons.
+ */
+export const SingleInputFormV2: React.FC = () => {
+    return (
+        <div>
+            <TextField></TextField>
+        </div>
+    );
+};
+
+export const SingleInputDialogTest: React.FC<DialogVisibilityProps> = ({
+    open,
+    onClose,
+}) => {
+    // const handleSubmit: SingleInputFormProps["callback"] = async (
+    //     inputValue,
+    //     setFieldError,
+    // ) => {
+    //     try {
+    //         await onSubmit(inputValue);
+    //         onClose();
+    //     } catch (e) {
+    //         log.error(`Error when submitting value ${inputValue}`, e);
+    //         setFieldError(t("UNKNOWN_ERROR"));
+    //     }
+    // };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="xs"
+            fullWidth
+            PaperProps={{ sx: { padding: "8px 4px 4px 4px" } }}
+        >
+            <DialogTitle>{"Title"}</DialogTitle>
+            <DialogContent>
+                <SingleInputFormV2 />
+            </DialogContent>
+        </Dialog>
+    );
+};