@mahmulp/feedback-sdk 0.0.3 → 0.0.5

package/dist/index.js

@@ -316,11 +316,34 @@ var PopoverManager = class {
     });
     return el;
   }
+  /** True when a thread for this feedback is already open. */
+  isThreadOpenFor(feedbackId) {
+    return this.current?.type === "thread" && this.current.feedbackId === feedbackId;
+  }
   showThread(feedback, anchor, cb) {
+    if (this.current?.type === "thread" && this.current.feedbackId === feedback.id) {
+      const fresh = this.buildThread(feedback, cb);
+      this.current.el.replaceWith(fresh);
+      this.current = {
+        type: "thread",
+        el: fresh,
+        pageX: anchor.pageX,
+        pageY: anchor.pageY,
+        feedbackId: feedback.id
+      };
+      this.repositionInternal();
+      return fresh;
+    }
     this.hide();
     const el = this.buildThread(feedback, cb);
     this.layer.appendChild(el);
-    this.current = { type: "thread", el, pageX: anchor.pageX, pageY: anchor.pageY };
+    this.current = {
+      type: "thread",
+      el,
+      pageX: anchor.pageX,
+      pageY: anchor.pageY,
+      feedbackId: feedback.id
+    };
     this.repositionInternal();
     return el;
   }
@@ -1028,33 +1051,65 @@ var Overlay = class {
     });
   }
   layoutPins() {
-    const next = document.createDocumentFragment();
+    const existing = /* @__PURE__ */ new Map();
+    for (const node of Array.from(this.pinLayer.children)) {
+      const id = node.dataset.feedbackId;
+      if (id) existing.set(id, node);
+    }
+    const desiredOrder = [];
+    const seen = /* @__PURE__ */ new Set();
     for (const fb of this.pendingFeedback) {
+      seen.add(fb.id);
       const target = findElement(fb.selector);
       const projected = projectCoordinates(target, fb.coordinates);
-      const pin = document.createElement("button");
-      pin.type = "button";
-      const classes = ["pin"];
-      if (projected.orphaned) classes.push("orphaned");
-      if (fb.status === "resolved") classes.push("resolved");
-      if (fb.status === "archived") classes.push("archived");
-      pin.className = classes.join(" ");
-      pin.setAttribute("data-feedback-id", fb.id);
-      pin.setAttribute("aria-label", `Feedback ${fb.id}`);
-      pin.style.left = `${projected.x - window.scrollX}px`;
-      pin.style.top = `${projected.y - window.scrollY}px`;
-      const label = document.createElement("span");
-      label.textContent = String(fb.thread.length || 1);
-      pin.appendChild(label);
-      pin.addEventListener("click", (e) => {
-        e.stopPropagation();
-        if (this.draggingPin === fb.id) return;
-        this.onPinClick?.(fb);
-      });
-      this.attachDragHandlers(pin, fb);
-      next.appendChild(pin);
+      const left = `${projected.x - window.scrollX}px`;
+      const top = `${projected.y - window.scrollY}px`;
+      let pin = existing.get(fb.id);
+      if (pin) {
+        const classes = ["pin"];
+        if (projected.orphaned) classes.push("orphaned");
+        if (fb.status === "resolved") classes.push("resolved");
+        if (fb.status === "archived") classes.push("archived");
+        if (pin.classList.contains("dragging")) classes.push("dragging");
+        pin.className = classes.join(" ");
+        if (pin.style.left !== left) pin.style.left = left;
+        if (pin.style.top !== top) pin.style.top = top;
+        const label = pin.firstElementChild;
+        const nextLabel = String(fb.thread.length || 1);
+        if (label && label.textContent !== nextLabel) label.textContent = nextLabel;
+      } else {
+        pin = document.createElement("button");
+        pin.type = "button";
+        const classes = ["pin"];
+        if (projected.orphaned) classes.push("orphaned");
+        if (fb.status === "resolved") classes.push("resolved");
+        if (fb.status === "archived") classes.push("archived");
+        pin.className = classes.join(" ");
+        pin.dataset.feedbackId = fb.id;
+        pin.setAttribute("aria-label", `Feedback ${fb.id}`);
+        pin.style.left = left;
+        pin.style.top = top;
+        const label = document.createElement("span");
+        label.textContent = String(fb.thread.length || 1);
+        pin.appendChild(label);
+        pin.addEventListener("click", (e) => {
+          e.stopPropagation();
+          if (this.draggingPin === fb.id) return;
+          const fresh = this.pendingFeedback.find((f) => f.id === fb.id) ?? fb;
+          this.onPinClick?.(fresh);
+        });
+        this.attachDragHandlers(pin, fb);
+      }
+      desiredOrder.push(pin);
+    }
+    for (const [id, node] of existing) {
+      if (!seen.has(id)) node.remove();
+    }
+    for (let i = 0; i < desiredOrder.length; i++) {
+      const want = desiredOrder[i];
+      const have = this.pinLayer.children[i];
+      if (have !== want) this.pinLayer.insertBefore(want, have ?? null);
     }
-    this.pinLayer.replaceChildren(next);
   }
   destroy() {
     if (this.rafHandle !== null) {
@@ -1507,8 +1562,6 @@ function initFeedback(options) {
           const updated = await transport.reply(fb.id, { author, body });
           setAuthor(author);
           replaceFeedback(updated);
-          overlay.popoverManager().hide();
-          activeThreadId = null;
           openThread(updated);
         } catch (err) {
           reportError(err);
@@ -1518,8 +1571,6 @@ function initFeedback(options) {
         try {
           const updated = await transport.setStatus(fb.id, status);
           replaceFeedback(updated);
-          overlay.popoverManager().hide();
-          activeThreadId = null;
           openThread(updated);
         } catch (err) {
           reportError(err);
@@ -1567,7 +1618,8 @@ function initFeedback(options) {
   }
   async function refresh() {
     try {
-      const result = await transport.list({ projectId: "" });
+      const pageUrl = getPageUrl();
+      const result = await transport.list({ projectId: "", pageUrl });
       state.feedbacks = result.items;
       overlay.renderPins(state.feedbacks, openThread, onPinDragEnd);
     } catch (err) {
@@ -1597,6 +1649,26 @@ function initFeedback(options) {
   document.addEventListener("keydown", onKeyDown, true);
   window.addEventListener("scroll", onWindowReposition, true);
   window.addEventListener("resize", onWindowReposition);
+  let lastSeenUrl = getPageUrl();
+  function onMaybeNavigate() {
+    const next = getPageUrl();
+    if (next === lastSeenUrl) return;
+    lastSeenUrl = next;
+    void refresh();
+  }
+  const originalPushState = history.pushState.bind(history);
+  const originalReplaceState = history.replaceState.bind(history);
+  history.pushState = function patchedPushState(...args) {
+    const result = originalPushState(...args);
+    queueMicrotask(onMaybeNavigate);
+    return result;
+  };
+  history.replaceState = function patchedReplaceState(...args) {
+    const result = originalReplaceState(...args);
+    queueMicrotask(onMaybeNavigate);
+    return result;
+  };
+  window.addEventListener("popstate", onMaybeNavigate);
   void refresh();
   overlay.setEnabledStyles(state.enabled);
   const wantsLauncher = options.showLauncher !== false;
@@ -1659,6 +1731,9 @@ function initFeedback(options) {
       document.removeEventListener("keydown", onKeyDown, true);
       window.removeEventListener("scroll", onWindowReposition, true);
       window.removeEventListener("resize", onWindowReposition);
+      window.removeEventListener("popstate", onMaybeNavigate);
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
       overlay.destroy();
     }
   };