wip checkpoint

web/apps/accounts/src/pages/_app.tsx

@@ -16,7 +16,7 @@ import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import { t } from "i18next";
 import type { AppProps } from "next/app";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { AppContext } from "../types/context";
 
 import "styles/global.css";
@@ -24,10 +24,23 @@ import "styles/global.css";
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
     const [isI18nReady, setIsI18nReady] = useState<boolean>(false);
     const [showNavbar, setShowNavbar] = useState(false);
-    const [dialogBoxAttributeV2, setDialogBoxAttributesV2] = useState<
+
+    // Mini Dialog scaffolding --
+
+    const [miniDialogAttributes, setMiniDialogAttributes] = useState<
         MiniDialogAttributes | undefined
     >();
-    const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
+
+    const [openMiniDialog, setOpenMiniDialog] = useState(false);
+
+    const showMiniDialog = useCallback((attributes: MiniDialogAttributes) => {
+        setMiniDialogAttributes(attributes);
+        setOpenMiniDialog(true);
+    }, []);
+
+    const closeMiniDialog = useCallback(() => setOpenMiniDialog(false), []);
+
+    // --
 
     useEffect(() => {
         disableDiskLogs();
@@ -36,12 +49,6 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
         return () => logUnhandledErrorsAndRejections(false);
     }, []);
 
-    useEffect(() => {
-        setDialogBoxV2View(true);
-    }, [dialogBoxAttributeV2]);
-
-    const closeDialogBoxV2 = () => setDialogBoxV2View(false);
-
     const appContext = {
         showNavBar: setShowNavbar,
         setDialogBoxAttributesV2,

web/apps/photos/src/components/Sidebar/index.tsx

@@ -682,14 +682,10 @@ const DebugSection: React.FC = () => {
         showMiniDialog({
             title: t("DOWNLOAD_LOGS"),
             message: <Trans i18nKey={"DOWNLOAD_LOGS_MESSAGE"} />,
-            proceed: {
+            continue: {
                 text: t("download"),
-                variant: "accent",
                 action: downloadLogs,
             },
-            close: {
-                text: t("cancel"),
-            },
         });
 
     const downloadLogs = () => {

web/packages/accounts/types/context.ts

@@ -5,9 +5,20 @@ import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
  * defer to the pages provided by the accounts package.
  */
 export interface AccountsContextT {
-    /** Perform the (possibly app specific) logout sequence. */
+    /**
+     * Perform the (possibly app specific) logout sequence.
+     */
     logout: () => void;
-    /** Show or hide the app's navigation bar. */
+    /**
+     * Show or hide the app's navigation bar.
+     */
     showNavBar: (show: boolean) => void;
-    setDialogBoxAttributesV2: (attrs: MiniDialogAttributes) => void;
+    /**
+     * Show a "mini dialog" with the given attributes.
+     *
+     * Mini dialogs (see {@link AttributedMiniDialog}) are meant for simple
+     * confirmation or notications. Their appearance and functionality can be
+     * customized by providing appropriate {@link MiniDialogAttributes}.
+     */
+    showMiniDialog: (attributes: MiniDialogAttributes) => void;
 }

web/packages/new/photos/types/context.ts

@@ -4,7 +4,6 @@ import type { SetDialogBoxAttributes } from "@ente/shared/components/DialogBox/t
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import { createContext, useContext } from "react";
 import type { SetNotificationAttributes } from "./notification";
-import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 
 /**
  * The type of the React context available to all pages in the photos app.
@@ -18,18 +17,10 @@ export type AppContextT = AccountsContextT & {
      * Hide the global activity indicator.
      */
     finishLoading: () => void;
-    /**
-     * Show a "mini dialog" with the given attributes.
-     *
-     * Mini dialogs (see {@link AttributedMiniDialog}) are meant for simple
-     * confirmation or notication dialogs. Their appearance and functionality
-     * can be customized by providing relevant {@link MiniDialogAttributes}.
-     */
-    showMiniDialog: (attributes: MiniDialogAttributes) => void;
+    onGenericError: (error: unknown) => void;
     somethingWentWrong: () => void;
     setDialogMessage: SetDialogBoxAttributes;
     setNotificationAttributes: SetNotificationAttributes;
-    onGenericError: (error: unknown) => void;
     closeMessageDialog: () => void;
     mapEnabled: boolean;
     updateMapEnabled: (enabled: boolean) => Promise<void>;