pinokiod 7.2.7 → 7.2.9

package/server/views/app.ejs

@@ -5288,6 +5288,7 @@ header.navheader .mode-selector .community-mode-toggle {
             </a>
           <%})%>
         </div>
+        <div class='active-nested-path hidden' id='active-nested-path'></div>
       </div>
       <div class='menu-actions'>
         <% if (type === 'run') { %>
@@ -7184,6 +7185,7 @@ const rerenderMenuSection = (container, html) => {
     }
 
     if (!target) {
+      activeNestedFocusMenu = null
       syncActiveNestedPath()
       browserPopoutSurface.hide()
       document.querySelector(".container").classList.remove("active")
@@ -7217,6 +7219,7 @@ const rerenderMenuSection = (container, html) => {
       el.classList.remove("selected")
     })
     target.classList.add("selected")
+    activeNestedFocusMenu = null
     syncActiveNestedPath({ selectedLink: target })
     if (skipPersistedSelection && target.hasAttribute('data-default')) {
       ignorePersistedSelection = false
@@ -8052,7 +8055,162 @@ const rerenderMenuSection = (container, html) => {
 
   const getSubmenu = (menu) => getDirectChild(menu, ".submenu")
   const getToggle = (menu) => getDirectChild(menu, ".reveal")
-  const syncActiveNestedPath = () => {}
+  const activeNestedPathRoot = document.getElementById("active-nested-path")
+  const activeNestedProxyMap = new WeakMap()
+  let activeNestedFocusMenu = null
+
+  const getNestedMenuChain = (node) => {
+    if (!node) {
+      return []
+    }
+    let current = node
+    if (!current.classList || !current.classList.contains("nested-menu")) {
+      current = current.closest(".nested-menu")
+    }
+    const chain = []
+    while (current) {
+      chain.unshift(current)
+      current = current.parentElement ? current.parentElement.closest(".nested-menu") : null
+    }
+    return chain
+  }
+
+  const sanitizeActiveNestedProxy = (proxy) => {
+    if (!proxy) {
+      return null
+    }
+    proxy.removeAttribute("id")
+    proxy.classList.remove("frame-link", "selected", "tab-link-popover-host")
+    proxy.classList.add("active-nested-proxy")
+    proxy.setAttribute("data-active-nested-proxy", "true")
+    proxy.querySelectorAll(".tab-link-popover-trigger").forEach((node) => {
+      node.remove()
+    })
+    return proxy
+  }
+
+  const buildActiveNestedProxy = (child, isCurrent) => {
+    if (!child) {
+      return null
+    }
+    let proxy
+    if (child.classList && child.classList.contains("nested-menu")) {
+      const toggle = getToggle(child)
+      if (!toggle) {
+        return null
+      }
+      proxy = toggle.cloneNode(true)
+    } else {
+      proxy = child.cloneNode(true)
+    }
+    sanitizeActiveNestedProxy(proxy)
+    if (child.classList && child.classList.contains("nested-menu")) {
+      const loader = proxy.querySelector(".loader")
+      if (loader) {
+        loader.innerHTML = `<i class="fa-solid ${isCurrent ? "fa-angle-down" : "fa-angle-right"}"></i>`
+      }
+    }
+    proxy.classList.toggle("is-current", Boolean(isCurrent))
+    activeNestedProxyMap.set(proxy, child)
+    return proxy
+  }
+
+  const syncActiveNestedPath = ({ selectedLink = null } = {}) => {
+    if (!activeNestedPathRoot) {
+      return
+    }
+    if (activeNestedFocusMenu && !activeNestedFocusMenu.isConnected) {
+      activeNestedFocusMenu = null
+    }
+    const currentSelectedLink = (selectedLink && selectedLink.isConnected)
+      ? selectedLink
+      : document.querySelector("aside .frame-link.selected")
+    const chain = activeNestedFocusMenu
+      ? getNestedMenuChain(activeNestedFocusMenu)
+      : getNestedMenuChain(currentSelectedLink)
+
+    activeNestedPathRoot.replaceChildren()
+
+    if (!chain.length) {
+      activeNestedPathRoot.classList.add("hidden")
+      if (window.PinokioMenuScrollHints && typeof window.PinokioMenuScrollHints.update === "function") {
+        window.PinokioMenuScrollHints.update()
+      }
+      return
+    }
+
+    chain.forEach((menu, index) => {
+      const submenu = getSubmenu(menu)
+      if (!submenu) {
+        return
+      }
+      const row = document.createElement("div")
+      row.className = "m active-nested-row"
+      row.dataset.activeNestedLevel = String(index)
+      const nextMenu = chain[index + 1] || null
+
+      Array.from(submenu.children).forEach((child) => {
+        let isCurrent = false
+        if (child.classList && child.classList.contains("nested-menu")) {
+          isCurrent = child === nextMenu || (!nextMenu && currentSelectedLink ? child.contains(currentSelectedLink) : false)
+        } else {
+          isCurrent = child === currentSelectedLink
+        }
+        const proxy = buildActiveNestedProxy(child, isCurrent)
+        if (proxy) {
+          row.appendChild(proxy)
+        }
+      })
+
+      if (row.childElementCount > 0) {
+        activeNestedPathRoot.appendChild(row)
+      }
+    })
+
+    if (!activeNestedPathRoot.childElementCount) {
+      activeNestedPathRoot.classList.add("hidden")
+      if (window.PinokioMenuScrollHints && typeof window.PinokioMenuScrollHints.update === "function") {
+        window.PinokioMenuScrollHints.update()
+      }
+      return
+    }
+
+    activeNestedPathRoot.classList.remove("hidden")
+    const currentProxy = activeNestedPathRoot.querySelector(".active-nested-proxy.is-current")
+    if (currentProxy && typeof currentProxy.scrollIntoView === "function") {
+      currentProxy.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      })
+    }
+    if (window.PinokioMenuScrollHints && typeof window.PinokioMenuScrollHints.update === "function") {
+      window.PinokioMenuScrollHints.update()
+    }
+  }
+
+  if (activeNestedPathRoot) {
+    activeNestedPathRoot.addEventListener("click", (event) => {
+      const proxy = event.target.closest("[data-active-nested-proxy='true']")
+      if (!proxy || !activeNestedPathRoot.contains(proxy)) {
+        return
+      }
+      const source = activeNestedProxyMap.get(proxy)
+      if (!source || !source.isConnected) {
+        return
+      }
+      event.preventDefault()
+      event.stopPropagation()
+      if (source.classList && source.classList.contains("nested-menu")) {
+        activeNestedFocusMenu = source
+        syncActiveNestedPath()
+        return
+      }
+      activeNestedFocusMenu = null
+      if (typeof source.click === "function") {
+        source.click()
+      }
+    })
+  }
 
   renderSelection()
 

package/server/views/partials/main_sidebar.ejs

@@ -27,6 +27,7 @@
     </button>
   </div>
   <a href="/home" class="tab <%= sidebarSelected === 'home' ? 'selected' : '' %>" data-tippy-content="This machine"><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>
+  <a href="/workspaces" class="tab <%= sidebarSelected === 'workspaces' ? 'selected' : '' %>" data-tippy-content="Workspaces"><i class="fa-solid fa-folder-tree"></i><div class='caption'>Workspaces</div></a>
   <a href="/network" class="tab <%= sidebarSelected === 'network' ? 'selected' : '' %>" data-tippy-content="Local network"><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
   <% if (sidebarList.length > 0) { %>
     <% sidebarList.forEach(({ host, name, platform }) => { %>

package/server/views/partials/workspace_row.ejs

@@ -0,0 +1,61 @@
+<%
+  const shellCount = workspace.counts && Number.isFinite(workspace.counts.shells) ? workspace.counts.shells : 0;
+  const scriptCount = workspace.counts && Number.isFinite(workspace.counts.scripts) ? workspace.counts.scripts : 0;
+  const draftCount = workspace.counts && Number.isFinite(workspace.counts.drafts) ? workspace.counts.drafts : 0;
+  const shellTitles = Array.isArray(workspace.shells) ? workspace.shells.map((shell) => shell.title || shell.id || "").join(" ") : "";
+  const scriptTitles = Array.isArray(workspace.scripts) ? workspace.scripts.map((script) => script.title || script.id || "").join(" ") : "";
+  const draft = workspace.draft || null;
+  const draftId = draft && draft.id ? draft.id : `draft-${index}`;
+  const searchText = [workspace.name, workspace.cwd, shellTitles, scriptTitles, draft && draft.title].filter(Boolean).join(" ");
+  const modifiedLabel = dateLabel(workspace.modifiedAt);
+  const details = [];
+  if (shellCount > 0) details.push(plural(shellCount, "terminal"));
+  if (scriptCount > 0) details.push(plural(scriptCount, "script"));
+  if (draftCount > 0) details.push(draftCount === 1 ? "Draft ready" : plural(draftCount, "draft"));
+  if (modifiedLabel) details.push(modifiedLabel);
+%>
+<div
+  class="workspace-card workspace-line line align-top"
+  data-cwd="<%= workspace.cwd %>"
+  data-name="<%= workspace.name %>"
+  data-index="<%= index %>"
+  data-launch-count-total="<%= workspace.usageCount || 0 %>"
+  data-last-launch-at="<%= workspace.lastOpenedAt || workspace.modifiedAt || "" %>"
+  data-search="<%= searchText %>"
+>
+  <h3>
+    <div class="workspace-icon item-icon">
+      <i class="fa-solid <%= workspace.running ? "fa-folder-open" : "fa-folder" %>" aria-hidden="true"></i>
+    </div>
+    <div class="col">
+      <div class="title">
+        <i class="fa-solid fa-circle" aria-hidden="true"></i>
+        <span><%= workspace.name || "Workspace" %></span>
+      </div>
+      <div class="uri"><%= workspace.cwd %></div>
+      <% if (details.length) { %>
+        <div class="description"><%= details.join(" / ") %></div>
+      <% } %>
+      <div class="menu-btns">
+        <% if (workspace.primaryUrl && shellCount === 1) { %>
+          <a class="btn" href="<%= workspace.primaryUrl %>" title="Open terminal"><i class="fa-solid fa-terminal" aria-hidden="true"></i> Terminal</a>
+        <% } else if (shellCount > 1) { %>
+          <button class="btn" type="button" data-open-workspace="<%= workspace.cwd %>" data-workspace-modal-mode="terminals" title="Open terminals"><i class="fa-solid fa-terminal" aria-hidden="true"></i> Terminals</button>
+        <% } %>
+        <% if (workspace.launchUrl) { %>
+          <button class="btn" type="button" data-open-workspace="<%= workspace.cwd %>" data-workspace-modal-mode="session" title="Start session"><i class="fa-solid fa-play" aria-hidden="true"></i> Start</button>
+        <% } %>
+        <button class="btn" type="button" data-open-path="<%= workspace.cwd %>" title="Open folder"><i class="fa-solid fa-folder-open" aria-hidden="true"></i> Folder</button>
+        <% if (draft && draft.postPath) { %>
+          <button class="btn" type="button" data-open-path="<%= draft.postPath %>" title="Open draft"><i class="fa-solid fa-file-lines" aria-hidden="true"></i> Draft</button>
+          <% if (draft.excerpt) { %>
+            <button class="btn" type="button" data-preview-toggle="<%= draftId %>"><i class="fa-solid fa-eye" aria-hidden="true"></i> Preview</button>
+          <% } %>
+        <% } %>
+      </div>
+      <% if (draft && draft.excerpt) { %>
+        <div class="workspace-draft-preview" data-preview-panel="<%= draftId %>" hidden><%= draft.excerpt %></div>
+      <% } %>
+    </div>
+  </h3>
+</div>

package/server/views/terminal.ejs

@@ -3086,5 +3086,13 @@ const reloadMemory = async () => {
       </a>
     </div>
   </div>
+  <% if (typeof draft_watch_enabled !== 'undefined' && draft_watch_enabled) { %>
+    <script>
+      window.PinokioDraftContext = {
+        cwd: <%- JSON.stringify((typeof draft_watch_cwd !== 'undefined' && draft_watch_cwd) ? draft_watch_cwd : '').replace(/</g, '\\u003c') %>
+      };
+    </script>
+    <script src="/drafts.js"></script>
+  <% } %>
 </body>
 </html>

package/server/views/terminals.ejs

@@ -10030,5 +10030,6 @@ body.dark .swal2-popup.pinokio-diff-modal .pinokio-modal-footer--commit .pinokio
   requestAnimationFrame(setViewport)
 })()
 </script>
+<script src="/drafts.js"></script>
 </body>
 </html>