feat: integrate authentication modal into ExcalidrawWrapper

- Added authentication handling to ExcalidrawWrapper, displaying AuthModal when the user is not authenticated.
- Removed AuthModal state management from AuthGate, simplifying its structure.
- Updated AuthModal to use the Dialog component for improved UI consistency.

Author: atyrode

src/frontend/src/App.tsx

@@ -125,6 +125,8 @@ export default function App({
         setExcalidrawAPI={setExcalidrawAPI}
         onChange={debouncedLogChange}
         MainMenu={MainMenu}
+        isAuthenticated={isAuthenticated}
+        isAuthLoading={isAuthLoading}
       >
         {children}
       </ExcalidrawWrapper>

src/frontend/src/AuthGate.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useAuthCheck } from "./api/hooks";
-import AuthModal from "./ui/AuthModal";
 
 /**
  * If unauthenticated, it shows the AuthModal as an overlay, but still renders the app behind it.
@@ -50,37 +49,6 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated, coderAuthDone]);
 
-  // State to control modal visibility and exit animation
-  const [showAuthModal, setShowAuthModal] = useState(false);
-  const [isExiting, setIsExiting] = useState(false);
-  
-  // Update showAuthModal when authentication status changes
-  useEffect(() => {
-    if (isAuthenticated === false) {
-      setShowAuthModal(true);
-      setIsExiting(false);
-    } else if (isAuthenticated === true && showAuthModal) {
-      // Start exit animation when user becomes authenticated
-      setIsExiting(true);
-      // Modal will be removed after animation completes via onExitComplete
-    }
-  }, [isAuthenticated, showAuthModal]);
-  
-  // Handle exit animation completion
-  const handleExitComplete = () => {
-    setShowAuthModal(false);
-  };
-
-  // Always render children; overlay AuthModal if not authenticated
-  return (
-    <>
-      {children}
-      {showAuthModal && (
-        <AuthModal 
-          isExiting={isExiting} 
-          onExitComplete={handleExitComplete} 
-        />
-      )}
-    </>
-  );
+  // Just render children - AuthModal is now handled by ExcalidrawWrapper
+  return <>{children}</>;
 }

src/frontend/src/ExcalidrawWrapper.tsx

@@ -1,11 +1,12 @@
-import React, { Children, cloneElement } from 'react';
+import React, { Children, cloneElement, useState, useEffect } from 'react';
 import DiscordButton from './ui/DiscordButton';
 import FeedbackButton from './ui/FeedbackButton';
 import type { ExcalidrawImperativeAPI } from '@atyrode/excalidraw/types';
 import type { NonDeletedExcalidrawElement } from '@atyrode/excalidraw/element/types';
 import type { AppState } from '@atyrode/excalidraw/types';
 import { MainMenuConfig } from './ui/MainMenu';
 import { renderCustomEmbeddable } from './CustomEmbeddableRenderer';
+import AuthModal from './ui/AuthModal';
 
 const defaultInitialData = {
   elements: [],
@@ -25,6 +26,8 @@ interface ExcalidrawWrapperProps {
   onChange: (elements: NonDeletedExcalidrawElement[], state: AppState) => void;
   MainMenu: any;
   renderTopRightUI?: () => React.ReactNode;
+  isAuthenticated?: boolean | null;
+  isAuthLoading?: boolean;
 }
 
 export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
@@ -35,7 +38,19 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
   onChange,
   MainMenu,
   renderTopRightUI,
+  isAuthenticated = null,
+  isAuthLoading = false,
 }) => {
+  // Add state for modal animation
+  const [isExiting, setIsExiting] = useState(false);
+  
+  // Handle auth state changes
+  useEffect(() => {
+    if (isAuthenticated === true) {
+      setIsExiting(true);
+    }
+  }, [isAuthenticated]);
+  
   const renderExcalidraw = (children: React.ReactNode) => {
     const Excalidraw = Children.toArray(children).find(
       (child: any) =>
@@ -65,7 +80,15 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
           </div>
         )),
       },
-      <MainMenuConfig MainMenu={MainMenu} excalidrawAPI={excalidrawAPI} />
+      <>
+        <MainMenuConfig MainMenu={MainMenu} excalidrawAPI={excalidrawAPI} />
+        {!isAuthLoading && isAuthenticated === false && (
+          <AuthModal 
+            isExiting={isExiting}
+            onCloseRequest={() => {}}
+          />
+        )}
+      </>
     );
   };
 

src/frontend/src/ui/AuthModal.tsx

@@ -2,21 +2,21 @@ import React, { useState, useEffect } from "react";
 import { capture } from "../utils/posthog";
 import { Mail } from "lucide-react";
 import { queryClient } from "../api/queryClient";
-import Modal from "./Modal";
+
 import "../styles/AuthModal.scss";
+import { Dialog } from "@atyrode/excalidraw";
 
 interface AuthModalProps {
   description?: React.ReactNode;
   warningText?: string;
-  onExitComplete?: () => void;
+  onCloseRequest: () => void;
   isExiting?: boolean;
 }
 
 const AuthModal: React.FC<AuthModalProps> = ({
   description = <>Welcome to your <strong className="highlight">whiteboard IDE</strong>. Open <strong className="highlight">terminals</strong> and start coding right away in your own <strong className="highlight">Ubuntu VM</strong>!</>,
   warningText = "🚧 This is a beta. Make backups! 🚧",
-  onExitComplete,
-  isExiting = false,
+  onCloseRequest,
 }) => {
   const [isMounted, setIsMounted] = useState(false);
 
@@ -44,18 +44,9 @@ const AuthModal: React.FC<AuthModalProps> = ({
 
   if (!isMounted) return null;
 
-  return (
-    <Modal 
-      logoSrc="/assets/images/favicon.png" 
-      logoAlt="pad.ws logo"
-      className="auth-modal"
-      isExiting={isExiting}
-      onExitComplete={onExitComplete}
-    >
-      <div className="auth-modal__content">
-            <div id="modal-title" className="auth-modal__title-container">
-              <h2 className="auth-modal__title">pad<span className="auth-modal__title-dot">.ws</span></h2>
-            </div>
+  // Prepare the content for the Dialog
+  const dialogContent = (
+    <div className="auth-modal__content">
             <div className="auth-modal__separator" />
 
             <p className="auth-modal__description">{description}</p>
@@ -172,7 +163,26 @@ const AuthModal: React.FC<AuthModalProps> = ({
               {warningText}
             </div>
       </div>
-    </Modal>
+  );
+
+  return (
+    <Dialog
+      className="auth-modal"
+      size="regular"
+      onCloseRequest={onCloseRequest}
+      title={
+        <div id="modal-title" className="auth-modal__title-container">
+          <img 
+            src="/assets/images/favicon.png" 
+            alt="pad.ws logo" 
+            className="auth-modal__logo" 
+          />
+          <h2 className="auth-modal__title">pad<span className="auth-modal__title-dot">.ws</span></h2>
+        </div>
+      }
+      closeOnClickOutside={false}
+      children={dialogContent}
+    />
   );
 };