feat: integrate BackupsModal into ExcalidrawWrapper and MainMenu

- Added BackupsModal component to ExcalidrawWrapper for managing canvas backups.
- Updated MainMenuConfig to include handlers for showing and closing the BackupsModal.
- Enhanced styles for the AuthDialog and BackupsModal to improve UI consistency.
- Adjusted BackupsModal properties for better user interaction, including size and close behavior.

Author: atyrode

src/frontend/src/ExcalidrawWrapper.tsx

@@ -7,6 +7,7 @@ import type { AppState } from '@atyrode/excalidraw/types';
 import { MainMenuConfig } from './ui/MainMenu';
 import { renderCustomEmbeddable } from './CustomEmbeddableRenderer';
 import AuthDialog from './ui/AuthDialog';
+import BackupsModal from './ui/BackupsDialog';
 
 const defaultInitialData = {
   elements: [],
@@ -44,13 +45,21 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
   // Add state for modal animation
   const [isExiting, setIsExiting] = useState(false);
 
+  // State for BackupsModal
+  const [showBackupsModal, setShowBackupsModal] = useState(false);
+  
   // Handle auth state changes
   useEffect(() => {
     if (isAuthenticated === true) {
       setIsExiting(true);
     }
   }, [isAuthenticated]);
 
+  // Handler for closing the backups modal
+  const handleCloseBackupsModal = () => {
+    setShowBackupsModal(false);
+  };
+  
   const renderExcalidraw = (children: React.ReactNode) => {
     const Excalidraw = Children.toArray(children).find(
       (child: any) =>
@@ -81,12 +90,24 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
         )),
       },
       <>
-        <MainMenuConfig MainMenu={MainMenu} excalidrawAPI={excalidrawAPI} />
+        <MainMenuConfig 
+          MainMenu={MainMenu} 
+          excalidrawAPI={excalidrawAPI} 
+          showBackupsModal={showBackupsModal}
+          setShowBackupsModal={setShowBackupsModal}
+        />
         {!isAuthLoading && isAuthenticated === false && (
           <AuthDialog 
             onClose={() => {}}
           />
         )}
+        
+        {showBackupsModal && (
+          <BackupsModal
+            excalidrawAPI={excalidrawAPI}
+            onClose={handleCloseBackupsModal}
+          />
+        )}
       </>
     );
   };

src/frontend/src/styles/AuthDialog.scss

@@ -1,5 +1,13 @@
 /* Auth Modal Styles */
 
+.excalidraw .Dialog--fullscreen {
+  &.auth-modal, .auth-modal {
+    .Dialog__close {
+        display: none;
+    }
+  }
+}
+
 .excalidraw .Dialog--fullscreen {
   .auth-modal {
     &__logo-container {

src/frontend/src/styles/index.scss

@@ -55,12 +55,6 @@ body {
     font-size: 15px !important;
 }
 
-.excalidraw .Dialog--fullscreen {
-    .Dialog__close {
-        display: none;
-    }
-}
-
 .excalidraw .Modal__background {
     background-color: rgba(0, 0, 0, 0);
     backdrop-filter: blur(0px);

src/frontend/src/ui/BackupsDialog.tsx

@@ -109,14 +109,14 @@ const BackupsModal: React.FC<BackupsModalProps> = ({
         <div className="backups-modal__wrapper">
           <Dialog
             className="backups-modal"
-            size="small"
+            size="regular"
             onCloseRequest={handleClose}
             title={
               <div className="backups-modal__title-container">
                 <h2 className="backups-modal__title">Canvas Backups</h2>
               </div>
             }
-            closeOnClickOutside={false}
+            closeOnClickOutside={true}
             children={dialogContent}
           />
         </div>

src/frontend/src/ui/MainMenu.tsx

@@ -4,7 +4,6 @@ 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 BackupsModal from './BackupsDialog';
 import { capture } from '../utils/posthog';
 import { ExcalidrawElementFactory, PlacementMode } from '../lib/ExcalidrawElementFactory';
 import { useUserProfile } from "../api/hooks";
@@ -13,11 +12,15 @@ import { queryClient } from "../api/queryClient";
 interface MainMenuConfigProps {
   MainMenu: typeof MainMenuType;
   excalidrawAPI: ExcalidrawImperativeAPI | null;
+  showBackupsModal: boolean;
+  setShowBackupsModal: (show: boolean) => void;
 }
 
 export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
   MainMenu,
   excalidrawAPI,
+  showBackupsModal,
+  setShowBackupsModal,
 }) => {
   const { data, isLoading, isError } = useUserProfile();
 
@@ -93,16 +96,10 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
     });
   };
 
-  const [showBackupsModal, setShowBackupsModal] = useState(false);
-
   const handleCanvasBackupsClick = () => {
     setShowBackupsModal(true);
   };
 
-  const handleCloseBackupsModal = () => {
-    setShowBackupsModal(false);
-  };
-
   const handleGridToggle = () => {
     if (!excalidrawAPI) return;
     const appState = excalidrawAPI.getAppState();
@@ -238,12 +235,6 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
           Logout
         </MainMenu.Item>
 
-      {showBackupsModal && (
-        <BackupsModal
-          excalidrawAPI={excalidrawAPI}
-          onClose={handleCloseBackupsModal}
-        />
-      )}
     </MainMenu>
   );
 };