From d88d7c0a5f53082c2ddf5e8011ccbed6cb439581 Mon Sep 17 00:00:00 2001
From: kris <krisoso.com@gmail.com>
Date: Mon, 30 Mar 2026 13:29:09 +0800
Subject: [PATCH] fix: stabilize mobile drawer and oneliner status

---
 web/storyforge-web-v4/assets/app.js                  |  1 +
 web/storyforge-web-v4/assets/styles.css              | 10 ++++++++--
 web/storyforge-web-v4/tests/workbench-pages.test.mjs |  9 +++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/storyforge-web-v4/assets/app.js b/web/storyforge-web-v4/assets/app.js
index 6de75f3..779c1b9 100644
--- a/web/storyforge-web-v4/assets/app.js
+++ b/web/storyforge-web-v4/assets/app.js
@@ -10475,6 +10475,7 @@ document.addEventListener("click", async (event) => {
         renderAll();
       } finally {
         setBusy(false, "");
+        renderAll();
       }
       return;
     }
diff --git a/web/storyforge-web-v4/assets/styles.css b/web/storyforge-web-v4/assets/styles.css
index 9e1d0c4..bd67f1b 100644
--- a/web/storyforge-web-v4/assets/styles.css
+++ b/web/storyforge-web-v4/assets/styles.css
@@ -177,7 +177,7 @@ select {
 .mobile-sidebar-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 38;
+  z-index: 46;
   background: rgba(24, 36, 51, 0.26);
   opacity: 0;
   pointer-events: none;
@@ -1977,7 +1977,7 @@ tbody tr:hover {
     bottom: 0;
     width: min(88vw, 320px);
     height: 100vh;
-    z-index: 42;
+    z-index: 47;
     transform: translateX(-104%);
     transition: transform 0.22s ease;
     border-right: 1px solid rgba(201, 220, 239, 0.82);
@@ -1991,6 +1991,12 @@ tbody tr:hover {
     transform: translateX(0);
   }
 
+  .mobile-sidebar-open .mobile-tabbar,
+  .mobile-sidebar-open .mobile-shell-bar {
+    opacity: 0;
+    pointer-events: none;
+  }
+
   .brand {
     gap: 10px;
     padding: 4px 4px 12px;
diff --git a/web/storyforge-web-v4/tests/workbench-pages.test.mjs b/web/storyforge-web-v4/tests/workbench-pages.test.mjs
index 06d03f9..a1e5775 100644
--- a/web/storyforge-web-v4/tests/workbench-pages.test.mjs
+++ b/web/storyforge-web-v4/tests/workbench-pages.test.mjs
@@ -45,7 +45,10 @@ test("mobile shell styling uses safe-area padding, drawer navigation, and fixed
   assert.match(CSS, /\.mobile-shell-bar\s*\{[\s\S]*position:\s*sticky/);
   assert.match(CSS, /\.mobile-tabbar\s*\{[\s\S]*position:\s*fixed/);
   assert.match(CSS, /\.mobile-sidebar-backdrop\s*\{[\s\S]*position:\s*fixed/);
+  assert.match(CSS, /\.mobile-sidebar-backdrop\s*\{[\s\S]*z-index:\s*46/);
   assert.match(CSS, /\.mobile-sidebar-open\s+\.sidebar\s*\{[\s\S]*transform:\s*translateX\(0\)/);
+  assert.match(CSS, /@media \(max-width: 760px\)[\s\S]*\.sidebar\s*\{[\s\S]*z-index:\s*47/);
+  assert.match(CSS, /@media \(max-width: 760px\)[\s\S]*\.mobile-sidebar-open \.mobile-tabbar,[\s\S]*\.mobile-sidebar-open \.mobile-shell-bar\s*\{[\s\S]*pointer-events:\s*none/);
   assert.match(CSS, /\.content\s*\{[\s\S]*padding-bottom:\s*calc\(110px \+ env\(safe-area-inset-bottom\)\)/);
   assert.match(CSS, /\.oneliner-fab\s*\{[\s\S]*bottom:\s*calc\(96px \+ env\(safe-area-inset-bottom\)\)/);
   assert.match(CSS, /@media \(max-width: 760px\)[\s\S]*\.mobile-workspace-strip\s*\{[\s\S]*display:\s*grid/);
@@ -111,6 +114,12 @@ test("mobile action sheets and oneliner runtime behave like bottom sheets", () =
   assert.match(CSS, /@media \(max-width: 760px\)[\s\S]*\.oneliner-composer\s*\{[\s\S]*position:\s*sticky/);
 });
 
+test("opening OneLiner clears the transient loading state after the panel is hydrated", () => {
+  const actions = extractBetween(APP, "document.addEventListener(\"click\", async (event) => {", "document.addEventListener(\"submit\", async (event) => {");
+  assert.match(actions, /name === "open-oneliner"[\s\S]*setBusy\(true,\s*"正在打开 OneLiner\.\.\."\)/);
+  assert.match(actions, /name === "open-oneliner"[\s\S]*finally \{[\s\S]*setBusy\(false,\s*""\);[\s\S]*renderAll\(\);[\s\S]*\}/);
+});
+
 test("project creation and switching use in-app sheets instead of browser prompts", () => {
   const createProject = extractBetween(APP, "async function createProject()", "function openPreferredModelAction()");
   const projectSwitcher = extractBetween(APP, "function openDashboardProjectSwitcher()", "function openDashboardActionReasonAction(");