From 8cf4c008d595c6c061dee76a53fb7be1b1be8fcd Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 15:31:29 +0530
Subject: [PATCH 01/12] Ren

---
 .../Sidebar/{TwoFactorModal.tsx => TwoFactorSettings.tsx}       | 0
 web/apps/photos/src/components/Sidebar/index.tsx                | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename web/apps/photos/src/components/Sidebar/{TwoFactorModal.tsx => TwoFactorSettings.tsx} (100%)

diff --git a/web/apps/photos/src/components/Sidebar/TwoFactorModal.tsx b/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
similarity index 100%
rename from web/apps/photos/src/components/Sidebar/TwoFactorModal.tsx
rename to web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index c0eacee9b2..78557e1c15 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/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/Sidebar/TwoFactorModal";
+import TwoFactorModal from "components/Sidebar/TwoFactorSettings";
 import { WatchFolder } from "components/WatchFolder";
 import LinkButton from "components/pages/gallery/LinkButton";
 import { t } from "i18next";

From ec776e9f98651916e375419a8f29fc29093154ae Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 15:41:40 +0530
Subject: [PATCH 02/12] Unnest

---
 .../src/components/Sidebar/MapSetting.tsx     | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx
index c7098ab4f8..7791206181 100644
--- a/web/apps/photos/src/components/Sidebar/MapSetting.tsx
+++ b/web/apps/photos/src/components/Sidebar/MapSetting.tsx
@@ -52,20 +52,18 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                     onRootClose={handleRootClose}
                 />
 
-                <Box px={"8px"}>
-                    <Stack py="20px" spacing="24px">
-                        <Box>
-                            <MenuItemGroup>
-                                <EnteMenuItem
-                                    onClick={openModifyMapEnabled}
-                                    variant="toggle"
-                                    checked={mapEnabled}
-                                    label={t("map_settings")}
-                                />
-                            </MenuItemGroup>
-                        </Box>
-                    </Stack>
-                </Box>
+                <Stack px={"8px"} py="20px" spacing="24px">
+                    <Box>
+                        <MenuItemGroup>
+                            <EnteMenuItem
+                                onClick={openModifyMapEnabled}
+                                variant="toggle"
+                                checked={mapEnabled}
+                                label={t("map_settings")}
+                            />
+                        </MenuItemGroup>
+                    </Box>
+                </Stack>
             </Stack>
             <ModifyMapEnabled
                 open={modifyMapEnabledView}

From d5071628b6b48fe1c88d25da1cf2f4286d8e81fc Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 15:48:42 +0530
Subject: [PATCH 03/12] Consistent

---
 .../src/components/Sidebar/MapSetting.tsx     | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx
index 7791206181..30ff892d29 100644
--- a/web/apps/photos/src/components/Sidebar/MapSetting.tsx
+++ b/web/apps/photos/src/components/Sidebar/MapSetting.tsx
@@ -52,17 +52,15 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                     onRootClose={handleRootClose}
                 />
 
-                <Stack px={"8px"} py="20px" spacing="24px">
-                    <Box>
-                        <MenuItemGroup>
-                            <EnteMenuItem
-                                onClick={openModifyMapEnabled}
-                                variant="toggle"
-                                checked={mapEnabled}
-                                label={t("map_settings")}
-                            />
-                        </MenuItemGroup>
-                    </Box>
+                <Stack sx={{ px: "16px", py: "20px" }}>
+                    <MenuItemGroup>
+                        <EnteMenuItem
+                            onClick={openModifyMapEnabled}
+                            variant="toggle"
+                            checked={mapEnabled}
+                            label={t("enabled")}
+                        />
+                    </MenuItemGroup>
                 </Stack>
             </Stack>
             <ModifyMapEnabled

From 27aaf78499e6cbe21432f3a892752fbbd13768d4 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 15:59:06 +0530
Subject: [PATCH 04/12] Split off

---
 web/packages/base/components/Titlebar.tsx     |  2 +
 .../base/components/mui/SidebarDrawer.tsx     | 61 +++++++++++++++++++
 2 files changed, 63 insertions(+)

diff --git a/web/packages/base/components/Titlebar.tsx b/web/packages/base/components/Titlebar.tsx
index e46fb92ce0..e0bc6e6ff5 100644
--- a/web/packages/base/components/Titlebar.tsx
+++ b/web/packages/base/components/Titlebar.tsx
@@ -13,6 +13,8 @@ interface TitlebarProps {
     actionButton?: JSX.Element;
 }
 
+// TODO: Deprecated in favor of NestedSidebarDrawerTitlebar where possible (will
+// revisit the remaining use cases once those have migrated).
 export const Titlebar: React.FC<TitlebarProps> = ({
     title,
     caption,
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index 2f9bf86a7b..220d0a8b23 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -74,3 +74,64 @@ export const NestedSidebarDrawer: React.FC<
         />
     );
 };
