fix: Ensure ProteinViewer remains mounted in Studio Mode

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -297,12 +297,7 @@ function App() {
   /* eslint-disable react-hooks/exhaustive-deps */
   const handlePlaybackStateChange = useCallback((state: any) => {
     // The recorded state is "multiViewState" { viewMode, viewports: [] }
-    if (!state || !state.viewports || !state.viewports[0]) {
-      console.warn("Playback: Invalid state or missing viewports", state);
-      return;
-    }
-
-    console.log("Playback: Applying State", state.viewports[0].pdbId);
+    if (!state || !state.viewports || !state.viewports[0]) return;
 
     const vpState = state.viewports[0];
     const ctrl = controllers[0];
@@ -343,7 +338,6 @@ function App() {
   }, [controllers, viewMode]);
 
   const handlePlaybackCameraChange = useCallback((orientation: any) => {
-    // console.log("Playback: Camera Update", orientation);
     if (viewerRefs[0].current) viewerRefs[0].current.setOrientation(orientation);
   }, []);
 
@@ -2494,7 +2488,11 @@ function App() {
             onRemoveOverlay={controllers[activeViewIndex].removeOverlay}
             onToggleOverlay={controllers[activeViewIndex].toggleOverlay}
           />
+        </>
+      )}
 
+      {!showLanding && (
+        <>
           {/* BACKGROUND (Dark Mode) */}
           {!isLightMode && !customBackgroundColor && activeViewIndex === 0 && viewMode === 'single' && (
             <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-black to-gray-950 -z-10" />
@@ -2507,7 +2505,7 @@ function App() {
 
             {/* Logic to determine if we are looking at a Chemical */}
             {(() => {
-              if (isEmbedMode) return null; // Hide Sidebar in Embed Mode
+              if (isEmbedMode || isStudioMode) return null; // Hide Sidebar in Embed OR Studio Mode
 
               const isChemical = dataSource === 'pubchem' ||
                 (file && /\.(sdf|mol|cif)$/i.test(file.name));
@@ -2954,6 +2952,8 @@ function App() {
 
           {/* End Main Content Flex Container */}
 
+          {/* End Main Content Flex Container */}
+
         </>
       )}
 

src/components/StudioLayout.tsx

@@ -140,7 +140,7 @@ export const StudioLayout: React.FC<StudioLayoutProps> = ({ recorder, onExit, ex
                 </div>
 
                 {/* VISUAL AREA (The hole) */}
-                <div className="flex-1 relative border-4 border-red-500 bg-transparent">
+                <div className="flex-1 relative">
                     {/* Floating Transport Controls */}
                     <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-neutral-900/80 backdrop-blur-md rounded-full px-4 py-2 flex items-center gap-4 text-white pointer-events-auto border border-white/10 shadow-2xl z-50">
                         <span className="text-xs font-mono ml-2">{formatTime(playbackTime)}</span>