pinokiod 7.5.19 → 7.5.21

package/server/views/app.ejs

@@ -348,6 +348,7 @@ body.dark .snapshot-comment {
   padding: 0;
   border-radius: 9px;
   box-sizing: border-box;
+  transition: background-color 140ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 140ms cubic-bezier(0.25, 1, 0.5, 1), color 140ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 body.dark #sidebar-toggle {
   color: rgba(248, 250, 252, 0.92);
@@ -383,7 +384,8 @@ body.dark #sidebar-toggle[aria-expanded="true"] {
   width: 4px;
   border-radius: 1px;
   background: currentColor;
-  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+  transform-origin: left center;
+  transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1), transform 150ms cubic-bezier(0.25, 1, 0.5, 1), background-color 150ms cubic-bezier(0.25, 1, 0.5, 1), border-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 .sidebar-toggle-content {
   position: absolute;
@@ -395,12 +397,18 @@ body.dark #sidebar-toggle[aria-expanded="true"] {
   background: currentColor;
   opacity: 0.32;
   box-shadow: 0 3.8px 0 currentColor, 0 7.6px 0 currentColor;
+  transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1), transform 150ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 #sidebar-toggle[aria-expanded="false"] .sidebar-toggle-panel {
   background: transparent;
   outline: 1.5px solid currentColor;
   outline-offset: -1px;
   opacity: 0.35;
+  transform: translateX(-1px) scaleX(0.8);
+}
+#sidebar-toggle[aria-expanded="false"] .sidebar-toggle-content {
+  opacity: 0.42;
+  transform: translateX(-2px);
 }
 #devtab {
   align-items: center;
