Toggle Button added

apps/photos/src/components/Sidebar/AdvancedMapSetting.tsx

@@ -1,18 +1,16 @@
-import ChevronRight from '@mui/icons-material/ChevronRight';
-// import ScienceIcon from '@mui/icons-material/Science';
 import { Box, DialogProps, Stack } from '@mui/material';
 import { EnteDrawer } from 'components/EnteDrawer';
-// import MLSearchSettings from 'components/MachineLearning/MLSearchSettings';
-// import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
 import Titlebar from 'components/Titlebar';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
 import { MenuItemGroup } from 'components/Menu/MenuItemGroup';
 import MapSettings from './MapSettings';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
 
-export default function AdvancedMApSettings({ open, onClose, onRootClose }) {
+export default function AdvancedMapSettings({ open, onClose, onRootClose }) {
     const [mapSettingsView, setMapSettingsView] = useState(false);
+    const [mapEnabledToggle, setMapEnabledToggle] = useState(false);
 
     const openMapSettings = () => setMapSettingsView(true);
     const closeMapSettings = () => setMapSettingsView(false);
@@ -29,6 +27,10 @@ export default function AdvancedMApSettings({ open, onClose, onRootClose }) {
             onClose();
         }
     };
+    useEffect(() => {
+        const mapEnabledValue = getData(LS_KEYS.MAPENABLED);
+        setMapEnabledToggle(mapEnabledValue.mapEnabled);
+    }, [mapSettingsView]);
 
     return (
         <EnteDrawer
@@ -48,14 +50,11 @@ export default function AdvancedMApSettings({ open, onClose, onRootClose }) {
                 <Box px={'8px'}>
                     <Stack py="20px" spacing="24px">
                         <Box>
-                            {/* <MenuSectionTitle
-                                title={t('LABS')}
-                                icon={<ScienceIcon />}
-                            /> */}
                             <MenuItemGroup>
                                 <EnteMenuItem
-                                    endIcon={<ChevronRight />}
                                     onClick={openMapSettings}
+                                    variant="toggle"
+                                    checked={mapEnabledToggle}
                                     label={t('Map Settings')}
                                 />
                             </MenuItemGroup>

apps/photos/src/components/Sidebar/DisableMap.tsx

@@ -0,0 +1,46 @@
+import { Stack, Box, Button, Typography } from '@mui/material';
+import Titlebar from 'components/Titlebar';
+import { Trans } from 'react-i18next';
+import { t } from 'i18next';
+
+export default function EnableMap({ onClose, disableMap, onRootClose }) {
+    return (
+        <Stack spacing={'4px'} py={'12px'}>
+            <Titlebar
+                onClose={onClose}
+                title={t('Disable Maps?')}
+                onRootClose={onRootClose}
+            />
+            <Stack py={'20px'} px={'8px'} spacing={'32px'}>
+                <Box px={'8px'}>
+                    {' '}
+                    <Typography color="text.muted">
+                        <Trans
+                            i18nKey={
+                                'This will disable the display of your photos on a world map.'
+                            }
+                        />
+                        <br />
+                        <br />
+                        <Trans
+                            i18nKey={
+                                'You can enable this feature anytime from Settings.'
+                            }
+                        />
+                    </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>
+            </Stack>
+        </Stack>
+    );
+}

apps/photos/src/components/Sidebar/EnableMap.tsx

@@ -8,7 +8,7 @@ export default function EnableMap({ onClose, enableMap, onRootClose }) {
         <Stack spacing={'4px'} py={'12px'}>
             <Titlebar
                 onClose={onClose}
-                title={t('Map Settings')}
+                title={t('Enable Maps?')}
                 onRootClose={onRootClose}
             />
             <Stack py={'20px'} px={'8px'} spacing={'32px'}>

apps/photos/src/components/Sidebar/MangeMapEnabled.tsx

@@ -1,27 +0,0 @@
-import { Stack, Box } from '@mui/material';
-import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
-import { MenuItemGroup } from 'components/Menu/MenuItemGroup';
-import Titlebar from 'components/Titlebar';
-import { t } from 'i18next';
-
-export default function ManageMapEnabled({ onClose, disableMap, onRootClose }) {
-    return (
-        <Stack spacing={'4px'} py={'12px'}>
-            <Titlebar
-                onClose={onClose}
-                title={t('Map Settings')}
-                onRootClose={onRootClose}
-            />
-            <Box px={'16px'}>
-                <Stack py={'20px'} spacing={'24px'}>
-                    <MenuItemGroup>
-                        <EnteMenuItem
-                            onClick={disableMap}
-                            label={t('Disable Map')}
-                        />
-                    </MenuItemGroup>
-                </Stack>
-            </Box>
-        </Stack>
-    );
-}

apps/photos/src/components/Sidebar/MapSettings.tsx

@@ -4,10 +4,8 @@ import { AppContext } from 'pages/_app';
 import { useContext, useState, useEffect } from 'react';
 import { logError } from 'utils/sentry';
 import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
-
-// import EnableMapDialog from './EnableMapDialog';
-import ManageMapEnabled from './MangeMapEnabled';
 import EnableMap from './EnableMap';
+import DisableMap from './DisableMap';
 
 const MapSettings = ({ open, onClose, onRootClose }) => {
     const { somethingWentWrong } = useContext(AppContext);
@@ -76,7 +74,7 @@ const MapSettings = ({ open, onClose, onRootClose }) => {
                     sx: { '&&&': { backgroundColor: 'transparent' } },
                 }}>
                 {mapEnabled ? (
-                    <ManageMapEnabled
+                    <DisableMap
                         onClose={onClose}
                         disableMap={disableMap}
                         onRootClose={handleRootClose}