feat: enhance AuthModal with exit animations and state management

- Introduced state management for modal visibility and exit animations in AuthGate.
- Updated AuthModal to accept new props for exit animation handling.
- Refactored Modal component to apply animations via inline styles, improving flexibility.
- Added new keyframes for fade-out and zoom-out animations to enhance user experience.

Author: atyrode

src/frontend/src/AuthGate.tsx

@@ -50,11 +50,37 @@ 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}
-      {isAuthenticated === false && <AuthModal />}
+      {showAuthModal && (
+        <AuthModal 
+          isExiting={isExiting} 
+          onExitComplete={handleExitComplete} 
+        />
+      )}
     </>
   );
 }

src/frontend/src/styles/Modal.scss

@@ -7,7 +7,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    animation: modalFadeIn 0.3s ease-out forwards;
+    /* Animation is now applied via inline style */
   }
 
   &__wrapper {
@@ -33,7 +33,7 @@
     border-radius: 12px;
     background-color: #232329;
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
-    animation: modalZoomIn 0.3s ease-out forwards;
+    /* Animation is now applied via inline style */
     font-family: 'Roboto', sans-serif;
   }
 
@@ -46,9 +46,8 @@
     z-index: 0; /* Behind modal */
     pointer-events: none;
     user-select: none;
-    opacity: 0;
-    animation: fadeInSlideUp 0.3s ease-out forwards;
-    animation-delay: 1s; /* Delay appearance by 1 second */
+    opacity: 0; /* Initial state, animation will control visibility */
+    /* Animation is now applied via inline style */
   }
 }
 
@@ -64,6 +63,18 @@
   }
 }
 
+/* Animation for favicon to slide down and fade out */
+@keyframes fadeOutSlideDown {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+}
+
 /* Animation keyframes */
 @keyframes modalFadeIn {
   from {
@@ -74,6 +85,15 @@
   }
 }
 
+@keyframes modalFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes modalZoomIn {
   from {
     transform: scale(0.95);
@@ -85,6 +105,17 @@
   }
 }
 
+@keyframes modalZoomOut {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
 /* Media query for screens under 700x700 */
 @media (max-width: 734px), (max-height: 700px) {
   .modal {

src/frontend/src/ui/AuthModal.tsx

@@ -8,11 +8,15 @@ import "../styles/AuthModal.scss";
 interface AuthModalProps {
   description?: React.ReactNode;
   warningText?: string;
+  onExitComplete?: () => 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,
 }) => {
   const [isMounted, setIsMounted] = useState(false);
 
@@ -45,6 +49,8 @@ const AuthModal: React.FC<AuthModalProps> = ({
       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">

src/frontend/src/ui/Modal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import "../styles/Modal.scss";
 
@@ -9,6 +9,8 @@ interface ModalProps {
   logoAlt?: string;
   maxWidth?: string | number;
   className?: string;
+  isExiting?: boolean;
+  onExitComplete?: () => void;
 }
 
 const Modal: React.FC<ModalProps> = ({
@@ -18,9 +20,41 @@ const Modal: React.FC<ModalProps> = ({
   logoAlt = "Logo",
   maxWidth = "500px",
   className = "",
+  isExiting = false,
+  onExitComplete,
 }) => {
+  // For entrance: Modal appears first, then logo with delay
+  // For exit: Logo disappears first, then modal with delay
+  const overlayAnimation = isExiting ? "modalFadeOut" : "modalFadeIn";
+  const containerAnimation = isExiting ? "modalZoomOut" : "modalZoomIn";
+  const faviconAnimation = isExiting ? "fadeOutSlideDown" : "fadeInSlideUp";
+  
+  // Animation delays
+  const overlayDelay = isExiting ? "0.3s" : "0s"; // Delay modal exit until logo animation completes
+  const containerDelay = isExiting ? "0.3s" : "0s"; // Delay container exit until logo animation completes
+  const faviconDelay = isExiting ? "0s" : "0.3s"; // Logo appears with delay on entrance, but exits immediately
+  
+  // Handle exit animation completion
+  useEffect(() => {
+    if (isExiting && onExitComplete) {
+      // Wait for all animations to complete before calling onExitComplete
+      // Logo animation (0.3s) + delay (0.3s) + modal animation (0.3s)
+      const timer = setTimeout(() => {
+        onExitComplete();
+      }, 600); // Total animation duration with delay
+      
+      return () => clearTimeout(timer);
+    }
+  }, [isExiting, onExitComplete]);
+  
   const modalContent = (
-    <div className="modal__overlay">
+    <div 
+      className="modal__overlay"
+      style={{ 
+        animation: `${overlayAnimation} 0.3s ease-out forwards`,
+        animationDelay: overlayDelay
+      }}
+    >
       {/* Backdrop with blur effect */}
       <div className="modal__backdrop" aria-hidden="true" />
 
@@ -33,12 +67,20 @@ const Modal: React.FC<ModalProps> = ({
             className="modal__favicon"
             alt={logoAlt}
             aria-hidden="true"
+            style={{ 
+              animation: `${faviconAnimation} 0.3s ease-out forwards`,
+              animationDelay: faviconDelay
+            }}
           />
         )}
         {/* Modal container with animation */}
         <div
           className={`modal__container ${className}`}
-          style={{ maxWidth }}
+          style={{ 
+            maxWidth,
+            animation: `${containerAnimation} 0.3s ease-out forwards`,
+            animationDelay: containerDelay
+          }}
           role="dialog"
           aria-modal="true"
         >