pinokiod 7.5.27 → 7.5.28

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>

package/server/views/partials/main_sidebar.ejs

@@ -35,6 +35,7 @@
   <i class="fa-solid fa-bars" aria-hidden="true"></i>
 </button>
 <button type="button" class="main-sidebar-mobile-backdrop" data-main-sidebar-backdrop aria-label="Close navigation" hidden></button>
+<button type="button" class="main-sidebar-peek-trigger" data-main-sidebar-peek-trigger aria-label="Show navigation" aria-controls="main-sidebar" aria-expanded="false"></button>
 <aside class="main-sidebar" id="main-sidebar" aria-label="Primary navigation">
   <nav class="main-sidebar-nav" aria-label="Pinokio navigation">
     <div class='main-sidebar-section main-sidebar-section-actions' aria-label="Actions">
@@ -155,6 +156,7 @@
 
     const headerToggle = document.getElementById("minimize-header");
     const sidebar = document.getElementById("main-sidebar");
+    const peekTrigger = document.querySelector("[data-main-sidebar-peek-trigger]");
     if (body && sidebar && headerToggle && !headerToggle.dataset.mainSidebarHeaderToggle) {
       headerToggle.dataset.mainSidebarHeaderToggle = "true";
       headerToggle.classList.add("sidebar-toggle", "main-sidebar-header-toggle");
@@ -182,17 +184,66 @@
         }
       };
 
-      const setCollapsed = (collapsed) => {
+      const desktopPeekMq = window.matchMedia("(min-width: 769px) and (hover: hover) and (pointer: fine)");
+      const storageKey = "pinokio.main-sidebar-collapsed";
+      let peekCloseTimer = 0;
+
+      const isCollapsed = () => body.classList.contains("main-sidebar-collapsed");
+      const isPeeking = () => body.classList.contains("main-sidebar-peeking");
+      const syncSidebarVisibility = () => {
+        const peeking = isPeeking();
+        sidebar.setAttribute("aria-hidden", isCollapsed() && !peeking ? "true" : "false");
+        if (peekTrigger) {
+          peekTrigger.setAttribute("aria-expanded", peeking ? "true" : "false");
+        }
+      };
+      const canPeek = () => desktopPeekMq.matches && isCollapsed() && !body.classList.contains("main-sidebar-mobile-open");
+      const setPeeking = (peeking) => {
+        const next = !!peeking && canPeek();
+        window.clearTimeout(peekCloseTimer);
+        body.classList.toggle("main-sidebar-peeking", next);
+        syncSidebarVisibility();
+      };
+      const shouldKeepPeekOpen = () => {
+        const active = document.activeElement;
+        return (
+          (peekTrigger && peekTrigger.matches(":hover")) ||
+          sidebar.matches(":hover") ||
+          (peekTrigger && active === peekTrigger) ||
+          (active instanceof Node && sidebar.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) {
+          body.classList.remove("main-sidebar-peeking");
+        }
         body.classList.toggle("main-sidebar-collapsed", next);
-        sidebar.setAttribute("aria-hidden", next ? "true" : "false");
+        syncSidebarVisibility();
         updateToggle(next);
+        if (options.persist !== false) {
+          try {
+            window.localStorage.setItem(storageKey, next ? "1" : "0");
+          } catch (_) {}
+        }
         document.dispatchEvent(new CustomEvent("pinokio:sidebar-state", {
           detail: { collapsed: next, source: "main-sidebar" }
         }));
       };
 
-      setCollapsed(false);
+      let initialCollapsed = false;
+      try {
+        initialCollapsed = window.localStorage.getItem(storageKey) === "1";
+      } catch (_) {}
+      setCollapsed(initialCollapsed, { persist: false });
       requestAnimationFrame(() => {
         body.classList.add("main-sidebar-motion-ready");
       });
@@ -202,9 +253,55 @@
         setCollapsed(!body.classList.contains("main-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);
+        sidebar.addEventListener("pointerenter", () => {
+          if (isPeeking()) {
+            window.clearTimeout(peekCloseTimer);
+          }
+        });
+        sidebar.addEventListener("focusin", () => {
+          if (isPeeking()) {
+            window.clearTimeout(peekCloseTimer);
+          }
+        });
+        sidebar.addEventListener("pointerleave", closePeekSoon);
+        sidebar.addEventListener("focusout", closePeekSoon);
+        document.addEventListener("pointerdown", (event) => {
+          if (!isPeeking()) return;
+          const target = event.target;
+          if (target instanceof Node && (sidebar.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.PinokioMainSidebar = {
         setCollapsed,
-        isCollapsed: () => body.classList.contains("main-sidebar-collapsed")
+        setPeeking,
+        isCollapsed,
+        isPeeking
       };
     }
 

package/server/views/prototype/index.ejs

@@ -1010,6 +1010,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/review.ejs

@@ -941,6 +941,9 @@ body.dark .top-menu .btn2.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>

package/server/views/screenshots.ejs

@@ -873,6 +873,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/settings.ejs

@@ -1011,6 +1011,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/setup_home.ejs

@@ -155,6 +155,9 @@ body.dark .card {
 <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/terminal.ejs

@@ -3403,6 +3403,9 @@ const reloadMemory = 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="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/terminals.ejs

@@ -4554,6 +4554,9 @@ body.dark .pinokio-git-commit-item {
 <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>