pinokiod 3.40.0 → 3.42.0

package/server/views/file_explorer.ejs

@@ -49,6 +49,9 @@
   display: flex;
   align-items: center;
 }
+header {
+  padding: 10px;
+}
 header .runner {
   padding: 10px 0 0;
 }
@@ -124,6 +127,11 @@ body.dark .browser-options-row {
   border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 */
+@media only screen and (max-width: 800px) {
+  header h1 {
+    height: unset;
+  }
+}
 @media only screen and (max-width: 480px) {
   .btn2 {
     padding: 5px;
@@ -136,6 +144,8 @@ body.dark .browser-options-row {
   }
 }
 </style>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/noty.js"></script>
@@ -161,12 +171,6 @@ body.dark .browser-options-row {
 -->
 <header class='navheader grabbable'>
 <h1>
-<% if (ishome) { %>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><i class="fa-solid fa-chevron-left"></i></button>
-<button class='btn2' id='forward'><i class="fa-solid fa-chevron-right"></i></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
-<% } %>
 <% paths.forEach((path) => { %>
   <% if (path.action) { %>
     <a class='path nav-button' id="<%=path.id%>" onclick="<%=path.action%>"><%-path.name%></a>
@@ -179,24 +183,10 @@ body.dark .browser-options-row {
   <input type='search' class="flexible" placeholder='Filter downloaded apps'>
 </form>
 <% } %>
-<% if (ishome) { %>
-  <div class='nav-btns'>
-    <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
-    <% if (agent === "electron") { %>
-      <a class='btn2' data-filepath="<%=filepath%>"><div><i class="fa-regular fa-folder-open"></i></div><div>Files</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="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-    <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>
-<% if (!ishome) { %>
-  <div class='runner'>
-    <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-square-arrow-up-right"></i>&nbsp;&nbsp;Open in File Explorer</button>
-  </div>
-<% } %>
+<div class='runner'>
+  <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-square-arrow-up-right"></i>&nbsp;&nbsp;Open in File Explorer</button>
+</div>
 <% if (display.includes("dependencies")) { %>
 <div class='dependencies'>
   <h2>Prerequisites</h2>
@@ -216,235 +206,24 @@ body.dark .browser-options-row {
 <main>
 <div id='terminal' class='hidden'></div>
 <div class='container'>
-<% if (ishome) { %>
-  <% if (running.length === 0 && notRunning.length === 0) { %>
-  <% } else { %>
-    <div class='browser-options'>
-      <% if (agent === "electron") { %>
-        <div class='browser-options-row'>
-          <% if (agent === "electron") { %>
-            <a href="/" target="_blank" class='btn' features="browser"><div><i class="fa-solid fa-square-up-right"></i> Open</div></a>
-          <% } else { %>
-            <a href="/" target="_blank" class='btn'><div><i class="fa-solid fa-square-up-right"></i> Open</div></a>
-          <% } %>
-          <div class='flexible'>
-            <h3><i class="fa-solid fa-bolt"></i> Instant Launch</h3>
-            <div>(Experimental) Directly open pinokio apps from your favorite browser address bar at localhost. If an app you're trying to use is already running, it will instantly load. If it's not, the app will first launch and then load the website.</div>
-          </div>
-        </div>
+<% items.forEach((item, index) => { %>
+  <a data-description="<%=item.description%>" data-index="<%=index%>" data-name="<%=item.name%>" data-uri="<%=item.uri%>" class='line thick' href="<%=item.url%>">
+    <h3>
+      <% if (item.icon) { %>
+        <i class="<%=item.icon%>"></i>
+      <% } else { %>
+        <i class="fa-regular fa-folder"></i>
       <% } %>
-      <div class='browser-options-row'>
-        <div class='flexible'>
-          <h3><i class="fa-solid fa-wifi"></i> Local Sharing</h3>
-          <div>Serve Pinokio, installed apps, and even external apps (example: Ollama) to any device on the same network.</div>
-        </div>
-      </div>
-      <!--
-      <div class='browser-options-row'>
-        <a href="/proxy" class='flexible'>
-          <h3><i class="fa-solid fa-wifi"></i> Local Share</h3>
-          <div>Access Pinokio, Ollama, and other 3rd party apps from any device on the same network. By default it's off.</div>
-        </a>
-        <% if (false) { %>
-          <% if (proxy) { %>
-            <a id='wifi-stop' data-proxy="<%=proxy.proxy%>" class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></a>
-            <div class='flexible'>
-              <h3><i class="fa-solid fa-wifi"></i> Local Share</h3>
-              <div>Access Pinokio from any device on the same network. By default it's off.</div>
-              <span class='badge'><i class="fa-solid fa-circle-notch fa-spin"></i> Running at <a href="<%=proxy.proxy%>" target="_blank" features="browser"><%=proxy.proxy%></a></span>
-              <a id='wifi-qr' class='badge'><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
-            </div>
-          <% } else { %>
-            <a id='wifi' class='btn'><div><i class="fa-solid fa-play"></i> Start</div></a>
-            <a id='wifi-starting' class='btn disabled hidden'><div><i class="fa-solid fa-circle-notch fa-spin"></i> Starting</div></a>
-            <div class='flexible'>
-              <h3><i class="fa-solid fa-wifi"></i> Local Share</h3>
-              <div>Access Pinokio from any device on the same network. By default it's off.</div>
-            </div>
-          <% } %>
-        <% } %>
-      </div>
-        -->
-      <div class='browser-options-row hidden'>
-        <% if (cloudflare_pub) { %>
-          <a id='cloudflare-stop' class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></a>
-          <div class='flexible'>
-            <h3>Public Share</h3>
-            <div>Open up your Pinokio server to the open internet (anyone with the URL can access)</div>
-            <span class='badge'><i class="fa-solid fa-circle-notch fa-spin"></i> Running at <a href="<%=cloudflare_pub%>" target="_blank" features="browser"><%=cloudflare_pub%></a></span>
-            <a id='cloudflare-qr' class='badge'><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
-          </div>
-        <% } else { %>
-          <a id='cloudflare' class='btn'><div><i class="fa-solid fa-play"></i> Start</div></a>
-          <a id='cloudflare-starting' class='btn disabled hidden'><div><i class="fa-solid fa-circle-notch fa-spin"></i> Starting</div></a>
-          <div class='flexible'>
-            <h3>Public Share</h3>
-            <div>Open up your Pinokio server to the open internet (anyone with the URL can access)</div>
-          </div>
-        <% } %>
-      </div>
-    </div>
-  <% } %>
-  <!--
-  <div class='type-tabs'>
-    <% if (mode === "task") { %>
-      <a class='type-tab' href="/"><img src='/pinokio-<%=theme=='dark' ? 'white' : 'black'%>.png'> Apps</a>
-      <a class='type-tab selected' href="/?mode=task"> <img src='/<%=theme=='dark' ? 'term-dark.png' : 'term-white.png'%>'> Tasks</a>
-    <% } else { %>
-      <a class='type-tab selected' href="/"><img src='/pinokio-<%=theme=='dark' ? 'white' : 'black'%>.png'> Apps</a>
-      <a class='type-tab' href="/?mode=task"> <img src='/<%=theme=='dark' ? 'term-dark.png' : 'term-white.png'%>'> Tasks</a>
-    <% } %>
-  </div>
-  -->
-  <% if (running.length > 0) { %>
-    <div class='running-apps'>
-      <div class='header-label'>Running</div>
-      <% running.forEach((item) => { %>
-        <a href="<%=item.browser_url%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-uri="<%=item.uri%>" class='line align-top'>
-          <h3>
-            <% if (item.icon) { %>
-              <img src="<%=item.icon%>">
-            <% } else { %>
-              <% if (theme === 'dark') { %>
-                <img src="/pinokio-white.png">
-              <% } else { %>
-                <img src="/pinokio-black.png">
-              <% } %>
-              <!--
-              <div class='avatar'>
-                <i class="fa-regular fa-circle-dot"></i>
-              </div>
-              -->
-            <% } %>
-            <div class='col'>
-              <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>
-              <div class='title'><%=item.name%></div>
-              <div class='description'><%=item.description%></div>
-              <div>
-                <button class='btn browse' data-src="<%=item.browser_url%>/dev">
-                  <i class='fa-regular fa-folder-open'></i>
-                </button>
-                <button class='btn del' data-src="<%=item.url%>">
-                  <i class="fa-solid fa-trash-can"></i>
-                </button>
-                <% if (item.running_scripts) { %>
-                  <% item.running_scripts.forEach((s) => { %>
-                      <button class='btn shutdown' data-src="<%=s.path%>">
-                        <i class="fa-solid fa-stop"></i> Stop <%=s.name%>&nbsp;
-                        <i class='fa-solid fa-spin fa-circle-notch'></i>
-                      </button>
-                  <% }) %>
-                <% } %>
-              </div>
-              <% if (item.shortcuts && item.shortcuts.length > 0) { %>
-                <div class='btns'>
-                  <% item.shortcuts.forEach((btn) => { %>
-                    <% if (btn.btn) { %>
-                      <button data-action="<%=btn.action ? JSON.stringify(btn.action) : ''%>" class='btn menu-btn'><%-btn.btn%></button>
-                    <% } %>
-                  <% }) %>
-                </div>
-              <% } %>
-            </div>
-            <div class='spinner'>
-              <i class="fa-solid fa-chevron-right"></i>
-              <!--
-              <i class="fa-solid fa-circle-notch fa-spin"></i>
-              -->
-            </div>
-          </h3>
-        </a>
-      <% }) %>
-    </div>
-  <% } %>
-  <% if (notRunning.length > 0) { %>
-    <div class='not-running-apps'>
-      <div class='header-label'>Not Running</div>
-      <% notRunning.forEach((item) => { %>
-        <a href="<%=item.browser_url%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-uri="<%=item.uri%>" class='line align-top'>
-          <h3>
-            <% if (item.icon) { %>
-              <img src="<%=item.icon%>">
-            <% } else { %>
-            <!--
-              <div class='avatar'>
-                <i class="fa-regular fa-circle-dot"></i>
-              </div>
-              -->
-              <% if (theme === 'dark') { %>
-                <img src="/pinokio-white.png">
-              <% } else { %>
-                <img src="/pinokio-black.png">
-              <% } %>
-            <% } %>
-            <div class='col'>
-              <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>
-              <div class='title'><%=item.name%></div>
-              <div class='description'><%=item.description%></div>
-              <button class='btn browse' data-src="<%=item.browser_url%>/dev">
-                <i class='fa-regular fa-folder-open'></i>
-              </button>
-              <button class='btn del' data-src="<%=item.url%>">
-                <i class="fa-solid fa-trash-can"></i>
-              </button>
-              <% if (item.shortcuts && item.shortcuts.length > 0) { %>
-                <div class='btns'>
-                  <% item.shortcuts.forEach((btn) => { %>
-                    <% if (btn.btn) { %>
-                      <button data-action="<%=btn.action ? JSON.stringify(btn.action) : ''%>" class='btn menu-btn'><%-btn.btn%></button>
-                    <% } %>
-                  <% }) %>
-                </div>
-              <% } %>
-            </div>
-            <div class='spinner'>
-              <i class="fa-solid fa-chevron-right"></i>
-            </div>
-          </h3>
-        </a>
-      <% }) %>
-    </div>
-  <% } %>
-  <% if (running.length === 0 && notRunning.length === 0) { %>
-    <div class='placeholder'>
-      <h1>Welcome.</h1>
-      <br>
-      <div>Get started by installing some Pinokio scripts.</div>
-      <a href="/?mode=explore" class='btn'><i class="fa-solid fa-globe"></i> Visit Discover Page</a>
-    </div>
-  <% } %>
-<% } else { %>
-  <% items.forEach((item, index) => { %>
-    <a data-description="<%=item.description%>" data-index="<%=index%>" data-name="<%=item.name%>" data-uri="<%=item.uri%>" class='line thick' href="<%=item.url%>">
-      <h3>
-        <% if (item.icon) { %>
-          <i class="<%=item.icon%>"></i>
-        <% } else { %>
-          <i class="fa-regular fa-folder"></i>
-        <% } %>
-          <%=item.name%>
-        </h3>
-      <div class='description'><%=item.description%></div>
-    </a>
-  <% }) %>
-<% } %>
+        <%=item.name%>
+      </h3>
+    <div class='description'><%=item.description%></div>
+  </a>
+<% }) %>
 <% if (readme) { %>
 <div class='readme markdown-body'>
   <div class='content'><%-readme%></div>
 </div>
 <% } %>
-<% if (display.includes("onboarding")) { %>
-<!--
-<div class='container'>
-  <div class='content'>
-    <h2>Quickstart</h2>
-    <div>Install llama</div>
-    <br>
-    <button class='btn' id='llama'>Install</button>
-  </div>
-</div>
--->
-<% } %>
 </div>
 </main>
 <script>

package/server/views/form.ejs

@@ -159,8 +159,51 @@ document.addEventListener("DOMContentLoaded", async () => {
     <a class='path' href="<%=path.path%>"><%-path.name%></a>
   <% } %>
 <% }) %>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
-<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>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<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>
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-solid fa-plus"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
+</div>
+<!--
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <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>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
+</div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 <a class='gitremote' data-filepath="<%=filepath%>"><%=filepath%></a>
 <div class='runner'>

package/server/views/frame.ejs

@@ -55,8 +55,46 @@ main iframe {
     <a class='path' href="<%=path.path%>"><%-path.name%></a>
   <% } %>
 <% }) %>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
-<button id='new-window' title='open a new window' class='btn2'><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<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>
+<div class="dropdown-content" id="dropdown-content">
+  <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+    <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+  </button>
+  <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+    <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+  </button>
+</div>
+<!--
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <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>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
+</div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 <% if (paths.length > 3) { %>
 <a class='gitremote' data-filepath="<%=filepath%>"><%=filepath%></a>

package/server/views/github.ejs

@@ -224,6 +224,8 @@ ol {
   padding-inline-start: 20px;
 }
 </style>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/common.js"></script>
@@ -233,19 +235,54 @@ ol {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
+<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>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
-<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="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <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>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<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>
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-solid fa-plus"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
-</h1>
+<!--
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <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>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
+</div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 </header>
 <main>

package/server/views/help.ejs

@@ -235,6 +235,8 @@ body.dark .item .tile .badge {
   padding: 10px 0;
 }
 </style>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
@@ -254,15 +256,54 @@ body.dark .item .tile .badge {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</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>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
-<div class='nav-btns'>
-  <a class='btn2' href="/?mode=help"><div><i class="fa-regular fa-face-smile"></i></div><div>Community</div></a>
-  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <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>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<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>
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-solid fa-plus"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
+</div>
+<!--
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <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>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 </header>
 <main>