From 59e258a9221aa780a59a5deed6b68f9b8804c0f9 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Thu, 26 Mar 2026 12:32:03 -0700
Subject: [PATCH] Add idle glow pulse to help button for new users

Subtle accent border glow breathes every 3s on the ? button until
the user opens the menu for the first time, then stops permanently
via localStorage. Helps new users notice the help system exists.
---
 webui/static/helper.js | 10 ++++++++++
 webui/static/style.css | 16 ++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/webui/static/helper.js b/webui/static/helper.js
index 576bc1fc..e89c3f73 100644
--- a/webui/static/helper.js
+++ b/webui/static/helper.js
@@ -2197,6 +2197,10 @@ function openHelperMenu() {
 
     const floatBtn = document.getElementById('helper-float-btn');
     if (!floatBtn) return;
+
+    // User has discovered the help system — stop the idle glow permanently
+    floatBtn.classList.remove('undiscovered');
+    localStorage.setItem('soulsync_helper_discovered', '1');
     floatBtn.classList.add('menu-open');
 
     // Detect current page for contextual tour suggestion
@@ -3780,5 +3784,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // What's New badge
         _updateHelperBadge();
+
+        // Idle glow for undiscovered help button
+        if (!localStorage.getItem('soulsync_helper_discovered')) {
+            const btn = document.getElementById('helper-float-btn');
+            if (btn) btn.classList.add('undiscovered');
+        }
     }, 2500);
 });
diff --git a/webui/static/style.css b/webui/static/style.css
index dcc94a5f..baf6d653 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -1277,6 +1277,22 @@ body {
     display: block;
 }
 
+/* Subtle idle glow for users who haven't opened help yet */
+.helper-float-btn.undiscovered {
+    animation: helperIdleGlow 3s ease-in-out infinite;
+}
+
+@keyframes helperIdleGlow {
+    0%, 100% {
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(var(--accent-rgb), 0), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        border-color: rgba(var(--accent-rgb), 0.25);
+    }
+    50% {
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        border-color: rgba(var(--accent-rgb), 0.5);
+    }
+}
+
 .helper-float-btn:hover {
     transform: scale(1.1);
     background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3) 0%, rgba(30, 30, 30, 0.95) 60%);