pinokiod 3.40.0 → 3.42.0

package/server/views/d.ejs

@@ -16,14 +16,12 @@
 <% } %>
 <style>
 main {
-  max-width: 1000px;
-  width: 100%;
   box-sizing: border-box;
-  display: flex;
   /*
   flex-wrap: wrap;
   */
-  padding: 20px;
+  max-width: 800px;
+  padding: 30px 45px;
   /*
   justify-content: center;
   */
@@ -31,17 +29,16 @@ main {
 .tab-content {
   display: flex;
   flex-wrap: wrap;
-  gap: 15px;
-  padding: 10px 0px 0;
+  gap: 5px;
+  flex-grow: 1;
+  width: 100%;
 }
 .submenu.tab {
   margin: 10px 0;
 }
-/*
 .tab:hover {
-  border: 2px solid royalblue;
+  color: royalblue;
 }
-*/
 .tab {
 /*
   min-width: 250px;
@@ -57,9 +54,9 @@ main {
   color: black;
   overflow: hidden;
   box-sizing: border-box;
-  border-radius: 10px;
-  align-items: flex-start;
-  padding: 10px 15px;
+  border-radius: 4px;
+  align-items: center;
+  gap: 10px;
   /*
   width: 120px;
   */
@@ -74,14 +71,8 @@ body.dark .tab {
   background: rgba(255,255,255,0.03);
 }
 .tab h2 {
-/*
-  padding: 5px 2px 10px;
-  */
-/*
-  text-align: center;
-  */
   margin: 0;
-  font-size: 14px;
+  font-size: 18px;
 }
 .tab .col {
   flex-grow: 1;
@@ -94,7 +85,7 @@ body.dark .tab {
   color: black;
   display: flex;
   justify-content: center;
-  font-size: 30px;
+  font-size: 20px;
   align-items: center;
   border-radius: 3px;
 }
@@ -128,6 +119,8 @@ body.dark .tab i {
   background: white;
   border-radius: 20px;
   */
+  margin-bottom: 30px;
+  align-items: flex-start;
 }
 /*
 body.dark .menu-container {
@@ -135,30 +128,13 @@ body.dark .menu-container {
 }
 */
 .menu-container {
-  width: 100%;
+  display: flex;
+  flex-direction: column;
   box-sizing: border-box;
-  margin: 20px;
-}
-body.dark .tab-header {
-/*
-  background: rgba(0,0,0,0.3);
-  */
-  /*
-  border-left: 10px solid white;
-  */
 }
 .tab-header {
-  padding: 0 5px;
-/*
-  background: rgba(0,0,0,0.04);
-  */
-  /*
-  padding: 8px 10px;
-  */
+  margin-bottom: 10px;
   font-weight: bold;
-  /*
-  border-left: 10px solid black;
-  */
 }
 .container {
   margin: 0;
@@ -167,35 +143,90 @@ body.dark .tab-header {
 .subtitle {
   font-size: 12px;
   opacity: 0.6;
-  padding: 2px;
+  padding: 2px 0;
+  font-weight: normal;
 }
 .btns {
   display: flex;
-  padding-top: 10px;
   gap: 5px;
+  align-items: center;
+  flex-shrink: 0;
+  /*
+  padding: 0 10px;
+  */
 }
 body.dark .btn {
+/*
   background: rgba(255,255,255,0.08);
+  */
+  background: none;
   color: white;
   border: none;
 }
+.btn:hover {
+  color: royalblue;
+}
 .btn {
-  padding: 7px 10px;
+  padding: 2px 10px;
   background: none;
+  /*
   background: rgba(0,0,0,0.08);
+  */
   color: rgba(0,0,0,0.7);
   /*
   border: 1px solid rgba(0,0,0,0.4);
   */
+  /*
   border-radius: 30px;
+  */
   /*
   background: rgba(0,0,0,0.8);
   */
 }
+.spec {
+  display: none;
+  width: 100%;
+  padding-bottom: 30px;
+}
+.spec .explain {
+  display: flex;
+  flex-direction: column;
+}
+.spec .explain h3 {
+  margin: 0 0 10px;
+}
+body.dark .spec .explain {
+  border-left: 5px solid rgba(255,255,255,0.04);
+}
+.spec .explain {
+  padding: 15px;
+  border-left: 5px solid rgba(0,0,0,0.04);
+  background: rgba(0,0,0,0.02);
+  margin: 20px 0;
+}
+.spec .explain ol {
+  margin: 0;
+  padding-inline-start: 20px;
+}
+.spec .explain li {
+  padding: 5px 0;
+}
+.spec textarea {
+  border: none;
+  padding: 10px;
+  margin: 5px 0 0 20px;
+  box-sizing: border-box;
+}
+body.dark .btn.run-btn {
+  background: black;
+}
 .btn.run-btn {
   flex-grow: 1;
   text-align: center;
-  margin-right: 2px;
+  background: black;
+  width: 50px;
+  padding: 10px;
+  border-radius: 0;
   /*
   background: royalblue !important;
   */
@@ -203,17 +234,20 @@ body.dark .btn {
 .tab-header h3 {
   margin: 0;
   font-size: 16px;
+  text-transform: capitalize;
 }
 .tab-header h3 i {
-  font-size: 18px;
 }
 header {
-  padding: 50px 40px 0;
+  padding: 20px 0;
   display: flex;
   gap: 10px;
+  position: relative;
+  align-items: center;
 }
 header h1 {
   font-size: 40px;
+  line-height: 40px;
 }
 .pulling {
   display: flex;
@@ -231,6 +265,27 @@ header h1 {
   align-items: center;
   gap: 5px;
 }
+h4 {
+  margin: 0 0 5px;
+}
+body.dark .btn.file-open {
+  background: rgba(255,255,255,0.1) !important;
+}
+.btn.file-open {
+  background: black;
+  color: white;
+}
+body.dark #update-spec {
+  background: rgba(255,255,255,0.1) !important;
+  color: white;
+}
+#update-spec {
+  border: none;
+  padding: 10px;
+  margin: 10px 0 0 20px;
+  background: rgba(0,0,0,0.8);
+  color: white;
+}
 </style>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
@@ -239,8 +294,13 @@ header h1 {
 <script src="/nav.js"></script>
 </head>
 <body class='<%=theme%>' data-agent="<%=agent%>">
+<main>
+<form class='search'>
+  <input type='search' class="flexible" placeholder='Filter tools'>
+</form>
 <header>
   <h1>Build</h1>
+  <div class='flexible'></div>
   <a class='btn'  href="https://github.com/pinokiocomputer/code/issues" target="_blank"><i class="fa-solid fa-up-right-from-square"></i> Request a tool</a>
   <a class='btn' id='git-pull'><i class="fa-solid fa-rotate"></i> Check for new tools</a>
   <div class='pulling hidden'>
@@ -249,8 +309,25 @@ header h1 {
     </div>
   </div>
 </header>
-<main>
-  <% dynamic.forEach((item, index) => { %>
+<div class='spec'>
+  <div class='explain'>
+    <h3><i class="fa-regular fa-circle-check"></i> TODO</h3>
+    <ol>
+      <li><strong>Build manually:</strong> Open the project files and start building. <a class='btn file-open' data-filepath="<%=filepath%>"><i class="fa-solid fa-folder-open"></i> open project folder</a></li>
+      <li><strong>Build with AI:</strong> Click any of the below AI tools to instantly start building with AI.</li>
+    <!--
+      <li><strong>Build with AI:</strong> Click any of the AI tools below to start building with AI. The AI will automatically build based on the spec:</li>
+      -->
+    </ol>
+    <!--
+    <textarea><%=spec%></textarea>
+    <button id='update-spec'>Update</button>
+    -->
+  </div>
+</div>
+
+  <% index = 0 %>
+  <% dynamic.forEach((item) => { %>
     <% if (item.menu) { %>
       <div class='menu-container'>
         <div class='tab-header'>
@@ -261,37 +338,44 @@ header h1 {
         </div>
         <div class='tab-content'>
           <% item.menu.forEach((i) => { %>
-            <div class='tab'>
+            <a href="<%=i.href%>" class='tab' data-index="<%=index++%>" data-target="@<%=i.href.split("?")[0].replace("/run", "")%>">
               <% if (i.image) { %>
                 <img src="<%=i.image%>">
               <% } else if (i.icon) { %>
                 <i class="img <%=i.icon%>"></i>
               <% } %>
-              <div class='col'>
-                <h2><%=i.title%></h1>
-                <% if (i.subtitle) { %>
-                  <div class='subtitle'><%=i.subtitle%></div>
-                <% } %>
-                <div class='btns'>
-                  <a class='run-btn btn' href="<%=i.href%>"><i class="fa-solid <%=i.type === "Start" ? 'fa-play' : 'fa-rocket'%>"></i> <%=i.type%></a>
-                  <a class='btn' target="_blank" href="<%=i.link%>"><i class="fa-solid fa-question"></i></a>
-                </div>
+              <h2><%=i.title%></h1>
+              <% if (i.subtitle) { %>
+                <div class='subtitle'><%=i.subtitle%></div>
+              <% } %>
+              <% if (i.link) { %>
+              <div target="_blank" data-href="<%=i.link%>"><i class="fa-solid fa-circle-info"></i></div>
+              <% } %>
+              <div class='flexible'></div>
+              <div class='btn'>
+                <i class="fa-solid fa-angle-right"></i>
               </div>
-            </div>
+            </a>
           <% }) %>
         </div>
       </div>
     <% } else { %>
-      <div class='tab'>
-        <img src="<%=item.image%>">
+      <div class='tab' data-index="<%=index++%>">
+        <% if (item.image) { %>
+          <img src="<%=item.image%>">
+        <% } else if (item.icon) { %>
+          <i class="img <%=item.icon%>"></i>
+        <% } %>
         <div class='col'>
           <h2><%=item.title%></h1>
           <% if (item.subtitle) { %>
             <div class='subtitle'><%=item.subtitle%></div>
           <% } %>
           <div class='btns'>
+            <% if (item.link) { %>
+            <a class='btn' target="_blank" href="<%=item.link%>"><i class="fa-solid fa-circle-info"></i></a>
+            <% } %>
             <a class='run-btn btn' href="<%=item.href%>"><i class="fa-solid <%=item.type === "Start" ? 'fa-play' : 'fa-rocket'%>"></i> <%=item.type%></a>
-            <a class='btn' target="_blank" href="<%=item.link%>"><i class="fa-solid fa-question"></i></a>
           </div>
         </div>
       </div>
@@ -331,6 +415,111 @@ document.querySelector("#git-pull").addEventListener("click", (e) => {
     }
   })
 })
+/*
+const resize = (textarea) => {
+  textarea.style.height = "";
+  textarea.style.height = textarea.scrollHeight + "px";
+}
+document.querySelector(".spec textarea").addEventListener("input", (e) => {
+  resize(e.target)
+})
+resize(document.querySelector(".spec textarea"))
+document.querySelector("#update-spec").addEventListener("click", (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+  let filepath = document.querySelector(".file-open").getAttribute('data-filepath')
+  fetch("/plugin/update_spec", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      spec: document.querySelector(".spec textarea").value || "",
+      filepath: filepath
+    })
+  }).then((res) => {
+    return res.json()
+  }).then((res) => {
+    if (res.success) {
+      location.href = location.href
+    } else if(res.error) {
+      alert(res.error)
+    }
+  })
+})
+*/
+let list = []
+document.querySelectorAll(".tab").forEach((el, index) => {
+  list.push({
+    index: parseInt(el.getAttribute("data-index")),
+    text: el.textContent,
+  })
+})
+const search = (items, value) => {
+  let filtered = []
+  for(let i=0; i<items.length; i++) {
+    let item = items[i]
+    let re = new RegExp(value, "i")
+    if (re.test(item.text)) {
+      filtered.push({ item })
+    }
+  }
+  return filtered
+}
+
+let selectedIndex = -1
+let selectedBtnIndex = 0
+let filteredCount = list.length
+let filteredBtnsCount = 0
+
+const renderSearch = () => {
+  let target = document.querySelector("form input[type=search]")
+  let result
+  if (target.value.trim().length === 0) {
+    result = list.map((i, index) => {
+      return { item: i }
+    })
+  } else {
+    result = search(list, target.value)
+  }
+  let all = document.querySelectorAll(".tab")
+  for(let el of all) {
+    el.classList.add("hidden")
+    el.classList.remove("selected")
+  }
+
+  filteredCount = result.length
+  for(let i=0; i<result.length; i++) {
+    let selector = result[i]
+    let el = document.querySelector(".tab[data-index='" + selector.item.index + "']")
+    el.classList.remove("hidden")
+    if (i === selectedIndex) {
+      el.classList.add("selected")
+    } else {
+      el.classList.remove("selected")
+    }
+  }
+}
+renderSearch()
+document.querySelector("form input[type=search]").addEventListener("input", (e) => {
+  selectedIndex = 0
+  selectedBtnIndex = 0
+  renderSearch()
+})
+document.querySelector("form input[type=search]").focus()
+document.addEventListener("click", (e) => {
+  if (e.target.classList.contains("tab")) {
+    e.preventDefault()
+    e.stopPropagation()
+    let href = e.target.href
+    window.parent.postMessage({
+      launch: {
+        name: e.target.getAttribute("data-target"),
+        href
+      }
+    }, "*")
+  }
+})
 </script>
 </body>
 </html>

package/server/views/download.ejs

@@ -88,7 +88,15 @@ body.frozen {
 .timestamp {
   color: rgba(0,0,0,0.5);
 }
+@media only screen and (max-width: 800px) {
+  body {
+    display: flex !important;
+    flex-direction: row !important;
+  }
+}
 </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>
@@ -112,18 +120,54 @@ body.frozen {
 <header class='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>
+<!--
+<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>
 <% if (requirements_pending) { %>

package/server/views/editor.ejs

@@ -109,6 +109,9 @@ td.key {
   background: var(--dark-bg);
 }
 */
+header {
+  padding: 10px;
+}
 header .runner {
   padding: 10px 0 0;
 }
@@ -122,6 +125,14 @@ header .runner {
 body.frozen {
   overflow: auto !important;
 }
+@media only screen and (max-width: 800px) {
+  header h1 {
+    height: unset;
+  }
+  .appcanvas, main {
+    padding-top: unset;
+  }
+}
 </style>
 <script>
 let shell_id

package/server/views/explore.ejs

@@ -113,6 +113,8 @@ body main iframe {
   width: 100%;
 }
 </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="/nav.js"></script>
@@ -121,26 +123,49 @@ body main iframe {
 <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>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
-<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-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='nav-btns'>
-  <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
-  <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
-  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
+<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 id='new-window' title='open a new window' class='btn2'><i class="fa-solid fa-plus"></i></button>
 -->
+<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>