[web] Refactoring - Nested left sidebar drawer

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

@@ -1,14 +1,16 @@
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
-import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
+import {
+    NestedSidebarDrawer,
+    type NestedSidebarDrawerVisibilityProps,
+} from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
-import type { NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
 import { AppContext } from "@/new/photos/types/context";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
-import { Box, DialogProps, Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import { t } from "i18next";
 import React, { useContext } from "react";
 
-export const AdvancedSettings: React.FC<NestedDrawerVisibilityProps> = ({
+export const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
     open,
     onClose,
     onRootClose,
@@ -20,26 +22,14 @@ export const AdvancedSettings: React.FC<NestedDrawerVisibilityProps> = ({
         onRootClose();
     };
 
-    const handleDrawerClose: DialogProps["onClose"] = (_, reason) => {
-        if (reason === "backdropClick") {
-            handleRootClose();
-        } else {
-            onClose();
-        }
-    };
-
     const toggleCFProxy = () => {
         appContext.setIsCFProxyDisabled(!appContext.isCFProxyDisabled);
     };
 
     return (
-        <SidebarDrawer
-            transitionDuration={0}
-            open={open}
-            onClose={handleDrawerClose}
-            BackdropProps={{
-                sx: { "&&&": { backgroundColor: "transparent" } },
-            }}
+        <NestedSidebarDrawer
+            {...{ open, onClose }}
+            onRootClose={handleRootClose}
         >
             <Stack spacing={"4px"} py={"12px"}>
                 <Titlebar
@@ -66,6 +56,6 @@ export const AdvancedSettings: React.FC<NestedDrawerVisibilityProps> = ({
                     </Stack>
                 </Box>
             </Stack>
-        </SidebarDrawer>
+        </NestedSidebarDrawer>
     );
 };

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

@@ -1,24 +1,19 @@
 import { MenuItemGroup } from "@/base/components/Menu";
-import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
+import {
+    NestedSidebarDrawer,
+    type NestedSidebarDrawerVisibilityProps,
+} from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
-import type { NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
 import log from "@/base/log";
 import { AppContext } from "@/new/photos/types/context";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
-import {
-    Box,
-    Button,
-    DialogProps,
-    Link,
-    Stack,
-    Typography,
-} from "@mui/material";
+import { Box, Button, Link, Stack, Typography } from "@mui/material";
 import { t } from "i18next";
 import React, { useContext, useEffect, useState } from "react";
 import { Trans } from "react-i18next";
 import { getMapEnabledStatus } from "services/userService";
 
-export const MapSettings: React.FC<NestedDrawerVisibilityProps> = ({
+export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
     open,
     onClose,
     onRootClose,
@@ -45,22 +40,10 @@ export const MapSettings: React.FC<NestedDrawerVisibilityProps> = ({
         onRootClose();
     };
 
-    const handleDrawerClose: DialogProps["onClose"] = (_, reason) => {
-        if (reason === "backdropClick") {
-            handleRootClose();
-        } else {
-            onClose();
-        }
-    };
-
     return (
-        <SidebarDrawer
-            transitionDuration={0}
-            open={open}
-            onClose={handleDrawerClose}
-            BackdropProps={{
-                sx: { "&&&": { backgroundColor: "transparent" } },
-            }}
+        <NestedSidebarDrawer
+            {...{ open, onClose }}
+            onRootClose={handleRootClose}
         >
             <Stack spacing={"4px"} py={"12px"}>
                 <Titlebar
@@ -90,7 +73,7 @@ export const MapSettings: React.FC<NestedDrawerVisibilityProps> = ({
                 onClose={closeModifyMapEnabled}
                 onRootClose={handleRootClose}
             />
-        </SidebarDrawer>
+        </NestedSidebarDrawer>
     );
 };
 
@@ -122,42 +105,25 @@ const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
         onRootClose();
     };
 
-    const handleDrawerClose: DialogProps["onClose"] = (_, reason) => {
-        if (reason === "backdropClick") {
-            handleRootClose();
-        } else {
-            onClose();
-        }
-    };
-
     return (
-        <Box>
-            <SidebarDrawer
-                anchor="left"
-                transitionDuration={0}
-                open={open}
-                onClose={handleDrawerClose}
-                slotProps={{
-                    backdrop: {
-                        sx: { "&&&": { backgroundColor: "transparent" } },
-                    },
-                }}
-            >
-                {mapEnabled ? (
-                    <DisableMap
-                        onClose={onClose}
-                        disableMap={disableMap}
-                        onRootClose={handleRootClose}
-                    />
-                ) : (
-                    <EnableMap
-                        onClose={onClose}
-                        enableMap={enableMap}
-                        onRootClose={handleRootClose}
-                    />
-                )}
-            </SidebarDrawer>
-        </Box>
+        <NestedSidebarDrawer
+            {...{ open, onClose }}
+            onRootClose={handleRootClose}
+        >
+            {mapEnabled ? (
+                <DisableMap
+                    onClose={onClose}
+                    disableMap={disableMap}
+                    onRootClose={handleRootClose}
+                />
+            ) : (
+                <EnableMap
+                    onClose={onClose}
+                    enableMap={enableMap}
+                    onRootClose={handleRootClose}
+                />
+            )}
+        </NestedSidebarDrawer>
     );
 };
 

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

@@ -1,10 +1,10 @@
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
-import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
-import { Titlebar } from "@/base/components/Titlebar";
 import {
-    useModalVisibility,
-    type NestedDrawerVisibilityProps,
-} from "@/base/components/utils/modal";
+    SidebarDrawer,
+    type NestedSidebarDrawerVisibilityProps,
+} from "@/base/components/mui/SidebarDrawer";
+import { Titlebar } from "@/base/components/Titlebar";
+import { useModalVisibility } from "@/base/components/utils/modal";
 import {
     getLocaleInUse,
     setLocaleInUse,
@@ -24,7 +24,7 @@ import React, { useEffect } from "react";
 import { AdvancedSettings } from "./AdvancedSettings";
 import { MapSettings } from "./MapSetting";
 
-export const Preferences: React.FC<NestedDrawerVisibilityProps> = ({
+export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
     open,
     onClose,
     onRootClose,
@@ -48,6 +48,7 @@ export const Preferences: React.FC<NestedDrawerVisibilityProps> = ({
     };
 
     const handleDrawerClose: DialogProps["onClose"] = (_, reason) => {
+        console.log(reason);
         if (reason === "backdropClick") {
             handleRootClose();
         } else {
@@ -60,9 +61,10 @@ export const Preferences: React.FC<NestedDrawerVisibilityProps> = ({
             transitionDuration={0}
             open={open}
             onClose={handleDrawerClose}
-            BackdropProps={{
-                sx: { "&&&": { backgroundColor: "transparent" } },
-            }}
+            // hideBackdrop
+            // BackdropProps={{
+            //     sx: { "&&&": { backgroundColor: "transparent" } },
+            // }}
         >
             <Stack spacing={"4px"} py={"12px"}>
                 <Titlebar

web/apps/photos/src/components/TwoFactor/Modal/index.tsx → web/apps/photos/src/components/Sidebar/TwoFactorModal.tsx

@@ -1,35 +1,34 @@
 import { disableTwoFactor } from "@/accounts/api/user";
-import type { ModalVisibilityProps } from "@/base/components/utils/modal";
+import {
+    NestedSidebarDrawer,
+    type NestedSidebarDrawerVisibilityProps,
+} from "@/base/components/mui/SidebarDrawer";
+import { Titlebar } from "@/base/components/Titlebar";
 import { AppContext } from "@/new/photos/types/context";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { LS_KEYS, getData, setLSUser } from "@ente/shared/storage/localStorage";
 import LockIcon from "@mui/icons-material/Lock";
-import {
-    Button,
-    Dialog,
-    DialogContent,
-    Grid,
-    Typography,
-    styled,
-} from "@mui/material";
+import { Button, Grid, Stack, Typography } from "@mui/material";
 import { t } from "i18next";
 import router, { useRouter } from "next/router";
 import { useContext, useEffect, useState } from "react";
 import { getTwoFactorStatus } from "services/userService";
 
-const TwoFactorDialog = styled(Dialog)(({ theme }) => ({
-    "& .MuiDialogContent-root": {
-        padding: theme.spacing(2, 4),
-    },
-}));
+// TODO: Revisit these comments
+// const TwoFactorDialog = styled(Dialog)(({ theme }) => ({
+//     "& .MuiDialogContent-root": {
+//         padding: theme.spacing(2, 4),
+//     },
+// }));
 
-type Props = ModalVisibilityProps & {
-    closeSidebar: () => void;
-};
+// type TwoFactorModalProps = ModalVisibilityProps & {
+//     closeSidebar: () => void;
+// };
 
-function TwoFactorModal(props: Props) {
+export const TwoFactorSettings: React.FC<
+    NestedSidebarDrawerVisibilityProps
+> = ({ open, onClose, onRootClose }) => {
     const [isTwoFactorEnabled, setTwoFactorStatus] = useState(false);
 
     useEffect(() => {
@@ -39,7 +38,7 @@ function TwoFactorModal(props: Props) {
     }, []);
 
     useEffect(() => {
-        if (!props.open) {
+        if (!open) {
             return;
         }
         const main = async () => {
@@ -51,34 +50,41 @@ function TwoFactorModal(props: Props) {
             });
         };
         main();
-    }, [props.open]);
+    }, [open]);
 
-    const closeDialog = () => {
-        props.onClose();
-        props.closeSidebar();
+    const handleRootClose = () => {
+        onClose();
+        onRootClose();
     };
 
     return (
-        <TwoFactorDialog
-            maxWidth="xs"
-            open={props.open}
-            onClose={props.onClose}
+        <NestedSidebarDrawer
+            {...{ open, onClose }}
+            onRootClose={handleRootClose}
         >
-            <DialogTitleWithCloseButton onClose={props.onClose}>
-                {t("TWO_FACTOR_AUTHENTICATION")}
-            </DialogTitleWithCloseButton>
-            <DialogContent sx={{ px: 4 }}>
+            <Stack spacing={"4px"} py={"12px"}>
+                <Titlebar
+                    onClose={onClose}
+                    title={t("TWO_FACTOR_AUTHENTICATION")}
+                    onRootClose={handleRootClose}
+                />
+                {/* {component} */}
+
+                {/* <DialogContent sx={{ px: 4 }}> */}
                 {isTwoFactorEnabled ? (
-                    <TwoFactorModalManageSection closeDialog={closeDialog} />
+                    <TwoFactorModalManageSection
+                        closeDialog={handleRootClose}
+                    />
                 ) : (
-                    <TwoFactorModalSetupSection closeDialog={closeDialog} />
+                    <TwoFactorModalSetupSection closeDialog={handleRootClose} />
                 )}
-            </DialogContent>
-        </TwoFactorDialog>
+                {/* </DialogContent> */}
+            </Stack>
+        </NestedSidebarDrawer>
     );
-}
+};
 
-export default TwoFactorModal;
+export default TwoFactorSettings;
 
 interface TwoFactorModalSetupSectionProps {
     closeDialog: () => void;

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

@@ -47,7 +47,7 @@ import {
 } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import DeleteAccountModal from "components/DeleteAccountModal";
-import TwoFactorModal from "components/TwoFactor/Modal";
+import TwoFactorModal from "components/Sidebar/TwoFactorModal";
 import { WatchFolder } from "components/WatchFolder";
 import LinkButton from "components/pages/gallery/LinkButton";
 import { t } from "i18next";
@@ -532,7 +532,7 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
             />
             <TwoFactorModal
                 {...twoFactorVisibilityProps}
-                closeSidebar={closeSidebar}
+                onRootClose={closeSidebar}
             />
             {isElectron() && (
                 <WatchFolder