pinokiod 2.15.80 → 2.15.82

package/server/views/browser.ejs

@@ -17,6 +17,8 @@
 <script src="/report.js"></script>
 <script src="/normalize.js"></script>
 <script src="/Socket.js"></script>
+<script src="/noty.js"></script>
+<script src="/notyq.js"></script>
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
@@ -29,12 +31,14 @@
 }
 #menu img {
   display: none;
-  height: 40px;
+  height: 30px;
   object-fit: contain;
+  /*
   border-radius: 20px
+  */
 }
 #menu.margin {
-  padding: 15px;
+  padding: 5px;
 }
 #menu.margin i {
   display: none;
@@ -60,6 +64,7 @@ body.dark .m {
   border-top: 1px solid rgba(0,0,0,0.04);
 }
 .container {
+  position: relative;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -85,6 +90,7 @@ aside {
 }
 main {
   flex-grow: 1;
+  min-height: 0;
   /*
   height: 100%;
   */
@@ -125,6 +131,7 @@ body.dark .header-item .btn2 {
 }
 .bar .btn2 i {
   display: block;
+  margin-right: 5px;
 }
 .header-item > * {
   display: block;
@@ -202,17 +209,18 @@ body.dark .app-info > * {
   display: flex;
   */
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
 }
 .footer > * {
-  padding: 20px !important;
+  padding: 10px !important;
   display: block;
   box-sizing: border-box;
-  font-size: 14px !important;
+  font-size: 12px !important;
   text-align: center;
 }
 .footer i {
   margin: 0 !important;
+  padding: 5px;
 }
 .footer a {
   font-size: 14px;
@@ -256,6 +264,14 @@ body.dark .frame-link.selected {
   padding: 5px;
   */
 }
+.loader .btn:hover {
+  color: royalblue;
+  border-color: royalblue;
+}
+.loader .btn {
+  padding: 4px 8px;
+  border: 1px solid rgba(255,255,255,0.3);
+}
 .frame-link .tab {
   flex-grow: 1;
   /*
@@ -289,10 +305,11 @@ body.dark .grid-btns {
   box-sizing: border-box;
 }
 .grid-btns .btn2 {
-  padding: 10px; 
+  padding: 10px 10px; 
   color: var(--light-color);
   border-radius: 0;
   cursor: pointer;
+  font-size: 11px;
 }
 body.dark .grid-btns .btn2 {
 /*
@@ -331,11 +348,29 @@ body.dark nav {
 /*
   border-bottom: 1px solid rgba(255,255,255,0.04);
   */
-  border-bottom: 1px solid rgba(255,255,255,0.04);
+  border-top: 1px solid rgba(255,255,255,0.04);
 }
+/*
+.container:hover nav {
+  display: block;
+}
+*/
 nav {
+/*
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.4s ease-out;
+  display: none;
+  */
+
   background: white;
   /*
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  */
+  /*
   padding: 5px;
   */
   padding: 0;
@@ -344,17 +379,18 @@ nav {
   /*
   border-bottom: 1px solid rgba(0,0,0,0.04);
   */
-  border-bottom: 1px solid rgba(0,0,0,0.04);
+  border-top: 1px solid rgba(0,0,0,0.04);
   box-sizing: border-box;
-  display: none;
 }
 body.dark nav .btn2 {
   border-right: 1px solid rgba(255,255,255,0.04);
 }
 nav .btn2 {
-  padding: 10px;
+  padding: 15px;
   font-size: 12px;
+  /*
   width: 70px;
+  */
   box-sizing: border-box;
   border-right: 1px solid rgba(0,0,0,0.04);
   border-radius: 0;
@@ -362,7 +398,9 @@ nav .btn2 {
   flex-shrink: 0;
 
   display: flex;
+  /*
   flex-direction: column;
+  */
   justify-content: center;
   align-items: center;
 }
@@ -389,6 +427,7 @@ body.dark #location {
   display: flex;
   align-items: stretch;
   width: 100%;
+  flex-wrap: wrap;
 }
 body.dark .header-item.cursor.header-top {
   background: none !important;
@@ -442,11 +481,28 @@ body.dark .loader-container {
 #menu-mobile {
   display: none;
 }
+.tabmenu .label {
+  padding: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+}
+.disk-usage {
+  flex-grow: 1;
+  text-align: right;
+  font-weight: bold;
+}
+.disk-usage i {
+  margin-right: 5px;
+  font-size: 16px !important;
+}
 @media only screen and (max-width: 480px) {
   nav .btn2 {
     width: auto !important;
     min-width: 40px;
     border-right: none;
+    flex-direction: column;
   }
   .app-info {
     display: flex;
@@ -467,15 +523,21 @@ body.dark .loader-container {
   aside:not(.active) {
     display: none;
   }
+  .container {
+    display: none;
+  }
   .container.active {
+    display: block;
     position: absolute;
     z-index: 10000000;
     width: 100%;
     height: 100%;
   }
+  /*
   .grid-btns {
     display: none;
   }
+  */
   #menu {
     display: none;
   }
@@ -487,6 +549,14 @@ body.dark .loader-container {
 </head>
 <body class='<%=theme%>' data-platform="<%=platform%>">
 <aside class='active'>
+  <!--
+  <div class='footer'>
+    <button class='btn header-item' id='clone-tab'><i class='fa-regular fa-copy'></i></button>
+    <a class='btn header-item' id='open-browser' target="_blank" href="" features="browser"><i class="fa-solid fa-square-arrow-up-right"></i></a>
+    <button class='btn header-item' id='reload'><i class="fa-solid fa-rotate-right"></i></button>
+    <div id='new-tab' class='btn header-item'><i class="fa-solid fa-plus"></i></div>
+  </div>
+  -->
   <div class='header-top header-item'>
     <div class='app-info'>
       <% if (config.icon) { %>
@@ -503,7 +573,13 @@ body.dark .loader-container {
       <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete</div>
     </div>
     <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0">
-      <div class='tab'><i class="fa-regular fa-folder-open"></i> Files</div>
+      <div class='tab'><i class="fa-regular fa-folder-open"></i> Files <div class='disk-usage'></div></div>
+    </a>
+    <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="1" data-mode="refresh">
+      <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
+    </a>
+    <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="1" data-mode="refresh">
+      <div class='tab'><i class="fa-solid fa-gear"></i> Configure</div>
     </a>
   </div>
   <div class='m h menu' data-type='h'>
@@ -520,11 +596,23 @@ body.dark .loader-container {
       </a>
     <%})%>
   </div>
-  <div id='new-tab' class='btn header-item'>
-    <i class="fa-solid fa-plus"></i>
-  </div>
   <div class='flexible'></div>
   <!--
+  <div class='tabmenu'>
+    <div id='new-tab' class='btn header-item'><div class='tab'><i class="fa-solid fa-plus"></i> New</div></div>
+    <button class='btn header-item' id='clone-tab'><div class='tab'><i class='fa-regular fa-copy'></i> Clone</div></button>
+    <a class='btn header-item' id='open-browser' target="_blank" href="" features="browser"><div class='tab'><i class="fa-solid fa-square-arrow-up-right"></i> Popout</div></a>
+    <button class='btn header-item' id='reload'><div class='tab'><i class="fa-solid fa-rotate-right"></i> Refresh</div></button>
+  </div>
+  -->
+  <div class='grid-btns'>
+    <a class='btn2' href="https://portal.pinokio.computer/" 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>Debug</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="/"><div><i class="fa-solid fa-house"></i></div><div>Home</div></a>
+    <button class='btn2' id='new-window' title='open a new window'><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+  </div>
+  <!--
   <div class='grid-btns'>
     <a class='btn2' href="/?mode=explore" id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
     <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></a>
@@ -532,21 +620,10 @@ body.dark .loader-container {
     <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
   </div>
   -->
-  <div class='grid-btns'>
-    <button class='btn2' id='clone-tab'><div><i class='fa-regular fa-copy'></i></div><div>Clone</div></button>
-    <a class='btn2' id='open-browser' target="_blank" href="" features="browser"><div><i class="fa-solid fa-square-arrow-up-right"></i></div><div>Popout</div></a>
-    <button class='btn2' id='reload'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
-    <a class='btn2' href="/?mode=help"><div><i class="fa-regular fa-face-smile"></i></div><div>Help</div></a>
-  </div>
-  <div class='footer'>
-    <a class='header-item logo' href="/"><i class="fa-solid fa-house"></i></a>
-    <a class='header-item logo' href="/?mode=settings"><i class="fa-solid fa-gear"></i></a>
-    <button id='new-window' title='open a new window'><i class="fa-solid fa-plus"></i></button>
-  </div>
 </aside>
 <div class='container'>
   <nav>
-    <div class='hidden bar'>
+    <div class='bar'>
       <button class='btn2' id='menu-mobile'><i class="fa-solid fa-bars"></i></button>
       <button class='btn2' id='menu'>
         <img src="<%=rawpath%>/<%=config.icon%>?raw=true"/>
@@ -556,26 +633,16 @@ body.dark .loader-container {
         <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='clone-tab'><i class='fa-regular fa-copy'></i> Clone</button>
-      <a class='btn2' id='open-browser' target="_blank" href="" features="browser"><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
       <button class='btn2' id='reload'><i class="fa-solid fa-rotate-right"></i> Refresh</button>
-      -->
-      <!--
-      <button class='btn2 logo' id='reload'><i class="fa-solid fa-rotate-right"></i></button>
-      -->
+      <% if (agent === "electron") { %>
+        <a class='btn2' id='open-browser' target="_blank" href="" features="browser"><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
+      <% } else { %>
+        <a class='btn2' id='open-browser' target="_blank" href=""><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
+      <% } %>
+      <button class='btn2' id='clone-tab'><i class='fa-regular fa-copy'></i> Clone</button>
+      <div id='new-tab' class='btn2'><i class="fa-solid fa-plus"></i> Tab</div>
       <input type='url' id='location' readonly>
-      <!--
-      <div id='location'></div>
-      -->
     </div>
-    <!--
-    <div class='flexible'></div>
-    <a class='btn2' href="/?mode=explore"><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
-    <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></a>
-    <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>
-    -->
   </nav>
   <main class='browserview'>
     <% if (false) { %>
@@ -592,6 +659,7 @@ body.dark .loader-container {
 <script>
 let loaded = {}
 let cursorIndex = 0;
+const n = new N()
 const getTarget = (href) => {
   let u
   if (href.startsWith("http")) {
@@ -624,9 +692,6 @@ const subUrlOf = (s, f) => {
     if (!fullParsed.searchParams.has(key)) {
       return false
     }
-    console.log("key", key)
-    console.log("f", fullParsed.searchParams.get(key))
-    console.log("s", val)
     if (fullParsed.searchParams.get(key) !== val) {
       return false
     }
@@ -639,7 +704,6 @@ const renderCursor = () => {
     el.classList.remove("cursor")
   })
   const target = document.querySelector(".selectable[data-index='" + cursorIndex + "']")
-  console.log({ cursorIndex, target })
   target.classList.add("cursor")
 }
 const nav = (type) => {
@@ -680,46 +744,53 @@ const nav = (type) => {
 //  }
 }
 const renderSelection = (e, force) => {
-  console.log("# 1")
-  if (location.hash && location.hash.length > 0) {
-    console.log("# 2")
-//    document.querySelector(".bar").classList.remove("hidden")
-    //let id = getTarget(location.hash.slice(1))
-    let id = location.hash.slice(1)
+  // if the menu has a default item, or if the url specifies a selection
+  let selection = document.querySelector("[data-default]")
+  if (selection || location.hash && location.hash.length > 0) {
+    let target
+    if (location.hash && location.hash.length > 0) {
+  //    document.querySelector(".bar").classList.remove("hidden")
+      //let id = getTarget(location.hash.slice(1))
+      let id = location.hash.slice(1)
 
 
-    let selector
-    if (id.startsWith("@")) {
-      selector = `aside [target='${id.slice(1)}']`
-    } else {
-      let type = id[0]
-      let index = id.slice(1)
-      console.log({ type, index })
-      selector = `aside .${type} [data-index='${index}']`
-    }
+      let selector
+      if (id.startsWith("@")) {
+        //selector = `aside [target='${id.slice(1)}']`
+        selector = `aside [target='${id}']`
+      } else {
+        let type = id[0]
+        let index = id.slice(1)
+        console.log({ type, index })
+        selector = `aside .${type} [data-index='${index}']`
+      }
 
 
-    // select the selected link
-//    document.querySelectorAll(".frame-link").forEach((el) => {
-//      el.classList.remove("selected")
-//    })
+      // select the selected link
+  //    document.querySelectorAll(".frame-link").forEach((el) => {
+  //      el.classList.remove("selected")
+  //    })
 
 
 
-//    const target = document.querySelector(`[target='${id}']`)
+  //    const target = document.querySelector(`[target='${id}']`)
 
 
-    let target
-    if (e) {
-      // If the renderSelection is triggered by an event, look for the frame-link that's triggering the event
-      if (e.target.classList.contains("frame-link")) {
-        target = e.target
+      if (e) {
+        // If the renderSelection is triggered by an event, look for the frame-link that's triggering the event
+        if (e.target.classList.contains("frame-link")) {
+          target = e.target
+        } else {
+          target = e.target.closest(".frame-link")
+        }
       } else {
-        target = e.target.closest(".frame-link")
+        // if not triggered by an event, look for the target from the location hash
+        target = document.querySelector(selector)
       }
     } else {
-      // if not triggered by an event, look for the target from the location hash
-      target = document.querySelector(selector)
+      if (selection) {
+        target = selection
+      }
     }
 
 
@@ -729,7 +800,6 @@ const renderSelection = (e, force) => {
     //
     //  => select that tab and frame
 
-    console.log("target", target)
     if (target) {
 
       // display the menu button at the top
@@ -744,15 +814,13 @@ const renderSelection = (e, force) => {
     }
 
     if (target) {
-      console.log("# 3")
 
 
       // Instantiate a frame with the selected target's href
       let url = target.href
-      console.log("> url", url)
       document.querySelector("#open-browser").href = url
       document.querySelector("#clone-tab").setAttribute("data-href", url)
-//      document.querySelector("#location").value = url
+      document.querySelector("#location").value = url
 
 
       // select the selected target element (tab)
@@ -773,12 +841,12 @@ const renderSelection = (e, force) => {
       let targetFrame;
       if (target.closest(".h")) {
         let hardFrames = document.querySelectorAll(".browserview iframe[name^='@']")
-        let port = new URL(target.href).port
+        let port = new URL(target.href).port || 80
         for(let frame of hardFrames) {
           console.log({ src: frame.src, href: target.href, target: target.target })
           // Types of links in the tab
-          if (String(port) === "42000") {
-            // 1. running from 42000 => find a frame whose base URL matches the tab's base URL
+          if (String(port) === "<%=port%>") {
+            // 1. running from <%=port%> => find a frame whose base URL matches the tab's base URL
             // Pinokio links
             let targetPath = new URL(target.href).pathname
             let framePath = new URL(frame.src).pathname
@@ -805,7 +873,6 @@ const renderSelection = (e, force) => {
         targetFrame = document.querySelector(`iframe[name='${target.target}']`)
       }
 
-
       /*
       // Load the link in the frame
 
@@ -840,7 +907,6 @@ const renderSelection = (e, force) => {
               e.preventDefault()
               e.stopPropagation()
               let sub = subUrlOf(target.href, targetFrame.src)
-              console.log("issub", sub)
               if (!sub) {
                 targetFrame.src = target.href
               }
@@ -871,13 +937,14 @@ const renderSelection = (e, force) => {
             }
           } else {
             if (force) {
-              console.log("# 7")
               targetFrame.src = target.href
             }
           }
+          targetFrame.contentWindow.postMessage({
+            action: "foreground"
+          }, "*")
         }
       } else {
-        console.log("# 12")
         let frame = document.createElement("iframe")
         frame.name = target.target
         frame.src = target.href
@@ -977,10 +1044,13 @@ const renderSelection = (e, force) => {
     console.log("# 14")
     document.querySelector(".container").classList.remove("active")
     document.querySelector("aside").classList.add("active")
+
   }
 }
 console.log("loaded before", loaded)
+<% if (type === "run" && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
 renderSelection()
+<% } %>
 //renderCursor()
 console.log("loaded after", loaded)
 //Reporter()
@@ -1103,7 +1173,7 @@ const addTab = async (url) => {
 if (document.querySelector("#menu-mobile")) {
   document.querySelector("#menu-mobile").addEventListener("click", async (e) => {
     location.hash = ""
-    refresh()
+    refresh(false, { nodelay: true })
   })
 }
 if (document.querySelector("#menu")) {
@@ -1161,7 +1231,7 @@ document.querySelector("aside").addEventListener("click", async (e) => {
   let target
 
 
-  // delete
+  // 1. handle delete
   if (e.target.classList.contains("del")) {
     target = e.target
   } else {
@@ -1184,144 +1254,251 @@ document.querySelector("aside").addEventListener("click", async (e) => {
     el.remove()
     // update tabs
     await syncTabs()
+    return
+  }
 
-  } else {
-    // Select
-    if (e.target.classList.contains("frame-link")) {
-      target = e.target
-    } else {
-      target = e.target.closest(".frame-link")
-    }
 
+  // 2. handle shudown
+  if (e.target.classList.contains("shutdown")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".shutdown")
+  }
+  if (target) {
+    e.preventDefault()
+    e.stopPropagation()
+    let link = target.closest("[href]")
+    let src = new URL(link.href).pathname
+    target.querySelector("i.fa-square").className = "fa-solid fa-check"
+    n.Noty({
+      text: `stopping ${src}`,
+      silent: true,
+      timeout: 2000
+    })
+    console.log("src", src)
 
+    let socket = new Socket()
+    socket.run({
+      method: "kernel.api.stop",
+      params: {
+        uri: "~" + src
+      }
+    }, (packet) => {
+      if (packet.type === "result") {
+        socket.close()
+        n.Noty({
+          timeout: 2000,
+          text: `stopped`,
+          silent: true
+        })
+        refresh(true)
+      }
+    })
 
-    if (target) {
+    return
+  }
 
-      // if data-confirm exists, ask for confirmation
-      // if not, then just go forward
-      let confirmText = target.getAttribute("data-confirm")
-      if (confirmText && confirmText.length > 0) {
-        const confirmed = confirm(confirmText)
-        console.log('confirmed', confirmed)
-        if (!confirmed) {
-          e.preventDefault()
-          e.stopPropagation()
-          return
-        }
-      }
 
-      if (target.getAttribute("data-action")) {
-        let actionStr = target.getAttribute("data-action")
-        let action = JSON.parse(actionStr)
-        console.log("action", action)
-        if (action.method === "stop" && action.uri) {
-          let socket = new Socket()
-          socket.run({
-            method: "kernel.api.stop",
-            params: {
-              uri: action.uri//"~" + location.pathname
-            }
-          }, (packet) => {
-            console.log("packet", packet)
-            if (packet.type === "result") {
-              socket.close()
-//              location.href = location.href
-            }
-          })
-        }
-      } else if (target.target === "_blank") {
-        // nothing
-      } else {
-        if (target.classList.contains("reveal")) {
-          // nested menu
-          target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
-          e.preventDefault()
-          e.stopPropagation()
-        } else {
-          //location.hash = target.target
 
+  // 3. handle select
+  if (e.target.classList.contains("frame-link")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".frame-link")
+  }
 
-  //        let id = getTarget(target.getAttribute("href"))
-  //        console.log("ID", id, target.href)
-  //        location.hash = id
 
-          //location.hash = target.getAttribute("href")
 
-          if (target.closest(".h")) {
-            location.hash = target.target
-          } else {
-            let index = target.getAttribute("data-index")
-            let type = target.closest(".m").getAttribute("data-type")
+  if (target) {
 
+    // if data-confirm exists, ask for confirmation
+    // if not, then just go forward
+    let confirmText = target.getAttribute("data-confirm")
+    if (confirmText && confirmText.length > 0) {
+      const confirmed = confirm(confirmText)
+      if (!confirmed) {
+        e.preventDefault()
+        e.stopPropagation()
+        return
+      }
+    }
 
-            location.hash = type + index
+    if (target.getAttribute("data-action")) {
+      let actionStr = target.getAttribute("data-action")
+      let action = JSON.parse(actionStr)
+      console.log("action", action)
+      if (action.method === "stop" && action.uri) {
+        let socket = new Socket()
+        socket.run({
+          method: "kernel.api.stop",
+          params: {
+            uri: action.uri//"~" + location.pathname
           }
+        }, (packet) => {
+          if (packet.type === "result") {
+            socket.close()
+//              location.href = location.href
+          }
+        })
+      }
+    } else if (target.getAttribute("data-filepath")) {
+      return
+    } else if (target.target === "_blank") {
+      // nothing
+    } else {
+      if (target.classList.contains("reveal")) {
+        // nested menu
+        target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
+        e.preventDefault()
+        e.stopPropagation()
+      } else {
+        //location.hash = target.target
 
-          document.querySelectorAll(".frame-link").forEach((el) => {
-            el.classList.remove("selected")
-          })
-          target.classList.add("selected")
 
-          renderSelection(e)
-        }
-      }
+//        let id = getTarget(target.getAttribute("href"))
+//        console.log("ID", id, target.href)
+//        location.hash = id
+
+        //location.hash = target.getAttribute("href")
+
+        if (target.closest(".h")) {
+          location.hash = target.target
+        } else {
+          let index = target.getAttribute("data-index")
+          let type = target.closest(".m").getAttribute("data-type")
 
 
+          location.hash = type + index
+        }
 
+        document.querySelectorAll(".frame-link").forEach((el) => {
+          el.classList.remove("selected")
+        })
+        target.classList.add("selected")
 
+        renderSelection(e)
+      }
     }
   }
 
 
 
 })
-const refresh = async () => {
-  console.log("REFRESH")
-  await new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve()
-    }, 1000)
+const refresh_du = () => {
+  console.log("REFRESH DU")
+  fetch("/du/<%=name%>").then((res) => {
+    return res.json()
+  }).then((res) => {
+    let val
+    //let k = 1024
+    let k = 1000
+    if (res.du > k * k * k) {
+      // GB
+      val = `${Math.floor(res.du/k/k/k * 100) / 100} GB`
+    } else if (res.du > k * k) {
+      // MB
+      val = `${Math.floor(res.du/k/k * 100) / 100} MB`
+    } else {
+      // KB
+      val = `${Math.floor(res.du/k * 100) / 100} KB`
+    }
+    console.log("DU VAL", val)
+    //document.querySelector(".disk-usage").innerHTML = `<i class="fa-regular fa-hard-drive"></i> ${val}`
+    document.querySelector(".disk-usage").innerHTML = val
   })
+}
+const refresh = async (silent, options) => {
+  if (options && options.nodelay) {
+  } else {
+    await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve()
+      }, 1000)
+    })
+  }
   const html = await fetch("<%=sidebar%>").then((res) => {
     return res.text()
   })
   document.querySelector(".menu").innerHTML = html
   location.hash = ""
-  renderSelection()
+
+  // render the selected frame only if not silent
+  if (silent) {
+  } else {
+    if (options && options.nodelay) {
+    } else {
+//      await new Promise((resolve, reject) => {
+//        setTimeout(() => {
+//          resolve()
+//        }, 500)
+//      })
+    }
+    renderSelection()
+  }
+  refresh_du()
+}
+if (document.querySelector("#genlog")) {
+  document.querySelector("#genlog").addEventListener("click", (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    e.target.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i>'
+    fetch("/pinokio/log", {
+      method: "post",
+    }).then((res) => {
+      let btn = document.querySelector("#genlog")
+      let btn2 = document.querySelector("#downloadlogs")
+      btn2.classList.remove("hidden") 
+      btn.classList.add("hidden")
+      btn.innerHTML = '<i class="fa-solid fa-circle-check"></i> Generated!'
+      //btn.classList.add("hidden")
+    })
+  })
 }
 window.addEventListener('message', (event) => {
-  console.log("Message received from the child: ", event.data); // Message received from child
-  if (event.data) {
-    if (event.data.action) {
-      if (event.data.action.type === "newtab") {
-        console.log("create tab", event.data.action.url) 
-        addTab(event.data.action.url)
-      } else if (event.data.action.type === "title") {
-        console.log("title", event.data)
-      } else if (event.data.action.type === "location") {
-        let url = event.data.action.url
-        console.log({ action: event.data.action })
-        document.querySelector("#open-browser").href = url
-        //document.querySelector("#location").innerHTML = url
-        document.querySelector("#location").value = url
-      }
-    } else if (event.data.type) {
-      let asideHidden = (window.getComputedStyle(document.querySelector("aside")).display === "none")
-      console.log("asideHidden", asideHidden)
-      if (!asideHidden) {
-        // refresh only if aside 
-
-        if (event.data.type === 'disconnect') {
-          refresh()
-        } else {
-          refresh()
+
+  // only process the event it's coming from pinokio
+  let origin = event.origin
+  if (origin) {
+    let port = new URL(origin).port || 80
+    console.log("port", port)
+    if (String(port) === "<%=port%>") {
+      console.log("Message received from the child: ", event); // Message received from child
+      if (event.data) {
+        if (event.data.action) {
+          if (event.data.action.type === "newtab") {
+            console.log("create tab", event.data.action.url) 
+            addTab(event.data.action.url)
+          } else if (event.data.action.type === "title") {
+            console.log("title", event.data)
+          } else if (event.data.action.type === "location") {
+            let url = event.data.action.url
+            console.log({ action: event.data.action })
+            document.querySelector("#open-browser").href = url
+            //document.querySelector("#location").innerHTML = url
+            document.querySelector("#location").value = url
+          }
+        } else if (event.data.type) {
+          let asideHidden = (window.getComputedStyle(document.querySelector("aside")).display === "none")
+          console.log("asideHidden", asideHidden)
+          if (!asideHidden) {
+            // refresh only if aside 
+
+            if (event.data.type === 'disconnect') {
+              refresh()
+            } else {
+              refresh()
+            }
+          }
         }
+      } else {
+        refresh()
       }
     }
-  } else {
-    refresh()
   }
+
+
 });
+refresh_du()
 /*
 document.addEventListener("keydown", (e) => {
   let size = document.querySelectorAll(".selectable").length