From 8830a60ecfcaebde544b6e80781b5bd231b3ca29 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 10 Jul 2024 13:34:54 +0530
Subject: [PATCH] Move up

---
 .../components/Sidebar/AdvancedSettings.tsx   | 85 +------------------
 .../src/components/Sidebar/Preferences.tsx    | 48 +++++++++--
 .../new/photos/components/MLSettings.tsx      | 47 ++++++++++
 3 files changed, 91 insertions(+), 89 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
index 20552ed655..5810834636 100644
--- a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
@@ -1,23 +1,14 @@
-import { MLSettings } from "@/new/photos/components/MLSettings";
 import { EnteDrawer } from "@/new/shared/components/EnteDrawer";
 import { MenuItemGroup, MenuSectionTitle } from "@/new/shared/components/Menu";
 import { Titlebar } from "@/new/shared/components/Titlebar";
-import { pt } from "@/next/i18n";
 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 { t } from "i18next";
-import isElectron from "is-electron";
 import { AppContext } from "pages/_app";
-import { useContext, useState } from "react";
+import { useContext } from "react";
 
 export default function AdvancedSettings({ open, onClose, onRootClose }) {
     const appContext = useContext(AppContext);
-    const [mlSearchSettingsView, setMlSearchSettingsView] = useState(false);
-
-    const openMlSearchSettings = () => setMlSearchSettingsView(true);
-    const closeMlSearchSettings = () => setMlSearchSettingsView(false);
 
     const handleRootClose = () => {
         onClose();
@@ -36,18 +27,6 @@ export default function AdvancedSettings({ open, onClose, onRootClose }) {
         appContext.setIsCFProxyDisabled(!appContext.isCFProxyDisabled);
     };
 
-    // TODO-ML:
-    // const [indexingStatus, setIndexingStatus] = useState<CLIPIndexingStatus>({
-    //     indexed: 0,
-    //     pending: 0,
-    // });
-
-    // useEffect(() => {
-    //     clipService.setOnUpdateHandler(setIndexingStatus);
-    //     clipService.getIndexingStatus().then((st) => setIndexingStatus(st));
-    //     return () => clipService.setOnUpdateHandler(undefined);
-    // }, []);
-
     return (
         <EnteDrawer
             transitionDuration={0}
@@ -66,26 +45,6 @@ export default function AdvancedSettings({ open, onClose, onRootClose }) {
 
                 <Box px={"8px"}>
                     <Stack py="20px" spacing="24px">
-                        {isElectron() && (
-                            <Box>
-                                <MenuSectionTitle
-                                    title={t("LABS")}
-                                    icon={<ScienceIcon />}
-                                />
-                                <MenuItemGroup>
-                                    <EnteMenuItem
-                                        endIcon={<ChevronRight />}
-                                        onClick={openMlSearchSettings}
-                                        label={pt("ML search")}
-                                    />
-                                </MenuItemGroup>
-                                <MenuSectionTitle
-                                    title={pt(
-                                        "Face recognition, magic search and more",
-                                    )}
-                                />
-                            </Box>
-                        )}
                         <Box>
                             <MenuItemGroup>
                                 <EnteMenuItem
@@ -99,51 +58,9 @@ export default function AdvancedSettings({ open, onClose, onRootClose }) {
                                 title={t("FASTER_UPLOAD_DESCRIPTION")}
                             />
                         </Box>
-
-                        {/* TODO-ML: isElectron() && (
-                            <Box>
-                                <MenuSectionTitle
-                                    title={t("MAGIC_SEARCH_STATUS")}
-                                />
-                                <Stack py={"12px"} px={"12px"} spacing={"24px"}>
-                                    <VerticallyCenteredFlex
-                                        justifyContent="space-between"
-                                        alignItems={"center"}
-                                    >
-                                        <Typography>
-                                            {t("INDEXED_ITEMS")}
-                                        </Typography>
-                                        <Typography>
-                                            {formatNumber(
-                                                indexingStatus.indexed,
-                                            )}
-                                        </Typography>
-                                    </VerticallyCenteredFlex>
-                                    <VerticallyCenteredFlex
-                                        justifyContent="space-between"
-                                        alignItems={"center"}
-                                    >
-                                        <Typography>
-                                            {t("PENDING_ITEMS")}
-                                        </Typography>
-                                        <Typography>
-                                            {formatNumber(
-                                                indexingStatus.pending,
-                                            )}
-                                        </Typography>
-                                    </VerticallyCenteredFlex>
-                                </Stack>
-                            </Box>
-                        )*/}
                     </Stack>
                 </Box>
             </Stack>
-            <MLSettings
-                open={mlSearchSettingsView}
-                onClose={closeMlSearchSettings}
-                onRootClose={handleRootClose}
-                appContext={appContext}
-            />
         </EnteDrawer>
     );
 }
diff --git a/web/apps/photos/src/components/Sidebar/Preferences.tsx b/web/apps/photos/src/components/Sidebar/Preferences.tsx
index ac6e9ecb57..0889af6ecc 100644
--- a/web/apps/photos/src/components/Sidebar/Preferences.tsx
+++ b/web/apps/photos/src/components/Sidebar/Preferences.tsx
@@ -1,23 +1,35 @@
+import { MLSettings } from "@/new/photos/components/MLSettings";
 import { EnteDrawer } from "@/new/shared/components/EnteDrawer";
+import { MenuItemGroup, MenuSectionTitle } from "@/new/shared/components/Menu";
 import { Titlebar } from "@/new/shared/components/Titlebar";
 import {
     getLocaleInUse,
+    pt,
     setLocaleInUse,
     supportedLocales,
     type SupportedLocale,
 } from "@/next/i18n";
 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 DropdownInput from "components/DropdownInput";
 import { t } from "i18next";
-import { useState } from "react";
+import isElectron from "is-electron";
+import { AppContext } from "pages/_app";
+import { useContext, useState } from "react";
 import AdvancedSettings from "./AdvancedSettings";
 import MapSettings from "./MapSetting";
 
 export default function Preferences({ open, onClose, onRootClose }) {
+    const appContext = useContext(AppContext);
+
     const [advancedSettingsView, setAdvancedSettingsView] = useState(false);
     const [mapSettingsView, setMapSettingsView] = useState(false);
+    const [mlSearchSettingsView, setMlSearchSettingsView] = useState(false);
+
+    const openMlSearchSettings = () => setMlSearchSettingsView(true);
+    const closeMlSearchSettings = () => setMlSearchSettingsView(false);
 
     const openAdvancedSettings = () => setAdvancedSettingsView(true);
     const closeAdvancedSettings = () => setAdvancedSettingsView(false);
@@ -66,19 +78,45 @@ export default function Preferences({ open, onClose, onRootClose }) {
                             endIcon={<ChevronRight />}
                             label={t("ADVANCED")}
                         />
+                        {isElectron() && (
+                            <Box>
+                                <MenuSectionTitle
+                                    title={t("LABS")}
+                                    icon={<ScienceIcon />}
+                                />
+                                <MenuItemGroup>
+                                    <EnteMenuItem
+                                        endIcon={<ChevronRight />}
+                                        onClick={openMlSearchSettings}
+                                        label={pt("ML search")}
+                                    />
+                                </MenuItemGroup>
+                                <MenuSectionTitle
+                                    title={pt(
+                                        "Face recognition, magic search and more",
+                                    )}
+                                />
+                            </Box>
+                        )}
                     </Stack>
                 </Box>
             </Stack>
-            <AdvancedSettings
-                open={advancedSettingsView}
-                onClose={closeAdvancedSettings}
-                onRootClose={onRootClose}
+            <MLSettings
+                open={mlSearchSettingsView}
+                onClose={closeMlSearchSettings}
+                onRootClose={handleRootClose}
+                appContext={appContext}
             />
             <MapSettings
                 open={mapSettingsView}
                 onClose={closeMapSettings}
                 onRootClose={onRootClose}
             />
+            <AdvancedSettings
+                open={advancedSettingsView}
+                onClose={closeAdvancedSettings}
+                onRootClose={onRootClose}
+            />
         </EnteDrawer>
     );
 }
diff --git a/web/packages/new/photos/components/MLSettings.tsx b/web/packages/new/photos/components/MLSettings.tsx
index 8553ac0b75..07db162c1a 100644
--- a/web/packages/new/photos/components/MLSettings.tsx
+++ b/web/packages/new/photos/components/MLSettings.tsx
@@ -138,6 +138,53 @@ export const MLSettings: React.FC<MLSettingsProps> = ({
         }
     };
 
+    // TODO-ML:
+    // const [indexingStatus, setIndexingStatus] = useState<CLIPIndexingStatus>({
+    //     indexed: 0,
+    //     pending: 0,
+    // });
+
+    // useEffect(() => {
+    //     clipService.setOnUpdateHandler(setIndexingStatus);
+    //     clipService.getIndexingStatus().then((st) => setIndexingStatus(st));
+    //     return () => clipService.setOnUpdateHandler(undefined);
+    // }, []);
+    /* TODO-ML: isElectron() && (
+        <Box>
+            <MenuSectionTitle
+                title={t("MAGIC_SEARCH_STATUS")}
+            />
+            <Stack py={"12px"} px={"12px"} spacing={"24px"}>
+                <VerticallyCenteredFlex
+                    justifyContent="space-between"
+                    alignItems={"center"}
+                >
+                    <Typography>
+                        {t("INDEXED_ITEMS")}
+                    </Typography>
+                    <Typography>
+                        {formatNumber(
+                            indexingStatus.indexed,
+                        )}
+                    </Typography>
+                </VerticallyCenteredFlex>
+                <VerticallyCenteredFlex
+                    justifyContent="space-between"
+                    alignItems={"center"}
+                >
+                    <Typography>
+                        {t("PENDING_ITEMS")}
+                    </Typography>
+                    <Typography>
+                        {formatNumber(
+                            indexingStatus.pending,
+                        )}
+                    </Typography>
+                </VerticallyCenteredFlex>
+            </Stack>
+        </Box>
+    )*/
+
     return (
         <Box>
             <EnteDrawer