pinokiod 7.5.27 → 7.5.28

package/kernel/index.js

@@ -697,7 +697,6 @@ class Kernel {
   async clearLog(group) {
     let relativePath = path.relative(this.homedir, group)
     for(let type of ["info", "buf", "cleaned"]) {
-    //for(let type of ["info", "cleaned"]) {
       let logPath = path.resolve(this.homedir, "logs", "shell", type, relativePath)
       let logFolder = path.dirname(logPath)
       let filename = path.basename(logPath)
@@ -775,8 +774,7 @@ class Kernel {
       let relativePath = path.relative(this.homedir, group)
 
       if (!path.isAbsolute(relativePath)) {
-        //for(let type of ["info", "buf", "cleaned"]) {
-        for(let type of ["info", "cleaned"]) {
+        for(let type of ["cleaned"]) {
           let logPath = path.resolve(this.homedir, "logs", "shell", type, relativePath + "." + info.index + ".txt")
           let logFolder = path.dirname(logPath)
           await fs.promises.mkdir(logFolder, { recursive: true }).catch((e) => { })
@@ -784,8 +782,7 @@ class Kernel {
         }
       }
     } else {
-      //for(let type of ["info", "buf", "cleaned"]) {
-      for(let type of ["info", "cleaned"]) {
+      for(let type of ["cleaned"]) {
         let logPath = path.resolve(this.homedir, "logs", "shell", type, "index.txt")
         let logFolder = path.dirname(logPath)
         await fs.promises.mkdir(logFolder, { recursive: true }).catch((e) => { })

package/kernel/info.js

@@ -2,6 +2,7 @@
 info.local(...args)
 info.running(...args)
 info.exists(...args)
+info.ready(...args)
 info.path(...args)
 */
 const path = require('path')
@@ -57,6 +58,25 @@ class Info {
     let exists = fs.existsSync(resolved_path)
     return exists ? exists: false
   }
+  ready(...args) {
+    if (!this.kernel || typeof this.kernel.isScriptReady !== "function") {
+      return false
+    }
+    let cwd = path.dirname(this.caller())
+    let resolved_path = path.resolve(cwd, ...args)
+    if (this.kernel.isScriptReady(resolved_path)) {
+      return true
+    }
+    if (!this.kernel.script || typeof this.kernel.script.resolve !== "function") {
+      return false
+    }
+    try {
+      let script_path = this.kernel.script.resolve(...args)
+      return script_path ? this.kernel.isScriptReady(script_path) : false
+    } catch (e) {
+      return false
+    }
+  }
   local(...args) {
     let cwd = path.dirname(this.caller())
     let resolved_path = path.resolve(cwd, ...args)

package/kernel/shell.js

@@ -1,7 +1,6 @@
 const { Terminal } = require('@xterm/headless');
 const { SerializeAddon } = require("xterm-addon-serialize");
 const sanitize = require("sanitize-filename");
-const YAML = require('yaml')
 const kill = require('kill-sync')
 const fastq = require('fastq')
 const normalize = require('normalize-path');
@@ -1749,59 +1748,10 @@ class Shell {
       this.nudgeRestoreTimer = null
     }, 100)
   }
-  _log(buf, cleaned) {
-
-
-    /*
-
-    /logs
-      /shell
-        /[...group]
-          ### info
-
-          ### stdout
-
-    */
-    let info = {
-      path: this.path,
-      cmd: this.cmd,
-      index: this.index,
-      group: this.group,
-      env: ShellRunTemplate.redactEnvArgs(this.env),
-      done: this.done,
-      ready: this.ready,
-      id: this.id,
-      ts: Date.now()
-    }
-
+  _log(_buf, cleaned) {
     let time = `${new Date().toLocaleString()} (${Date.now()})`
 
-    let infoYAML = YAML.stringify(info)
     let data = {}
-    data.info = `######################################################################
-#
-# group: ${this.group}
-# id: ${this.id}
-# index: ${this.index}
-# cmd: ${this.cmd}
-# timestamp: ${time}
-
-${infoYAML}
-
-`
-
-    data.buf = `######################################################################
-#
-# group: ${this.group}
-# id: ${this.id}
-# index: ${this.index}
-# cmd: ${this.cmd}
-# timestamp: ${time}
-#
-
-${buf}
-
-`
 
     data.cleaned = `######################################################################
 #
@@ -1815,9 +1765,7 @@ ${cleaned}
 
 `
 
-    this.kernel.log(data, this.group, info) 
-
-
+    this.kernel.log(data, this.group, { index: this.index })
   }
   stream(msg, callback) {
     if (msg === "\u0007") {

package/package.json

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

package/server/public/common.js

@@ -2887,7 +2887,49 @@ function updateAllTooltips() {
   tippyInstances.forEach(updateTippyPlacement);
 }
 
+function ensureExploreNavButton() {
+  const header = document.querySelector("header.navheader");
+  if (!header) {
+    return;
+  }
+
+  let button = header.querySelector("[data-pinokio-explore-nav]");
+  if (!button) {
+    const headerRow = header.querySelector("h1") || header;
+    const anchor =
+      header.querySelector("#sidebar-toggle") ||
+      header.querySelector(".main-sidebar-header-toggle") ||
+      header.querySelector("#minimize-header");
+
+    if (!anchor || !headerRow.contains(anchor)) {
+      return;
+    }
+
+    button = document.createElement("a");
+    button.innerHTML = '<div><i class="fa-solid fa-globe" aria-hidden="true"></i></div>';
+    anchor.insertAdjacentElement("afterend", button);
+  }
+
+  button.classList.add("btn2", "pinokio-explore-nav-button");
+  button.href = "/home?mode=explore";
+  button.setAttribute("data-pinokio-explore-nav", "true");
+  button.setAttribute("data-tippy-content", "Explore");
+  button.setAttribute("title", "Explore");
+  button.setAttribute("aria-label", "Explore");
+
+  const params = new URLSearchParams(window.location.search || "");
+  if (window.location.pathname === "/home" && params.get("mode") === "explore") {
+    button.classList.add("selected");
+    button.setAttribute("aria-current", "page");
+  } else {
+    button.classList.remove("selected");
+    button.removeAttribute("aria-current");
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
+  ensureExploreNavButton();
+
   if (typeof initUrlDropdown === 'function' && !window.PinokioUrlDropdown) {
     try {
       initUrlDropdown();

package/server/public/style.css

@@ -1297,6 +1297,34 @@ body.main-sidebar-page .navheader .sidebar-toggle {
 body.dark.main-sidebar-page .navheader .sidebar-toggle {
   color: rgba(248, 250, 252, 0.92);
 }
+header.navheader .pinokio-explore-nav-button {
+  text-decoration: none;
+}
+body.main-sidebar-page .navheader .pinokio-explore-nav-button,
+body.app-page .navheader .pinokio-explore-nav-button {
+  color: #0f172a;
+  position: relative;
+  width: 40px;
+  height: 30px;
+  padding: 0;
+  border-radius: 9px;
+  box-sizing: border-box;
+  transition: background-color 140ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 140ms cubic-bezier(0.25, 1, 0.5, 1), color 140ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+body.dark.main-sidebar-page .navheader .pinokio-explore-nav-button,
+body.dark.app-page .navheader .pinokio-explore-nav-button {
+  color: rgba(248, 250, 252, 0.92);
+}
+body.main-sidebar-page .navheader .pinokio-explore-nav-button.selected,
+body.app-page .navheader .pinokio-explore-nav-button.selected {
+  background: rgba(15, 23, 42, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
+}
+body.dark.main-sidebar-page .navheader .pinokio-explore-nav-button.selected,
+body.dark.app-page .navheader .pinokio-explore-nav-button.selected {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
 body.main-sidebar-page .navheader .sidebar-toggle[aria-expanded="true"] {
   background: rgba(15, 23, 42, 0.08);
   box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
@@ -1343,20 +1371,10 @@ body.main-sidebar-page .sidebar-toggle-content {
   box-shadow: 0 3.8px 0 currentColor, 0 7.6px 0 currentColor;
   transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1), transform 150ms cubic-bezier(0.25, 1, 0.5, 1);
 }
-body.main-sidebar-page .navheader .sidebar-toggle[aria-expanded="false"] .sidebar-toggle-panel {
-  background: transparent;
-  outline: 1.5px solid currentColor;
-  outline-offset: -1px;
-  opacity: 0.35;
-  transform: translateX(-1px) scaleX(0.8);
-}
-body.main-sidebar-page .navheader .sidebar-toggle[aria-expanded="false"] .sidebar-toggle-content {
-  opacity: 0.42;
-  transform: translateX(-2px);
-}
 body.main-sidebar-page main {
   display: flex;
   align-items: stretch;
+  position: relative;
 }
 body.main-sidebar-page main > :not(.main-sidebar) {
   flex: 1 1 auto;
@@ -1890,8 +1908,83 @@ body.dark .main-sidebar-peer-dialog-surface {
     padding-left: 0;
   }
 
+  @media (min-width: 769px) and (hover: hover) and (pointer: fine) {
+    body.main-sidebar-page.main-sidebar-collapsed .main-sidebar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 10000020;
+      flex: none;
+      width: 180px;
+      min-width: 180px;
+      max-width: 180px;
+      padding: 8px 5px;
+      border-right-width: 1px;
+      border-right-color: var(--pinokio-sidebar-separator);
+      background: var(--pinokio-sidebar-tabbar-bg);
+      opacity: 0;
+      pointer-events: none;
+      overflow-x: hidden;
+      overflow-y: auto;
+      transform: translateX(-100%);
+    }
+
+    body.main-sidebar-page.main-sidebar-collapsed .main-sidebar-peek-trigger {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 10000021;
+      width: 14px;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      cursor: default;
+    }
+
+    body.main-sidebar-page.main-sidebar-collapsed .main-sidebar-peek-trigger::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 4px;
+      width: 3px;
+      height: 36px;
+      border-radius: 999px;
+      background: var(--pinokio-sidebar-separator-hover);
+      opacity: 0;
+      transform: translateY(-50%);
+      transition: opacity 140ms cubic-bezier(0.25, 1, 0.5, 1);
+    }
+
+    body.main-sidebar-page.main-sidebar-collapsed .main-sidebar-peek-trigger:hover::after,
+    body.main-sidebar-page.main-sidebar-collapsed .main-sidebar-peek-trigger:focus-visible::after,
+    body.main-sidebar-page.main-sidebar-peeking .main-sidebar-peek-trigger::after {
+      opacity: 1;
+    }
+
+    body.main-sidebar-page.main-sidebar-peeking .main-sidebar-peek-trigger {
+      z-index: 10000019;
+    }
+
+    body.main-sidebar-page.main-sidebar-collapsed.main-sidebar-peeking .main-sidebar {
+      box-shadow: 20px 0 42px rgba(15, 23, 42, 0.16);
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateX(0);
+    }
+
+    body.dark.main-sidebar-page.main-sidebar-collapsed.main-sidebar-peeking .main-sidebar {
+      box-shadow: 22px 0 46px rgba(0, 0, 0, 0.38);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     body.main-sidebar-page .navheader .sidebar-toggle,
+    body.main-sidebar-page .navheader .pinokio-explore-nav-button,
+    body.app-page .navheader .pinokio-explore-nav-button,
     body.main-sidebar-page .sidebar-toggle-panel,
     body.main-sidebar-page .sidebar-toggle-content,
     body.main-sidebar-page.main-sidebar-motion-ready .main-sidebar,
@@ -4307,6 +4400,7 @@ aside .qr {
   padding: 15px;
 }
 
+.main-sidebar-peek-trigger,
 .main-sidebar-mobile-toggle,
 .main-sidebar-mobile-backdrop {
   display: none;
@@ -4398,12 +4492,30 @@ aside .qr {
     box-shadow: 24px 0 52px rgba(0, 0, 0, 0.38);
   }
 
-  body.main-sidebar-page.main-sidebar-mobile-open .main-sidebar {
+	  body.main-sidebar-page.main-sidebar-mobile-open .main-sidebar {
+	    transform: translateX(0);
+	  }
+
+  body.main-sidebar-page.main-sidebar-collapsed .main-sidebar {
+    flex: 0 0 auto;
+    width: min(280px, calc(100vw - 40px));
+    min-width: 0;
+    max-width: 100%;
+    padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
+    border-right-width: 1px;
+    border-right-color: var(--pinokio-sidebar-separator);
+    opacity: 1;
+    pointer-events: none;
+    transform: translateX(-100%);
+  }
+
+  body.main-sidebar-page.main-sidebar-collapsed.main-sidebar-mobile-open .main-sidebar {
+    pointer-events: auto;
     transform: translateX(0);
   }
 
-  body.main-sidebar-page .main-sidebar-nav,
-  body.main-sidebar-page .main-sidebar-section {
+	  body.main-sidebar-page .main-sidebar-nav,
+	  body.main-sidebar-page .main-sidebar-section {
     gap: 4px;
   }
 

package/server/views/app.ejs

@@ -399,17 +399,6 @@ body.dark #sidebar-toggle[aria-expanded="true"] {
   box-shadow: 0 3.8px 0 currentColor, 0 7.6px 0 currentColor;
   transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1), transform 150ms cubic-bezier(0.25, 1, 0.5, 1);
 }
-#sidebar-toggle[aria-expanded="false"] .sidebar-toggle-panel {
-  background: transparent;
-  outline: 1.5px solid currentColor;
-  outline-offset: -1px;
-  opacity: 0.35;
-  transform: translateX(-1px) scaleX(0.8);
-}
-#sidebar-toggle[aria-expanded="false"] .sidebar-toggle-content {
-  opacity: 0.42;
-  transform: translateX(-2px);
-}
 #devtab {
   align-items: center;
   justify-content: center;
@@ -2017,6 +2006,7 @@ body.dark .workspace-mode-link:hover {
   flex-grow: 1;
   min-height: 0;
   overflow: hidden;
+  position: relative;
   /*
   border-top: 1px solid rgba(0,0,0,0.04);
   */
@@ -2036,6 +2026,9 @@ body.dark .appcanvas_filler {
   height: 5px;
   background: #F1F1F1 !important;
 }
+.app-sidebar-peek-trigger {
+  display: none;
+}
 .appcanvas-resizer {
   display: none;
 }
@@ -2179,6 +2172,81 @@ body.dark .appcanvas > aside {
   pointer-events: none;
 }
 
+@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
+  .appcanvas.vertical.sidebar-collapsed > aside {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000020;
+    display: flex;
+    flex: none;
+    width: var(--appcanvas-sidebar-width);
+    min-width: var(--appcanvas-sidebar-width);
+    max-width: var(--appcanvas-sidebar-width);
+    border-right: 1px solid var(--pinokio-sidebar-separator);
+    opacity: 0;
+    pointer-events: none;
+    overflow: hidden;
+    transform: translateX(-100%);
+  }
+
+  .appcanvas.vertical.sidebar-collapsed > aside .menu-container {
+    width: var(--appcanvas-sidebar-width);
+  }
+
+  .appcanvas.vertical.sidebar-collapsed .app-sidebar-peek-trigger {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000021;
+    width: 14px;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    cursor: default;
+  }
+
+  .appcanvas.vertical.sidebar-collapsed .app-sidebar-peek-trigger::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 4px;
+    width: 3px;
+    height: 36px;
+    border-radius: 999px;
+    background: var(--pinokio-sidebar-separator-hover);
+    opacity: 0;
+    transform: translateY(-50%);
+    transition: opacity 140ms cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  .appcanvas.vertical.sidebar-collapsed .app-sidebar-peek-trigger:hover::after,
+  .appcanvas.vertical.sidebar-collapsed .app-sidebar-peek-trigger:focus-visible::after,
+  .appcanvas.vertical.sidebar-peeking .app-sidebar-peek-trigger::after {
+    opacity: 1;
+  }
+
+  .appcanvas.vertical.sidebar-peeking .app-sidebar-peek-trigger {
+    z-index: 10000019;
+  }
+
+  .appcanvas.vertical.sidebar-collapsed.sidebar-peeking > aside {
+    box-shadow: 20px 0 42px rgba(15, 23, 42, 0.16);
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
+  }
+
+  body.dark .appcanvas.vertical.sidebar-collapsed.sidebar-peeking > aside {
+    box-shadow: 22px 0 46px rgba(0, 0, 0, 0.38);
+  }
+
+}
+
 @media (prefers-reduced-motion: reduce) {
   #sidebar-toggle,
   .sidebar-toggle-panel,
@@ -7810,6 +7878,9 @@ body.dark .pinokio-custom-terminal-header {
     </span>
   </span>
 </button>
+<a class='btn2 pinokio-explore-nav-button' href="/home?mode=explore" data-pinokio-explore-nav="true" data-tippy-content="Explore" title="Explore" aria-label="Explore">
+  <div><i class="fa-solid fa-globe" aria-hidden="true"></i></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>
@@ -7906,6 +7977,7 @@ body.dark .pinokio-custom-terminal-header {
 </header>
 <div class='appcanvas vertical <%=type === "browse" ? "dev-workspace" : ""%>' data-page-error="<%= error ? '1' : '0' %>">
   <% if (type !== 'files') { %>
+  <button type='button' class='app-sidebar-peek-trigger' data-app-sidebar-peek-trigger aria-label='Show app navigation' aria-controls='app-sidebar' aria-expanded='false'></button>
   <aside id='app-sidebar' class='active'>
       <div class='menu-container'>
         <div class='menu-scroller'>
@@ -16084,6 +16156,7 @@ const rerenderMenuSection = (container, html) => {
   const appcanvas = document.querySelector(".appcanvas")
   const aside = document.getElementById("app-sidebar")
   const toggle = document.getElementById("sidebar-toggle")
+  const peekTrigger = document.querySelector("[data-app-sidebar-peek-trigger]")
   if (!appcanvas || !aside || !toggle) {
     if (toggle) {
       toggle.classList.add("hidden")
@@ -16109,10 +16182,49 @@ const rerenderMenuSection = (container, html) => {
     }
   }
 
+  const desktopPeekMq = window.matchMedia("(min-width: 769px) and (hover: hover) and (pointer: fine)")
+  let peekCloseTimer = 0
+
+  const isCollapsed = () => appcanvas.classList.contains("sidebar-collapsed")
+  const isPeeking = () => appcanvas.classList.contains("sidebar-peeking")
+  const syncSidebarVisibility = () => {
+    const peeking = isPeeking()
+    aside.setAttribute("aria-hidden", isCollapsed() && !peeking ? "true" : "false")
+    if (peekTrigger) {
+      peekTrigger.setAttribute("aria-expanded", peeking ? "true" : "false")
+    }
+  }
+  const canPeek = () => desktopPeekMq.matches && isCollapsed() && !document.body.classList.contains("mobile-menu-open")
+  const setPeeking = (peeking) => {
+    const next = !!peeking && canPeek()
+    window.clearTimeout(peekCloseTimer)
+    appcanvas.classList.toggle("sidebar-peeking", next)
+    syncSidebarVisibility()
+  }
+  const shouldKeepPeekOpen = () => {
+    const active = document.activeElement
+    return (
+      (peekTrigger && peekTrigger.matches(":hover")) ||
+      aside.matches(":hover") ||
+      (peekTrigger && active === peekTrigger) ||
+      (active instanceof Node && aside.contains(active))
+    )
+  }
+  const closePeekSoon = () => {
+    window.clearTimeout(peekCloseTimer)
+    peekCloseTimer = window.setTimeout(() => {
+      if (shouldKeepPeekOpen()) return
+      setPeeking(false)
+    }, 120)
+  }
+
   const setCollapsed = (collapsed, options = {}) => {
     const next = !!collapsed
+    if (!next) {
+      appcanvas.classList.remove("sidebar-peeking")
+    }
     appcanvas.classList.toggle("sidebar-collapsed", next)
-    aside.setAttribute("aria-hidden", next ? "true" : "false")
+    syncSidebarVisibility()
     updateToggle(next)
     if (options.persist !== false) {
       try {
@@ -16138,9 +16250,55 @@ const rerenderMenuSection = (container, html) => {
     setCollapsed(!appcanvas.classList.contains("sidebar-collapsed"))
   })
 
+  if (peekTrigger) {
+    peekTrigger.addEventListener("pointerenter", () => setPeeking(true))
+    peekTrigger.addEventListener("focus", () => setPeeking(true))
+    peekTrigger.addEventListener("click", () => setPeeking(true))
+    peekTrigger.addEventListener("pointerleave", closePeekSoon)
+    peekTrigger.addEventListener("blur", closePeekSoon)
+    aside.addEventListener("pointerenter", () => {
+      if (isPeeking()) {
+        window.clearTimeout(peekCloseTimer)
+      }
+    })
+    aside.addEventListener("focusin", () => {
+      if (isPeeking()) {
+        window.clearTimeout(peekCloseTimer)
+      }
+    })
+    aside.addEventListener("pointerleave", closePeekSoon)
+    aside.addEventListener("focusout", closePeekSoon)
+    document.addEventListener("pointerdown", (event) => {
+      if (!isPeeking()) return
+      const target = event.target
+      if (target instanceof Node && (aside.contains(target) || peekTrigger.contains(target))) return
+      setPeeking(false)
+    })
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && isPeeking()) {
+        setPeeking(false)
+        if (typeof peekTrigger.focus === "function") {
+          peekTrigger.focus()
+        }
+      }
+    })
+    const handlePeekMediaChange = () => {
+      if (!desktopPeekMq.matches) {
+        setPeeking(false)
+      }
+    }
+    if (typeof desktopPeekMq.addEventListener === "function") {
+      desktopPeekMq.addEventListener("change", handlePeekMediaChange)
+    } else if (typeof desktopPeekMq.addListener === "function") {
+      desktopPeekMq.addListener(handlePeekMediaChange)
+    }
+  }
+
   window.PinokioSidebar = {
     setCollapsed,
-    isCollapsed: () => appcanvas.classList.contains("sidebar-collapsed")
+    setPeeking,
+    isCollapsed,
+    isPeeking
   }
 })()
 </script>

package/server/views/app_search_test.ejs

@@ -111,6 +111,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class="btn2" id="minimize-header" data-tippy-content="fullscreen" title="fullscreen">
   <div><i class="fa-solid fa-expand"></i></div>
 </button>
+<a class='btn2 pinokio-explore-nav-button' href="/home?mode=explore" data-pinokio-explore-nav="true" data-tippy-content="Explore" title="Explore" aria-label="Explore">
+  <div><i class="fa-solid fa-globe" aria-hidden="true"></i></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>

package/server/views/connect/x.ejs

@@ -197,6 +197,9 @@ pre {
 <button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
   <div><i class="fa-solid fa-expand"></i></div>
 </button>
+<a class='btn2 pinokio-explore-nav-button' href="/home?mode=explore" data-pinokio-explore-nav="true" data-tippy-content="Explore" title="Explore" aria-label="Explore">
+  <div><i class="fa-solid fa-globe" aria-hidden="true"></i></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>

package/server/views/container.ejs

@@ -332,6 +332,9 @@ iframe {
 <button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
   <div><i class="fa-solid fa-expand"></i></div>
 </button>
+<a class='btn2 pinokio-explore-nav-button' href="/home?mode=explore" data-pinokio-explore-nav="true" data-tippy-content="Explore" title="Explore" aria-label="Explore">
+  <div><i class="fa-solid fa-globe" aria-hidden="true"></i></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>

package/server/views/download.ejs

@@ -125,6 +125,9 @@ body.frozen {
 <button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
   <div><i class="fa-solid fa-expand"></i></div>
 </button>
+<a class='btn2 pinokio-explore-nav-button' href="/home?mode=explore" data-pinokio-explore-nav="true" data-tippy-content="Explore" title="Explore" aria-label="Explore">
+  <div><i class="fa-solid fa-globe" aria-hidden="true"></i></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>