Feature: Performer profile photo hover preview card with Stash image proxy and SVG fallback

qbittorrent_performer_sorter.html

@@ -550,6 +550,76 @@
       border-color: var(--accent-cyan);
     }
 
+    /* Performer Hover Preview Card */
+    .performer-hover-card {
+      position: fixed;
+      z-index: 100000;
+      pointer-events: none;
+      background: rgba(15, 23, 42, 0.96);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
+      padding: 0.6rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.45rem;
+      width: 165px;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(6px) scale(0.96);
+      transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
+      backdrop-filter: blur(10px);
+    }
+
+    .performer-hover-card.visible {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+    }
+
+    .hover-card-img-wrap {
+      width: 145px;
+      height: 185px;
+      border-radius: var(--radius-sm);
+      overflow: hidden;
+      background: var(--bg-secondary);
+      position: relative;
+      border: 1px solid var(--border-color);
+    }
+
+    .hover-card-img-wrap img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      transition: opacity 0.2s ease;
+    }
+
+    .hover-card-details {
+      width: 100%;
+      text-align: center;
+    }
+
+    .hover-card-name {
+      font-size: 0.85rem;
+      font-weight: 700;
+      color: #ffffff;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .hover-card-folder {
+      font-size: 0.7rem;
+      font-family: var(--font-mono);
+      color: var(--accent-cyan);
+      margin-top: 0.15rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     /* Modal */
     .modal-backdrop {
       position: fixed;
@@ -1320,6 +1390,17 @@
     </div>
   </div>
 
+  <!-- Performer Floating Image Hover Preview Card -->
+  <div id="performer-hover-card" class="performer-hover-card">
+    <div class="hover-card-img-wrap">
+      <img id="hover-card-img" src="" alt="Performer Photo" />
+    </div>
+    <div class="hover-card-details">
+      <div class="hover-card-name" id="hover-card-name">Performer</div>
+      <div class="hover-card-folder" id="hover-card-folder">📁 folder</div>
+    </div>
+  </div>
+
   <!-- Toast Notification Container -->
   <div id="toast-container"></div>
 
@@ -1338,6 +1419,79 @@
         .replace(/'/g, '&#039;');
     }
 
+    // ==================== Performer Image Hover Card Controller ====================
+    const hoverCard = document.getElementById('performer-hover-card');
+    const hoverCardImg = document.getElementById('hover-card-img');
+    const hoverCardName = document.getElementById('hover-card-name');
+    const hoverCardFolder = document.getElementById('hover-card-folder');
+    let hoverTimeout = null;
+
+    function showPerformerHoverCard(performerSlug, rawName, targetEl, event) {
+      if (!performerSlug || performerSlug.length < 2) return;
+      clearTimeout(hoverTimeout);
+
+      const displayName = (rawName || performerSlug.replace(/\./g, ' ')).replace(/\b\w/g, c => c.toUpperCase());
+      hoverCardName.textContent = displayName;
+      hoverCardFolder.textContent = `📁 ${performerSlug}`;
+
+      const imgSrc = `/api/performer/image?name=${encodeURIComponent(performerSlug)}`;
+      if (hoverCardImg.getAttribute('src') !== imgSrc) {
+        hoverCardImg.src = imgSrc;
+      }
+
+      positionHoverCard(targetEl, event);
+      hoverCard.classList.add('visible');
+    }
+
+    function hidePerformerHoverCard() {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = setTimeout(() => {
+        hoverCard.classList.remove('visible');
+      }, 70);
+    }
+
+    function positionHoverCard(targetEl, event) {
+      const rect = targetEl ? targetEl.getBoundingClientRect() : { left: event.clientX, top: event.clientY, width: 20, height: 20 };
+      const cardWidth = 165;
+      const cardHeight = 250;
+      const margin = 10;
+
+      let left = rect.left + (rect.width / 2) - (cardWidth / 2);
+      let top = rect.top - cardHeight - margin; // default: above element
+
+      // If overflowing top, place below element
+      if (top < 10) {
+        top = rect.bottom + margin;
+      }
+
+      // Keep within left/right boundaries
+      if (left < 10) left = 10;
+      if (left + cardWidth > window.innerWidth - 10) {
+        left = window.innerWidth - cardWidth - 10;
+      }
+
+      hoverCard.style.left = `${left}px`;
+      hoverCard.style.top = `${top}px`;
+    }
+
+    // Global event delegation for performer pills & inputs
+    document.addEventListener('mouseover', (e) => {
+      const pill = e.target.closest('.performer-pill, .smb-performer-pill, .modal-performer-pill');
+      if (pill) {
+        const perf = pill.getAttribute('data-performer');
+        const raw = pill.textContent.trim();
+        showPerformerHoverCard(perf, raw, pill, e);
+        return;
+      }
+    });
+
+    document.addEventListener('mouseout', (e) => {
+      const pill = e.target.closest('.performer-pill, .smb-performer-pill, .modal-performer-pill');
+      if (pill) {
+        hidePerformerHoverCard();
+      }
+    });
+
     // Existing performers list for Intellisense
     let knownPerformersList = [];
 

server.py

@@ -87,6 +87,75 @@ def normalize_stash_url(url_str):
             pass
     return url_str
 
+# In-memory performer image cache
+PERFORMER_IMAGE_CACHE = {}
+
+def get_fallback_avatar_svg(name):
+    clean = (name or '?').replace('.', ' ').strip().title()
+    initials = ''.join([part[0].upper() for part in clean.split() if part][:2]) or '?'
+    svg = f'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 200" width="160" height="200">
+      <defs>
+        <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#1e1b4b"/>
+          <stop offset="50%" stop-color="#312e81"/>
+          <stop offset="100%" stop-color="#4338ca"/>
+        </linearGradient>
+      </defs>
+      <rect width="100%" height="100%" fill="url(#g)" rx="12"/>
+      <circle cx="80" cy="72" r="32" fill="#6366f1" opacity="0.85"/>
+      <circle cx="80" cy="62" r="18" fill="#e0e7ff"/>
+      <path d="M48 122 Q80 94 112 122 Z" fill="#e0e7ff"/>
+      <text x="80" y="162" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600" fill="#ffffff" text-anchor="middle">{clean}</text>
+    </svg>'''
+    return svg.encode('utf-8')
+
+def fetch_performer_image_data(performer_name=None, performer_id=None, stash_url=None):
+    cache_key = str(performer_id) if performer_id else str(performer_name).lower()
+    if cache_key in PERFORMER_IMAGE_CACHE:
+        return PERFORMER_IMAGE_CACHE[cache_key]
+
+    img_url = None
+    if performer_id:
+        base = normalize_stash_url(stash_url).replace('/graphql', '')
+        img_url = f"{base}/performer/{performer_id}/image"
+    elif performer_name:
+        clean_name = performer_name.replace('.', ' ')
+        q = f'''
+        {{
+          findPerformers(filter: {{q: {json.dumps(clean_name)}, per_page: 1}}) {{
+            performers {{
+              id
+              name
+              image_path
+            }}
+          }}
+        }}
+        '''
+        try:
+            res = execute_stash_graphql(q, stash_url, timeout=3)
+            performers = res.get('data', {}).get('findPerformers', {}).get('performers', [])
+            if performers and performers[0].get('image_path'):
+                img_url = performers[0]['image_path']
+        except Exception:
+            pass
+
+    if img_url:
+        try:
+            req = urllib.request.Request(img_url)
+            with urllib.request.urlopen(req, timeout=4) as res:
+                content_type = res.headers.get('Content-Type', 'image/jpeg')
+                img_bytes = res.read()
+                result = (content_type, img_bytes)
+                PERFORMER_IMAGE_CACHE[cache_key] = result
+                return result
+        except Exception as e:
+            print(f"Error downloading performer image {img_url}: {e}")
+
+    # Fallback to SVG avatar
+    fallback_data = ('image/svg+xml', get_fallback_avatar_svg(performer_name or 'Performer'))
+    PERFORMER_IMAGE_CACHE[cache_key] = fallback_data
+    return fallback_data
+
 def format_performer_slug(raw_name):
     if not raw_name:
         return ''
@@ -346,6 +415,9 @@ class RobustProxyHandler(http.server.SimpleHTTPRequestHandler):
         # Existing Performer Directories Intellisense API
         elif self.path.startswith('/api/performers'):
             self.handle_list_performers()
+        # Performer Image Proxy API
+        elif self.path.startswith('/api/performer/image'):
+            self.handle_performer_image()
         # Stash Status API
         elif self.path.startswith('/api/stash/status'):
             self.handle_stash_status()
@@ -727,6 +799,22 @@ class RobustProxyHandler(http.server.SimpleHTTPRequestHandler):
         self.end_headers()
         self.wfile.write(json.dumps({"performers": performers, "count": len(performers)}).encode('utf-8'))
 
+    # ==================== Performer Image Proxy Handlers ====================
+    def handle_performer_image(self):
+        parsed = urllib.parse.urlparse(self.path)
+        params = urllib.parse.parse_qs(parsed.query)
+        name = params.get('name', [''])[0]
+        p_id = params.get('id', [''])[0]
+        stash_url = params.get('url', [''])[0]
+
+        content_type, img_bytes = fetch_performer_image_data(name, p_id, stash_url)
+        self.send_response(200)
+        self.send_header('Content-Type', content_type)
+        self.send_header('Cache-Control', 'public, max-age=86400')
+        self.send_cors_headers()
+        self.end_headers()
+        self.wfile.write(img_bytes)
+
     # ==================== Stash Server API Handlers ====================
     def handle_stash_status(self):
         parsed = urllib.parse.urlparse(self.path)