pinokiod 3.41.0 → 3.42.0

package/server/views/index.ejs

@@ -216,7 +216,9 @@ body.dark .open-menu, body.dark .browse {
   color: royalblue !important;
 }
 .open-menu, .browse {
+/*
   width: 80px;
+  */
   border-radius: 0 !important;
   background: rgba(0,0,0,0.04) !important;
   color: black !important;
@@ -246,7 +248,6 @@ aside {
   width: 200px;
   display: block;
   flex-shrink: 0;
-  border-right: 1px solid rgba(0,0,0,0.04);
 }
 body.dark aside .tab:hover, aside .tab:hover {
   color: royalblue !important;
@@ -255,12 +256,18 @@ body.dark aside .tab:hover, aside .tab:hover {
 aside .tab i {
   width: 20px;
   text-align: center;
+  display: block;
 }
 body.dark aside .tab {
   color: white;
 }
+aside .tab.hidden {
+  padding: 0;
+}
 aside .tab {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 5px;
   color: black;
   text-decoration: none;
   padding: 10px;
@@ -307,7 +314,47 @@ body.dark aside .current.selected {
   */
 }
 .container {
-  margin-right: 20px;
+  margin-left: 20px;
+}
+@media only screen and (max-width: 800px) {
+  body {
+    display: flex !important;
+    flex-direction: row !important;
+  }
+}
+@media only screen and (max-width: 600px) {
+  aside {
+    width: unset;
+    flex-shrink: unset;
+  }
+  aside {
+    padding: 0 10px;
+  }
+  aside .tab i {
+    width: 100%;
+  }
+  aside .tab .caption {
+    display: none;
+  }
+  aside .tab {
+    margin: 0;
+    padding: 10px;
+    border-left: none;
+  }
+  aside .btn-tab {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+  aside .btn-tab .btn {
+    display: flex;
+    justify-content: center;
+  }
+  aside .btn-tab .btn .caption {
+    display: none; 
+  }
+  header .flexible {
+    min-width: unset;
+  }
 }
 @media only screen and (max-width: 480px) {
   .btn2 {
@@ -332,10 +379,11 @@ body.dark aside .current.selected {
 <script src="/Socket.js"></script>
 <script src="/install.js"></script>
 <script src="/common.js"></script>
-<script src="/opener.js"></script>
 <script src="/nav.js"></script>
 <script src="/fuse.js"></script>
 <script src="/report.js"></script>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/filepond-plugin-file-validate-type.min.js"></script>
 <script src="/filepond-plugin-image-exif-orientation.min.js"></script>
 <script src="/filepond-plugin-image-preview.min.js"></script>
@@ -362,21 +410,30 @@ body.dark aside .current.selected {
 <h1>
 <% if (ishome) { %>
 <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>
-<div class='url-bar'>
-  <% if (current_urls.https) { %>
-    <a class='https-url' target="_blank" href="<%=current_urls.https%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.https%></a>
-  <% } %>
-  <% if (current_urls.http) { %>
-    <a class='http-url' target="_blank" href="<%=current_urls.http%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.http%></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>
+<form class='urlbar'><input type='url' placeholder='enter a local url'></form>
+<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>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
-<!--
-<button id='newfolder' class='btn2'><div><i class="fa-solid fa-folder-plus"></i></div><div>New Folder</div></button>
--->
 <% } %>
 <% paths.forEach((path) => { %>
   <% if (path.action) { %>
@@ -385,15 +442,9 @@ body.dark aside .current.selected {
     <a class='path' href="<%=path.path%>"><%-path.name%></a>
   <% } %>
 <% }) %>
-<% 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>
-    <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>
-<% } %>
+<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 (!ishome) { %>
   <div class='runner'>
@@ -418,23 +469,6 @@ body.dark aside .current.selected {
 </header>
 <main>
 <div id='terminal' class='hidden'></div>
-<aside>
-  <div class='btn-tab'>
-    <a href="/init" class='btn'><i class="fa-solid fa-plus"></i> Create</a>
-    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i> Discover</a>
-  </div>
-  <a href="/" class='tab selected'><i class='fas fa-laptop-code'></i> Local</a>
-  <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i> Network</a>
-  <% if (list.length > 0) { %>
-    <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
-    <% list.forEach(({ host, name, platform, processes }, index) => { %>
-    <!--
-      <a href="http://<%=host%>:42000" class='submenu tab' target="_blank"><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
-      -->
-      <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
-    <% }) %>
-  <% } %>
-</aside>
 <div class='container'>
 <% if (ishome) { %>
   <form class='search'>
@@ -464,11 +498,11 @@ body.dark aside .current.selected {
   <% if (running.length > 0) { %>
     <div class='running-apps'>
       <% running.forEach((item) => { %>
-        <a href="<%=item.browser_url%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" class='line align-top'>
+        <a target="<%=item.target || '_self'%>" href="<%=item.browser_url%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" class='line align-top'>
           <h3>
             <div class='item-icon'>
               <% if (item.icon) { %>
-                <img src="<%=item.icon%>">
+                <img src="<%=item.icon%>" onerror="this.src='/pinokio-black.png'"/>
               <% } else { %>
                 <% if (theme === 'dark') { %>
                   <img src="/pinokio-white.png">
@@ -485,9 +519,12 @@ body.dark aside .current.selected {
               <div class='uri'><%=item.filepath%></div>
               <div class='description'><%=item.description%></div>
               <div class='menu-btns'>
-                <button class='btn browse' data-src="<%=item.browser_url%>/dev">
+                <button class='btn browse' data-src="<%=item.dev_url%>">
                   <i class='fa-solid fa-code'></i> Dev
                 </button>
+                <button class='btn browse' data-src="<%=item.review_url%>">
+                  <i class="fa-regular fa-message"></i> Community
+                </button>
                 <button class='btn open-menu'>
                   <i class="fa-solid fa-bars"></i><span> Menu</span>
                 </button>
@@ -496,13 +533,13 @@ body.dark aside .current.selected {
                     <button class='btn' data-filepath="<%=item.filepath%>">
                       <i class="fa-solid fa-folder-open"></i> Open</button>
                     </button>
-                    <button class='btn copy-menu' data-src="<%=item.browser_url%>/dev">
+                    <button class='btn copy-menu'>
                       <i class='fa-solid fa-copy'></i> Copy
                     </button>
-                    <button class='btn move-menu' data-src="<%=item.browser_url%>/dev" data-disable="To move the folder, the app should not be running.">
+                    <button class='btn move-menu' data-disable="To move the folder, the app should not be running.">
                       <i class="fa-solid fa-right-to-bracket"></i> Move
                     </button>
-                    <button class='btn edit-menu' data-src="<%=item.browser_url%>/dev">
+                    <button class='btn edit-menu'>
                       <i class='fa-solid fa-pen-to-square'></i> Edit
                     </button>
                     <button class='btn del' data-src="<%=item.url%>" data-disable="To delete the folder, the app should not be running.">
@@ -552,11 +589,11 @@ body.dark aside .current.selected {
       <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-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" class='line align-top'>
+        <a target="<%=item.target || '_self'%>" href="<%=item.browser_url%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" class='line align-top'>
           <h3>
             <div class='item-icon'>
               <% if (item.icon) { %>
-                <img src="<%=item.icon%>">
+                <img src="<%=item.icon%>" onerror="this.src='/pinokio-black.png'"/>
               <% } else { %>
                 <% if (theme === 'dark') { %>
                   <img src="/pinokio-white.png">
@@ -573,9 +610,12 @@ body.dark aside .current.selected {
               <div class='uri'><%=item.filepath%></div>
               <div class='description'><%=item.description%></div>
               <div class='menu-btns'>
-                <button class='btn browse' data-src="<%=item.browser_url%>/dev">
+                <button class='btn browse' data-src="<%=item.dev_url%>">
                   <i class='fa-solid fa-code'></i> Dev
                 </button>
+                <button class='btn browse' data-src="<%=item.review_url%>">
+                  <i class="fa-regular fa-message"></i> Community
+                </button>
                 <button class='btn open-menu'>
                   <i class="fa-solid fa-bars"></i><span> Menu</span>
                 </button>
@@ -584,13 +624,13 @@ body.dark aside .current.selected {
                     <button class='btn' data-filepath="<%=item.filepath%>">
                       <i class="fa-solid fa-folder-open"></i> Open</button>
                     </button>
-                    <button class='btn copy-menu' data-src="<%=item.browser_url%>/dev">
+                    <button class='btn copy-menu'>
                       <i class='fa-solid fa-copy'></i> Copy
                     </button>
-                    <button class='btn move-menu' data-src="<%=item.browser_url%>/dev">
+                    <button class='btn move-menu'>
                       <i class="fa-solid fa-right-to-bracket"></i> Move
                     </button>
-                    <button class='btn edit-menu' data-src="<%=item.browser_url%>/dev">
+                    <button class='btn edit-menu'>
                       <i class='fa-solid fa-pen-to-square'></i> Edit
                     </button>
                     <button class='btn del' data-src="<%=item.url%>">
@@ -630,7 +670,7 @@ body.dark aside .current.selected {
   <% } %>
 <% } 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%>">
+    <a target="<%=item.target || '_self'%>" 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>
@@ -661,6 +701,27 @@ body.dark aside .current.selected {
 -->
 <% } %>
 </div>
+<aside>
+  <div class='btn-tab'>
+    <a href="/init" class='btn'><i class="fa-solid fa-plus"></i><div class='caption'>Create</div></a>
+    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i><div class='caption'>Discover</div></a>
+  </div>
+  <a href="/" class='tab selected'><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>
+  <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
+  <% if (list.length > 0) { %>
+    <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+    <% list.forEach(({ host, name, platform, processes }, index) => { %>
+      <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=current_host === host ? 'this machine' : host%>)</div></a>
+    <% }) %>
+  <% } %>
+  <a href="/connect" class='tab'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
+  <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
+  <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
+  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+  <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
+  <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
+</aside>
 </main>
 <script>
 let paths = location.pathname.split("/").filter(x=>x)
@@ -963,7 +1024,6 @@ if (document.querySelector("form input[type=search]")) {
 //      return res.json()
 //    })
 //    if (res.launch_complete) {
-//      debugger
 //      console.log("launched")
 //      clearInterval(interval)
 //      location.href = location.href
@@ -1434,5 +1494,6 @@ if (document.querySelector("#cloudflare")) {
 <% } %>
 
 </script>
+<script src="/opener.js"></script>
 </body>
 </html>

package/server/views/index2.ejs

@@ -243,9 +243,9 @@ body.dark .open-menu, body.dark .browse {
 <h1>
 <% if (ishome) { %>
 <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'><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>
 <div class='url-bar'>
   <% if (current_urls.https) { %>
     <a class='https-url' target="_blank" href="<%=current_urls.https%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.https%></a>
@@ -255,7 +255,6 @@ body.dark .open-menu, body.dark .browse {
   <% } %>
 </div>
 <a href="/network" class='btn2'><div><i class="fa-solid fa-wifi"></i></div><div>Network</div></a>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
 <!--
 <button id='newfolder' class='btn2'><div><i class="fa-solid fa-folder-plus"></i></div><div>New Folder</div></button>
 -->