feat(quick-save): Live-Sync via chrome.storage.onChanged in app.js (boards neu laden + renderBoards)

src/js/app.js

@@ -26,6 +26,7 @@ async function init() {
   startClock();
   bindGlobalEvents();
   bindSettingsEvents();
+  bindStorageSync();
   initSearch();
   initPalette();
   await migrateSticky();
@@ -231,4 +232,24 @@ function bindGlobalEvents() {
   });
 }
 
+// ---- LIVE-SYNC (Quick-Save aus dem Background) ----
+// Ein Quick-Save schreibt boards im Background. Ein offener Tab muss das sehen,
+// sonst ueberschreibt er den Eintrag beim naechsten eigenen Save (QS-03).
+function bindStorageSync() {
+  if (typeof chrome === 'undefined' || !chrome.storage || !chrome.storage.onChanged) return;
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area !== 'local' || !changes.boards) return;
+    const next = changes.boards.newValue;
+    if (!Array.isArray(next)) return;
+    // Guard (W-c): nicht mitten in einer offenen Interaktion das boards-Array ersetzen und
+    // neu rendern. Ein offener Dialog (Delete/Edit) haelt evtl. eine board-Referenz per Closure;
+    // ein laufender Board-Drag (Phase 5) wuerde durch renderBoards() (replaceChildren) abgerissen.
+    // In dem Fall den Sync verwerfen — der naechste eigene Save/Render zieht den Stand nach.
+    if (document.querySelector('.dialog-overlay.active') ||
+        document.body.classList.contains('board-dragging')) return;
+    boards = next;
+    renderBoards();
+  });
+}
+
 document.addEventListener('DOMContentLoaded', init);