From 30ab21c0e54f3b7ad4806d60e996c950e93a24e9 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Thu, 23 Apr 2026 15:00:32 -0700
Subject: [PATCH] Global search bar: ambient accent-glow aura under the pill

Adds a subtle radial glow at the bottom of the viewport that emanates
from the floating search bar, fades outward toward both window corners,
and shrinks vertically as it moves away from the bar. Makes the bar
easier to spot at a glance without a heavy full-width bar or a chrome
strip.

- New `.gsearch-aura` fixed element, 260px tall, full width, pointer
  events off. Radial-gradient with the accent color centered at the
  bottom middle; colour stops taper 620x230px by default, ramping to
  820x280px and brighter when the bar is focused/active.
- `_gsUpdateVisibility` hides the aura on /search alongside the bar
  via a simple `.hidden` class.
- Focus handler adds `.active` to the aura in step with the bar;
  `_gsDeactivate` removes it. z-index 99990 (below the bar at 99998,
  above most page content).
---
 webui/index.html          |  5 +++++
 webui/static/downloads.js |  6 ++++++
 webui/static/style.css    | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+)

diff --git a/webui/index.html b/webui/index.html
index 310b8fca..cd2838b1 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -7886,6 +7886,11 @@
     <script src="{{ url_for('static', filename='pages-extra.js') }}"></script>
     <script src="{{ url_for('static', filename='init.js') }}"></script>
     <!-- Notification bell + floating helper toggle — always accessible above modals -->
+    <!-- Ambient glow under the global search bar. Radial gradient, brightest
+         directly under the bar, tapering out toward the window corners.
+         Purely decorative (pointer-events: none). Visibility follows the bar
+         via _gsUpdateVisibility(). -->
+    <div class="gsearch-aura" id="gsearch-aura"></div>
     <!-- Global Search Bar — Spotlight-style search from anywhere -->
     <div class="gsearch-bar" id="gsearch-bar">
         <div class="gsearch-icon">
diff --git a/webui/static/downloads.js b/webui/static/downloads.js
index a772d9e5..ec55d38f 100644
--- a/webui/static/downloads.js
+++ b/webui/static/downloads.js
@@ -5043,6 +5043,8 @@ for (const _src of SOURCE_ORDER) _gsState.configuredSources[_src] = true;
 
         input.addEventListener('focus', () => {
             bar.classList.add('active');
+            const aura = document.getElementById('gsearch-aura');
+            if (aura) aura.classList.add('active');
             _gsState.active = true;
             const shortcut = document.getElementById('gsearch-shortcut');
             if (shortcut) shortcut.style.display = 'none';
@@ -5125,18 +5127,22 @@ for (const _src of SOURCE_ORDER) _gsState.configuredSources[_src] = true;
 
 function _gsUpdateVisibility() {
     const bar = document.getElementById('gsearch-bar');
+    const aura = document.getElementById('gsearch-aura');
     if (!bar) return;
     // Hide on the Search page where the unified search already exists. Accept the
     // legacy 'downloads' id for callers that predate the page rename.
     const onSearchPage = typeof currentPage !== 'undefined' && (currentPage === 'search' || currentPage === 'downloads');
     bar.style.display = onSearchPage ? 'none' : '';
+    if (aura) aura.classList.toggle('hidden', onSearchPage);
     if (onSearchPage && _gsState.active) _gsDeactivate();
 }
 
 function _gsDeactivate() {
     const bar = document.getElementById('gsearch-bar');
+    const aura = document.getElementById('gsearch-aura');
     const shortcut = document.getElementById('gsearch-shortcut');
     if (bar) bar.classList.remove('active');
+    if (aura) aura.classList.remove('active');
     if (shortcut) shortcut.style.display = '';
     _gsState.active = false;
     _gsHideResults();
diff --git a/webui/static/style.css b/webui/static/style.css
index b2d70932..c7743e65 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -5336,6 +5336,38 @@ body.helper-mode-active #dashboard-activity-feed:hover {
    GLOBAL SEARCH BAR — Spotlight-style search from anywhere
    ================================================================================== */
 
+/* Ambient glow under the global search bar — a radial gradient that emanates
+   from the bar's position and tapers out toward the window corners. Pointer
+   events disabled so it never intercepts clicks; hidden on /search where the
+   bar itself is hidden. */
+.gsearch-aura {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 260px;
+    pointer-events: none;
+    z-index: 99990; /* below the bar (99998) but above most page content */
+    opacity: 0.55;
+    transition: opacity 0.4s ease, background 0.4s ease;
+    background:
+        radial-gradient(ellipse 620px 230px at 50% 100%,
+            rgba(var(--accent-rgb), 0.22) 0%,
+            rgba(var(--accent-rgb), 0.10) 32%,
+            rgba(var(--accent-rgb), 0.03) 62%,
+            transparent 85%);
+}
+.gsearch-aura.hidden { display: none; }
+.gsearch-aura.active {
+    opacity: 1;
+    background:
+        radial-gradient(ellipse 820px 280px at 50% 100%,
+            rgba(var(--accent-rgb), 0.40) 0%,
+            rgba(var(--accent-rgb), 0.18) 28%,
+            rgba(var(--accent-rgb), 0.05) 58%,
+            transparent 85%);
+}
+
 .gsearch-bar {
     position: fixed;
     bottom: 24px;