refactor: update App and MainMenu components for settings management

- Removed unused state and handlers related to the SettingsDialog in App.tsx to streamline the component.
- Added state management and conditional rendering for SettingsDialog in MainMenu.tsx, enhancing user experience and functionality.

Author: atyrode

src/frontend/src/App.tsx

@@ -13,7 +13,7 @@ import { useAppConfig } from "./hooks/useAppConfig";
 import DiscordButton from './ui/DiscordButton';
 import { MainMenuConfig } from './ui/MainMenu';
 import AuthDialog from './ui/AuthDialog';
-import SettingsDialog from './ui/SettingsDialog';
+// import SettingsDialog from './ui/SettingsDialog'; // Removed import
 import Collab from './lib/collab/Collab';
 
 // Utils
@@ -39,13 +39,14 @@ export default function App() {
     leaveSharedPad
   } = usePadTabs(isAuthenticated);
 
-  const [showSettingsModal, setShowSettingsModal] = useState(false);
+  // const [showSettingsModal, setShowSettingsModal] = useState(false); // Removed state
+  const [showPadsModal, setShowPadsModal] = useState(false); // Added state for PadsModal
   const [excalidrawAPI, excalidrawRefCallback] = useCallbackRefState<ExcalidrawImperativeAPI>();
 
 
-  const handleCloseSettingsModal = () => {
-    setShowSettingsModal(false);
-  };
+  // const handleCloseSettingsModal = () => { // Removed handler
+  //   setShowSettingsModal(false);
+  // };
 
   const handleOnScrollChange = () => {
     lockEmbeddables(excalidrawAPI?.getAppState());
@@ -84,19 +85,10 @@ export default function App() {
         <MainMenuConfig
           MainMenu={MainMenu}
           excalidrawAPI={excalidrawAPI}
-          showSettingsModal={showSettingsModal}
-          setShowSettingsModal={setShowSettingsModal}
         />
 
         {!isLoadingAuth && !isAuthenticated && (
-          <AuthDialog onClose={() => { }} />
-        )}
-
-        {showSettingsModal && (
-          <SettingsDialog
-            excalidrawAPI={excalidrawAPI}
-            onClose={handleCloseSettingsModal}
-          />
+          <AuthDialog />
         )}
 
         {excalidrawAPI && (

src/frontend/src/ui/MainMenu.tsx

@@ -6,6 +6,9 @@ import type { MainMenu as MainMenuType } from '@atyrode/excalidraw';
 import { LogOut, SquarePlus, LayoutDashboard, User, Text, Settings, Terminal, FileText, FlaskConical } from 'lucide-react';
 import md5 from 'crypto-js/md5';
 
+// Components
+import SettingsDialog from './SettingsDialog'; // Added import
+
 import { useLogout } from '../hooks/useLogout';
 import { useAuthStatus } from '../hooks/useAuthStatus';
 
@@ -25,19 +28,15 @@ const getGravatarUrl = (email: string, size = 32) => {
 interface MainMenuConfigProps {
   MainMenu: typeof MainMenuType;
   excalidrawAPI: ExcalidrawImperativeAPI | null;
-  showPadsModal: boolean;
-  setShowPadsModal: (show: boolean) => void;
-  showSettingsModal?: boolean;
-  setShowSettingsModal?: (show: boolean) => void;
 }
 
 export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
   MainMenu,
   excalidrawAPI,
-  setShowPadsModal,
-  setShowSettingsModal = (show: boolean) => {},
 }) => {
   const [showAccountModal, setShowAccountModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
+
   const { mutate: logoutMutation, isPending: isLoggingOut } = useLogout();
   const { user, isLoading, isError } = useAuthStatus();
 
@@ -132,13 +131,13 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
     });
   };
 
-  const handleManagePadsClick = () => {
-    setShowPadsModal(true);
-  };
-
   const handleSettingsClick = () => {
     setShowSettingsModal(true);
   };
+
+  const handleCloseSettingsModal = () => { // Added handler to close settings modal
+    setShowSettingsModal(false);
+  };
 
   const handleAccountClick = () => {
     setShowAccountModal(true);
@@ -205,6 +204,12 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
           onClose={() => setShowAccountModal(false)} 
         />
       )}
+      {showSettingsModal && ( // Added conditional rendering for SettingsDialog
+        <SettingsDialog
+          excalidrawAPI={excalidrawAPI}
+          onClose={handleCloseSettingsModal}
+        />
+      )}
       <MainMenu>
         <div className="main-menu__top-row">
           <span className="main-menu__label" style={{ gap: 0.2 }}>
@@ -227,12 +232,6 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
         <MainMenu.DefaultItems.LoadScene />
         <MainMenu.DefaultItems.Export />
         <MainMenu.DefaultItems.SaveAsImage />
-        <MainMenu.Item
-          icon={<FileText />}
-          onClick={handleManagePadsClick}
-        >
-          Manage pads...
-        </MainMenu.Item>
         <MainMenu.DefaultItems.ClearCanvas />
       </MainMenu.Group>