From 7a296e4273294b4f31d2cad7ce97e27573bf25e8 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Tue, 23 Jun 2026 10:28:06 +0200
Subject: [PATCH] feat: use MDI silhouettes for avatars and add flag to compact
 meta row

---
 static/index.html            |  2 +-
 static/js/voice-inspector.js |  7 +++++--
 static/js/voice-library.js   | 16 ++++++++++------
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/static/index.html b/static/index.html
index 3628791..fa74549 100644
--- a/static/index.html
+++ b/static/index.html
@@ -26,7 +26,7 @@
 
   <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
   <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
-  <link rel="stylesheet" href="/static/style.css?v=1.8.0-8">
+  <link rel="stylesheet" href="/static/style.css?v=1.8.0-9">
 
 
   <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
diff --git a/static/js/voice-inspector.js b/static/js/voice-inspector.js
index 18036d4..36b59a4 100644
--- a/static/js/voice-inspector.js
+++ b/static/js/voice-inspector.js
@@ -58,11 +58,14 @@ function selectVoice(wrap) {
   const inspFlagIcon = inspFlagCc
     ? `<span class="fi fi-${inspFlagCc.toLowerCase()}" role="img" aria-label="${langCode}"></span>` : null;
 
+  const defaultSilClass = curGender === 'M' ? 'mdi-face-man' : (curGender === 'F' ? 'mdi-face-woman' : 'mdi-account');
+  const silHtml = `<span class="mdi ${defaultSilClass}" style="color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:${color}"></span>`;
+
   const inspIconHtml = window.voiceAvatarIcon ? window.voiceAvatarIcon(v.avatar, 48) : null;
   const avatarHtml = picSrcInsp
     ? `<img src="${picSrcInsp}" alt="" class="insp-avatar-img">`
-    : inspIconHtml || inspFlagIcon || initial;
-  const avatarBgStyle = (picSrcInsp || inspIconHtml || inspFlagIcon) ? '' : `style="background:${color}"`;
+    : inspIconHtml || silHtml;
+  const avatarBgStyle = (picSrcInsp || inspIconHtml) ? '' : `style="background:${color}"`;
 
   const flagIconHtml = inspFlagIcon || '';
 
diff --git a/static/js/voice-library.js b/static/js/voice-library.js
index 4fb70ac..d5b2436 100644
--- a/static/js/voice-library.js
+++ b/static/js/voice-library.js
@@ -1884,15 +1884,17 @@ function makeVoiceRow(v) {
     ? `<span class="fi fi-${currentFlag.toLowerCase()}" role="img" aria-label="${langCode}"></span>`
     : null;
 
-  // Avatar: photo > gender/type icon > flag icon > initial letter (with color)
+  // Avatar: photo > gender/type icon > silhouette (with color)
+  const defaultSilClass = gender === 'M' ? 'mdi-face-man' : (gender === 'F' ? 'mdi-face-woman' : 'mdi-account');
+  const silHtml = `<span class="mdi ${defaultSilClass}" style="color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:${color}"></span>`;
+
   const iconHtml = window.voiceAvatarIcon ? window.voiceAvatarIcon(v.avatar, 34) : null;
   const avatarClass   = picSrc ? 'vl-avatar vl-avatar-photo'
-    : iconHtml ? 'vl-avatar vl-avatar-icon'
-    : flagIconHtml ? 'vl-avatar vl-avatar-flag' : 'vl-avatar vl-avatar-initial';
-  const avatarStyle   = (picSrc || iconHtml || flagIconHtml) ? '' : `style="background:${color}"`;
+    : iconHtml ? 'vl-avatar vl-avatar-icon' : 'vl-avatar vl-avatar-sil';
+  const avatarStyle   = (picSrc || iconHtml) ? '' : `style="background:${color}"`;
   const avatarContent = picSrc
     ? `<img src="${picSrc}" alt="" class="vl-avatar-img" loading="lazy" decoding="async">`
-    : iconHtml || flagIconHtml || `<span class="vl-avatar-letter" style="color:#fff;background:${color}">${initial}</span>`;
+    : iconHtml || silHtml;
 
   wrap.innerHTML = `
     <div class="vl-compact">
@@ -1902,9 +1904,11 @@ function makeVoiceRow(v) {
           ? `<input type="text" class="vl-inline-edit vl-name-input" data-field="name" value="${escHtml(dispName)}" title="Display Name" placeholder="Name">` 
           : `<span class="vl-name" title="${escHtml(v.id)}">${escHtml(dispName)}</span>`}
         <div class="vl-meta">
-          <span class="vl-type-label ${isClone ? 'vl-type-clone' : 'vl-type-design'}">${isClone ? 'Clone' : 'Design'}</span>
+          <span class="vl-lang-label" title="${escHtml(currentFlag || langCode)}">${flagEmoji} ${escHtml(langCode)}</span>
           ${gender ? `<span class="vl-gender-label ${genderClass[gender]||'g-n'}" title="${genderLabel[gender]||''}">${genderMap[gender]||'?'} ${genderLabel[gender]||''}</span>` : ''}
           ${benchText !== '-' ? `<span class="vl-bench-chip ${benchCls}" title="${escHtml(benchTitle)}"><span class="mdi mdi-timer-outline"></span> ${escHtml(benchText)}</span>` : ''}
+          <div class="vr-rating" style="font-size:13px;min-height:unset">${starsHtml}</div>
+          <span class="vl-type-label ${isClone ? 'vl-type-clone' : 'vl-type-design'}">${isClone ? 'Clone' : 'Design'}</span>
         </div>
       </div>
       <div class="vr-play-group">