From 6a8422ad1ffb0801a8b4efc45072d3169dc078c6 Mon Sep 17 00:00:00 2001
From: Psychotoxical <dev@psysonic.app>
Date: Sun, 12 Apr 2026 11:52:31 +0200
Subject: [PATCH] fix(artists): add hover effect to alphabet filter buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Buttons were built with inline styles — no :hover possible. Replaced with
.artists-alpha-btn CSS class: accent-colored hover with subtle glow ring,
active state unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/Artists.tsx     | 12 +-----------
 src/styles/components.css | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/pages/Artists.tsx b/src/pages/Artists.tsx
index 56713045..5f9b680b 100644
--- a/src/pages/Artists.tsx
+++ b/src/pages/Artists.tsx
@@ -179,17 +179,7 @@ export default function Artists() {
           <button
             key={l}
             onClick={() => setLetterFilter(l)}
-            style={{
-              padding: '0.25rem 0.5rem',
-              borderRadius: 'var(--radius-sm)',
-              background: letterFilter === l ? 'var(--accent)' : 'var(--bg-card)',
-              color: letterFilter === l ? 'var(--ctp-crust)' : 'var(--text-secondary)',
-              border: '1px solid var(--border-subtle)',
-              fontSize: '12px',
-              fontWeight: 600,
-              cursor: 'pointer',
-              transition: 'all 0.2s'
-            }}
+            className={`artists-alpha-btn${letterFilter === l ? ' artists-alpha-btn--active' : ''}`}
           >
             {l === ALL_SENTINEL ? t('artists.all') : l}
           </button>
diff --git a/src/styles/components.css b/src/styles/components.css
index 93aa0622..c4d20fcb 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -6007,6 +6007,28 @@ html.no-compositing .fs-lyrics-rail {
 }
 .alphabet-filter-btn:hover { background: var(--bg-hover); }
 .alphabet-filter-btn.active { background: var(--accent); color: var(--ctp-crust); }
+
+/* ─ Artists page alphabet bar ─ */
+.artists-alpha-btn {
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid var(--border-subtle);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.artists-alpha-btn:not(.artists-alpha-btn--active):hover {
+  background: var(--accent);
+  color: var(--ctp-crust);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
+}
+.artists-alpha-btn--active {
+  background: var(--accent);
+  color: var(--ctp-crust);
+  border-color: var(--accent);
+}
 .alphabet-filter-btn.empty { opacity: 0.28; pointer-events: none; }
 
 /* ─ Radio favorite star ─ */