pinokiod 7.5.26 → 7.5.28

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,
@@ -4730,8 +4798,8 @@ body.dark .swal2-html-container input[type="text"] {
 }
 
 body.dark .swal2-html-container option {
-  background: #2d3748;
-  color: white;
+  background: #ffffff;
+  color: #111827;
 }
 
 /* Checkbox styling for dark mode */
@@ -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>

package/server/views/explore.ejs

@@ -150,6 +150,9 @@ body.dark .explore-url {
 <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/form.ejs

@@ -162,6 +162,9 @@ document.addEventListener("DOMContentLoaded", async () => {
 <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='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>

package/server/views/frame.ejs

@@ -92,6 +92,9 @@ main 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='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>

package/server/views/help.ejs

@@ -259,6 +259,9 @@ body.dark .item .tile .badge {
 <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/index.ejs

@@ -1005,51 +1005,29 @@ body.dark .home-actions-close:hover,
 body.dark .home-actions-close:focus-visible {
   background: rgba(255, 255, 255, 0.08);
 }
-.home-actions-tabs {
-  display: flex;
-  gap: 6px;
-  padding: 10px 18px 0;
-  border-bottom: 1px solid rgba(15, 23, 42, 0.09);
-}
-body.dark .home-actions-tabs {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}
-.home-actions-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid transparent;
-  border-bottom: none;
-  border-radius: 6px 6px 0 0;
-  background: transparent;
-  color: rgba(15, 23, 42, 0.68);
-  font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-}
-.home-actions-tab.is-active {
-  border-color: rgba(15, 23, 42, 0.11);
-  background: rgba(248, 250, 252, 0.9);
-  color: rgba(15, 23, 42, 0.94);
-}
-body.dark .home-actions-tab {
-  color: rgba(226, 232, 240, 0.68);
-}
-body.dark .home-actions-tab.is-active {
-  border-color: rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.055);
-  color: rgba(248, 250, 252, 0.94);
-}
 .home-actions-body {
   min-height: 0;
   flex: 1 1 auto;
   overflow: auto;
   padding: 14px 18px 18px;
 }
-.home-actions-panel[hidden] {
-  display: none;
+.home-actions-section + .home-actions-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(15, 23, 42, 0.09);
+}
+body.dark .home-actions-section + .home-actions-section {
+  border-top-color: rgba(255, 255, 255, 0.08);
+}
+.home-actions-section-title {
+  margin: 0 0 8px;
+  color: rgba(15, 23, 42, 0.58);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+body.dark .home-actions-section-title {
+  color: rgba(226, 232, 240, 0.56);
 }
 .home-run-menu-list,
 .home-actions-command-list,
@@ -1165,6 +1143,7 @@ body.dark .home-run-stop {
   color: rgba(252, 165, 165, 0.86);
 }
 .home-mode-command.is-danger {
+  margin-top: 6px;
   color: rgba(185, 28, 28, 0.86);
 }
 body.dark .home-mode-command.is-danger {
@@ -1421,6 +1400,9 @@ body.dark aside .current.selected {
 <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>
@@ -2678,21 +2660,6 @@ const closeContextMenuForNode = (node) => {
   }
 }
 window.PinokioHomeCloseContextMenu = closeContextMenuForNode
-const setHomeActionsTab = (dialog, tabName) => {
-  if (!dialog || !tabName) {
-    return
-  }
-  dialog.querySelectorAll('.home-actions-tab[data-tab]').forEach((tab) => {
-    const isActive = tab.getAttribute('data-tab') === tabName
-    tab.classList.toggle('is-active', isActive)
-    tab.setAttribute('aria-selected', isActive ? 'true' : 'false')
-  })
-  dialog.querySelectorAll('.home-actions-panel').forEach((panel) => {
-    const isActive = panel.getAttribute('data-panel') === tabName
-    panel.classList.toggle('is-active', isActive)
-    panel.hidden = !isActive
-  })
-}
 const homeActionsDrawerMedia = window.matchMedia('(min-width: 961px)')
 const homeActionsReducedMotionMedia = window.matchMedia('(prefers-reduced-motion: reduce)')
 const isHomeActionsDrawerViewport = () => homeActionsDrawerMedia.matches
@@ -2791,7 +2758,6 @@ const openHomeActionsDialog = (button) => {
     return
   }
   closeHomeActionsDialogs(dialog)
-  setHomeActionsTab(dialog, button.getAttribute('data-default-tab') || 'run')
   if (isHomeActionsDrawerViewport()) {
     setHomeActionsDrawerOffset()
     dialog.classList.remove('is-closing')
@@ -3094,17 +3060,6 @@ document.addEventListener("click", async (e) => {
     closeHomeActionsDialog(e.target)
     return
   }
-  if (e.target.classList.contains("home-actions-tab")) {
-    target = e.target
-  } else {
-    target = e.target.closest(".home-actions-tab")
-  }
-  if (target && target.hasAttribute("data-tab")) {
-    e.preventDefault()
-    e.stopPropagation()
-    setHomeActionsTab(target.closest(".home-actions-dialog"), target.getAttribute("data-tab"))
-    return
-  }
   if (e.target.classList.contains("home-run-stop")) {
     target = e.target
   } else {

package/server/views/index2.ejs

@@ -272,6 +272,9 @@ body.dark .open-menu, body.dark .browse {
     <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>
   <div class='nav-btns'>
     <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
     <a class='btn2' id='genlog' href="/logs"><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></a>

package/server/views/init/index.ejs

@@ -1528,6 +1528,9 @@ body.dark .ace-editor {
 <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/mini.ejs

@@ -761,6 +761,9 @@ body.dark .appcanvas {
 <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/net.ejs

@@ -1294,6 +1294,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/network.ejs

@@ -1369,6 +1369,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/network2.ejs

@@ -422,6 +422,9 @@ table h3 {
   <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'><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>

package/server/views/old_network.ejs

@@ -405,6 +405,9 @@ input:checked + .slider:before {
   <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'><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>

package/server/views/partials/app_navheader.ejs

@@ -4,6 +4,9 @@
 <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/partials/home_action_modal.ejs

@@ -25,42 +25,29 @@
       </button>
     </div>
 
-    <div class='home-actions-tabs' aria-label='App action modes'>
-      <button type='button' class='home-actions-tab is-active' role='tab' aria-selected='true' data-tab='run' aria-controls='<%= id %>-run'>
-        <i class='fa-solid fa-play' aria-hidden='true'></i>
-        <span>Run</span>
-      </button>
-      <button type='button' class='home-actions-tab home-browse' data-src='<%= item.dev_url %>' title='Open dev mode' aria-label='Open dev mode'>
-        <i class='fa-solid fa-code' aria-hidden='true'></i>
-        <span>Dev</span>
-        <% if (item.terminal_online_count > 0) { %>
-          <span class='home-actions-count'><%= item.terminal_online_count %> online</span>
-        <% } %>
-      </button>
-      <button type='button' class='home-actions-tab' role='tab' aria-selected='false' data-tab='files' aria-controls='<%= id %>-files'>
-        <i class='fa-solid fa-file-lines' aria-hidden='true'></i>
-        <span>Files</span>
-      </button>
-    </div>
-
     <div class='home-actions-body'>
-      <section id='<%= id %>-run' class='home-actions-panel is-active' role='tabpanel' data-panel='run'>
-        <div class='home-run-menu-list'>
+      <% if (item.menu && item.menu.length > 0) { %>
+        <section class='home-actions-section' aria-labelledby='<%= id %>-run-title'>
+          <div class='home-actions-section-title' id='<%= id %>-run-title'>Run</div>
+          <div class='home-run-menu-list'>
+            <%- include('./home_run_menu', { menu: item.menu, app: item }) %>
+          </div>
+        </section>
+      <% } %>
+
+      <section class='home-actions-section' aria-labelledby='<%= id %>-app-title'>
+        <div class='home-actions-section-title' id='<%= id %>-app-title'>App</div>
+        <div class='home-actions-command-list'>
           <button type='button' class='home-mode-command home-browse' data-src='<%= item.view_url %>'>
             <i class='fa-regular fa-eye' aria-hidden='true'></i>
             <span>Open without launching</span>
           </button>
-          <% if (item.menu && item.menu.length > 0) { %>
-            <%- include('./home_run_menu', { menu: item.menu, app: item }) %>
-          <% } %>
-        </div>
-      </section>
-
-      <section id='<%= id %>-files' class='home-actions-panel' role='tabpanel' data-panel='files' hidden>
-        <div class='home-actions-command-list'>
-          <button type='button' class='home-mode-command home-browse' data-src='<%= item.files_url %>'>
-            <i class='fa-solid fa-file-lines' aria-hidden='true'></i>
-            <span>Open files mode</span>
+          <button type='button' class='home-mode-command home-browse' data-src='<%= item.dev_url %>'>
+            <i class='fa-solid fa-code' aria-hidden='true'></i>
+            <span>Open dev mode</span>
+            <% if (item.terminal_online_count > 0) { %>
+              <span class='home-actions-count'><%= item.terminal_online_count %> online</span>
+            <% } %>
           </button>
           <button type='button' class='home-mode-command' data-filepath='<%= item.filepath %>'>
             <i class='fa-solid fa-folder-open' aria-hidden='true'></i>