+
+import { FlexWrapper } from "@ente/shared/components/Container";
+import ArrowBack from "@mui/icons-material/ArrowBack";
+import Close from "@mui/icons-material/Close";
+import { Box, IconButton, Typography } from "@mui/material";
+import React from "react";
+
+type NestedSidebarDrawerTitlebarProps = Pick<
+    NestedSidebarDrawerVisibilityProps,
+    "onClose" | "onRootClose"
+> & {
+    /** Title for the drawer. */
+    title: string;
+    /** An optional secondary caption shown below the title. */
+    caption?: string;
+    /**
+     * An optional action button shown alongwith the close button at the
+     * trailing edge of the sidebar.
+     */
+    actionButton?: React.ReactNode;
+};
+
+/**
+ * A bar with a title and back / close buttons, suitable for being used in
+ * tandem with a {@link SidebarDrawer}.
+ */
+export const NestedSidebarDrawerTitlebar: React.FC<
+    NestedSidebarDrawerTitlebarProps
+> = ({ title, caption, onClose, onRootClose, actionButton }) => {
+    return (
+        <>
+            <FlexWrapper
+                height={48}
+                alignItems={"center"}
+                justifyContent="space-between"
+            >
+                <IconButton onClick={onClose} color={"primary"}>
+                    <ArrowBack />
+                </IconButton>
+                <Box display={"flex"} gap="4px">
+                    {actionButton && actionButton}
+                    <IconButton onClick={onRootClose} color={"secondary"}>
+                        <Close />
+                    </IconButton>
+                </Box>
+            </FlexWrapper>
+            <Box py={0.5} px={2}>
+                <Typography variant="h3" fontWeight={"bold"}>
+                    {title}
+                </Typography>
+                <Typography
+                    variant="small"
+                    color="text.muted"
+                    sx={{ wordBreak: "break-all", minHeight: "17px" }}
+                >
+                    {caption}
+                </Typography>
+            </Box>
+        </>
+    );
+};

From f52420df201d0a1ef8a87ccb99be927d32f2ebeb Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 18:00:13 +0530
Subject: [PATCH 05/12] Shorten

---
 web/packages/base/components/Titlebar.tsx          |  2 +-
 web/packages/base/components/mui/SidebarDrawer.tsx | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/packages/base/components/Titlebar.tsx b/web/packages/base/components/Titlebar.tsx
index e0bc6e6ff5..1029dff467 100644
--- a/web/packages/base/components/Titlebar.tsx
+++ b/web/packages/base/components/Titlebar.tsx
@@ -13,7 +13,7 @@ interface TitlebarProps {
     actionButton?: JSX.Element;
 }
 
