feat: add SettingsDialog and integrate into ExcalidrawWrapper and MainMenu

- Introduced a new SettingsDialog component for managing application settings.
- Updated ExcalidrawWrapper to handle the visibility of the SettingsDialog.
- Enhanced MainMenu to include a Settings option that triggers the SettingsDialog.
- Added corresponding styles for the SettingsDialog to ensure a cohesive UI experience.

Author: atyrode

src/frontend/src/ExcalidrawWrapper.tsx

@@ -8,6 +8,7 @@ import { MainMenuConfig } from './ui/MainMenu';
 import { lockEmbeddables, renderCustomEmbeddable } from './CustomEmbeddableRenderer';
 import AuthDialog from './ui/AuthDialog';
 import BackupsModal from './ui/BackupsDialog';
+import SettingsDialog from './ui/SettingsDialog';
 
 const defaultInitialData = {
   elements: [],
@@ -47,8 +48,9 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
   // Add state for modal animation
   const [isExiting, setIsExiting] = useState(false);
 
-  // State for BackupsModal
+  // State for modals
   const [showBackupsModal, setShowBackupsModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
 
   // Handle auth state changes
   useEffect(() => {
@@ -57,11 +59,15 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
     }
   }, [isAuthenticated]);
 
-  // Handler for closing the backups modal
+  // Handlers for closing modals
   const handleCloseBackupsModal = () => {
     setShowBackupsModal(false);
   };
 
+  const handleCloseSettingsModal = () => {
+    setShowSettingsModal(false);
+  };
+  
   const renderExcalidraw = (children: React.ReactNode) => {
     const Excalidraw = Children.toArray(children).find(
       (child: any) =>
@@ -98,6 +104,8 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
           excalidrawAPI={excalidrawAPI} 
           showBackupsModal={showBackupsModal}
           setShowBackupsModal={setShowBackupsModal}
+          showSettingsModal={showSettingsModal}
+          setShowSettingsModal={setShowSettingsModal}
         />
         {!isAuthLoading && isAuthenticated === false && (
           <AuthDialog 
@@ -111,6 +119,12 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
             onClose={handleCloseBackupsModal}
           />
         )}
+        
+        {showSettingsModal && (
+          <SettingsDialog
+            onClose={handleCloseSettingsModal}
+          />
+        )}
       </>
     );
   };

src/frontend/src/ui/MainMenu.tsx

@@ -3,24 +3,29 @@ import React, { useState } from 'react';
 import type { ExcalidrawImperativeAPI } from '@atyrode/excalidraw/types';
 import type { MainMenu as MainMenuType } from '@atyrode/excalidraw';
 
-import { LogOut, SquarePlus, LayoutDashboard, SquareCode, Eye, Coffee, Grid2x2, User, Text, ArchiveRestore } from 'lucide-react';
+import { LogOut, SquarePlus, LayoutDashboard, SquareCode, Eye, Coffee, Grid2x2, User, Text, ArchiveRestore, Settings } from 'lucide-react';
 import { capture } from '../utils/posthog';
 import { ExcalidrawElementFactory, PlacementMode } from '../lib/ExcalidrawElementFactory';
 import { useUserProfile } from "../api/hooks";
 import { queryClient } from "../api/queryClient";
+import SettingsDialog from "./SettingsDialog";
 import "./MainMenu.scss";
 interface MainMenuConfigProps {
   MainMenu: typeof MainMenuType;
   excalidrawAPI: ExcalidrawImperativeAPI | null;
   showBackupsModal: boolean;
   setShowBackupsModal: (show: boolean) => void;
+  showSettingsModal?: boolean;
+  setShowSettingsModal?: (show: boolean) => void;
 }
 
 export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
   MainMenu,
   excalidrawAPI,
   showBackupsModal,
   setShowBackupsModal,
+  showSettingsModal = false,
+  setShowSettingsModal = (show: boolean) => {},
 }) => {
   const { data, isLoading, isError } = useUserProfile();
 
@@ -100,6 +105,10 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
     setShowBackupsModal(true);
   };
 
+  const handleSettingsClick = () => {
+    setShowSettingsModal(true);
+  };
+
   const handleGridToggle = () => {
     if (!excalidrawAPI) return;
     const appState = excalidrawAPI.getAppState();
@@ -207,6 +216,13 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
 
       <MainMenu.Separator />
 
+      <MainMenu.Item
+          icon={<Settings />}
+          onClick={handleSettingsClick}
+        >
+          Settings
+        </MainMenu.Item>
+      
       <MainMenu.Item
           icon={<LogOut />}
           onClick={async () => {

src/frontend/src/ui/SettingsDialog.scss

@@ -0,0 +1,40 @@
+.settings-dialog {
+  &__wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(1px);
+  }
+
+  &__title-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+
+  &__content {
+    padding: 1rem;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #888;
+    font-style: italic;
+  }
+}

src/frontend/src/ui/SettingsDialog.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useCallback } from "react";
+import { Dialog } from "@atyrode/excalidraw";
+import "./SettingsDialog.scss";
+
+interface SettingsDialogProps {
+  onClose?: () => void;
+}
+
+const SettingsDialog: React.FC<SettingsDialogProps> = ({
+  onClose,
+}) => {
+  const [modalIsShown, setModalIsShown] = useState(true);
+
+  const handleClose = useCallback(() => {
+    setModalIsShown(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  // Dialog content
+  const dialogContent = (
+    <div className="settings-dialog__content">
+      {/* Settings content will go here in the future */}
+      <div className="settings-dialog__empty">Settings dialog is empty for now</div>
+    </div>
+  );
+
+  return (
+    <>
+      {modalIsShown && (
+        <div className="settings-dialog__wrapper">
+          <Dialog
+            className="settings-dialog"
+            size="small"
+            onCloseRequest={handleClose}
+            title={
+              <div className="settings-dialog__title-container">
+                <h2 className="settings-dialog__title">Settings</h2>
+              </div>
+            }
+            closeOnClickOutside={true}
+            children={dialogContent}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SettingsDialog;