pinokiod 5.1.34 → 5.1.35

package/package.json

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

package/server/public/tab-link-popover.css

@@ -132,3 +132,37 @@ body.dark .tab-link-popover .tab-link-popover-footer:hover,
 body.dark .tab-link-popover .tab-link-popover-footer:focus-visible {
   background: rgba(147, 197, 253, 0.35);
 }
+.appcanvas > aside .menu-container .tab-link-popover-host {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.appcanvas > aside .menu-container .tab-link-popover-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  flex: 0 0 auto;
+  color: inherit;
+  opacity: 0.55;
+  cursor: pointer;
+  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
+}
+.appcanvas > aside .menu-container .tab-link-popover-trigger i {
+  font-size: 14px;
+}
+.appcanvas > aside .menu-container .frame-link:hover .tab-link-popover-trigger,
+.appcanvas > aside .menu-container .frame-link:focus-within .tab-link-popover-trigger {
+  opacity: 0.85;
+}
+.appcanvas > aside .menu-container .tab-link-popover-trigger:hover,
+.appcanvas > aside .menu-container .tab-link-popover-trigger:focus-visible {
+  background: rgba(15, 23, 42, 0.08);
+  opacity: 1;
+}
+body.dark .appcanvas > aside .menu-container .tab-link-popover-trigger:hover,
+body.dark .appcanvas > aside .menu-container .tab-link-popover-trigger:focus-visible {
+  background: rgba(148, 163, 184, 0.2);
+}

package/server/public/tab-link-popover.js

@@ -10,6 +10,40 @@
   let tabLinkRouterHttpsActive = null
   let tabLinkPeerInfoPromise = null
   let tabLinkPeerInfoExpiry = 0
+  const TAB_LINK_TRIGGER_CLASS = "tab-link-popover-trigger"
+  const TAB_LINK_TRIGGER_HOST_CLASS = "tab-link-popover-host"
+
+  const shouldAttachTabLinkTrigger = (link) => {
+    if (!link || !link.classList || !link.classList.contains("frame-link")) {
+      return false
+    }
+    if (!link.hasAttribute("href")) {
+      return false
+    }
+    const href = link.getAttribute("href")
+    return typeof href === "string" && href.trim().length > 0
+  }
+
+  const createTabLinkTrigger = () => {
+    const trigger = document.createElement("span")
+    trigger.className = TAB_LINK_TRIGGER_CLASS
+    trigger.setAttribute("role", "button")
+    trigger.setAttribute("tabindex", "0")
+    trigger.setAttribute("aria-label", "Open in browser")
+    trigger.innerHTML = '<i class="fa-solid fa-arrow-up-right-from-square"></i>'
+    return trigger
+  }
+
+  const ensureTabLinkTrigger = (link) => {
+    if (!shouldAttachTabLinkTrigger(link)) {
+      return
+    }
+    if (link.querySelector(`.${TAB_LINK_TRIGGER_CLASS}`)) {
+      return
+    }
+    link.classList.add(TAB_LINK_TRIGGER_HOST_CLASS)
+    link.appendChild(createTabLinkTrigger())
+  }
 
   const ensureTabLinkPopoverEl = () => {
     if (!tabLinkPopoverEl) {
@@ -38,7 +72,12 @@
           if (targetMode === "_self") {
             window.location.assign(url)
           } else {
-            window.open(url, "_blank", "browser")
+            const agent = document.body ? document.body.getAttribute("data-agent") : null
+            if (agent === "electron") {
+              window.open(url, "_blank", "browser")
+            } else {
+              window.open(url, "_blank")
+            }
 //            fetch("/go", {
 //              method: "POST",
 //              headers: {
@@ -1611,27 +1650,80 @@
     if (!container) {
       return
     }
+    if (container.dataset.tabLinkPopoverReady === "1") {
+      return
+    }
+    container.dataset.tabLinkPopoverReady = "1"
 
-    container.addEventListener("mouseover", (event) => {
-      const link = event.target.closest(".frame-link")
-      if (!link || !container.contains(link)) {
+    const ensureTriggers = (root) => {
+      if (!root || !root.querySelectorAll) {
         return
       }
-      renderTabLinkPopover(link, { requireAlternate: false })
+      root.querySelectorAll(".frame-link").forEach((link) => {
+        ensureTabLinkTrigger(link)
+      })
+    }
+
+    ensureTriggers(container)
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (!node || node.nodeType !== 1) {
+            return
+          }
+          if (node.classList && node.classList.contains("frame-link")) {
+            ensureTabLinkTrigger(node)
+          }
+          if (node.querySelectorAll) {
+            node.querySelectorAll(".frame-link").forEach((link) => {
+              ensureTabLinkTrigger(link)
+            })
+          }
+        })
+      })
     })
+    observer.observe(container, { childList: true, subtree: true })
 
