pinokiod 7.5.51 → 7.5.52

package/package.json

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

package/server/public/style.css

@@ -1530,6 +1530,40 @@ body.main-sidebar-page aside.main-sidebar .tab.selected .main-sidebar-action-ico
   white-space: nowrap;
   word-wrap: normal !important;
 }
+.main-sidebar .main-sidebar-status-badge {
+  grid-column: 3;
+  justify-self: end;
+  min-width: 28px;
+  height: 15px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.07);
+  color: rgba(31, 41, 55, 0.6);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+.main-sidebar .main-sidebar-status-badge[hidden] {
+  display: none !important;
+}
+.main-sidebar .main-sidebar-status-badge[data-state="on"] {
+  background: rgba(45, 180, 92, 0.14);
+  color: #247a43;
+}
+body.dark .main-sidebar .main-sidebar-status-badge {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(229, 231, 235, 0.68);
+}
+body.dark .main-sidebar .main-sidebar-status-badge[data-state="on"] {
+  background: rgba(74, 222, 128, 0.14);
+  color: #86efac;
+}
 .main-sidebar .tab.submenu {
   padding-left: 14px !important;
 }

package/server/views/app.ejs

@@ -16623,8 +16623,10 @@ const rerenderMenuSection = (container, html) => {
     })
     aside.addEventListener("pointerleave", closePeekSoon)
     aside.addEventListener("focusout", closePeekSoon)
