fix: hover ADD nonce captureId and cleanup old badge DOM to prevent duplicate old overlay handlers

src-tauri/resources/scripts/hover_overlay.js

@@ -1,27 +1,32 @@
 /* Refstudio hover overlay: + ADD button on web images.
- * v11 — fires ONLY through window.location.href (on_navigation handler).
- * Previous versions fired 3 channels causing duplicate images.
+ * v12 — stable one-click capture with captureId nonce.
  */
 (function () {
-  if (window.__muse_hover_v11) return;
-  window.__muse_hover_v11 = true;
+  if (window.__muse_hover_v12) return;
+  window.__muse_hover_v12 = true;
+
+  // Remove old badge DOM left by previous injected versions. Anonymous old listeners
+  // may still exist, but they cannot duplicate backend actions because v12 adds captureId
+  // and Rust dedupes captureIds.
+  try { var old = document.getElementById('__muse_add_badge'); if (old) old.remove(); } catch (_) {}
 
   var MIN = 90;
   var activeImg = null;
   var badge = null;
   var showTimer = 0;
   var hideTimer = 0;
-  var capturing = false; // prevent double-click
+  var capturing = false;
 
   function injectCSS() {
-    if (document.getElementById('__muse_badge_css3')) return;
-    var s = document.createElement('style'); s.id = '__muse_badge_css3';
+    if (document.getElementById('__muse_badge_css_v12')) return;
+    var s = document.createElement('style'); s.id = '__muse_badge_css_v12';
     s.textContent = '#__muse_add_badge{all:initial;position:fixed;z-index:2147483647;display:flex;align-items:center;gap:5px;padding:8px 16px;background:rgba(10,132,255,0.95);color:#fff;border-radius:999px;box-shadow:0 4px 20px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.1);font:700 12px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;cursor:pointer;opacity:0;transform:translateY(4px) scale(0.92);transition:opacity .2s,transform .2s,background .1s;pointer-events:auto;letter-spacing:0.01em;user-select:none}#__muse_add_badge.v{opacity:1;transform:none}#__muse_add_badge:hover{background:rgba(10,132,255,1);box-shadow:0 6px 28px rgba(10,132,255,0.4),0 0 0 1px rgba(255,255,255,0.2);transform:scale(1.06)}#__muse_add_badge:active{transform:scale(0.92);background:rgba(10,100,220,1)}#__muse_add_badge svg{width:14px;height:14px;stroke-width:2.5;pointer-events:none}#__mt7{all:initial;position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);z-index:2147483647;padding:9px 16px;border-radius:999px;background:rgba(20,20,20,.97);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 36px rgba(0,0,0,.5);font:600 12px/1 -apple-system,sans-serif;color:#fff;opacity:0;transition:opacity .16s,transform .16s;pointer-events:none}#__mt7.s{opacity:1;transform:translateX(-50%) translateY(0)}';
     (document.head || document.documentElement).appendChild(s);
   }
 
   function enc(v) { return encodeURIComponent(v == null ? '' : String(v)); }
   function absUrl(s) { try { return new URL(s || '', location.href).href; } catch (_) { return s || ''; } }
+  function captureId() { return Date.now().toString(36) + '-' + Math.random().toString(36).slice(2); }
 
   function bestImageUrl(img) {
     var srcset = img.getAttribute('srcset') || '';
@@ -37,19 +42,15 @@
   function fireAction(url, title, w, h) {
     if (capturing) return;
     capturing = true;
-    // ONLY use window.location.href — Tauri on_navigation will intercept and return false.
-    // This is the single reliable path. Do NOT also fire beacon/fetch (causes duplicates).
-    var u = 'muse-action://board?url='+enc(url)+'&source='+enc(location.href)+'&title='+enc(title)+'&w='+enc(w)+'&h='+enc(h);
+    var id = captureId();
+    var u = 'muse-action://board?captureId='+enc(id)+'&url='+enc(url)+'&source='+enc(location.href)+'&title='+enc(title)+'&w='+enc(w)+'&h='+enc(h);
     window.location.href = u;
-    // Reset after short delay (the page won't actually navigate since Rust returns false)
     setTimeout(function(){ capturing = false; }, 1000);
   }
 
   function clearHide(){clearTimeout(hideTimer);}
   function scheduleHide(){clearHide();hideTimer=setTimeout(hide,600);}
-
   function hide(){if(!badge)return;badge.classList.remove('v');activeImg=null;}
-
   function pos(el,img){var r=img.getBoundingClientRect();var x=r.right-80,y=r.top+10;if(x<r.left+4)x=r.left+4;if(x>innerWidth-90)x=innerWidth-90;if(y<4)y=4;if(y>innerHeight-40)y=innerHeight-40;el.style.left=x+'px';el.style.top=y+'px';}
 
   function show(img){
@@ -68,7 +69,6 @@
   }
 
   function isValid(el){if(!el||el.tagName!=='IMG')return false;if(el===badge)return false;var r=el.getBoundingClientRect();return r.width>=MIN&&r.height>=MIN;}
-
   document.addEventListener('mouseover',function(e){var t=e.target;if(badge&&(t===badge||badge.contains(t))){clearHide();return;}if(!isValid(t))return;if(t===activeImg){clearHide();return;}clearHide();clearTimeout(showTimer);showTimer=setTimeout(function(){show(t);},150);},true);
   document.addEventListener('mouseout',function(e){var t=e.target;if(!t||t.tagName!=='IMG'||t!==activeImg)return;var rel=e.relatedTarget;if(badge&&rel&&(badge===rel||badge.contains(rel))){clearHide();return;}clearTimeout(showTimer);scheduleHide();},true);
   window.addEventListener('scroll',function(){if(!badge||!activeImg)return;var r=activeImg.getBoundingClientRect();if(r.bottom<-20||r.top>innerHeight+20)hide();else pos(badge,activeImg);},{passive:true,capture:true});