-    container.addEventListener("mouseout", (event) => {
-      const origin = event.target.closest(".frame-link")
-      if (!origin || !container.contains(origin)) {
+    const togglePopoverForLink = (link) => {
+      if (!link) {
         return
       }
-      const related = event.relatedTarget
       const popover = tabLinkPopoverEl || document.getElementById(TAB_LINK_POPOVER_ID)
-      if (related && (origin.contains(related) || (popover && popover.contains(related)))) {
+      if (tabLinkActiveLink === link && popover && popover.classList.contains("visible")) {
+        hideTabLinkPopover({ immediate: true })
         return
       }
-      hideTabLinkPopover()
-    })
+      renderTabLinkPopover(link, { requireAlternate: false })
+    }
+
+    const handleTriggerClick = (event) => {
+      const trigger = event.target.closest(`.${TAB_LINK_TRIGGER_CLASS}`)
+      if (!trigger || !container.contains(trigger)) {
+        return
+      }
+      event.preventDefault()
+      event.stopPropagation()
+      const link = trigger.closest(".frame-link")
+      togglePopoverForLink(link)
+    }
+
+    const handleTriggerKeydown = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return
+      }
+      const trigger = event.target.closest(`.${TAB_LINK_TRIGGER_CLASS}`)
+      if (!trigger || !container.contains(trigger)) {
+        return
+      }
+      event.preventDefault()
+      event.stopPropagation()
+      const link = trigger.closest(".frame-link")
+      togglePopoverForLink(link)
+    }
+
+    container.addEventListener("click", handleTriggerClick, true)
+    container.addEventListener("keydown", handleTriggerKeydown, true)
   }
 
   const handleGlobalPointer = (event) => {

package/server/views/app.ejs

@@ -25,7 +25,6 @@ body.dark #devtab.selected {
   background: rgb(27, 28, 29) !important;
 }
 .config-info {
-  cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 12px;
@@ -34,9 +33,6 @@ body.dark #devtab.selected {
 body.dark .snapshot-comment {
   color: white;
 }
-.config-info:hover, .config-info:hover i {
-  color: rgba(127, 91, 243, 0.95);
-}
 #editortab {
   color: #7f5bf3;
 }
@@ -44,9 +40,15 @@ body.dark #layout-toggle {
   color: white;
 }
 #layout-toggle {
-  padding: 10px;
+  padding: 6px 10px;
   border: none;
   background: none;
+  cursor: pointer;
+  font-size: 16px;
+}
+#layout-toggle:hover,
+#layout-toggle:hover i {
+  color: rgba(127, 91, 243, 0.95);
 }
 #devtab {
   align-items: center;
@@ -1272,12 +1274,12 @@ body.dark .submenu {
 }
 body.dark .disk-usage {
   border-right: 1px solid rgba(255,255,255,0.1);
-  color: black;
+  color: white;
 }
 .disk-usage {
   border-right: 1px solid rgba(0,0,0,0.1);
   font-weight: bold;
-  color: white;
+  color: black;
   padding: 5px 10px;
   border-radius: 4px;
 }
@@ -3324,6 +3326,9 @@ body.dark .snapshot-footer {
   color: white;
   border-top: 1px solid rgba(148, 163, 184, 0.2);
 }
+html.snapshot-footer-dismissed .snapshot-footer {
+  display: none !important;
+}
 .snapshot-footer .btn {
   font-size: 14px;
 }