@@ -1999,6 +2007,7 @@ body.dark .appcanvas_filler {
   cursor: col-resize;
   touch-action: none;
   outline: none;
+  opacity: 1;
 }
 /*
 .appcanvas.vertical .appcanvas-resizer:hover::before {
@@ -2063,6 +2072,26 @@ body.dark .appcanvas > aside {
   --sidebar-tab-radius: 6px;
   --sidebar-tab-selected-translate: 0;
   --sidebar-tab-outline: var(--pinokio-sidebar-tabbar-border);
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.appcanvas.vertical > aside {
+  flex: 0 0 var(--appcanvas-sidebar-width);
+  width: var(--appcanvas-sidebar-width);
+  max-width: var(--appcanvas-sidebar-width);
+}
+
+.appcanvas.sidebar-motion-ready > aside,
+.appcanvas.sidebar-motion-ready > aside .menu-container,
+.appcanvas.sidebar-motion-ready .appcanvas-resizer {
+  transition: flex-basis 190ms cubic-bezier(0.25, 1, 0.5, 1), width 190ms cubic-bezier(0.25, 1, 0.5, 1), max-width 190ms cubic-bezier(0.25, 1, 0.5, 1), margin 190ms cubic-bezier(0.25, 1, 0.5, 1), opacity 140ms cubic-bezier(0.25, 1, 0.5, 1), transform 190ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.appcanvas.sidebar-resizing > aside,
+.appcanvas.sidebar-resizing > aside .menu-container,
+.appcanvas.sidebar-resizing .appcanvas-resizer {
+  transition: none !important;
 }
 
 .appcanvas.sidebar-collapsed > aside {
@@ -2073,6 +2102,7 @@ body.dark .appcanvas > aside {
   opacity: 0;
   pointer-events: none;
   overflow: hidden;
+  transform: translateX(-10px);
 }
 
 .appcanvas.sidebar-collapsed > aside .menu-container {
@@ -2080,7 +2110,24 @@ body.dark .appcanvas > aside {
 }
 
 .appcanvas.sidebar-collapsed .appcanvas-resizer {
-  display: none;
+  flex-basis: 0;
+  width: 0;
+  min-width: 0;
+  margin-left: 0;
+  margin-right: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #sidebar-toggle,
+  .sidebar-toggle-panel,
+  .sidebar-toggle-content,
+  .appcanvas.sidebar-motion-ready > aside,
+  .appcanvas.sidebar-motion-ready > aside .menu-container,
+  .appcanvas.sidebar-motion-ready .appcanvas-resizer {
+    transition-duration: 0.01ms !important;
+  }
 }
 
 /*
@@ -6634,7 +6681,7 @@ header.navheader h1 {
 	    width: min(280px, calc(100vw - 40px));
 	    max-width: 100%;
 	    margin: 0 !important;
-	    padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
+	    padding: calc(12px + env(safe-area-inset-top)) 12px 0;
 	    box-sizing: border-box;
 	    overflow-y: auto;
 	    background: var(--pinokio-sidebar-tabbar-bg);
@@ -6663,18 +6710,18 @@ header.navheader h1 {
 	    width: min(280px, calc(100vw - 40px));
 	    max-width: 100%;
 	    margin: 0 !important;
-	    padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
+	    padding: calc(12px + env(safe-area-inset-top)) 12px 0;
 	    box-sizing: border-box;
 	    overflow-y: auto;
 	    pointer-events: none;
-	    background: var(--pinokio-sidebar-tabbar-bg);
-	    border-right: 1px solid var(--pinokio-sidebar-separator);
-	    border-left: 0;
-	    box-shadow: 24px 0 48px rgba(15, 23, 42, 0.12);
-	    transform: translateX(-100%);
-	    transition: transform 180ms ease;
-	    z-index: 10000020;
-	  }
+		    background: var(--pinokio-sidebar-tabbar-bg);
+		    border-right: 1px solid var(--pinokio-sidebar-separator);
+		    border-left: 0;
+		    box-shadow: none;
+		    transform: translateX(-100%);
+		    transition: transform 180ms ease;
+		    z-index: 10000020;
+		  }
 	  body.mobile-menu-open .appcanvas.sidebar-collapsed > aside {
 	    width: min(280px, calc(100vw - 40px));
 	    min-width: 0;
@@ -6719,6 +6766,9 @@ header.navheader h1 {
   }
   body.dark.mobile-menu-open .appcanvas > aside .disk-usage {
     color: rgba(148, 163, 184, 0.9);
+  }
+  body.mobile-menu-open .appcanvas > aside .menu-container {
+    padding: 0;
   }
 	  body.mobile-menu-open .appcanvas > aside .menu-scroller {
 	    flex-direction: column;
@@ -6726,7 +6776,7 @@ header.navheader h1 {
 	    overflow-y: auto;
 	    overflow-x: hidden;
 	    width: 100%;
-	    padding: 0 0 8px;
+	    padding: 0;
 	    gap: 8px;
 	    box-sizing: border-box;
 	  }
@@ -6760,78 +6810,86 @@ header.navheader h1 {
     gap: 4px;
     width: 100%;
   }
-	  body.mobile-menu-open .appcanvas > aside .mobile-sheet-actions {
-	    display: none;
-	    align-items: center;
-	    gap: 8px;
-	    width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding-bottom: 2px;
-    scrollbar-width: none;
+  body.mobile-menu-open .appcanvas > aside .mobile-sheet-actions,
+  body.mobile-menu-open[data-view='files'] .mobile-menu-fallback .mobile-sheet-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    margin: 2px 0 0;
+    padding: 4px 0 0;
+    border-top: 1px solid var(--pinokio-sidebar-separator);
+    box-sizing: border-box;
   }
   body.mobile-menu-open .appcanvas > aside .mobile-sheet-actions::-webkit-scrollbar,
   body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-actions::-webkit-scrollbar {
     display: none;
   }
+  body.mobile-menu-open .appcanvas > aside .mobile-sheet-action-grid,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action-grid {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 0 0 auto;
+    width: auto;
+  }
   body.mobile-menu-open .appcanvas > aside .mobile-sheet-action,
   body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action {
-    flex: 0 0 auto;
-    width: 40px;
-    height: 40px;
-    min-width: 40px;
-    min-height: 40px;
+    flex: 0 0 32px;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
     padding: 0;
-    border-radius: 12px;
-    border: 1px solid rgba(0,0,0,0.06);
-    background: #fff;
-    color: #0f172a;
-    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+    border-radius: 6px;
+    border: 0;
+    background: transparent;
+    color: var(--app-mobile-drawer-icon-active);
+    box-shadow: none;
     box-sizing: border-box;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    gap: 0;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.2;
   }
   body.dark.mobile-menu-open .appcanvas > aside .mobile-sheet-action,
   body.dark.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action {
-    background: rgba(15, 17, 21, 0.82);
-    border-color: rgba(255,255,255,0.08);
+    background: transparent;
+    border-color: transparent;
     color: rgba(226, 232, 240, 0.92);
-    box-shadow: 0 1px 2px rgba(2, 6, 20, 0.4);
+    box-shadow: none;
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-sheet-action:hover,
+  body.mobile-menu-open .appcanvas > aside .mobile-sheet-action:focus-visible,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action:hover,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action:focus-visible {
+    background: var(--app-mobile-drawer-tab-hover);
   }
   body.mobile-menu-open .appcanvas > aside .mobile-sheet-action i,
   body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action i {
-    font-size: 15px;
-  }
-  body.mobile-menu-open .appcanvas > aside .mobile-sheet-action span,
-  body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action span {
-    display: none;
+    width: 15px;
+    flex: 0 0 15px;
+    font-size: 14px;
+    text-align: center;
   }
-  body.mobile-menu-open .appcanvas > aside .menu-scroller .mobile-sheet-action,
-  body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action {
-    width: 40px !important;
-    height: 40px !important;
-    min-width: 40px !important;
-    min-height: 40px !important;
-    padding: 0 !important;
-    border-radius: 12px !important;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0;
+  body.mobile-menu-open .appcanvas > aside .mobile-sheet-action--close-pane,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action--close-pane {
+    border-color: transparent;
+    background: transparent;
+    color: #b91c1c;
   }
-	  body.mobile-menu-open[data-view='files'] .mobile-menu-fallback .mobile-sheet-actions {
-	    display: none;
-	    align-items: center;
-	    gap: 8px;
-	    width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding-bottom: 2px;
+  body.dark.mobile-menu-open .appcanvas > aside .mobile-sheet-action--close-pane,
+  body.dark.mobile-menu-open .mobile-menu-fallback .mobile-sheet-action--close-pane {
+    border-color: transparent;
+    background: transparent;
+    color: #f87171;
   }
-  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2),
-  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2) {
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):not(.mobile-sheet-action),
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):not(.mobile-sheet-action) {
     max-width: none;
     min-width: 0;
     width: 100%;
@@ -6844,22 +6902,22 @@ header.navheader h1 {
     box-shadow: none;
     box-sizing: border-box;
   }
-  body.dark.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2),
-  body.dark.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2) {
+  body.dark.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):not(.mobile-sheet-action),
+  body.dark.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):not(.mobile-sheet-action) {
     background: transparent;
     border-color: transparent;
     color: var(--app-mobile-drawer-tab-muted);
     box-shadow: none;
   }
-  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):hover,
-  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):focus-visible,
-  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):hover,
-  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):focus-visible {
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):not(.mobile-sheet-action):hover,
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):not(.mobile-sheet-action):focus-visible,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):not(.mobile-sheet-action):hover,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):not(.mobile-sheet-action):focus-visible {
     background: var(--app-mobile-drawer-tab-hover);
     color: var(--app-mobile-drawer-tab-active-color);
   }
-  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn.selected:not(.btn2),
-  body.mobile-menu-open .appcanvas > aside .menu-actions .btn.selected:not(.btn2) {
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn.selected:not(.btn2):not(.mobile-sheet-action),
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn.selected:not(.btn2):not(.mobile-sheet-action) {
     background: var(--app-mobile-drawer-tab-active-bg) !important;
     color: var(--app-mobile-drawer-tab-active-color);
   }
@@ -7006,7 +7064,7 @@ header.navheader h1 {
 	    max-width: 100%;
 	    z-index: 10000020;
 	    flex-direction: column;
-	    padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
+	    padding: calc(12px + env(safe-area-inset-top)) 12px 0;
 	    box-sizing: border-box;
 	    overflow-y: auto;
 	    background: var(--pinokio-sidebar-tabbar-bg);
@@ -7037,7 +7095,7 @@ header.navheader h1 {
 	  .mobile-menu-fallback__body {
 	    flex: 1 1 auto;
 	    overflow-y: auto;
-	    padding: 0 0 16px;
+	    padding: 0;
 	    box-sizing: border-box;
 	  }
   .mobile-menu-fallback .workspace-mode-switch {
@@ -7794,32 +7852,6 @@ body.dark .pinokio-custom-terminal-header {
             <span>Dev</span>
           </a>
         </div>
-        <div class='mobile-sheet-actions' aria-label="Workspace actions">
-          <button type='button' id='menu-mobile-close' class='btn mobile-sheet-action' data-tippy-content="Close menu" aria-label="Close menu" title="Close menu">
-            <i class="fa-solid fa-xmark"></i>
-          </button>
-          <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#refresh-page" data-mobile-close-menu="true" aria-label="Refresh" title="Refresh">
-            <i class="fa-solid fa-rotate-right"></i>
-          </button>
-          <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#back" data-mobile-close-menu="true" aria-label="Back" title="Back">
-            <i class="fa-solid fa-chevron-left"></i>
-          </button>
-          <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#forward" data-mobile-close-menu="true" aria-label="Forward" title="Forward">
-            <i class="fa-solid fa-chevron-right"></i>
-          </button>
-          <a class='btn mobile-sheet-action' href="/columns" aria-label="2 Columns" title="2 Columns">
-            <i class="fa-solid fa-table-columns"></i>
-          </a>
-          <a class='btn mobile-sheet-action' href="/rows" aria-label="2 Rows" title="2 Rows">
-            <i class="fa-solid fa-table-columns fa-rotate-270"></i>
-          </a>
-          <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#new-window" data-mobile-close-menu="true" aria-label="New Window" title="New Window">
-            <i class="fa-solid fa-plus"></i>
-          </button>
-          <button type='button' class='btn mobile-sheet-action mobile-close-window-action hidden' data-mobile-proxy="#close-window" data-mobile-close-menu="true" aria-label="Close Section" title="Close Section">
-            <i class="fa-solid fa-xmark"></i>
-          </button>
-        </div>
         <%if (type==='browse') { %>
           <div class='m n system' data-type="n">
             <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn frame-link <%=dev_initial_tab === 'files' ? '' : 'selected'%>" data-index="10">
@@ -7896,14 +7928,26 @@ body.dark .pinokio-custom-terminal-header {
 	          </div>
 	        </button>
 	        <% } %>
-	        <a class='btn header-item mobile-drawer-home' href="/home" aria-label="Home">
-	          <div class='tab'>
-	            <i class="fa-solid fa-house menu-action-leading-icon"></i>
-	            <div class='display'>Home</div>
-	            <div class='flexible'></div>
-	          </div>
-	        </a>
 	      </div>
+        <div class='mobile-sheet-actions' aria-label="Navigation and pane actions">
+          <div class='mobile-sheet-action-grid'>
+            <a class='btn mobile-sheet-action mobile-drawer-home' href="/home" aria-label="Home" title="Home">
+              <i class="fa-solid fa-house"></i>
+            </a>
+            <a class='btn mobile-sheet-action' href="/columns" aria-label="Split right" title="Split right">
+              <i class="fa-solid fa-table-columns"></i>
+            </a>
+            <a class='btn mobile-sheet-action' href="/rows" aria-label="Split down" title="Split down">
+              <i class="fa-solid fa-table-columns fa-rotate-270"></i>
+            </a>
+            <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#new-window" data-mobile-close-menu="true" aria-label="New window" title="New window">
+              <i class="fa-solid fa-plus"></i>
+            </button>
+            <button type='button' class='btn mobile-sheet-action mobile-sheet-action--close-pane mobile-close-window-action hidden' data-mobile-proxy="#close-window" data-mobile-close-menu="true" aria-label="Close pane" title="Close pane">
+              <i class="fa-solid fa-xmark"></i>
+            </button>
+          </div>
+        </div>
 	      <div class='menu-actions <%= type === "browse" ? "dev-menu-actions" : "" %>'>
         <% if (type === 'browse') { %>
           <%- include('./partials/fs_status') %>
@@ -8289,29 +8333,6 @@ body.dark .pinokio-custom-terminal-header {
         <span>Dev</span>
       </a>
     </div>
-    <div class='mobile-sheet-actions' aria-label="Workspace actions">
-      <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#refresh-page" data-mobile-close-menu="true" aria-label="Refresh" title="Refresh">
-        <i class="fa-solid fa-rotate-right"></i>
-      </button>
-      <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#back" data-mobile-close-menu="true" aria-label="Back" title="Back">
-        <i class="fa-solid fa-chevron-left"></i>
-      </button>
-      <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#forward" data-mobile-close-menu="true" aria-label="Forward" title="Forward">
-        <i class="fa-solid fa-chevron-right"></i>
-      </button>
-      <a class='btn mobile-sheet-action' href="/columns" aria-label="2 Columns" title="2 Columns">
-        <i class="fa-solid fa-table-columns"></i>
-      </a>
-      <a class='btn mobile-sheet-action' href="/rows" aria-label="2 Rows" title="2 Rows">
-        <i class="fa-solid fa-table-columns fa-rotate-270"></i>
-      </a>
-      <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#new-window" data-mobile-close-menu="true" aria-label="New Window" title="New Window">
-        <i class="fa-solid fa-plus"></i>
-      </button>
-      <button type='button' class='btn mobile-sheet-action mobile-close-window-action hidden' data-mobile-proxy="#close-window" data-mobile-close-menu="true" aria-label="Close Section" title="Close Section">
-        <i class="fa-solid fa-xmark"></i>
-      </button>
-    </div>
     <div class='mobile-drawer-actions' aria-label="App actions">
       <button type='button' class='btn header-item mobile-nav-logs' data-mobile-proxy="#fs-status .fs-logs .fs-status-btn" data-mobile-panel="logs" data-mobile-close-menu="true" aria-pressed="false" aria-label="Logs">
         <div class='tab'>
@@ -8329,13 +8350,25 @@ body.dark .pinokio-custom-terminal-header {
         </div>
       </button>
       <% } %>
-      <a class='btn header-item mobile-drawer-home' href="/home" aria-label="Home">
-        <div class='tab'>
-          <i class="fa-solid fa-house menu-action-leading-icon"></i>
-          <div class='display'>Home</div>
-          <div class='flexible'></div>
-        </div>
-      </a>
+    </div>
+    <div class='mobile-sheet-actions' aria-label="Navigation and pane actions">
+      <div class='mobile-sheet-action-grid'>
+        <a class='btn mobile-sheet-action mobile-drawer-home' href="/home" aria-label="Home" title="Home">
+          <i class="fa-solid fa-house"></i>
+        </a>
+        <a class='btn mobile-sheet-action' href="/columns" aria-label="Split right" title="Split right">
+          <i class="fa-solid fa-table-columns"></i>
+        </a>
+        <a class='btn mobile-sheet-action' href="/rows" aria-label="Split down" title="Split down">
+          <i class="fa-solid fa-table-columns fa-rotate-270"></i>
+        </a>
+        <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#new-window" data-mobile-close-menu="true" aria-label="New window" title="New window">
+          <i class="fa-solid fa-plus"></i>
+        </button>
+        <button type='button' class='btn mobile-sheet-action mobile-sheet-action--close-pane mobile-close-window-action hidden' data-mobile-proxy="#close-window" data-mobile-close-menu="true" aria-label="Close pane" title="Close pane">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -11150,7 +11183,7 @@ const rerenderMenuSection = (container, html) => {
 	    const communityModeActive = !!(appcanvas && appcanvas.classList.contains("community-mode"))
     const askAiOpen = !!(appcanvas && appcanvas.classList.contains("panel-open"))
     const mobileMenuFallback = document.querySelector(".mobile-menu-fallback")
-    const closeSectionVisible = !!(closeWindowButton && !closeWindowButton.classList.contains("hidden"))
+    const closePaneAvailable = !!(closeWindowButton && !closeWindowButton.classList.contains("hidden"))
 
 	    document.querySelectorAll(".mobile-nav-menu").forEach((button) => {
 	      button.classList.toggle("selected", mobileMenuOpen)
@@ -11171,8 +11204,8 @@ const rerenderMenuSection = (container, html) => {
       syncLogsSelectedState()
     }
     document.querySelectorAll(".mobile-close-window-action").forEach((button) => {
-      button.classList.toggle("hidden", !closeSectionVisible)
-      button.setAttribute("aria-hidden", closeSectionVisible ? "false" : "true")
+      button.classList.toggle("hidden", !closePaneAvailable)
+      button.setAttribute("aria-hidden", closePaneAvailable ? "false" : "true")
     })
     if (mobileMenuFallback) {
       const showFallback = mobileMenuOpen && document.body.getAttribute("data-view") === "files"
@@ -11217,13 +11250,13 @@ const rerenderMenuSection = (container, html) => {
       setMobileMenuOpen(!isMobileMenuOpen())
     })
   }
-	  if (document.querySelector("#menu-mobile-close")) {
-	    document.querySelector("#menu-mobile-close").addEventListener("click", (e) => {
-	      e.preventDefault()
-	      setMobileMenuOpen(false, { skipRefresh: true })
-	    })
-	  }
-	  if (mobileMenuBackdrop) {
+  if (document.querySelector("#menu-mobile-close")) {
+    document.querySelector("#menu-mobile-close").addEventListener("click", (e) => {
+      e.preventDefault()
+      setMobileMenuOpen(false, { skipRefresh: true })
+    })
+  }
+  if (mobileMenuBackdrop) {
 	    mobileMenuBackdrop.addEventListener("click", () => {
 	      setMobileMenuOpen(false, { skipRefresh: true })
 	    })
@@ -11904,6 +11937,7 @@ const rerenderMenuSection = (container, html) => {
       }
 
       const finishResizing = () => {
+        appcanvas.classList.remove("sidebar-resizing")
         if (!isResizing) {
           if (document.activeElement === sidebarResizer) {
             sidebarResizer.blur()
@@ -11972,6 +12006,7 @@ const rerenderMenuSection = (container, html) => {
         }
         event.preventDefault()
         isResizing = true
+        appcanvas.classList.add("sidebar-resizing")
         pointerId = event.pointerId
         try {
           sidebarResizer.setPointerCapture(event.pointerId)
@@ -16027,6 +16062,9 @@ const rerenderMenuSection = (container, html) => {
     initialCollapsed = window.localStorage.getItem(storageKey) === "1"
   } catch (_) {}
   setCollapsed(initialCollapsed, { persist: false })
+  requestAnimationFrame(() => {
+    appcanvas.classList.add("sidebar-motion-ready")
+  })
 
   toggle.addEventListener("click", (event) => {
     event.preventDefault()
@@ -18616,6 +18654,12 @@ document.addEventListener("DOMContentLoaded", () => {
     if (!candidateState) return []
     return [].concat(candidateState.menu || [], candidateState.other || [])
   }
+  const eligibleDefaultScript = () => {
+    const defaults = allCandidates().filter((candidate) => {
+      return candidate && candidate.script && candidate.menu_default && !candidate.has_params
+    })
+    return defaults.length === 1 ? defaults[0].script : ""
+  }
   <%- include('partials/app_autolaunch_modal_helpers') %>
 	  const hasLaunchRequirementConfig = () => {
 	    return !!(
@@ -18792,7 +18836,7 @@ document.addEventListener("DOMContentLoaded", () => {
     if (!candidateState) {
       await loadCandidates()
     }
-    const script = selectedScript || ""
+    const script = selectedScript || eligibleDefaultScript()
     if (!script) {
       setFeedback("Choose a launch script first.", true)
       return

package/server/views/autolaunch.ejs

@@ -748,6 +748,15 @@ const renderScriptSection = (title, note, candidates) => {
 };
 
 const configuredScript = (data) => data && data.current ? data.current : "";
+const allScriptCandidates = () => candidateState
+  ? [].concat(candidateState.menu || [], candidateState.other || [])
+  : [];
+const eligibleDefaultScript = () => {
+  const defaults = allScriptCandidates().filter((candidate) => {
+    return candidate && candidate.script && candidate.menu_default && !candidate.has_params;
+  });
+  return defaults.length === 1 ? defaults[0].script : "";
+};
 
 <%- include('partials/autolaunch_dependency_helpers') %>
 const bindDetailControls = () => {
@@ -950,7 +959,7 @@ const toggleAutolaunch = () => {
     return;
   }
   const manual = detailEl.querySelector("[data-manual-script]");
-  const script = manual && manual.value.trim() ? manual.value.trim() : (selectedScript || "");
+  const script = manual && manual.value.trim() ? manual.value.trim() : (selectedScript || eligibleDefaultScript());
   if (!script) {
     setFeedback("Choose a launch script first.", true);
     return;

package/server/views/columns.ejs

@@ -309,8 +309,20 @@ body[data-agent='electron'] {
       }
     });
     window.addEventListener('message', (event) => {
+      if (event.data && event.data.e === "layout-state-request") {
+        const closable = Array.from(document.querySelectorAll('iframe')).some((iframe) => {
+          return event.source === iframe.contentWindow;
+        });
+        if (event.source && typeof event.source.postMessage === "function") {
+          event.source.postMessage({
+            e: "layout-state",
+            closable
+          }, "*");
+        }
+        return;
+      }
       if (event.data && event.data.e === "close") {
-        // find the frame 
+        // find the frame
         // Find which iframe sent the message
         const col0 = document.getElementById('col0');
         const col1 = document.getElementById('col1');