@unhingged/vizu-core 0.1.19 → 0.1.21

package/dist/index.cjs

@@ -2254,7 +2254,7 @@ var Pill = class {
 var Sidebar = class {
   constructor(root, callbacks) {
     this.open = false;
-    this.filter = "open";
+    this.filter = "all";
     this.lastComments = [];
     this.lastConfidence = /* @__PURE__ */ new Map();
     this.handleClick = (e) => {
@@ -2274,6 +2274,7 @@ var Sidebar = class {
         if (f && f !== this.filter) {
           this.filter = f;
           this.render(this.lastComments);
+          this.callbacks.onFilterChange?.(f);
         }
         return;
       }
@@ -2338,7 +2339,7 @@ var Sidebar = class {
     const orphans = comments.filter((c) => conf.get(c.id) === "orphaned");
     const anchored = comments.filter((c) => conf.get(c.id) !== "orphaned");
     const statusOf = (c) => c.status ?? "open";
-    const visible = this.filter === "open" ? anchored.filter((c) => statusOf(c) === "open") : this.filter === "resolved" ? anchored.filter((c) => statusOf(c) !== "open") : anchored;
+    const visible = this.filter === "all" ? anchored : anchored.filter((c) => statusOf(c) === this.filter);
     const visibleOrphans = this.filter === "all" ? orphans : [];
     const counts = countByStatus(comments);
     if (visible.length === 0 && visibleOrphans.length === 0) {
@@ -2349,7 +2350,9 @@ var Sidebar = class {
         const closed = counts.resolved + counts.wontfix;
         emptyCopy = `<strong>Nothing open.</strong>${closed} closed comment${closed === 1 ? "" : "s"} hidden. Switch to <em>All</em> to see them.`;
       } else if (this.filter === "resolved") {
-        emptyCopy = `<strong>Nothing resolved.</strong>${counts.open} still open. Switch to <em>Open</em> or <em>All</em> to see more.`;
+        emptyCopy = `<strong>Nothing resolved.</strong>Switch to <em>Open</em> or <em>All</em> to see more.`;
+      } else if (this.filter === "wontfix") {
+        emptyCopy = `<strong>Nothing marked won&apos;t&nbsp;fix.</strong>Switch to <em>Open</em> or <em>All</em> to see more.`;
       } else {
         emptyCopy = "<strong>No comments yet</strong>Click any element on the page to leave one.";
       }
@@ -2449,7 +2452,10 @@ var Sidebar = class {
           Open <span class="vz-sidebar-filter-count">${counts.open}</span>
         </button>
         <button class="vz-sidebar-filter ${this.filter === "resolved" ? "is-active" : ""}" data-vz="filter" data-filter="resolved" role="tab" aria-selected="${this.filter === "resolved"}">
-          Resolved <span class="vz-sidebar-filter-count">${counts.resolved + counts.wontfix}</span>
+          Resolved <span class="vz-sidebar-filter-count">${counts.resolved}</span>
+        </button>
+        <button class="vz-sidebar-filter ${this.filter === "wontfix" ? "is-active" : ""}" data-vz="filter" data-filter="wontfix" role="tab" aria-selected="${this.filter === "wontfix"}">
+          Won&apos;t fix <span class="vz-sidebar-filter-count">${counts.wontfix}</span>
         </button>
         <button class="vz-sidebar-filter ${this.filter === "all" ? "is-active" : ""}" data-vz="filter" data-filter="all" role="tab" aria-selected="${this.filter === "all"}">
           All <span class="vz-sidebar-filter-count">${total}</span>
@@ -3671,6 +3677,14 @@ var Vizu = class {
     this.selfHealedThisSession = /* @__PURE__ */ new Set();
     this.actions = [];
     this.user = null;
+    /**
+     * Status filter shared by the sidebar tabs and the on-page markers.
+     * Picking a tab updates this (via the sidebar's onFilterChange) and
+     * re-renders markers so the page shows the same subset as the panel.
+     * Defaults to 'all' (matching the sidebar's default tab) — every
+     * marker shows until the user narrows to a specific status.
+     */
+    this.statusFilter = "all";
     /**
      * Flipped true once the initial loadComments() at construction has
      * settled (success or failure). The cloud onAuthChanged callback uses
@@ -4202,7 +4216,11 @@ var Vizu = class {
       onJumpToReference: (commentId, refId2) => this.jumpToReference(commentId, refId2),
       onDelete: (id) => void this.removeComment(id),
       onUpdateStatus: (id, status) => void this.updateComment(id, { status }),
-      onClose: () => this.closeSidebar()
+      onClose: () => this.closeSidebar(),
+      onFilterChange: (filter) => {
+        this.statusFilter = filter;
+        this.renderAllMarkers();
+      }
     });
     this.pill = new Pill(this.root, {
       onToggleSidebar: () => this.toggleSidebar(),
@@ -4301,6 +4319,18 @@ var Vizu = class {
     if (this.pendingFingerprints.length > 0) this.multiSelectMode = true;
     else this.multiSelectMode = false;
   }
+  /**
+   * Whether a comment (by id) matches the active status filter — the
+   * marker-render counterpart of the sidebar's tab filter. 'all' matches
+   * everything; the named tabs match their exact status. Unknown ids
+   * (shouldn't happen) match so we never silently drop a marker.
+   */
+  commentMatchesStatusFilter(id) {
+    if (this.statusFilter === "all") return true;
+    const c = this.comments.find((x) => x.id === id);
+    if (!c) return true;
+    return (c.status ?? "open") === this.statusFilter;
+  }
   commentsForElement(fp) {
     const key2 = fingerprintKey(fp);
     return this.comments.filter(
@@ -4492,6 +4522,8 @@ var Vizu = class {
     }
     for (const [key2, info] of byElement) {
       if (info.confidence === "orphaned" || !info.target) continue;
+      const idsForFilter = info.commentIds.filter((id) => this.commentMatchesStatusFilter(id));
+      if (idsForFilter.length === 0) continue;
       const outlineEl = document.createElement("div");
       outlineEl.className = "vz-comment-outline";
       if (info.confidence === "drifted") outlineEl.classList.add("vz-comment-outline-drifted");
@@ -4502,13 +4534,13 @@ var Vizu = class {
       if (info.confidence === "drifted") marker.classList.add("vz-marker-drifted");
       marker.setAttribute("data-element-key", key2);
       marker.setAttribute("data-confidence", info.confidence);
-      const total = info.commentIds.length;
+      const total = idsForFilter.length;
       if (total > 1) {
         marker.textContent = String(total);
         marker.title = total + " comments";
       } else {
         marker.textContent = "";
-        const c = this.comments.find((c2) => c2.id === info.commentIds[0]);
+        const c = this.comments.find((c2) => c2.id === idsForFilter[0]);
         marker.title = c?.author ? "Comment by " + c.author.name : "Comment";
       }
       marker.addEventListener("click", (e) => {
@@ -4519,9 +4551,9 @@ var Vizu = class {
           this.openPopoverFor([info.target], [info.fp], elComments);
         }
       });
-      marker.addEventListener("mouseenter", () => this.pulseRelatedElements(info.commentIds, key2));
+      marker.addEventListener("mouseenter", () => this.pulseRelatedElements(idsForFilter, key2));
       this.root.appendChild(marker);
-      this.markers.set(key2, { marker, target: info.target, fp: info.fp, commentIds: info.commentIds });
+      this.markers.set(key2, { marker, target: info.target, fp: info.fp, commentIds: idsForFilter });
       if (info.target) {
         this.positionMarker(marker, info.target);
         this.positionOutline(outlineEl, info.target);