Rename and move

web/packages/base/components/mui/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Common props that control the display of a modal (e.g. dialog, drawer)
+ * component.
+ */
+export interface ModalVisibilityProps {
+    /** If `true`, the component is shown. */
+    open: boolean;
+    /** Callback fired when the component requests to be closed. */
+    onClose: () => void;
+}

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

@@ -1,3 +1,4 @@
+import type { ModalVisibilityProps } from "@/base/components/mui";
 import { pt } from "@/base/i18n";
 import { addPerson } from "@/new/photos/services/ml";
 import {
@@ -13,10 +14,7 @@ import React, { useState } from "react";
 import type { FaceCluster } from "../services/ml/cluster";
 import type { Person } from "../services/ml/people";
 import { SpaceBetweenFlex, type ButtonishProps } from "./mui";
-import {
-    DialogCloseIconButton,
-    type DialogVisibilityProps,
-} from "./mui/Dialog";
+import { DialogCloseIconButton } from "./mui/Dialog";
 import { SingleInputDialog } from "./SingleInputForm";
 import {
     ItemCard,
@@ -25,7 +23,7 @@ import {
     LargeTileTextOverlay,
 } from "./Tiles";
 
-type AddPersonDialogProps = DialogVisibilityProps & {
+type AddPersonDialogProps = ModalVisibilityProps & {
     /**
      * The list of people from show the existing named people.
      */

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

@@ -1,3 +1,4 @@
+import type { ModalVisibilityProps } from "@/base/components/mui";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import type { CollectionMapping } from "@/base/types/ipc";
 import FolderIcon from "@mui/icons-material/Folder";
@@ -12,12 +13,9 @@ import {
 import { t } from "i18next";
 import React from "react";
 import { SpaceBetweenFlex } from "./mui";
-import {
-    DialogCloseIconButton,
-    type DialogVisibilityProps,
-} from "./mui/Dialog";
+import { DialogCloseIconButton } from "./mui/Dialog";
 
-type CollectionMappingChoiceModalProps = DialogVisibilityProps & {
+type CollectionMappingChoiceModalProps = ModalVisibilityProps & {
     didSelect: (mapping: CollectionMapping) => void;
 };
 

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

@@ -1,3 +1,4 @@
+import type { ModalVisibilityProps } from "@/base/components/mui";
 import type { Collection } from "@/media/collection";
 import {
     ItemCard,
@@ -24,10 +25,7 @@ import {
 import { t } from "i18next";
 import React, { useEffect, useState } from "react";
 import { SpaceBetweenFlex, type ButtonishProps } from "./mui";
-import {
-    DialogCloseIconButton,
-    type DialogVisibilityProps,
-} from "./mui/Dialog";
+import { DialogCloseIconButton } from "./mui/Dialog";
 
 export type CollectionSelectorAction =
     | "upload"
@@ -65,7 +63,7 @@ export interface CollectionSelectorAttributes {
     relatedCollectionID?: number | undefined;
 }
 
-type CollectionSelectorProps = DialogVisibilityProps & {
+type CollectionSelectorProps = ModalVisibilityProps & {
     /**
      * The same {@link CollectionSelector} can be used for different
      * purposes by customizing the {@link attributes} prop before opening it.

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

@@ -1,3 +1,4 @@
+import type { ModalVisibilityProps } from "@/base/components/mui";
 import log from "@/base/log";
 import SingleInputForm, {
     type SingleInputFormProps,
@@ -5,9 +6,8 @@ import SingleInputForm, {
 import { Dialog, DialogContent, DialogTitle } from "@mui/material";
 import { t } from "i18next";
 import React from "react";
-import { type DialogVisibilityProps } from "./mui/Dialog";
 
-type NameInputDialogProps = DialogVisibilityProps & {
+type NameInputDialogProps = ModalVisibilityProps & {
     /** Title of the dialog. */
     title: string;
     /** Placeholder string to show in the text input when it is empty. */

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

@@ -1,3 +1,4 @@
+import type { ModalVisibilityProps } from "@/base/components/mui";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
 import log from "@/base/log";
@@ -12,7 +13,6 @@ import {
 import { useFormik } from "formik";
 import { t } from "i18next";
 import React from "react";
-import type { DialogVisibilityProps } from "./mui/Dialog";
 
 type SingleInputFormProps = Pick<
     TextFieldProps,
@@ -126,7 +126,7 @@ export const SingleInputForm: React.FC<SingleInputFormProps> = ({
     );
 };
 
-type SingleInputDialogProps = DialogVisibilityProps &
+type SingleInputDialogProps = ModalVisibilityProps &
     Omit<SingleInputFormProps, "onCancel"> & {
         /** Title of the dialog. */
         title: string;

web/packages/new/photos/components/mui/Dialog.tsx

@@ -1,19 +1,10 @@
+import type { ModalVisibilityProps } from "@/base/components/mui";
 import CloseIcon from "@mui/icons-material/Close";
 import { IconButton } from "@mui/material";
 import { t } from "i18next";
 import React from "react";
 
-/**
- * Common props to control the display of a dialog-like component.
- */
-export interface DialogVisibilityProps {
-    /** If `true`, the dialog is shown. */
-    open: boolean;
-    /** Callback fired when the dialog wants to be closed. */
-    onClose: () => void;
-}
-
-type DialogCloseIconButtonProps = Omit<DialogVisibilityProps, "open">;
+type DialogCloseIconButtonProps = Omit<ModalVisibilityProps, "open">;
 
 /**
  * A convenience {@link IconButton} commonly needed on {@link Dialog}s, at the