From abbb35bb7efec7ac2a91a307a1dd7c856eed0c6b Mon Sep 17 00:00:00 2001
From: Kingston-SCYD <odscheidel@gmail.com>
Date: Fri, 5 Jun 2026 17:06:25 -0500
Subject: [PATCH] Restyle VC lock as attached orange button segment

---
 ttstoy/webui/templates/dashboard.html | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/ttstoy/webui/templates/dashboard.html b/ttstoy/webui/templates/dashboard.html
index ffa1527..4086604 100644
--- a/ttstoy/webui/templates/dashboard.html
+++ b/ttstoy/webui/templates/dashboard.html
@@ -111,9 +111,11 @@
     </div>
   </div>
   <div style="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;">
-    <button class="btn btn-primary" id="vc-btn" onclick="submitTTS()" disabled style="opacity:0.5;">
-      <span id="spinner" class="spin" style="display:none;"></span><span id="vc-lock" style="font-size:0.75rem;">&#9906;</span> Speak in VC
-    </button>
+    <div style="display:inline-flex;">
+      <button class="btn btn-primary" id="vc-btn" onclick="submitTTS()" disabled style="opacity:0.5;border-top-right-radius:0;border-bottom-right-radius:0;">
+        <span id="spinner" class="spin" style="display:none;"></span> Speak in VC
+      </button><button id="vc-lock-btn" onclick="toggleVcLock()" style="border:none;background:#e67e22;color:#fff;padding:0.4rem 0.6rem;cursor:pointer;border-top-right-radius:4px;border-bottom-right-radius:4px;font-size:0.85rem;display:inline-flex;align-items:center;" title="Click to unlock">&#9906;</button>
+    </div>
     <button class="btn btn-secondary" id="gen-only-btn" onclick="generateOnly()" style="display:none;">
       <span id="gen-spinner" class="spin" style="display:none;"></span> Generate Only
     </button>
@@ -360,22 +362,22 @@ loadSfxEmojis();
 // Show generate-only button for all modes
 document.getElementById('gen-only-btn').style.display = '';
 
-// VC lock toggle — click the lock icon to unlock
-document.getElementById('vc-lock').addEventListener('click', function(e) {
-  e.stopPropagation();
+// VC lock toggle
+function toggleVcLock() {
   const btn = document.getElementById('vc-btn');
-  const lock = document.getElementById('vc-lock');
+  const lock = document.getElementById('vc-lock-btn');
   if (btn.disabled) {
     btn.disabled = false;
     btn.style.opacity = '1';
     lock.innerHTML = '&#9907;';
+    lock.title = 'Click to lock';
   } else {
     btn.disabled = true;
     btn.style.opacity = '0.5';
     lock.innerHTML = '&#9906;';
+    lock.title = 'Click to unlock';
   }
-});
-document.getElementById('vc-lock').style.cursor = 'pointer';
+}
 let sfxEmojis = [];
 let sfxDrawerOpen = false;