-// TODO: Deprecated in favor of NestedSidebarDrawerTitlebar where possible (will
+// TODO: Deprecated in favor of SidebarDrawerTitlebarProps where possible (will
 // revisit the remaining use cases once those have migrated).
 export const Titlebar: React.FC<TitlebarProps> = ({
     title,
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index 220d0a8b23..a6569f01dd 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -81,7 +81,7 @@ import Close from "@mui/icons-material/Close";
 import { Box, IconButton, Typography } from "@mui/material";
 import React from "react";
 
-type NestedSidebarDrawerTitlebarProps = Pick<
+type SidebarDrawerTitlebarProps = Pick<
     NestedSidebarDrawerVisibilityProps,
     "onClose" | "onRootClose"
 > & {
@@ -98,11 +98,15 @@ type NestedSidebarDrawerTitlebarProps = Pick<
 
 /**
  * A bar with a title and back / close buttons, suitable for being used in
- * tandem with a {@link SidebarDrawer}.
+ * tandem with a {@link NestedSidebarDrawer}.
  */
-export const NestedSidebarDrawerTitlebar: React.FC<
-    NestedSidebarDrawerTitlebarProps
-> = ({ title, caption, onClose, onRootClose, actionButton }) => {
+export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
+    title,
+    caption,
+    onClose,
+    onRootClose,
+    actionButton,
+}) => {
     return (
         <>
             <FlexWrapper

From 5311714bff3724804178f7fadc43a13af6a34e11 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 18:14:53 +0530
Subject: [PATCH 06/12] Don't rely on container

---
 web/apps/photos/src/components/Sidebar/MapSetting.tsx | 3 ++-
 web/packages/base/components/mui/SidebarDrawer.tsx    | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx
index 30ff892d29..5bd77b42ad 100644
--- a/web/apps/photos/src/components/Sidebar/MapSetting.tsx
+++ b/web/apps/photos/src/components/Sidebar/MapSetting.tsx
@@ -1,6 +1,7 @@
 import { MenuItemGroup } from "@/base/components/Menu";
 import {
     NestedSidebarDrawer,
+    SidebarDrawerTitlebar,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
@@ -46,7 +47,7 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
             onRootClose={handleRootClose}
         >
             <Stack spacing={"4px"} py={"12px"}>
-                <Titlebar
+                <SidebarDrawerTitlebar
                     onClose={onClose}
                     title={t("map")}
                     onRootClose={handleRootClose}
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index a6569f01dd..19a81bfbc9 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -1,4 +1,4 @@
-import { Drawer, styled, type DrawerProps } from "@mui/material";
+import { Drawer, Stack, styled, type DrawerProps } from "@mui/material";
 import type { ModalVisibilityProps } from "../utils/modal";
 
 /**
@@ -108,7 +108,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
     actionButton,
 }) => {
     return (
-        <>
+        <Stack sx={{ gap: "4px" }}>
             <FlexWrapper
                 height={48}
                 alignItems={"center"}
@@ -136,6 +136,6 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
                     {caption}
                 </Typography>
             </Box>
-        </>
+        </Stack>
     );
 };

From cbe7407c145063e9c126d0a11768fec6baf29c57 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 18:19:40 +0530
Subject: [PATCH 07/12] Dup

---
 web/packages/base/components/mui/Container.tsx     | 14 ++++++++++++++
 web/packages/base/components/mui/SidebarDrawer.tsx | 10 +++-------
 web/packages/new/photos/components/mui/index.tsx   |  2 ++
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/web/packages/base/components/mui/Container.tsx b/web/packages/base/components/mui/Container.tsx
index 45e6e2913e..d985fc033a 100644
--- a/web/packages/base/components/mui/Container.tsx
+++ b/web/packages/base/components/mui/Container.tsx
@@ -1,5 +1,19 @@
 import { styled } from "@mui/material";
 
+/**
+ * A flexbox with justify content set to space-between and center alignment.
+ *
+ * There is also another SpaceBetweenFlex in the old shared package, but that
+ * one also sets width: 100%. As such, that one should be considered deprecated
+ * and its uses moved to this one when possible (so that we can then see where
+ * the width: 100% is essential).
+ */
+export const SpaceBetweenFlex = styled("div")`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
 /**
  * A flex child that fills the entire flex direction, and shows its children
  * after centering them both vertically and horizontally.
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index 19a81bfbc9..e69cafce22 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -75,11 +75,11 @@ export const NestedSidebarDrawer: React.FC<
     );
 };
 
-import { FlexWrapper } from "@ente/shared/components/Container";
 import ArrowBack from "@mui/icons-material/ArrowBack";
 import Close from "@mui/icons-material/Close";
 import { Box, IconButton, Typography } from "@mui/material";
 import React from "react";
+import { SpaceBetweenFlex } from "./Container";
 
 type SidebarDrawerTitlebarProps = Pick<
     NestedSidebarDrawerVisibilityProps,
@@ -109,11 +109,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
 }) => {
     return (
         <Stack sx={{ gap: "4px" }}>
-            <FlexWrapper
-                height={48}
-                alignItems={"center"}
-                justifyContent="space-between"
-            >
+            <SpaceBetweenFlex sx={{ minHeight: "48px" }}>
                 <IconButton onClick={onClose} color={"primary"}>
                     <ArrowBack />
                 </IconButton>
@@ -123,7 +119,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
                         <Close />
                     </IconButton>
                 </Box>
-            </FlexWrapper>
+            </SpaceBetweenFlex>
             <Box py={0.5} px={2}>
                 <Typography variant="h3" fontWeight={"bold"}>
                     {title}
diff --git a/web/packages/new/photos/components/mui/index.tsx b/web/packages/new/photos/components/mui/index.tsx
index 735de83bd4..a3cd1d867c 100644
--- a/web/packages/new/photos/components/mui/index.tsx
+++ b/web/packages/new/photos/components/mui/index.tsx
@@ -19,6 +19,8 @@ export const FilledIconButton = styled(IconButton)(({ theme }) => ({
  * one also sets width: 100%. As such, that one should be considered deprecated
  * and its uses moved to this one when possible (so that we can then see where
  * the width: 100% is essential).
+ *
+ * TODO: Moved to base.
  */
 export const SpaceBetweenFlex = styled(Box)`
     display: flex;

From fd29a262101e59b57aa8e4ce0fa3de6f49e5fa73 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 18:22:45 +0530
Subject: [PATCH 08/12] Swap

---
 .../Collections/CollectionHeader.tsx           |  2 +-
 .../components/Upload/UploadTypeSelector.tsx   |  2 +-
 web/apps/photos/src/pages/shared-albums.tsx    |  2 +-
 .../CollectionMappingChoiceDialog.tsx          |  2 +-
 .../photos/components/CollectionSelector.tsx   |  3 ++-
 .../photos/components/gallery/PeopleHeader.tsx |  4 ++--
 .../new/photos/components/mui/index.tsx        | 18 +-----------------
 7 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionHeader.tsx b/web/apps/photos/src/components/Collections/CollectionHeader.tsx
index 505a557c84..706de41ac7 100644
--- a/web/apps/photos/src/components/Collections/CollectionHeader.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionHeader.tsx
@@ -1,5 +1,6 @@
 import { assertionFailed } from "@/base/assert";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
+import { SpaceBetweenFlex } from "@/base/components/mui/Container";
 import { useModalVisibility } from "@/base/components/utils/modal";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
@@ -8,7 +9,6 @@ import {
     GalleryItemsHeaderAdapter,
     GalleryItemsSummary,
 } from "@/new/photos/components/gallery/ListHeader";
-import { SpaceBetweenFlex } from "@/new/photos/components/mui";
 import {
     ALL_SECTION,
     HIDDEN_ITEMS_SECTION,
diff --git a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
index 3d267cab03..2aec5562f0 100644
--- a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
+++ b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
@@ -1,6 +1,6 @@
+import { SpaceBetweenFlex } from "@/base/components/mui/Container";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { useIsTouchscreen } from "@/base/hooks";
-import { SpaceBetweenFlex } from "@/new/photos/components/mui";
 import { DialogCloseIconButton } from "@/new/photos/components/mui/Dialog";
 import DialogTitleWithCloseButton, {
     dialogCloseHandler,
diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx
index 24ca230b2f..66b851dcb8 100644
--- a/web/apps/photos/src/pages/shared-albums.tsx
+++ b/web/apps/photos/src/pages/shared-albums.tsx
@@ -1,5 +1,6 @@
 import { EnteLogoSVG } from "@/base/components/EnteLogo";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
+import { SpaceBetweenFlex } from "@/base/components/mui/Container";
 import { NavbarBase, SelectionBar } from "@/base/components/Navbar";
 import { sharedCryptoWorker } from "@/base/crypto";
 import { useIsSmallWidth, useIsTouchscreen } from "@/base/hooks";
@@ -10,7 +11,6 @@ import {
     GalleryItemsHeaderAdapter,
     GalleryItemsSummary,
 } from "@/new/photos/components/gallery/ListHeader";
-import { SpaceBetweenFlex } from "@/new/photos/components/mui";
 import {
     ALL_SECTION,
     isHiddenCollection,
diff --git a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx
index eb52dd7aab..5859c2b8f5 100644
--- a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx
+++ b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx
@@ -1,3 +1,4 @@
+import { SpaceBetweenFlex } from "@/base/components/mui/Container";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import type { ModalVisibilityProps } from "@/base/components/utils/modal";
 import type { CollectionMapping } from "@/base/types/ipc";
@@ -12,7 +13,6 @@ import {
 } from "@mui/material";
 import { t } from "i18next";
 import React from "react";
-import { SpaceBetweenFlex } from "./mui";
 import { DialogCloseIconButton } from "./mui/Dialog";
 
 type CollectionMappingChoiceModalProps = ModalVisibilityProps & {
diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx
index cb052c7186..3619b3ab0a 100644
--- a/web/packages/new/photos/components/CollectionSelector.tsx
+++ b/web/packages/new/photos/components/CollectionSelector.tsx
@@ -1,3 +1,4 @@
+import { SpaceBetweenFlex } from "@/base/components/mui/Container";
 import type { ModalVisibilityProps } from "@/base/components/utils/modal";
 import type { Collection } from "@/media/collection";
 import {
@@ -24,7 +25,7 @@ import {
 } from "@mui/material";
 import { t } from "i18next";
 import React, { useEffect, useState } from "react";
-import { SpaceBetweenFlex, type ButtonishProps } from "./mui";
+import { type ButtonishProps } from "./mui";
 import { DialogCloseIconButton } from "./mui/Dialog";
 
 export type CollectionSelectorAction =
diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
index 79a17945c3..2629c9f868 100644
--- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx
+++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
@@ -2,7 +2,7 @@ import {
     ActivityIndicator,
     ErrorIndicator,
 } from "@/base/components/mui/ActivityIndicator";
-import { CenteredBox } from "@/base/components/mui/Container";
+import { CenteredBox, SpaceBetweenFlex } from "@/base/components/mui/Container";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
 import {
@@ -61,7 +61,7 @@ import { t } from "i18next";
 import React, { useEffect, useReducer, useState } from "react";
 import type { FaceCluster } from "../../services/ml/cluster";
 import { useAppContext } from "../../types/context";
-import { SpaceBetweenFlex, type ButtonishProps } from "../mui";
+import { type ButtonishProps } from "../mui";
 import { DialogCloseIconButton } from "../mui/Dialog";
 import { SuggestionFaceList } from "../PeopleList";
 import { SingleInputDialog } from "../SingleInputForm";
diff --git a/web/packages/new/photos/components/mui/index.tsx b/web/packages/new/photos/components/mui/index.tsx
index a3cd1d867c..f39034bd11 100644
--- a/web/packages/new/photos/components/mui/index.tsx
+++ b/web/packages/new/photos/components/mui/index.tsx
@@ -1,4 +1,4 @@
-import { Box, IconButton, styled } from "@mui/material";
+import { IconButton, styled } from "@mui/material";
 
 /** Convenience typed props for a component that acts like a push button. */
 export interface ButtonishProps {
@@ -11,19 +11,3 @@ export interface ButtonishProps {
 export const FilledIconButton = styled(IconButton)(({ theme }) => ({
     backgroundColor: theme.colors.fill.faint,
 }));
-
-/**
- * A flexbox with justify content set to space-between and center alignment.
- *
- * There is also another SpaceBetweenFlex in the old shared package, but that
- * one also sets width: 100%. As such, that one should be considered deprecated
- * and its uses moved to this one when possible (so that we can then see where
- * the width: 100% is essential).
- *
- * TODO: Moved to base.
- */
-export const SpaceBetweenFlex = styled(Box)`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;

From 6b0b5fc3ce3bac5f2ae5e8cb28476285d0d5b6bb Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 18:31:04 +0530
Subject: [PATCH 09/12] Touchups

---
 web/packages/base/components/mui/SidebarDrawer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index e69cafce22..c9425c4efc 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -120,7 +120,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
                     </IconButton>
                 </Box>
             </SpaceBetweenFlex>
-            <Box py={0.5} px={2}>
+            <Stack py={0.5} px={2}>
                 <Typography variant="h3" fontWeight={"bold"}>
                     {title}
                 </Typography>
@@ -131,7 +131,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
                 >
                     {caption}
                 </Typography>
-            </Box>
+            </Stack>
         </Stack>
     );
 };

From 0a122b9fed569244020b73bfe3252c8968126f45 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 18:47:33 +0530
Subject: [PATCH 10/12] Ditto

---
 .../components/Sidebar/AdvancedSettings.tsx   | 38 ++++----
 .../{MapSetting.tsx => MapSettings.tsx}       |  4 +-
 .../src/components/Sidebar/Preferences.tsx    | 89 ++++++++-----------
 .../components/Sidebar/TwoFactorSettings.tsx  |  8 +-
 .../base/components/mui/SidebarDrawer.tsx     | 74 +++++++--------
 .../new/photos/components/MLSettings.tsx      |  5 +-
 6 files changed, 101 insertions(+), 117 deletions(-)
 rename web/apps/photos/src/components/Sidebar/{MapSetting.tsx => MapSettings.tsx} (99%)

diff --git a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
index 8e1bac65f8..cbc5a1f016 100644
--- a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
@@ -1,12 +1,12 @@
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
 import {
     NestedSidebarDrawer,
+    SidebarDrawerTitlebar,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
-import { Titlebar } from "@/base/components/Titlebar";
 import { AppContext } from "@/new/photos/types/context";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import { t } from "i18next";
 import React, { useContext } from "react";
 
@@ -31,30 +31,28 @@ export const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
             {...{ open, onClose }}
             onRootClose={handleRootClose}
         >
-            <Stack spacing={"4px"} py={"12px"}>
-                <Titlebar
+            <Stack sx={{ gap: "4px", py: "12px" }}>
+                <SidebarDrawerTitlebar
                     onClose={onClose}
-                    title={t("advanced")}
                     onRootClose={handleRootClose}
+                    title={t("advanced")}
                 />
 
-                <Box px={"8px"}>
-                    <Stack py="20px" spacing="24px">
-                        <Box>
-                            <MenuItemGroup>
-                                <EnteMenuItem
-                                    variant="toggle"
-                                    checked={!appContext.isCFProxyDisabled}
-                                    onClick={toggleCFProxy}
-                                    label={t("FASTER_UPLOAD")}
-                                />
-                            </MenuItemGroup>
-                            <MenuSectionTitle
-                                title={t("FASTER_UPLOAD_DESCRIPTION")}
+                <Stack sx={{ px: "16px", py: "20px" }}>
+                    <Stack sx={{ gap: "4px" }}>
+                        <MenuItemGroup>
+                            <EnteMenuItem
+                                variant="toggle"
+                                checked={!appContext.isCFProxyDisabled}
+                                onClick={toggleCFProxy}
+                                label={t("FASTER_UPLOAD")}
                             />
-                        </Box>
+                        </MenuItemGroup>
+                        <MenuSectionTitle
+                            title={t("FASTER_UPLOAD_DESCRIPTION")}
+                        />
                     </Stack>
-                </Box>
+                </Stack>
             </Stack>
         </NestedSidebarDrawer>
     );
diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSettings.tsx
similarity index 99%
rename from web/apps/photos/src/components/Sidebar/MapSetting.tsx
rename to web/apps/photos/src/components/Sidebar/MapSettings.tsx
index 5bd77b42ad..c600dbf7b5 100644
--- a/web/apps/photos/src/components/Sidebar/MapSetting.tsx
+++ b/web/apps/photos/src/components/Sidebar/MapSettings.tsx
@@ -46,11 +46,11 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
             {...{ open, onClose }}
             onRootClose={handleRootClose}
         >
-            <Stack spacing={"4px"} py={"12px"}>
+            <Stack sx={{ gap: "4px", py: "12px" }}>
                 <SidebarDrawerTitlebar
                     onClose={onClose}
-                    title={t("map")}
                     onRootClose={handleRootClose}
+                    title={t("map")}
                 />
 
                 <Stack sx={{ px: "16px", py: "20px" }}>
diff --git a/web/apps/photos/src/components/Sidebar/Preferences.tsx b/web/apps/photos/src/components/Sidebar/Preferences.tsx
index 18f1545e2c..1fd9ec89fc 100644
--- a/web/apps/photos/src/components/Sidebar/Preferences.tsx
+++ b/web/apps/photos/src/components/Sidebar/Preferences.tsx
@@ -1,9 +1,9 @@
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
 import {
-    SidebarDrawer,
+    NestedSidebarDrawer,
+    SidebarDrawerTitlebar,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
-import { Titlebar } from "@/base/components/Titlebar";
 import { useModalVisibility } from "@/base/components/utils/modal";
 import {
     getLocaleInUse,
@@ -17,12 +17,12 @@ import { syncSettings } from "@/new/photos/services/settings";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import ChevronRight from "@mui/icons-material/ChevronRight";
 import ScienceIcon from "@mui/icons-material/Science";
-import { Box, DialogProps, Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import DropdownInput from "components/DropdownInput";
 import { t } from "i18next";
 import React, { useEffect } from "react";
 import { AdvancedSettings } from "./AdvancedSettings";
-import { MapSettings } from "./MapSetting";
+import { MapSettings } from "./MapSettings";
 
 export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
     open,
@@ -47,61 +47,42 @@ export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
         onRootClose();
     };
 
-    const handleDrawerClose: DialogProps["onClose"] = (_, reason) => {
-        console.log(reason);
-        if (reason === "backdropClick") {
-            handleRootClose();
-        } else {
-            onClose();
-        }
-    };
-
     return (
-        <SidebarDrawer
-            transitionDuration={0}
-            open={open}
-            onClose={handleDrawerClose}
-            // hideBackdrop
-            // BackdropProps={{
-            //     sx: { "&&&": { backgroundColor: "transparent" } },
-            // }}
-        >
-            <Stack spacing={"4px"} py={"12px"}>
-                <Titlebar
+        <NestedSidebarDrawer {...{ open, onClose }} onRootClose={onRootClose}>
+            <Stack sx={{ gap: "4px", py: "12px" }}>
+                <SidebarDrawerTitlebar
                     onClose={onClose}
                     title={t("preferences")}
                     onRootClose={handleRootClose}
                 />
-                <Box px={"8px"}>
-                    <Stack py="20px" spacing="24px">
-                        <LanguageSelector />
-                        <EnteMenuItem
-                            onClick={showMapSettings}
-                            endIcon={<ChevronRight />}
-                            label={t("map")}
-                        />
-                        <EnteMenuItem
-                            onClick={showAdvancedSettings}
-                            endIcon={<ChevronRight />}
-                            label={t("advanced")}
-                        />
-                        {isMLSupported && (
-                            <Box>
-                                <MenuSectionTitle
-                                    title={t("labs")}
-                                    icon={<ScienceIcon />}
+                <Stack sx={{ px: "16px", py: "20px", gap: "24px" }}>
+                    <LanguageSelector />
+                    <EnteMenuItem
+                        onClick={showMapSettings}
+                        endIcon={<ChevronRight />}
+                        label={t("map")}
+                    />
+                    <EnteMenuItem
+                        onClick={showAdvancedSettings}
+                        endIcon={<ChevronRight />}
+                        label={t("advanced")}
+                    />
+                    {isMLSupported && (
+                        <Box>
+                            <MenuSectionTitle
+                                title={t("labs")}
+                                icon={<ScienceIcon />}
+                            />
+                            <MenuItemGroup>
+                                <EnteMenuItem
+                                    endIcon={<ChevronRight />}
+                                    onClick={showMLSettings}
+                                    label={t("ml_search")}
                                 />
-                                <MenuItemGroup>
-                                    <EnteMenuItem
-                                        endIcon={<ChevronRight />}
-                                        onClick={showMLSettings}
-                                        label={t("ml_search")}
-                                    />
-                                </MenuItemGroup>
-                            </Box>
-                        )}
-                    </Stack>
-                </Box>
+                            </MenuItemGroup>
+                        </Box>
+                    )}
+                </Stack>
             </Stack>
             <MapSettings
                 {...mapSettingsVisibilityProps}
@@ -115,7 +96,7 @@ export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                 {...mlSettingsVisibilityProps}
                 onRootClose={handleRootClose}
             />
-        </SidebarDrawer>
+        </NestedSidebarDrawer>
     );
 };
 
diff --git a/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx b/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
index 953d22439a..3f508fbe2f 100644
--- a/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
@@ -1,9 +1,9 @@
 import { disableTwoFactor } from "@/accounts/api/user";
 import {
     NestedSidebarDrawer,
+    SidebarDrawerTitlebar,
     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 { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
@@ -62,11 +62,11 @@ export const TwoFactorSettings: React.FC<
             {...{ open, onClose }}
             onRootClose={handleRootClose}
         >
-            <Stack spacing={"4px"} py={"12px"}>
-                <Titlebar
+            <Stack sx={{ gap: "4px", py: "12px" }}>
+                <SidebarDrawerTitlebar
                     onClose={onClose}
-                    title={t("TWO_FACTOR_AUTHENTICATION")}
                     onRootClose={handleRootClose}
+                    title={t("TWO_FACTOR_AUTHENTICATION")}
                 />
                 {/* {component} */}
 
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index c9425c4efc..5ce5d12559 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -1,5 +1,17 @@
-import { Drawer, Stack, styled, type DrawerProps } from "@mui/material";
+import ArrowBack from "@mui/icons-material/ArrowBack";
+import Close from "@mui/icons-material/Close";
+import {
+    Box,
+    Drawer,
+    IconButton,
+    Stack,
+    styled,
+    Typography,
+    type DrawerProps,
+} from "@mui/material";
+import React from "react";
 import type { ModalVisibilityProps } from "../utils/modal";
+import { SpaceBetweenFlex } from "./Container";
 
 /**
  * A MUI {@link Drawer} with a standard set of styling that we use for our left
@@ -75,12 +87,6 @@ export const NestedSidebarDrawer: React.FC<
     );
 };
 
-import ArrowBack from "@mui/icons-material/ArrowBack";
-import Close from "@mui/icons-material/Close";
-import { Box, IconButton, Typography } from "@mui/material";
-import React from "react";
-import { SpaceBetweenFlex } from "./Container";
-
 type SidebarDrawerTitlebarProps = Pick<
     NestedSidebarDrawerVisibilityProps,
     "onClose" | "onRootClose"
@@ -106,32 +112,30 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
     onClose,
     onRootClose,
     actionButton,
-}) => {
-    return (
-        <Stack sx={{ gap: "4px" }}>
-            <SpaceBetweenFlex sx={{ minHeight: "48px" }}>
-                <IconButton onClick={onClose} color={"primary"}>
-                    <ArrowBack />
+}) => (
+    <Stack sx={{ gap: "4px" }}>
+        <SpaceBetweenFlex sx={{ minHeight: "48px" }}>
+            <IconButton onClick={onClose} color={"primary"}>
+                <ArrowBack />
+            </IconButton>
+            <Box display={"flex"} gap="4px">
+                {actionButton && actionButton}
+                <IconButton onClick={onRootClose} color={"secondary"}>
+                    <Close />
                 </IconButton>
-                <Box display={"flex"} gap="4px">
-                    {actionButton && actionButton}
-                    <IconButton onClick={onRootClose} color={"secondary"}>
-                        <Close />
-                    </IconButton>
-                </Box>
-            </SpaceBetweenFlex>
-            <Stack py={0.5} px={2}>
-                <Typography variant="h3" fontWeight={"bold"}>
-                    {title}
-                </Typography>
-                <Typography
-                    variant="small"
-                    color="text.muted"
-                    sx={{ wordBreak: "break-all", minHeight: "17px" }}
-                >
-                    {caption}
-                </Typography>
-            </Stack>
-        </Stack>
-    );
-};
+            </Box>
+        </SpaceBetweenFlex>
+        <Box sx={{ px: "16px", py: "4px" }}>
+            <Typography variant="h3" fontWeight={"bold"}>
+                {title}
+            </Typography>
+            <Typography
+                variant="small"
+                color="text.muted"
+                sx={{ wordBreak: "break-all", minHeight: "17px" }}
+            >
+                {caption}
+            </Typography>
+        </Box>
+    </Stack>
+);
diff --git a/web/packages/new/photos/components/MLSettings.tsx b/web/packages/new/photos/components/MLSettings.tsx
index f93c5341a3..65b07b28a2 100644
--- a/web/packages/new/photos/components/MLSettings.tsx
+++ b/web/packages/new/photos/components/MLSettings.tsx
@@ -2,6 +2,7 @@ import { MenuItemGroup } from "@/base/components/Menu";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import {
     NestedSidebarDrawer,
+    SidebarDrawerTitlebar,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
@@ -165,10 +166,10 @@ const FaceConsent: React.FC<FaceConsentProps> = ({
             onRootClose={handleRootClose}
         >
             <Stack spacing={"4px"} py={"12px"}>
-                <Titlebar
+                <SidebarDrawerTitlebar
                     onClose={onClose}
-                    title={t("ml_consent_title")}
                     onRootClose={handleRootClose}
+                    title={t("ml_consent_title")}
                 />
                 <Stack py={"20px"} px={"8px"} spacing={"32px"}>
                     <Typography component="div" color="text.muted" px={"8px"}>

From 23d739c38018d32f9453067441b328c64d5449f6 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 18:57:05 +0530
Subject: [PATCH 11/12] Tweak

---
 .../src/components/Sidebar/MapSettings.tsx    | 157 ++++++++++--------
 .../new/photos/components/MLSettings.tsx      |   7 +-
 2 files changed, 89 insertions(+), 75 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/MapSettings.tsx b/web/apps/photos/src/components/Sidebar/MapSettings.tsx
index c600dbf7b5..839e0ea5e9 100644
--- a/web/apps/photos/src/components/Sidebar/MapSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/MapSettings.tsx
@@ -1,11 +1,12 @@
 import { MenuItemGroup } from "@/base/components/Menu";
+import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import {
     NestedSidebarDrawer,
     SidebarDrawerTitlebar,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
-import { Titlebar } from "@/base/components/Titlebar";
 import log from "@/base/log";
+import type { ButtonishProps } from "@/new/photos/components/mui";
 import { AppContext } from "@/new/photos/types/context";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import { Box, Button, Link, Stack, Typography } from "@mui/material";
@@ -64,7 +65,7 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                     </MenuItemGroup>
                 </Stack>
             </Stack>
-            <ModifyMapEnabled
+            <ModifyMapSettings
                 open={modifyMapEnabledView}
                 mapEnabled={mapEnabled}
                 onClose={closeModifyMapEnabled}
@@ -74,7 +75,7 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
     );
 };
 
-const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
+const ModifyMapSettings = ({ open, onClose, onRootClose, mapEnabled }) => {
     const { somethingWentWrong, updateMapEnabled } = useContext(AppContext);
 
     const disableMap = async () => {
@@ -108,88 +109,102 @@ const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
             onRootClose={handleRootClose}
         >
             {mapEnabled ? (
-                <DisableMap
+                <ConfirmDisableMap
                     onClose={onClose}
-                    disableMap={disableMap}
                     onRootClose={handleRootClose}
+                    onClick={disableMap}
                 />
             ) : (
-                <EnableMap
+                <ConfirmEnableMap
                     onClose={onClose}
-                    enableMap={enableMap}
                     onRootClose={handleRootClose}
+                    onClick={enableMap}
                 />
             )}
         </NestedSidebarDrawer>
     );
 };
 
-function EnableMap({ onClose, enableMap, onRootClose }) {
-    return (
-        <Stack spacing={"4px"} py={"12px"}>
-            <Titlebar
-                onClose={onClose}
-                title={t("enable_maps_confirm")}
-                onRootClose={onRootClose}
-            />
-            <Stack py={"20px"} px={"8px"} spacing={"32px"}>
-                <Box px={"8px"}>
-                    {" "}
-                    <Typography color="text.muted">
-                        <Trans
-                            i18nKey={"enable_maps_confirm_message"}
-                            components={{
-                                a: (
-                                    <Link
-                                        target="_blank"
-                                        rel="noopener"
-                                        href="https://www.openstreetmap.org/"
-                                    />
-                                ),
-                            }}
-                        />
-                    </Typography>
-                </Box>
-                <Stack px={"8px"} spacing={"8px"}>
-                    <Button color={"accent"} size="large" onClick={enableMap}>
-                        {t("enable")}
-                    </Button>
-                    <Button color={"secondary"} size="large" onClick={onClose}>
-                        {t("cancel")}
-                    </Button>
-                </Stack>
+type ConfirmStepProps = Pick<
+    NestedSidebarDrawerVisibilityProps,
+    "onClose" | "onRootClose"
+> &
+    ButtonishProps;
+
+const ConfirmEnableMap: React.FC<ConfirmStepProps> = ({
+    onClose,
+    onRootClose,
+    onClick,
+}) => (
+    <Stack sx={{ gap: "4px", py: "12px" }}>
+        <SidebarDrawerTitlebar
+            onClose={onClose}
+            onRootClose={onRootClose}
+            title={t("enable_maps_confirm")}
+        />
+        <Stack py={"20px"} px={"8px"} spacing={"32px"}>
+            <Box px={"8px"}>
+                {" "}
+                <Typography color="text.muted">
+                    <Trans
+                        i18nKey={"enable_maps_confirm_message"}
+                        components={{
+                            a: (
+                                <Link
+                                    target="_blank"
+                                    rel="noopener"
+                                    href="https://www.openstreetmap.org/"
+                                />
+                            ),
+                        }}
+                    />
+                </Typography>
+            </Box>
+            <Stack px={"8px"} spacing={"8px"}>
+                <Button color={"accent"} size="large" onClick={onClick}>
+                    {t("enable")}
+                </Button>
+                <Button color={"secondary"} size="large" onClick={onClose}>
+                    {t("cancel")}
+                </Button>
             </Stack>
         </Stack>
-    );
-}
+    </Stack>
+);
 
-function DisableMap({ onClose, disableMap, onRootClose }) {
-    return (
-        <Stack spacing={"4px"} py={"12px"}>
-            <Titlebar
-                onClose={onClose}
-                title={t("disable_maps_confirm")}
-                onRootClose={onRootClose}
-            />
-            <Stack py={"20px"} px={"8px"} spacing={"32px"}>
-                <Box px={"8px"}>
-                    <Typography color="text.muted">
-                        <Trans i18nKey={"disable_maps_confirm_message"} />
-                    </Typography>
-                </Box>
-                <Stack px={"8px"} spacing={"8px"}>
-                    <Button
-                        color={"critical"}
-                        size="large"
-                        onClick={disableMap}
-                    >
-                        {t("disable")}
-                    </Button>
-                    <Button color={"secondary"} size="large" onClick={onClose}>
-                        {t("cancel")}
-                    </Button>
-                </Stack>
+const ConfirmDisableMap: React.FC<ConfirmStepProps> = ({
+    onClose,
+    onRootClose,
+    onClick,
+}) => (
+    <Stack sx={{ gap: "4px", py: "12px" }}>
+        <SidebarDrawerTitlebar
+            onClose={onClose}
+            onRootClose={onRootClose}
+            title={t("disable_maps_confirm")}
+        />
+        <Stack py={"20px"} px={"8px"} spacing={"32px"}>
+            <Box px={"8px"}>
+                <Typography color="text.muted">
+                    <Trans i18nKey={"disable_maps_confirm_message"} />
+                </Typography>
+            </Box>
+            <Stack px={"8px"} spacing={"8px"}>
+                <FocusVisibleButton
+                    color={"critical"}
+                    size="large"
+                    onClick={onClick}
+                >
+                    {t("disable")}
+                </FocusVisibleButton>
+                <FocusVisibleButton
+                    color={"secondary"}
+                    size="large"
+                    onClick={onClose}
+                >
+                    {t("cancel")}
+                </FocusVisibleButton>
             </Stack>
         </Stack>
-    );
-}
+    </Stack>
+);
diff --git a/web/packages/new/photos/components/MLSettings.tsx b/web/packages/new/photos/components/MLSettings.tsx
index 65b07b28a2..21a09ce312 100644
--- a/web/packages/new/photos/components/MLSettings.tsx
+++ b/web/packages/new/photos/components/MLSettings.tsx
@@ -5,7 +5,6 @@ import {
     SidebarDrawerTitlebar,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
-import { Titlebar } from "@/base/components/Titlebar";
 import { disableML, enableML, type MLStatus } from "@/new/photos/services/ml";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import {
@@ -68,11 +67,11 @@ export const MLSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                 {...{ open, onClose }}
                 onRootClose={handleRootClose}
             >
-                <Stack spacing={"4px"} py={"12px"}>
-                    <Titlebar
+                <Stack sx={{ gap: "4px", py: "12px" }}>
+                    <SidebarDrawerTitlebar
                         onClose={onClose}
-                        title={t("ml_search")}
                         onRootClose={handleRootClose}
+                        title={t("ml_search")}
                     />
                     {component}
                 </Stack>

From da0bee0cc4323231cf994da4b6123575851729da Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 4 Nov 2024 19:10:59 +0530
Subject: [PATCH 12/12] 2FA drawer

---
 .../components/Sidebar/TwoFactorSettings.tsx  | 80 ++++++-------------
 1 file changed, 24 insertions(+), 56 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx b/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
index 3f508fbe2f..6a81d53380 100644
--- a/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
@@ -1,4 +1,5 @@
 import { disableTwoFactor } from "@/accounts/api/user";
+import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
 import {
     NestedSidebarDrawer,
     SidebarDrawerTitlebar,
@@ -6,26 +7,16 @@ import {
 } from "@/base/components/mui/SidebarDrawer";
 import { AppContext } from "@/new/photos/types/context";
 import { VerticallyCentered } from "@ente/shared/components/Container";
+import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 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, Grid, Stack, Typography } from "@mui/material";
+import { Button, 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";
 
-// TODO: Revisit these comments
-// const TwoFactorDialog = styled(Dialog)(({ theme }) => ({
-//     "& .MuiDialogContent-root": {
-//         padding: theme.spacing(2, 4),
-//     },
-// }));
-
-// type TwoFactorModalProps = ModalVisibilityProps & {
-//     closeSidebar: () => void;
-// };
-
 export const TwoFactorSettings: React.FC<
     NestedSidebarDrawerVisibilityProps
 > = ({ open, onClose, onRootClose }) => {
@@ -68,9 +59,7 @@ export const TwoFactorSettings: React.FC<
                     onRootClose={handleRootClose}
                     title={t("TWO_FACTOR_AUTHENTICATION")}
                 />
-                {/* {component} */}
 
-                {/* <DialogContent sx={{ px: 4 }}> */}
                 {isTwoFactorEnabled ? (
                     <TwoFactorModalManageSection
                         closeDialog={handleRootClose}
@@ -78,7 +67,6 @@ export const TwoFactorSettings: React.FC<
                 ) : (
                     <TwoFactorModalSetupSection closeDialog={handleRootClose} />
                 )}
-                {/* </DialogContent> */}
             </Stack>
         </NestedSidebarDrawer>
     );
@@ -173,47 +161,27 @@ function TwoFactorModalManageSection(props: TwoFactorModalManageSectionProps) {
     };
 
     return (
-        <>
-            <Grid
-                mb={1.5}
-                rowSpacing={1}
-                container
-                alignItems="center"
-                justifyContent="center"
-            >
-                <Grid item sm={9} xs={12}>
-                    {t("UPDATE_TWO_FACTOR_LABEL")}
-                </Grid>
-                <Grid item sm={3} xs={12}>
-                    <Button
-                        color={"accent"}
+        <Stack sx={{ px: "16px", py: "20px", gap: "24px" }}>
+            <MenuItemGroup>
+                <EnteMenuItem
+                    onClick={warnTwoFactorDisable}
+                    variant="toggle"
+                    checked={true}
+                    label={t("enabled")}
+                />
+            </MenuItemGroup>
+
+            <div>
+                <MenuItemGroup>
+                    <EnteMenuItem
                         onClick={warnTwoFactorReconfigure}
-                        size="large"
-                    >
-                        {t("reconfigure")}
-                    </Button>
-                </Grid>
-            </Grid>
-            <Grid
-                rowSpacing={1}
-                container
-                alignItems="center"
-                justifyContent="center"
-            >
-                <Grid item sm={9} xs={12}>
-                    {t("DISABLE_TWO_FACTOR_LABEL")}{" "}
-                </Grid>
-
-                <Grid item sm={3} xs={12}>
-                    <Button
-                        color="critical"
-                        onClick={warnTwoFactorDisable}
-                        size="large"
-                    >
-                        {t("disable")}
-                    </Button>
-                </Grid>
-            </Grid>
-        </>
+                        variant="primary"
+                        checked={true}
+                        label={t("reconfigure")}
+                    />
+                </MenuItemGroup>
+                <MenuSectionTitle title={t("UPDATE_TWO_FACTOR_LABEL")} />
+            </div>
+        </Stack>
     );
 }