Finish re

web/packages/base/components/MiniDialog.tsx

@@ -1,7 +1,3 @@
-// TODO:
-/* eslint-disable @typescript-eslint/prefer-optional-chain */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
 import type { ButtonProps } from "@mui/material";
@@ -147,7 +143,7 @@ export const AttributedMiniDialog: React.FC<
             }}
             {...rest}
         >
-            {(attributes.icon || attributes.title) && (
+            {(attributes.icon ?? attributes.title) && (
                 <Box
                     sx={{
                         display: "flex",
@@ -186,14 +182,14 @@ export const AttributedMiniDialog: React.FC<
                         <LoadingButton
                             loading={loading}
                             fullWidth
-                            color={attributes.continue?.color ?? "accent"}
-                            autoFocus={attributes.continue?.autoFocus}
+                            color={attributes.continue.color ?? "accent"}
+                            autoFocus={attributes.continue.autoFocus}
                             onClick={async () => {
                                 await attributes.continue?.action?.(setLoading);
                                 onClose();
                             }}
                         >
-                            {attributes.continue?.text ?? t("ok")}
+                            {attributes.continue.text ?? t("ok")}
                         </LoadingButton>
                     )}
                     {attributes.cancel && (

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

@@ -27,7 +27,7 @@ import {
 import { t } from "i18next";
 import React, { useEffect, useState, useSyncExternalStore } from "react";
 import { Trans } from "react-i18next";
-import { useAppContext, type AppContextT } from "../types/context";
+import { useAppContext } from "../types/context";
 import { openURL } from "../utils/web";
 import { useWrapAsyncOperation } from "./use-wrap-async";
 
@@ -36,8 +36,6 @@ export const MLSettings: React.FC<NestedDrawerVisibilityProps> = ({
     onClose,
     onRootClose,
 }) => {
-    const { setDialogBoxAttributesV2 } = useAppContext();
-
     const mlStatus = useSyncExternalStore(mlStatusSubscribe, mlStatusSnapshot);
     const [openFaceConsent, setOpenFaceConsent] = useState(false);
 
@@ -68,10 +66,7 @@ export const MLSettings: React.FC<NestedDrawerVisibilityProps> = ({
         component = <EnableML onEnable={handleEnableML} />;
     } else {
         component = (
-            <ManageML
-                {...{ mlStatus, setDialogBoxAttributesV2 }}
-                onDisableML={handleDisableML}
-            />
+            <ManageML {...{ mlStatus }} onDisableML={handleDisableML} />
         );
     }
 
@@ -252,15 +247,11 @@ interface ManageMLProps {
     mlStatus: Exclude<MLStatus, { phase: "disabled" }>;
     /** Called when the user wants to disable ML. */
     onDisableML: () => void;
-    /** Subset of appContext. */
-    setDialogBoxAttributesV2: AppContextT["setDialogBoxAttributesV2"];
 }
 
-const ManageML: React.FC<ManageMLProps> = ({
-    mlStatus,
-    onDisableML,
-    setDialogBoxAttributesV2,
-}) => {
+const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
+    const { showMiniDialog } = useAppContext();
+
     const { phase, nSyncedFiles, nTotalFiles } = mlStatus;
 
     let status: string;
@@ -289,19 +280,17 @@ const ManageML: React.FC<ManageMLProps> = ({
             ? `${Math.round((100 * nSyncedFiles) / nTotalFiles)}%`
             : `${nSyncedFiles} / ${nTotalFiles}`;
 
-    const confirmDisableML = () => {
-        setDialogBoxAttributesV2({
+    const confirmDisableML = () =>
+        showMiniDialog({
             title: t("ml_search_disable"),
             message: t("ml_search_disable_confirm"),
-            close: { text: t("cancel") },
-            proceed: {
-                variant: "critical",
+            continue: {
                 text: t("disable"),
+                color: "critical",
                 action: onDisableML,
             },
             buttonDirection: "row",
         });
-    };
 
     return (
         <Stack px={"16px"} py={"20px"} gap={4}>

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

@@ -92,7 +92,7 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
     cgroup,
     onSelectPerson,
 }) => {
-    const { setDialogBoxAttributesV2 } = useAppContext();
+    const { showMiniDialog } = useAppContext();
 
     const [openAddNameInput, setOpenAddNameInput] = useState(false);
 
@@ -103,17 +103,16 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
     );
 
     const handleDeletePerson = () =>
-        setDialogBoxAttributesV2({
+        showMiniDialog({
             title: pt("Reset person?"),
             message: pt(
                 "The name, face groupings and suggestions for this person will be reset",
             ),
-            close: { text: t("cancel") },
-            proceed: {
+            continue: {
                 text: t("reset"),
+                color: "primary",
                 action: deletePerson,
             },
-            buttonDirection: "row",
         });
 
     const deletePerson = useWrapAsyncOperation(async () => {