From 3e72c424424e13605426a0df4835f90518105037 Mon Sep 17 00:00:00 2001
From: Agung Subastian <agungsubastian1963@gmail.com>
Date: Thu, 9 Jul 2026 08:44:48 +0700
Subject: [PATCH] perf: unmount idle Marketplace/Admin/Docs/ApiTest views

Classic layout kept every center view mounted via a CSS hidden class
instead of conditionally rendering, so each view's own polling (incl.
cloud-touching calls in Marketplace) ran forever in the background
regardless of which tab was visible, and their state/DOM never got
released, growing memory over a long session. Mount only the active
view for these four, matching the pattern FocusShell already uses
correctly. Widgets/Terminal/AI Chat stay always-mounted (home view /
live sessions that must survive switching away and back).
---
 web/src/os/Desktop.tsx | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/web/src/os/Desktop.tsx b/web/src/os/Desktop.tsx
index d07740b..5e73b97 100644
--- a/web/src/os/Desktop.tsx
+++ b/web/src/os/Desktop.tsx
@@ -302,23 +302,29 @@ export function Desktop() {
             <div className={`absolute inset-0 ${view === "chat" ? "" : "hidden"}`}>
               <AiChatApp />
             </div>
-            <div className={`absolute inset-0 ${view === "apitest" ? "" : "hidden"}`}>
-              <ApiTestApp />
-            </div>
+            {view === "apitest" && (
+              <div className="absolute inset-0">
+                <ApiTestApp />
+              </div>
+            )}
             <div className={`absolute inset-0 ${view === "apps" ? "" : "hidden"}`}>
               <AppsDrawer apps={drawerApps} onOpen={openApp} onDropToDrawer={(id) => move(id, "drawer")} />
             </div>
-            <div className={`absolute inset-0 overflow-hidden rounded-2xl border border-white/10 bg-[var(--window-bg)]/80 ${view === "marketplace" ? "" : "hidden"}`}>
-              <MarketplaceApp />
-            </div>
-            {isMod && (
-              <div className={`absolute inset-0 overflow-hidden rounded-2xl border border-white/10 bg-[var(--window-bg)]/80 ${view === "admin" ? "" : "hidden"}`}>
+            {view === "marketplace" && (
+              <div className="absolute inset-0 overflow-hidden rounded-2xl border border-white/10 bg-[var(--window-bg)]/80">
+                <MarketplaceApp />
+              </div>
+            )}
+            {isMod && view === "admin" && (
+              <div className="absolute inset-0 overflow-hidden rounded-2xl border border-white/10 bg-[var(--window-bg)]/80">
                 <AdminApp />
               </div>
             )}
-            <div className={`absolute inset-0 overflow-hidden rounded-2xl border border-white/10 bg-[var(--window-bg)]/80 ${view === "docs" ? "" : "hidden"}`}>
-              <DocsApp />
-            </div>
+            {view === "docs" && (
+              <div className="absolute inset-0 overflow-hidden rounded-2xl border border-white/10 bg-[var(--window-bg)]/80">
+                <DocsApp />
+              </div>
+            )}
           </div>
         </div>
       </div>