pinokiod 8.0.75 → 8.0.76

package/package.json

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

package/server/public/vault.css

@@ -1678,6 +1678,40 @@ body.vault-page .vault-view-tabs {
 .vault-view-tabs .vault-nav-count {
   font-size: 10.5px;
 }
+.vault-view-tabs .vault-nav-row.attention {
+  background: color-mix(in srgb, var(--vault-warning) 9%, var(--task-panel));
+  color: var(--vault-warning);
+}
+.vault-view-tabs .vault-nav-row.attention:hover {
+  background: color-mix(in srgb, var(--vault-warning) 14%, var(--task-panel));
+}
+.vault-view-tabs .vault-nav-row.attention.selected {
+  border-bottom-color: var(--task-accent);
+}
+.vault-view-tabs .vault-nav-row.attention .vault-nav-name {
+  color: var(--vault-warning);
+  font-weight: 680;
+}
+.vault-view-tabs .vault-nav-row.attention .vault-nav-name::before {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: var(--vault-warning);
+  content: "";
+  vertical-align: 1px;
+}
+.vault-view-tabs .vault-nav-row.attention .vault-nav-count {
+  min-width: 20px;
+  padding: 1px 5px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--vault-warning) 72%, var(--task-panel));
+  color: #241300;
+  font-weight: 720;
+  line-height: 1.35;
+  text-align: center;
+}
 .vault-pane-action-note { color: var(--task-muted); font-size: 11.5px; white-space: nowrap; }
 .vault-toolbar {
   display: flex;

package/server/public/vault.js

@@ -707,16 +707,20 @@ const eventLabels = {
 }
 const renderViews = () => {
   const counts = state.data.inventory.counts
+  const attentionViews = new Set(["duplicates", "reclaimable"])
   el("views-label").textContent = COPY.views
   const views = IS_APP_MODE
     ? ["all", "duplicates", "unavailable", "shared", "tracked", "activity"]
     : ["all", "duplicates", "unavailable", "shared", "tracked", "reclaimable", "activity"]
-  el("vault-views").innerHTML = views.map((view) => `
-    <button class="vault-nav-row ${state.view === view ? "selected" : ""}" type="button" data-view="${view}" ${state.view === view ? 'aria-current="page"' : ""}>
+  el("vault-views").innerHTML = views.map((view) => {
+    const needsAttention = attentionViews.has(view) && Number(counts[view]) > 0
+    return `
+    <button class="vault-nav-row ${state.view === view ? "selected" : ""} ${needsAttention ? "attention" : ""}" type="button" data-view="${view}" ${state.view === view ? 'aria-current="page"' : ""}>
       <i class="${viewIcon[view]}"></i>
       <span class="vault-nav-copy"><span class="vault-nav-name">${esc(viewLabel[view])}</span></span>
-      <span class="vault-nav-count ${view === "duplicates" && counts[view] ? "attention" : ""}">${counts[view]}</span>
-    </button>`).join("")
+      <span class="vault-nav-count ${needsAttention ? "attention" : ""}">${counts[view]}</span>
+    </button>`
+  }).join("")
 }
 
 const renderSourceNode = (source, depth, counts) => {

package/test/vault-ui.test.js

@@ -548,6 +548,14 @@ describe("Save Space interface", () => {
       /body\.vault-page \.vault-view-tabs\s*\{[^}]*padding:\s*0;/s)
     assert.match(vaultCss,
       /body\.dark\.vault-page\s*\{[^}]*--task-panel:\s*var\(--pinokio-sidebar-tabbar-bg\);/s)
+    assert.match(vaultCss,
+      /\.vault-view-tabs \.vault-nav-row\.attention\s*\{[^}]*background:/s)
+    assert.match(vaultCss,
+      /\.vault-view-tabs \.vault-nav-row\.attention \.vault-nav-name::before\s*\{[^}]*background:\s*var\(--vault-warning\);/s)
+    assert.match(vaultCss,
+      /\.vault-view-tabs \.vault-nav-row\.attention \.vault-nav-count\s*\{[^}]*background:/s)
+    assert.match(vaultCss,
+      /\.vault-view-tabs \.vault-nav-row\.attention\.selected\s*\{[^}]*border-bottom-color:\s*var\(--task-accent\);/s)
     assert.match(vaultCss,
       /\.vault-scan-control\s*>\s*\.vault-scan-action\s*\{[^}]*border-radius:\s*7px 0 0 7px;/s)
     assert.match(vaultCss,
@@ -2551,6 +2559,60 @@ describe("Save Space interface", () => {
     dom.window.close()
   })
 
+  test("actionable tabs highlight nonzero cleanup opportunities", async () => {
+    const actionableStatus = fixture([
+      item({
+        path: "/pinokio/api/app/duplicate.bin",
+        relative_path: "duplicate.bin",
+        status: "duplicate",
+        shareable: true
+      }),
+      item({
+        path: "/pinokio/api/app/unused.bin",
+        relative_path: "unused.bin",
+        orphan: true
+      })
+    ], {
+      reclaimable: 4096
+    })
+    const { dom } = await makePage(actionableStatus)
+
+    for (const view of ["duplicates", "reclaimable"]) {
+      const tab = dom.window.document.querySelector(`[data-view="${view}"]`)
+      const count = tab.querySelector(".vault-nav-count")
+      assert.equal(count.textContent.trim(), "1")
+      assert.equal(tab.classList.contains("attention"), true)
+      assert.equal(count.classList.contains("attention"), true)
+    }
+    dom.window.close()
+
+    const { dom: emptyDom } = await makePage(fixture([item()]))
+
+    for (const view of ["duplicates", "reclaimable"]) {
+      const tab = emptyDom.window.document.querySelector(`[data-view="${view}"]`)
+      const count = tab.querySelector(".vault-nav-count")
+      assert.equal(count.textContent.trim(), "0")
+      assert.equal(tab.classList.contains("attention"), false)
+      assert.equal(count.classList.contains("attention"), false)
+    }
+    emptyDom.window.close()
+
+    const appStatus = fixture([item({
+      status: "duplicate",
+      shareable: true
+    })])
+    const { dom: appDom } = await makePage(appStatus, {
+      appMode: true,
+      scopeId: "app:app"
+    })
+
+    assert.equal(appDom.window.document.querySelector(
+      '[data-view="duplicates"]').classList.contains("attention"), true)
+    assert.equal(appDom.window.document.querySelector(
+      '[data-view="reclaimable"]'), null)
+    appDom.window.close()
+  })
+
   test("app setup remains visible during global scan progress", async () => {
     let progressRequests = 0
     const status = fixture([], {