-    aside.addEventListener("click", () => {
+    aside.addEventListener("click", (event) => {
       if (!isPeeking()) return
+      const target = event.target
+      if (target && target.closest && target.closest(".reveal, .revealer, [data-app-autolaunch-button]")) return
       window.setTimeout(() => setPeeking(false), 0)
     })
     document.addEventListener("pointerdown", (event) => {

package/server/views/partials/home_server_popover_assets.ejs

@@ -999,6 +999,9 @@ body.dark .home-server-popover__qr-close:focus-visible {
   const render = (data) => {
     const status = data && data.status ? data.status : "off"
     setStatus(status)
+    document.dispatchEvent(new CustomEvent("pinokio:home-server-status", {
+      detail: { status, payload: data || { status } }
+    }))
     if (!panel) {
       return
     }

package/server/views/partials/main_sidebar.ejs

@@ -35,7 +35,7 @@
 
     <div class='main-sidebar-section' aria-label="Configure">
       <div class="main-sidebar-section-title">Configure</div>
-      <a href="/network" class="tab <%= sidebarSelected === 'network' ? 'selected' : '' %>"><i class="fa-solid fa-wifi"></i><div class='caption'>Home Server</div></a>
+      <a href="/network" class="tab <%= sidebarSelected === 'network' ? 'selected' : '' %>" data-main-sidebar-home-server-tab><i class="fa-solid fa-wifi"></i><div class='caption'>Home Server</div><span class="main-sidebar-status-badge" data-main-sidebar-home-server-status aria-hidden="true" hidden></span></a>
       <a class="tab <%= sidebarSelected === 'autolaunch' ? 'selected' : '' %>" href="/autolaunch"><i class="fa-solid fa-power-off"></i><div class='caption'>Autolaunch</div></a>
       <a href="/connect" class="tab <%= sidebarSelected === 'connect' ? 'selected' : '' %>"><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
       <a class="tab <%= sidebarSelected === 'settings' ? 'selected' : '' %>" href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
@@ -49,6 +49,51 @@
     const headerToggle = document.getElementById("minimize-header");
     const sidebar = document.getElementById("main-sidebar");
     const peekTrigger = document.querySelector("[data-main-sidebar-peek-trigger]");
+
+    const initHomeServerStatusBadge = () => {
+      if (!sidebar || window.__pinokioMainSidebarHomeServerStatusInit) return;
+      const homeServerTab = sidebar.querySelector("[data-main-sidebar-home-server-tab]");
+      const homeServerBadge = sidebar.querySelector("[data-main-sidebar-home-server-status]");
+      if (!homeServerTab || !homeServerBadge) return;
+
+      window.__pinokioMainSidebarHomeServerStatusInit = true;
+
+      const renderHomeServerStatus = (data) => {
+        const status = data && data.status ? String(data.status) : "off";
+        const badgeState = status === "on" ? "on" : "off";
+        const label = badgeState === "on" ? "ON" : "OFF";
+        homeServerBadge.textContent = label;
+        homeServerBadge.hidden = false;
+        homeServerBadge.dataset.state = badgeState;
+        homeServerTab.dataset.homeServerStatus = badgeState;
+        homeServerTab.setAttribute("aria-label", `Home Server, ${label}`);
+        homeServerTab.setAttribute("title", `Home Server ${label}`);
+      };
+
+      document.addEventListener("pinokio:home-server-status", (event) => {
+        const detail = event && event.detail ? event.detail : {};
+        renderHomeServerStatus(detail.payload || detail);
+      });
+
+      fetch("/info/home-server", { cache: "no-store" })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`Home Server status failed: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then(renderHomeServerStatus)
+        .catch(() => {
+          homeServerBadge.hidden = true;
+          delete homeServerBadge.dataset.state;
+          delete homeServerTab.dataset.homeServerStatus;
+          homeServerTab.removeAttribute("aria-label");
+          homeServerTab.removeAttribute("title");
+        });
+    };
+
+    initHomeServerStatusBadge();
+
     if (body && sidebar && headerToggle && !headerToggle.dataset.mainSidebarHeaderToggle) {
       headerToggle.dataset.mainSidebarHeaderToggle = "true";
       headerToggle.classList.add("sidebar-toggle", "main-sidebar-header-toggle");

package/test/launch-settings-ui.test.js

@@ -848,7 +848,7 @@ test("static guard: collapsed idle run page peeks without persisting sidebar sta
   assert.match(appView, /const hasVisibleBrowserSurface = \(\) => \{[\s\S]*browserview\.querySelector\("iframe:not\(\.hidden\)"\)[\s\S]*browserview-network-status[\s\S]*data-launch-requirements-status/)
   assert.match(appView, /if \(shouldAutoPeekOnIdle && initialCollapsed && !hasVisibleBrowserSurface\(\)\) \{[\s\S]*setPeeking\(true\)/)
   assert.match(appView, /setCollapsed\(initialCollapsed, \{ persist: false \}\)/)
-  assert.match(appView, /aside\.addEventListener\("click", \(\) => \{[\s\S]*window\.setTimeout\(\(\) => setPeeking\(false\), 0\)/)
+  assert.match(appView, /aside\.addEventListener\("click", \(event\) => \{[\s\S]*target\.closest\("\.reveal, \.revealer, \[data-app-autolaunch-button\]"\)[\s\S]*window\.setTimeout\(\(\) => setPeeking\(false\), 0\)/)
 })
 
 test("app sidebar auto-peeks on collapsed idle run page and dismisses after click", async () => {
@@ -868,7 +868,12 @@ test("app sidebar auto-peeks on collapsed idle run page and dismisses after clic
       <button id="sidebar-toggle"></button>
       <div class="appcanvas vertical">
         <button type="button" data-app-sidebar-peek-trigger></button>
-        <aside id="app-sidebar"><button type="button" id="sidebar-action">Start</button></aside>
+        <aside id="app-sidebar">
+          <button type="button" class="reveal" id="sidebar-reveal">Downloads</button>
+          <button type="button" class="revealer" id="sidebar-revealer">Changes</button>
+          <button type="button" data-app-autolaunch-button id="sidebar-autolaunch">Autolaunch</button>
+          <button type="button" id="sidebar-action">Start</button>
+        </aside>
         <main class="browserview">${browserSurface}</main>
       </div>
       <div id="browserview-network-status" hidden></div>
@@ -901,6 +906,18 @@ test("app sidebar auto-peeks on collapsed idle run page and dismisses after clic
   assert.equal(aside.getAttribute("aria-hidden"), "false")
   assert.equal(dom.window.localStorage.getItem(storageKey), "1")
 
+  aside.querySelector("#sidebar-reveal").dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }))
+  await wait(5)
+  assert.equal(appcanvas.classList.contains("sidebar-peeking"), true)
+
+  aside.querySelector("#sidebar-revealer").dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }))
+  await wait(5)
+  assert.equal(appcanvas.classList.contains("sidebar-peeking"), true)
+
+  aside.querySelector("#sidebar-autolaunch").dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }))
+  await wait(5)
+  assert.equal(appcanvas.classList.contains("sidebar-peeking"), true)
+
   aside.querySelector("#sidebar-action").dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }))
   await wait(5)
 

package/test/main-sidebar.test.js

@@ -21,11 +21,31 @@ test('main sidebar moves Home Server under Configure', async () => {
   assert.ok(configureIndex < homeServerIndex)
   assert.ok(homeServerIndex < autolaunchIndex)
   assert.match(source, /href="\/network"[\s\S]*Home Server/)
+  assert.match(source, /data-main-sidebar-home-server-tab/)
+  assert.match(source, /data-main-sidebar-home-server-status/)
+  assert.match(source, /fetch\("\/info\/home-server", \{ cache: "no-store" \}\)/)
+  assert.match(source, /status === "on" \? "on" : "off"/)
   assert.doesNotMatch(source, /aria-label="Computer"/)
   assert.doesNotMatch(source, />This machine</)
   assert.doesNotMatch(source, />Local network</)
 })
 
+test('main sidebar styles the Home Server ON/OFF badge in the tab status column', async () => {
+  const style = await fs.readFile(path.resolve(__dirname, '..', 'server', 'public', 'style.css'), 'utf8')
+  const badgeRule = style.match(/\.main-sidebar \.main-sidebar-status-badge \{[\s\S]*?\n\}/)?.[0] || ''
+  const darkBadgeRule = style.match(/body\.dark \.main-sidebar \.main-sidebar-status-badge \{[\s\S]*?\n\}/)?.[0] || ''
+
+  assert.match(style, /\.main-sidebar \.main-sidebar-status-badge \{/)
+  assert.match(style, /grid-column:\s*3/)
+  assert.match(style, /\.main-sidebar \.main-sidebar-status-badge\[hidden\]/)
+  assert.match(style, /\.main-sidebar \.main-sidebar-status-badge\[data-state="on"\]/)
+  assert.match(style, /body\.dark \.main-sidebar \.main-sidebar-status-badge\[data-state="on"\]/)
+  assert.match(badgeRule, /background:\s*rgba\(15,\s*23,\s*42,\s*0\.07\)/)
+  assert.match(darkBadgeRule, /background:\s*rgba\(255,\s*255,\s*255,\s*0\.08\)/)
+  assert.doesNotMatch(`${badgeRule}\n${darkBadgeRule}`, /rgba\(207,\s*69,\s*69,\s*0\.12\)/)
+  assert.doesNotMatch(`${badgeRule}\n${darkBadgeRule}`, /#fca5a5/)
+})
+
 test('main sidebar no longer renders peer rows or phone access modal', async () => {
   const source = await fs.readFile(sidebarFile, 'utf8')
   const style = await fs.readFile(path.resolve(__dirname, '..', 'server', 'public', 'style.css'), 'utf8')