Trying a fix for the portal

frontend/apps/editor3d/app/src/components/signaled/TopBar/AuthButtons.tsx

@@ -3,18 +3,15 @@ import { AUTH_STATUS } from "~/enums";
 import { authentication } from "~/signals";
 import { Button } from "@storyteller/ui-button";
 import ProfileDropdown from "./ProfileDropdown";
-import { LoginModal } from "@storyteller/ui-login-modal";
-import { useState } from "react";
+
 import {
   disableHotkeyInput,
   DomLevels,
   enableHotkeyInput,
 } from "~/pages/PageEnigma/signals";
 
-export const AuthButtons = () => {
+export const AuthButtons = ({ loginSignUpPressed }: { loginSignUpPressed: () => void }) => {
   useSignals();
-  const [showLoginModal, setShowLoginModal] = useState(false);
-  const [isSignUp, setIsSignUp] = useState(false);
 
   const { status, userInfo } = authentication;
 
@@ -31,34 +28,12 @@ export const AuthButtons = () => {
           <Button
             className="h-[38px]"
             onClick={() => {
-              setIsSignUp(true);
-              setShowLoginModal(true);
+              loginSignUpPressed()
             }}
           >
             Login / Sign Up
           </Button>
         </div>
-
-        {showLoginModal && (
-          <LoginModal
-            onClose={() => setShowLoginModal(false)}
-            isSignUp={isSignUp}
-            videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4"
-            videoSrc3D="/resources/videos/artcraft-3d-demo.mp4"
-            onArtCraftAuthSuccess={(userInfo_value) => {
-              userInfo.value = userInfo_value;
-              status.value = AUTH_STATUS.LOGGED_IN;
-              setShowLoginModal(false);
-            }}
-            onOpenChange={(isOpen: boolean) => {
-              if (isOpen) {
-                disableHotkeyInput(DomLevels.DIALOGUE);
-              } else {
-                enableHotkeyInput(DomLevels.DIALOGUE);
-              }
-            }}
-          />
-        )}
       </>
     );
   }

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -36,6 +36,7 @@ import {
 } from "~/pages/PageEnigma/Editor/editor";
 interface Props {
   pageName: string;
+  loginSignUpPressed: () => void;
 }
 
 const appMenuTabs: MenuIconItem[] = [
@@ -70,7 +71,7 @@ const appMenuTabs: MenuIconItem[] = [
 export const topNavMediaId = signal<string>("");
 export const topNavMediaUrl = signal<string>("");
 
-export const TopBar = ({ pageName }: Props) => {
+export const TopBar = ({ pageName,loginSignUpPressed }: Props) => {
   useSignals();
 
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
@@ -160,7 +161,7 @@ export const TopBar = ({ pageName }: Props) => {
               <Activity />
             </div>
             <div className="flex justify-end gap-2">
-              <AuthButtons />
+              <AuthButtons loginSignUpPressed={loginSignUpPressed}/>
             </div>
           </div>
         </nav>

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useSignals } from "@preact/signals-react/runtime";
 import { TopBar } from "~/components";
 import { Controls3D } from "./comps/Controls3D";
@@ -10,6 +10,7 @@ import { authentication, pageHeight, pageWidth } from "~/signals";
 import { PoseModeSelector } from "./comps/PoseModeSelector";
 import ImageToVideo from "../PageVideo/ImageToVideo";
 import TextToImage from "../PageImage/TextToImage";
+
 import {
   timelineHeight,
   sidePanelWidth,
@@ -78,7 +79,14 @@ import { useTabStore } from "../Stores/TabState";
 
 export const PageEditor = () => {
   useSignals();
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState<boolean>(false);
 
+  const { status } = authentication;
+  useEffect(() => {
+    if (status.value !== AUTH_STATUS.LOGGED_OUT) {
+      setIsLoginModalOpen(true);
+    }
+  }, [status.value]);
   const tabStore = useTabStore();
   const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -406,9 +414,32 @@ export const PageEditor = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tabStore.activeTabId, editorEngine]);
 
+
+
+
   return (
     <div className="w-screen">
-      <TopBar pageName="Edit Scene" />
+      <TopBar loginSignUpPressed={()=> {
+        setIsLoginModalOpen(true)
+      }} pageName="Edit Scene" />
+      {isLoginModalOpen && (
+        <LoginModal
+          onClose={() => setIsLoginModalOpen(false)}
+          videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4"
+          videoSrc3D="/resources/videos/artcraft-3d-demo.mp4"
+          onOpenChange={(isOpen: boolean) => {
+            if (isOpen) {
+              disableHotkeyInput(DomLevels.DIALOGUE);
+            } else {
+              enableHotkeyInput(DomLevels.DIALOGUE);
+            }
+          }}
+          onArtCraftAuthSuccess={(userInfo: any) => {
+            authentication.status.value = AUTH_STATUS.LOGGED_IN;
+            authentication.userInfo.value = userInfo;
+          }}
+        />
+      )}
       {tabStore.activeTabId == "3D" && (
         <div>
           <OnboardingHelper />
@@ -542,23 +573,7 @@ export const PageEditor = () => {
         </div>
       )}
 
-      <LoginModal
-        onClose={() => {}}
-        videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4"
-        videoSrc3D="/resources/videos/artcraft-3d-demo.mp4"
-        openAiLogo="/resources/images/openai-logo.png"
-        onOpenChange={(isOpen: boolean) => {
-          if (isOpen) {
-            disableHotkeyInput(DomLevels.DIALOGUE);
-          } else {
-            enableHotkeyInput(DomLevels.DIALOGUE);
-          }
-        }}
-        onArtCraftAuthSuccess={(userInfo: any) => {
-          authentication.status.value = AUTH_STATUS.LOGGED_IN;
-          authentication.userInfo.value = userInfo;
-        }}
-      />
+ 
     </div>
   );
 };

frontend/libs/components/login-modal/src/lib/login-modal.tsx

@@ -1,26 +1,21 @@
 import { Button } from "@storyteller/ui-button";
 import { Transition, TransitionChild } from "@headlessui/react";
-import { createPortal } from "react-dom";
 import { useState, useEffect, useRef } from "react";
 import {
   faArrowRight,
-  faRightToBracket,
 } from "@fortawesome/pro-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
-import { IsDesktopApp } from "@storyteller/tauri-utils";
 import {
   CheckSoraSession,
   SoraSessionState,
   useSoraLoginListener,
 } from "@storyteller/tauri-api";
-import { invoke } from "@tauri-apps/api/core";
 import { ArtCraftSignUp } from "./artcraft-signup";
 import { UsersApi } from "@storyteller/api";
 interface LoginModalProps {
   onClose: () => void;
   videoSrc2D?: string;
   videoSrc3D?: string;
-  openAiLogo?: string;
   onOpenChange?: (isOpen: boolean) => void;
   onArtCraftAuthSuccess?: (userInfo: any) => void;
   isSignUp?: boolean;
@@ -30,14 +25,13 @@ export function LoginModal({
   onClose,
   videoSrc2D,
   videoSrc3D,
-  openAiLogo,
   onOpenChange,
   onArtCraftAuthSuccess,
   isSignUp: initialIsSignUp = true,
 }: LoginModalProps) {
   const [step, setStep] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
   const [isLoggedInArtCraft, setIsLoggedInArtCraft] = useState(false);
   const [isSignUp, setIsSignUp] = useState(initialIsSignUp);
   const [errorMessage, setErrorMessage] = useState("");
@@ -336,8 +330,7 @@ export function LoginModal({
     );
   };
 
-  return createPortal(
-    <Transition appear show={isOpen}>
+  return <Transition appear show={isOpen}>
       <div className="fixed inset-0 z-[100]">
         <TransitionChild
           enter="ease-out duration-300"
@@ -378,9 +371,7 @@ export function LoginModal({
           </TransitionChild>
         </div>
       </div>
-    </Transition>,
-    document.body
-  );
+    </Transition>
 }
 
 export default LoginModal;