@@ -3403,6 +3408,21 @@ body.dark .snapshot-footer-input input {
 <script src="/popper.min.js"></script>
 <script src="/tippy-bundle.umd.min.js"></script>
 <script src="/tab-link-popover.js"></script>
+<script>
+(function() {
+  try {
+    var workspace = <%- JSON.stringify(name || "") %>
+    var pendingSnapshotId = <%- JSON.stringify(pendingSnapshotId ? String(pendingSnapshotId) : "") %>
+    if (!workspace || pendingSnapshotId) {
+      return
+    }
+    var key = "pinokio.snapshot-footer.dismissed:" + workspace
+    if (window.localStorage && window.localStorage.getItem(key) === "1") {
+      document.documentElement.classList.add("snapshot-footer-dismissed")
+    }
+  } catch (_) {}
+})()
+</script>
 </head>
 <body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <header class='navheader grabbable'>
@@ -3650,6 +3670,7 @@ body.dark .snapshot-footer-input input {
             <button type="button" class="btn btn-primary snapshot-btn-save">
               <i class="fa-solid fa-circle-check"></i> Save checkpoint
             </button>
+            <button type="button" class="btn snapshot-btn-dismiss">Dismiss</button>
           </div>
         </div>
         <% if (registryEnabled) { %>
@@ -5774,7 +5795,7 @@ const rerenderMenuSection = (container, html) => {
     }
   })
 
-  const layoutToggleButton = document.querySelector(".config-info")
+  const layoutToggleButton = document.getElementById("layout-toggle")
   if (layoutToggleButton) {
     const layoutToggleIcon = layoutToggleButton.querySelector("i.fa-bars")
     const appcanvas = document.querySelector(".appcanvas")
@@ -8572,7 +8593,12 @@ const rerenderMenuSection = (container, html) => {
                 event.preventDefault()
                 event.stopPropagation()
                 try {
-                  window.open(remoteHref, '_blank', 'browser')
+                  const agent = document.body ? document.body.getAttribute('data-agent') : null
+                  if (agent === 'electron') {
+                    window.open(remoteHref, '_blank', 'browser')
+                  } else {
+                    window.open(remoteHref, '_blank')
+                  }
                 } catch (error) {
                   console.error('Failed to open remote URL:', error)
                 }
@@ -9655,6 +9681,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const publishPanel = footer.querySelector(".snapshot-footer-publish")
   const publishBtn = footer.querySelector(".snapshot-btn-publish")
   const laterBtn = footer.querySelector(".snapshot-btn-later")
+  const dismissBtn = footer.querySelector(".snapshot-btn-dismiss")
   const publishText = publishPanel ? publishPanel.querySelector(".snapshot-footer-publish-text") : null
   const publishActions = publishPanel ? publishPanel.querySelector(".snapshot-footer-actions") : null
   if (!saveBtn) return
@@ -9664,6 +9691,28 @@ document.addEventListener("DOMContentLoaded", () => {
     footer.classList.add("hidden")
     return
   }
+  const pendingSnapshotId = footer.getAttribute("data-pending-snapshot-id")
+  const dismissStorageKey = `pinokio.snapshot-footer.dismissed:${workspace}`
+  const getDismissedState = () => {
+    try {
+      return window.localStorage.getItem(dismissStorageKey) === "1"
+    } catch (_) {
+      return false
+    }
+  }
+  const setDismissedState = (dismissed) => {
+    try {
+      if (dismissed) {
+        window.localStorage.setItem(dismissStorageKey, "1")
+      } else {
+        window.localStorage.removeItem(dismissStorageKey)
+      }
+    } catch (_) {}
+  }
+  if (!pendingSnapshotId && getDismissedState()) {
+    footer.classList.add("hidden")
+    return
+  }
   let savedSnapshotId = null
   const saveOriginal = saveBtn.innerHTML
   const publishOriginal = publishBtn ? publishBtn.innerHTML : ""
@@ -9688,7 +9737,6 @@ document.addEventListener("DOMContentLoaded", () => {
     if (publishPanel) publishPanel.classList.remove("hidden")
     if (savePanel) savePanel.classList.add("hidden")
   }
-  const pendingSnapshotId = footer.getAttribute("data-pending-snapshot-id")
   if (pendingSnapshotId) {
     savedSnapshotId = pendingSnapshotId
     showPublishPanel()
@@ -9992,9 +10040,16 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   }
 
+  const handleDismiss = (event) => {
+    event.preventDefault()
+    setDismissedState(true)
+    footer.classList.add("hidden")
+  }
+
   saveBtn.addEventListener("click", handleSave)
   if (registryBetaEnabled && publishBtn) publishBtn.addEventListener("click", handlePublish)
   if (registryBetaEnabled && laterBtn) laterBtn.addEventListener("click", handleLater)
+  if (dismissBtn) dismissBtn.addEventListener("click", handleDismiss)
 })
 </script>
 </body>

package/server/views/env_editor.ejs

@@ -146,11 +146,18 @@ body.dark .comment {
   background: rgba(127, 91, 243, 0.9);
 }
 #delete-project {
-  color: firebrick;
-  background: none;
+  color: #fff;
+  background: firebrick;
+  width: 100%;
+  display: block;
+  text-align: center;
+  margin-top: 20px;
+  padding: 12px 16px;
 }
 #delete-project:hover {
-  border: 1px solid firebrick;
+  background: #b22222;
+  color: #fff;
+  border: none;
 }
 a#customize {
   text-decoration: underline;
@@ -361,11 +368,6 @@ document.addEventListener("DOMContentLoaded", async () => {
           <% if (home) { %>
             <a class='home-button home' href="/home"><i class='fa-solid fa-home'></i></a>
           <% } %>
-          <% if (name) { %>
-            <button class='btn' id='delete-project'>
-              <i class="fa-solid fa-trash"></i> Delete Project
-            </button>
-          <% } %>
           <div class='flexible'></div>
           <div class='nav-btns'>
             <a class='btn' href="<%=editorpath%>"><i class="fa-solid fa-pen-to-square"></i> Edit file</a>
@@ -388,6 +390,11 @@ document.addEventListener("DOMContentLoaded", async () => {
           </div>
         <% } %>
       <% }) %>
+      <% if (name) { %>
+        <button class='btn' id='delete-project'>
+          <i class="fa-solid fa-trash"></i> Delete Project
+        </button>
+      <% } %>
     </div>
   </main>
 </body>