fix: hover ADD badge stable positioning, larger hit target, delayed hide, no disappear on approach

src-tauri/resources/scripts/hover_overlay.js

@@ -1,47 +1,66 @@
-/* Refstudio hover overlay: + ADD button on web images. */
+/* Refstudio hover overlay: + ADD button on web images.
+ * v10 — fixes: badge disappears before click, badge not clickable, click goes to image behind.
+ * Root causes fixed:
+ *   1. Badge was positioned at top-right of image but mouseout fired when moving FROM image TO badge
+ *   2. Badge pointer-events were toggled too aggressively
+ *   3. Badge hide timer was too short (300ms) — cursor couldn't reach it
+ */
 (function () {
-  if (window.__muse_hover_v9) return;
-  window.__muse_hover_v9 = true;
+  if (window.__muse_hover_v10) return;
+  window.__muse_hover_v10 = true;
 
   var MIN = 90;
   var activeImg = null;
   var badge = null;
   var showTimer = 0;
   var hideTimer = 0;
-  var beaconKeepalive = [];
 
   function injectCSS() {
-    if (document.getElementById('__muse_badge_css')) return;
-    var s = document.createElement('style'); s.id = '__muse_badge_css';
-    s.textContent = '#__muse_add_badge{all:initial;position:fixed;z-index:2147483647;display:flex;align-items:center;gap:4px;padding:7px 14px;background:rgba(255,255,255,0.97);color:#111;border-radius:999px;box-shadow:0 4px 20px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.05);font:700 11px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;cursor:pointer;opacity:0;transform:translateY(4px) scale(0.92);transition:opacity .15s,transform .15s;pointer-events:none;letter-spacing:0.02em;user-select:none}#__muse_add_badge.v{opacity:1;transform:none;pointer-events:auto}#__muse_add_badge:hover{background:#fff;box-shadow:0 6px 28px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.08);transform:scale(1.05)}#__muse_add_badge:active{transform:scale(0.94)}#__muse_add_badge svg{width:14px;height:14px;stroke-width:2.5}#__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)}';
+    if (document.getElementById('__muse_badge_css2')) return;
+    var s = document.createElement('style'); s.id = '__muse_badge_css2';
+    s.textContent = [
+      /* The badge itself */
+      '#__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;',  /* ALWAYS clickable when visible */
+      '  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}',
+      /* Toast */
+      '#__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)}'
+    ].join('');
     (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 bestFromSrcset(srcset) {
-    if (!srcset) return '';
-    try {
+  function bestImageUrl(img) {
+    // srcset best
+    var srcset = img.getAttribute('srcset') || '';
+    if (srcset) {
       var best = '', bestScore = 0;
       srcset.split(',').forEach(function(part) {
-        var bits = part.trim().split(/\s+/);
-        var u = bits[0];
-        var score = 1;
-        if (bits[1]) {
-          if (bits[1].endsWith('w')) score = parseInt(bits[1], 10) || 1;
-          else if (bits[1].endsWith('x')) score = (parseFloat(bits[1]) || 1) * 1000;
-        }
+        var bits = part.trim().split(/\s+/); var u = bits[0]; var score = 1;
+        if (bits[1]) { if (bits[1].endsWith('w')) score = parseInt(bits[1],10)||1; else if (bits[1].endsWith('x')) score = (parseFloat(bits[1])||1)*1000; }
         if (score > bestScore) { bestScore = score; best = u; }
       });
-      return best ? absUrl(best) : '';
-    } catch (_) { return ''; }
-  }
-
-  function bestImageUrl(img) {
-    var u = bestFromSrcset(img.getAttribute('srcset') || img.srcset);
-    if (u) return u;
-    u = img.getAttribute('data-full') || img.getAttribute('data-fullsrc') || img.getAttribute('data-original') || img.getAttribute('data-src') || img.getAttribute('data-lazy-src') || img.currentSrc || img.src;
+      if (best) return absUrl(best);
+    }
+    var u = img.getAttribute('data-full') || img.getAttribute('data-fullsrc') || img.getAttribute('data-original') || img.getAttribute('data-src') || img.getAttribute('data-lazy-src') || img.currentSrc || img.src;
     u = absUrl(u);
     try {
       if (u.includes('pinimg.com') && u.match(/\/\d+x\//)) u = u.replace(/\/\d+x\//, '/originals/');
@@ -55,52 +74,39 @@
     var t = document.getElementById('__mt7');
     if (!t) { t = document.createElement('div'); t.id = '__mt7'; document.documentElement.appendChild(t); }
     t.textContent = m; t.classList.add('s');
-    clearTimeout(t._t); t._t = setTimeout(function () { t.classList.remove('s'); }, 1500);
+    clearTimeout(t._t); t._t = setTimeout(function () { t.classList.remove('s'); }, 2000);
   }
 
-  function addToBoard(url, title, w, h) {
+  function fireAction(url, title, w, h) {
     var u = 'muse-action://board?url=' + enc(url) + '&source=' + enc(location.href) + '&title=' + enc(title) + '&w=' + enc(w) + '&h=' + enc(h);
-
-    // 1) Primary: top-level navigation. Tauri on_navigation sees this and returns false,
-    // so the web page should NOT actually navigate away, but Rust definitely receives it.
+    // Fire through all three channels for maximum reliability.
     try { window.location.href = u; } catch (_) {}
+    try { var b = new Image(); b.src = u; } catch (_) {}
+    try { fetch(u).catch(function(){}); } catch (_) {}
+  }
 
-    // 2) Fallback: registered custom protocol through image beacon.
-    try {
-      var b = new Image();
-      b.onload = b.onerror = function () {
-        setTimeout(function () {
-          var i = beaconKeepalive.indexOf(b);
-          if (i >= 0) beaconKeepalive.splice(i, 1);
-        }, 500);
-      };
-      beaconKeepalive.push(b);
-      b.src = u;
-    } catch (_) {}
+  function clearHide() { clearTimeout(hideTimer); }
+  function scheduleHide() { clearHide(); hideTimer = setTimeout(hide, 600); }
 
-    // 3) Extra fallback for platforms where fetch triggers scheme handlers.
-    try { fetch(u).catch(function(){}); } catch (_) {}
+  function hide() {
+    if (!badge) return;
+    badge.classList.remove('v');
+    activeImg = null;
   }
 
   function pos(el, img) {
     var r = img.getBoundingClientRect();
-    var x = r.right - 78;
-    var y = r.top + 8;
-    if (x < r.left + 8) x = r.left + 8;
-    if (x > innerWidth - 90) x = innerWidth - 90;
+    // Position badge at TOP-RIGHT of image, inside the image bounds
+    var x = r.right - 80;
+    var y = r.top + 10;
+    if (x < r.left + 4) x = r.left + 4;
+    if (x > window.innerWidth - 90) x = window.innerWidth - 90;
     if (y < 4) y = 4;
-    if (y > innerHeight - 42) y = innerHeight - 42;
+    if (y > window.innerHeight - 40) y = window.innerHeight - 40;
     el.style.left = x + 'px';
     el.style.top = y + 'px';
   }
 
-  function hide() {
-    if (!badge) return;
-    badge.classList.remove('v');
-    activeImg = null;
-    setTimeout(function () { if (badge && !badge.classList.contains('v')) badge.style.pointerEvents = 'none'; }, 160);
-  }
-
   function show(img) {
     if (img === activeImg && badge && badge.classList.contains('v')) return;
     injectCSS();
@@ -108,55 +114,69 @@
     if (!badge) {
       badge = document.createElement('div');
       badge.id = '__muse_add_badge';
-      badge.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> ADD';
-      ['mousedown','pointerdown','pointerup'].forEach(function(ev){ badge.addEventListener(ev, function(e){ e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); }, true); });
+      badge.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>ADD';
+
+      // Click handler — the actual capture action
       badge.addEventListener('click', function (e) {
         e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
         if (!activeImg) return;
         var url = bestImageUrl(activeImg);
+        if (!url || url.startsWith('data:') || url.startsWith('blob:')) { toast('Cannot capture this image'); return; }
         var title = activeImg.alt || activeImg.title || document.title || 'Reference';
         var w = activeImg.naturalWidth || Math.round(activeImg.getBoundingClientRect().width);
         var h = activeImg.naturalHeight || Math.round(activeImg.getBoundingClientRect().height);
-        if (!url || url.startsWith('data:') || url.startsWith('blob:')) { toast('Cannot capture this image'); return; }
-        addToBoard(url, title, w, h);
+        fireAction(url, title, w, h);
         toast('✓ Added to Board');
+        hide();
       }, true);
-      badge.onmouseenter = function () { clearTimeout(hideTimer); };
-      badge.onmouseleave = function () { hideTimer = setTimeout(hide, 300); };
+
+      // Block ALL events from reaching elements underneath
+      ['mousedown','mouseup','pointerdown','pointerup','touchstart','touchend'].forEach(function(ev) {
+        badge.addEventListener(ev, function(e) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); }, true);
+      });
+
+      // Keep badge visible while hovering it
+      badge.addEventListener('mouseenter', clearHide, true);
+      badge.addEventListener('mouseleave', scheduleHide, true);
+
       document.documentElement.appendChild(badge);
     }
     pos(badge, activeImg);
-    badge.offsetHeight;
+    void badge.offsetHeight; // force reflow for transition
     badge.classList.add('v');
   }
 
   function isValidTarget(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 hovering badge, keep it alive
+    if (badge && (t === badge || badge.contains(t))) { clearHide(); return; }
     if (!isValidTarget(t)) return;
-    if (t === activeImg) { clearTimeout(hideTimer); return; }
-    clearTimeout(hideTimer); clearTimeout(showTimer);
-    showTimer = setTimeout(function () { show(t); }, 120);
+    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 && (badge === rel || badge.contains && badge.contains(rel))) return;
+    // Don't hide if moving to the badge
+    if (badge && rel && (badge === rel || badge.contains(rel))) { clearHide(); return; }
     clearTimeout(showTimer);
-    hideTimer = setTimeout(hide, 300);
+    scheduleHide();
   }, true);
 
   window.addEventListener('scroll', function () {
     if (!badge || !activeImg) return;
     var r = activeImg.getBoundingClientRect();
-    if (r.bottom < -20 || r.top > innerHeight + 20) hide();
+    if (r.bottom < -20 || r.top > window.innerHeight + 20) hide();
     else pos(badge, activeImg);
   }, { passive: true, capture: true });
 })();