v1.8.16 — Detail side panel: signature guard skips rebuild on unrelated Firestore snapshots

Author: BenGlut

CHANGELOG.md

@@ -5,6 +5,14 @@ Versions follow [Semantic Versioning](https://semver.org/).
 
 ---
 
+## v1.8.16 — 2026-06-03
+
+### Fixed
+
+- **Spool detail side panel no longer flashes when something else changes in Firestore.** Editing a different spool — from the mobile app, from another device, or even just a write echo coming back — used to tear down and rebuild the entire side panel, flashing the product photo and every SVG icon (badges, twin link, chip status). The panel now compares the displayed spool against the last render and skips the rebuild when the visible fields haven't changed. Editing the open spool's own weight still triggers one rebuild instead of two or three, because the server-commit echo carries the same signature as the pending-write update and is now ignored.
+
+---
+
 ## v1.8.15 — 2026-06-03
 
 ### Changed

WORKLOG.md

@@ -1,12 +1,11 @@
-# Worklog — v1.8.15 (in progress)
+# Worklog — v1.8.16 (in progress)
 
 ## Added
-- Firestore IndexedDB offline persistence on every Firebase app instance (default + per-account named apps). Snapshot listeners now replay from the local cache on cold start and only deltas hit the network — cuts cold-start reads from ~130 (100 spools + 10 racks + 5×printer brands + scales + friends) to near-zero on repeat boots and makes the UI usable while offline. Implemented via `enablePersistence({ synchronizeTabs: true })` right next to `firebase.initializeApp` so it runs before any other Firestore call — `renderer/firebase.js`.
 
 ## Changed
-- Image cache no longer returns base64 `data:` URLs to the renderer. The main-process `img:get` IPC now returns a stable HTTP URL (`/img-cache/<md5>.<ext>`) served by the local dev server straight from the on-disk cache. With a stable HTTP URL, Chromium can keep the decoded bitmap alive across DOM operations — destroying and re-creating an `<img>` element no longer forces a re-decode, so view switches and full rebuilds no longer flash the product thumbnails. The HTTP response carries a 1-day Cache-Control header for good measure — `main.js`.
 
 ## Fixed
+- Spool detail side panel: stop tearing down the panel on every Firestore snapshot. Editing a different spool elsewhere (mobile app, another device, anything firing a Firestore write) used to flash the open side panel — every image and every SVG icon was destroyed and re-created because `subscribeInventory.onSnapshot` unconditionally called `openDetail(state.selected)` → `panelBody.innerHTML = buildPanelHTML(r)`. The snapshot listener now calls `refreshOpenDetail()` which compares a `_rowSignature` of the displayed spool against the last render and only rebuilds the panel when the displayed spool's visible fields actually changed. Editing the open spool's weight still triggers one rebuild (pending-write echo) instead of two or three, since the server-commit echo carries the same signature and is now skipped — `renderer/inventory.js`.
 
 ## Removed
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tigertag-inventory",
-  "version": "1.8.15",
+  "version": "1.8.16",
   "description": "Tiger Studio Manager — desktop app",
   "main": "main.js",
   "engines": {

renderer/inventory.js

@@ -3947,10 +3947,9 @@ import { elgFanStep } from './printers/elegoo/widget_control.js';
         saveInventory(raw);
         preCacheImages(state.rows).then(() => {
           sortStateRows(); renderStats(); renderInventory();
-          // Refresh open detail panel with latest data
-          if (state.selected && $("detailPanel").classList.contains("open")) {
-            openDetail(state.selected);
-          }
+          // Refresh open detail panel — short-circuits when the displayed
+          // spool hasn't actually changed (no flash on unrelated edits).
+          refreshOpenDetail();
           // Refresh racks panel if open (positions/fills may have changed)
           if ($("racksPanel")?.classList.contains("open")) renderRacksList();
         });
@@ -5925,11 +5924,21 @@ import { elgFanStep } from './printers/elegoo/widget_control.js';
   }
 
   /* ── detail panel ── */
+  // Signature of the spool currently displayed in the side panel. Used by
+  // `refreshOpenDetail()` to skip the full `panelBody.innerHTML = ...` rebuild
+  // when a Firestore snapshot arrives that doesn't actually change the
+  // displayed spool — e.g. another filament was edited elsewhere, or a write
+  // came back as a pending/commit echo with no visible diff. Before this
+  // guard, every snapshot tore down all images (large product photo, SVG
+  // icons, badges) and rebuilt them, flashing the sidecard.
+  let _lastDetailSig = "";
+
   function openDetail(spoolId) {
     state.selected = spoolId;
     document.querySelectorAll("[data-id]").forEach(el => el.classList.toggle("selected", el.dataset.id === spoolId));
     const r = state.rows.find(x => x.spoolId === spoolId);
     if (!r) return;
+    _lastDetailSig = _rowSignature(r);
     $("panelBody").innerHTML = buildPanelHTML(r);
     // Hold-to-confirm "Delete spool" — 1.5s hold, irreversible hard delete.
     // Removes the Firestore doc (+ twin) permanently — ISO with printer deletion.
@@ -6337,6 +6346,27 @@ import { elgFanStep } from './printers/elegoo/widget_control.js';
     // Stop any playing video
     const vp = $("panelVideoPlayer"); if (vp) vp.innerHTML = "";
     $("detailPanel").classList.remove("open"); $("panelOverlay").classList.remove("open");
+    _lastDetailSig = "";
+  }
+
+  // Re-evaluate the open detail panel after a Firestore snapshot. Skips the
+  // full rebuild when nothing visible to the panel actually changed (e.g.
+  // another spool was edited, or this snapshot is just a write echo with the
+  // same fields). Replaces the unconditional `openDetail(state.selected)`
+  // that fired on every snapshot and flashed every image (large product
+  // photo, SVG badges) of the sidecard.
+  function refreshOpenDetail() {
+    if (!state.selected) return;
+    if (!$("detailPanel")?.classList.contains("open")) return;
+    const r = state.rows.find(x => x.spoolId === state.selected);
+    if (!r) {
+      // Spool removed (hard delete) — close the panel instead of rebuilding.
+      closeDetail();
+      return;
+    }
+    const newSig = _rowSignature(r);
+    if (newSig === _lastDetailSig) return; // visible content unchanged → skip
+    openDetail(state.selected);            // sig will be updated inside openDetail
   }
 
   /* ── TD1S module init ────────────────────────────────────────────────────