pinokiod 3.156.0 → 3.157.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.156.0",
+  "version": "3.157.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/common.js

@@ -1918,6 +1918,55 @@ document.addEventListener("DOMContentLoaded", () => {
       */
     })
   }
+  const requestLayoutSplitViaMessage = ({ direction, targetUrl }) => new Promise((resolve) => {
+    if (!direction || !targetUrl) {
+      resolve(false);
+      return;
+    }
+    if (!window.parent || window.parent === window) {
+      resolve(false);
+      return;
+    }
+    const requestId = `split_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+    let settled = false;
+    let timer = null;
+
+    const cleanup = (result) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      window.removeEventListener('message', handleResponse);
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+      resolve(result);
+    };
+
+    function handleResponse(event) {
+      if (!event || !event.data || event.source !== window.parent) {
+        return;
+      }
+      if (event.data.e !== 'layout-split-response' || event.data.requestId !== requestId) {
+        return;
+      }
+      cleanup(Boolean(event.data.ok));
+    }
+
+    window.addEventListener('message', handleResponse);
+    timer = window.setTimeout(() => cleanup(false), 1500);
+
+    try {
+      window.parent.postMessage({
+        e: 'layout-split-request',
+        requestId,
+        direction,
+        targetUrl,
+      }, '*');
+    } catch (_) {
+      cleanup(false);
+    }
+  });
   const handleSplitNavigation = async (anchor) => {
     const href = anchor.getAttribute('href') || '/columns';
     const originUrl = window.location.href;
@@ -1946,14 +1995,31 @@ document.addEventListener("DOMContentLoaded", () => {
       return;
     }
 
-    const layoutApi = window.parent && window.parent.PinokioLayout;
-    const frameId = window.frameElement?.dataset?.nodeId || window.name || null;
+    const direction = href === '/rows' ? 'rows' : 'columns';
+
+    let layoutApi = null;
+    try {
+      layoutApi = window.parent && window.parent.PinokioLayout;
+    } catch (error) {
+      if (!(error instanceof DOMException) || error.name !== 'SecurityError') {
+        console.warn('Unable to access parent layout API', error);
+      }
+      layoutApi = null;
+    }
+
+    const frameId = (() => {
+      try {
+        return window.frameElement?.dataset?.nodeId || window.name || null;
+      } catch (_) {
+        return window.name || null;
+      }
+    })();
 
     if (layoutApi && typeof layoutApi.split === 'function' && frameId) {
       try {
         const ok = layoutApi.split({
           frameId,
-          direction: href === '/rows' ? 'rows' : 'columns',
+          direction,
           targetUrl: selectedUrl,
         });
         if (ok) {
@@ -1961,10 +2027,18 @@ document.addEventListener("DOMContentLoaded", () => {
           return;
         }
       } catch (error) {
-        console.warn('Pinokio layout split failed, falling back to navigation.', error);
+        console.warn('Pinokio layout split failed, falling back to messaging.', error);
       }
     }
 
+    const messageSplitOk = await requestLayoutSplitViaMessage({
+      direction,
+      targetUrl: selectedUrl,
+    });
+    if (messageSplitOk) {
+      return;
+    }
+
     try {
       const target = new URL(href, window.location.origin);
       target.searchParams.set('origin', originUrl);

package/server/public/files-app/app.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
+  width: 100%;
   background: var(--background-color, #f7f7f7);
   color: var(--text-color, #111);
 }
@@ -296,18 +297,6 @@ body.dark .files-app__tab--stale .files-app__tab-label::after {
   color: var(--muted-color);
 }
 
-@media (max-width: 900px) {
-  .files-app__body {
-    flex-direction: column;
-  }
-  .files-app__sidebar {
-    width: 100%;
-    max-height: 260px;
-    border-right: none;
-    border-bottom: 1px solid var(--border-color);
-  }
-}
-
 .files-app__status[data-state='error'] {
   color: #ef4444;
 }

package/server/public/layout.js

@@ -460,18 +460,13 @@
     if (frameId) {
       payload.frameId = frameId;
     }
-    const targetOrigin = HOST_ORIGIN;
     const sendToWindow = (win) => {
       if (!win) {
         return;
       }
       try {
-        win.postMessage(payload, targetOrigin);
-      } catch (error) {
-        try {
-          win.postMessage(payload, '*');
-        } catch (_) {}
-      }
+        win.postMessage(payload, '*');
+      } catch (_) {}
     };
     if (targetWindow) {
       sendToWindow(targetWindow);
@@ -681,6 +676,43 @@
       broadcastLayoutState(event.source, frameId);
       return;
     }
+    if (event.data.e === 'layout-split-request') {
+      const { requestId = null, direction = null, targetUrl = null } = event.data;
+      let ok = false;
+      if (direction && targetUrl) {
+        let frameId = null;
+        for (const [id, entry] of leafElements.entries()) {
+          if (entry.iframe && entry.iframe.contentWindow === event.source) {
+            frameId = id;
+            break;
+          }
+        }
+        if (frameId) {
+          const nextDirection = direction === 'rows' ? 'rows' : 'columns';
+          try {
+            ok = splitLeaf(frameId, nextDirection, normalizeSrc(targetUrl));
+            if (ok) {
+              ensureSession();
+            }
+          } catch (error) {
+            console.error('[PinokioLayout] Split via message failed', error);
+            ok = false;
+          }
+        } else {
+          console.warn('[PinokioLayout] Unable to resolve frame for split request');
+        }
+      }
+      try {
+        event.source?.postMessage({
+          e: 'layout-split-response',
+          requestId,
+          ok,
+        }, event.origin || '*');
+      } catch (error) {
+        console.warn('[PinokioLayout] Failed to respond to split request', error);
+      }
+      return;
+    }
     if (event.data.e === 'close') {
       const frameId = (() => {
         for (const [id, entry] of leafElements.entries()) {

package/server/public/style.css

@@ -1076,7 +1076,7 @@ header {
   height: 500px;
 }
 header h1 {
-  padding: 0px; 
+  padding: 5px; 
   margin: 0;
   font-size: 18px;
   line-height: 18px;
@@ -2093,7 +2093,6 @@ body.dark header .home {
 }
 header .home {
   color: var(--light-color); 
-  padding: 10px;
   cursor: pointer !important;
 }
 /*
@@ -2381,7 +2380,7 @@ body.dark .mode-selector .btn2.selected {
 @media only screen and (max-width: 768px) {
   body {
     display: flex;
-    flex-direction: row;
+    align-items: stretch;
   }
   header.navheader .dropdown-content {
     position: relative;
@@ -2417,20 +2416,32 @@ body.dark .mode-selector .btn2.selected {
   header.navheader {
     overflow: auto;
     flex-shrink: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
+    position: relative;
+    top: auto;
+    left: auto;
+    height: auto;
+    min-height: 0;
+    /*
+    width: 55px;
+    min-width: 55px;
+    max-width: 55px;
+    */
+    backdrop-filter: none;
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
   }
   header.navheader h1 .btn2 {
-    padding: 10px;
+    padding: 5px;
     width: 100%;
     box-sizing: border-box;
   }
   header.navheader h1 {
-    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: auto;
     overflow: auto;
-    display: block;
   }
   .mode-selector {
     flex-direction: column;
@@ -2450,11 +2461,18 @@ body.dark .mode-selector .btn2.selected {
   }
   main,
   iframe.mainframe {
-    margin-left: 55px;
-    width: calc(100% - 55px);
+    margin-left: 0;
+    width: auto;
+    flex: 1 1 auto;
+    min-width: 0;
   }
   main .container {
-    margin-left: 10px !important;
+    margin-left: 0 !important;
+  }
+  .appcanvas {
+    margin-left: 0;
+    flex: 1 1 auto;
+    min-width: 0;
   }
   .app-icon {
     display: block;

package/server/public/urldropdown.css

@@ -758,7 +758,7 @@ body.dark .urlbar input[type=url] {
   background: rgba(0,0,0,0.05);
   border-radius: 6px;
   border: none;
-  padding: 10px;
+  padding: 7px;
   width: 100%;
 }
 @media only screen and (max-width: 768px) {

package/server/views/app.ejs

@@ -781,6 +781,8 @@ body.dark .frame-link.selected {
   */
   min-width: 0;
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   /*
   margin-right: 10px;
   */
@@ -2765,19 +2767,52 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 */
 @media only screen and (max-width: 768px) {
   body {
+    display: flex !important;
     flex-direction: row !important;
+    align-items: stretch;
   }
   body aside {
     display: none;
   }
+  header.navheader {
+    position: relative;
+    top: auto;
+    left: auto;
+    height: auto;
+    min-height: 0;
+    /*
+    width: 55px;
+    min-width: 55px;
+    max-width: 55px;
+    */
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    overflow: auto;
+    flex-shrink: 0;
+    backdrop-filter: none;
+  }
+  header.navheader h1 {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: auto;
+    overflow: auto;
+  }
   .appcanvas {
-    margin-left: 55px;
+    margin-left: 0;
+    flex: 1 1 auto;
+    min-width: 0;
   }
   header.navheader.minimized + .appcanvas {
     margin-left: 0;
   }
   main, iframe.mainframe {
     padding-left: 0;
+    margin-left: 0;
+    width: auto;
+    flex: 1 1 auto;
+    min-width: 0;
   }
   .appcanvas > aside .menu-container {
     padding: 8px 0 0;
@@ -2859,6 +2894,9 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 <a class='home' href="/home">
   <img class='icon' src="/pinokio-black.png">
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -2875,9 +2913,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/connect/x.ejs

@@ -194,6 +194,9 @@ pre {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -205,9 +208,6 @@ pre {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/connect.ejs

@@ -813,6 +813,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -830,9 +833,6 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/container.ejs

@@ -205,7 +205,6 @@ body.dark header .home {
 */
 header .home {
   color: var(--light-color); 
-  padding: 10px;
 }
 body.dark hr {
   background: white;
@@ -327,6 +326,9 @@ iframe {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -344,9 +346,6 @@ iframe {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/download.ejs

@@ -122,6 +122,9 @@ body.frozen {
 <header class='grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -133,9 +136,6 @@ body.frozen {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/explore.ejs

@@ -123,6 +123,9 @@ body main iframe {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -134,9 +137,6 @@ body main iframe {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/form.ejs

@@ -159,6 +159,9 @@ document.addEventListener("DOMContentLoaded", async () => {
     <a class='path' href="<%=path.path%>"><%-path.name%></a>
   <% } %>
 <% }) %>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
@@ -167,9 +170,6 @@ document.addEventListener("DOMContentLoaded", async () => {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/frame.ejs

@@ -43,6 +43,40 @@ main iframe {
   height: 100%;
   border: none;
 }
+@media only screen and (max-width: 768px) {
+  body {
+    flex-direction: row;
+    align-items: stretch;
+  }
+  header {
+    display: flex;
+    flex-direction: column;
+    width: 55px;
+    min-width: 55px;
+    max-width: 55px;
+    padding: 7px 0;
+    box-sizing: border-box;
+    overflow: auto;
+    align-self: stretch;
+  }
+  header h1 {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: auto;
+    overflow: auto;
+  }
+  header .flexible {
+    display: none;
+  }
+  main {
+    flex-grow: 1;
+    flex-basis: auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
 </style>
 </head>
 <body class='columns <%=theme%>' data-agent="<%=agent%>">
@@ -55,6 +89,9 @@ main iframe {
     <a class='path' href="<%=path.path%>"><%-path.name%></a>
   <% } %>
 <% }) %>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
@@ -63,9 +100,6 @@ main iframe {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/github.ejs

@@ -235,6 +235,9 @@ ol {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -246,9 +249,6 @@ ol {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/help.ejs

@@ -256,6 +256,9 @@ body.dark .item .tile .badge {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -267,9 +270,6 @@ body.dark .item .tile .badge {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/index.ejs

@@ -418,6 +418,9 @@ body.dark aside .current.selected {
 <h1>
 <% if (ishome) { %>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -435,9 +438,6 @@ body.dark aside .current.selected {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/index2.ejs

@@ -267,14 +267,14 @@ body.dark .open-menu, body.dark .browse {
   <% } %>
 <% }) %>
 <% if (ishome) { %>
+    <button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+      <div><i class="fa-solid fa-expand"></i></div>
+    </button>
   <div class='nav-btns'>
     <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
     <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
     <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
     <a class='btn2' href="/home?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-    <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-      <div><i class="fa-solid fa-expand"></i></div>
-    </button>
     <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
   </div>
 <% } %>

package/server/views/init/index.ejs

@@ -1521,6 +1521,9 @@ body.dark .ace-editor {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -1532,9 +1535,6 @@ body.dark .ace-editor {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/mini.ejs

@@ -756,6 +756,9 @@ body.dark .appcanvas {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -767,9 +770,6 @@ body.dark .appcanvas {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/net.ejs

@@ -536,6 +536,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <header class='navheader grabbable'>
   <h1>
     <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+    <button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+      <div><i class="fa-solid fa-expand"></i></div>
+    </button>
     <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
     <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
     <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -553,9 +556,6 @@ document.addEventListener('DOMContentLoaded', function() {
     <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
       <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
     </a>
-    <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-      <div><i class="fa-solid fa-expand"></i></div>
-    </button>
     <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
       <div><i class="fa-solid fa-plus"></i></div>
     </button>

package/server/views/network.ejs

@@ -1049,6 +1049,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -1066,9 +1069,6 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/network2.ejs

@@ -419,6 +419,9 @@ table h3 {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+  <button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+    <div><i class="fa-solid fa-expand"></i></div>
+  </button>
 <button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -428,9 +431,6 @@ table h3 {
   <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
   <a class='btn2' href="/home?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-    <div><i class="fa-solid fa-expand"></i></div>
-  </button>
   <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
 </div>
 </h1>

package/server/views/old_network.ejs

@@ -402,6 +402,9 @@ input:checked + .slider:before {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+  <button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+    <div><i class="fa-solid fa-expand"></i></div>
+  </button>
 <button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -414,9 +417,6 @@ input:checked + .slider:before {
   <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
   <a class='btn2' href="/home?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-    <div><i class="fa-solid fa-expand"></i></div>
-  </button>
   <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
 </div>
 </h1>

package/server/views/prototype/index.ejs

@@ -1003,6 +1003,9 @@ body.dark .appcanvas {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -1014,9 +1017,6 @@ body.dark .appcanvas {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/review.ejs

@@ -938,6 +938,9 @@ body.dark .top-menu .btn2.selected {
 <a class='home' href="/home">
   <img class='icon' src="/pinokio-black.png">
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -954,9 +957,6 @@ body.dark .top-menu .btn2.selected {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/screenshots.ejs

@@ -709,6 +709,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -726,9 +729,6 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/settings.ejs

@@ -374,6 +374,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -398,9 +401,6 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/setup.ejs

@@ -136,6 +136,9 @@ body {
 <header class='grabbable'>
 <h1>
 <a class='home' href="/home"><%-logo%></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
@@ -144,9 +147,6 @@ body {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/setup_home.ejs

@@ -152,6 +152,9 @@ body.dark .card {
 <header class='grabbable'>
 <h1>
 <a class='path' href="/"><%-logo%></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
@@ -160,9 +163,6 @@ body.dark .card {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/terminals.ejs

@@ -370,6 +370,9 @@ body.dark .plugin-option:hover {
 <header class='grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png" alt="Pinokio"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -381,9 +384,6 @@ body.dark .plugin-option:hover {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>

package/server/views/tools.ejs

@@ -1099,6 +1099,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
+<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
+  <div><i class="fa-solid fa-expand"></i></div>
+</button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
@@ -1116,9 +1119,6 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-expand"></i></div>
-</button>
 <button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
   <div><i class="fa-solid fa-plus"></i></div>
 </button>