diff --git a/web/packages/base/components/mui/index.tsx b/web/packages/base/components/mui/index.tsx
new file mode 100644
index 0000000000..2c7e302618
--- /dev/null
+++ b/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;
+}
diff --git a/web/packages/new/photos/components/AddPersonDialog.tsx b/web/packages/new/photos/components/AddPersonDialog.tsx
index c590605775..e655327ac1 100644
--- a/web/packages/new/photos/components/AddPersonDialog.tsx
+++ b/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.
      */
diff --git a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx
index c862fed2ee..76fa39de7c 100644
--- a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx
+++ b/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;
 };
 
diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx
index 48bfd70b88..4e91a627ea 100644
--- a/web/packages/new/photos/components/CollectionSelector.tsx
+++ b/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.
diff --git a/web/packages/new/photos/components/NameInputDialog.tsx b/web/packages/new/photos/components/NameInputDialog.tsx
index ac76f7f16b..69912c1add 100644
--- a/web/packages/new/photos/components/NameInputDialog.tsx
+++ b/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. */
diff --git a/web/packages/new/photos/components/SingleInputForm.tsx b/web/packages/new/photos/components/SingleInputForm.tsx
index 1943e72470..9816215d2c 100644
--- a/web/packages/new/photos/components/SingleInputForm.tsx
+++ b/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;
diff --git a/web/packages/new/photos/components/mui/Dialog.tsx b/web/packages/new/photos/components/mui/Dialog.tsx
index 59cf2084d9..5a4fa48fa6 100644
--- a/web/packages/new/photos/components/mui/Dialog.tsx
+++ b/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