From 1cc674e4eee3dcb7b20b009221ffe617163b099d Mon Sep 17 00:00:00 2001
From: Psychotoxical <dev@psysonic.app>
Date: Fri, 10 Apr 2026 17:05:20 +0200
Subject: [PATCH] fix(ui): icon updates, remove mic button, theme fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LiveSearch: replace SlidersVertical with TextSearch for advanced search
- AlbumHeader: add Highlighter icon for artist bio button
- PlayerBar: remove unused lyrics/mic button
- components.css: album-detail-badge always opaque (accent bg, white text)
- theme: Middle Earth — remove sidebar stripes, fix queue/artist/bio contrast
- theme: Toy Tale — fix muted text, queue tabs, sidebar labels, divider
- theme: Tetrastack — brighten purple/blue palette, raise text-muted contrast
- theme: Horde & Alliance — remove repeating sidebar line pattern

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/AlbumHeader.tsx |   6 +-
 src/components/LiveSearch.tsx  |   4 +-
 src/components/PlayerBar.tsx   |  12 +---
 src/styles/components.css      |   2 +
 src/styles/theme.css           | 114 +++++++++++++++++++++++++--------
 5 files changed, 97 insertions(+), 41 deletions(-)

diff --git a/src/components/AlbumHeader.tsx b/src/components/AlbumHeader.tsx
index 3cc60fec..93edef1e 100644
--- a/src/components/AlbumHeader.tsx
+++ b/src/components/AlbumHeader.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Play, Heart, ExternalLink, X, ChevronLeft, Download, ListPlus, HardDriveDownload, Loader2 } from 'lucide-react';
+import { Play, Heart, ExternalLink, X, ChevronLeft, Download, ListPlus, HardDriveDownload, Loader2, Highlighter } from 'lucide-react';
 import { SubsonicSong, buildCoverArtUrl } from '../api/subsonic';
 import CachedImage from './CachedImage';
 import CoverLightbox from './CoverLightbox';
@@ -243,7 +243,7 @@ export default function AlbumHeader({
                       aria-label={t('albumDetail.artistBio')}
                       data-tooltip={t('albumDetail.artistBio')}
                     >
-                      <ExternalLink size={16} />
+                      <Highlighter size={16} />
                     </button>
 
                     {downloadProgress !== null ? (
@@ -313,7 +313,7 @@ export default function AlbumHeader({
                   </button>
 
                   <button className="btn btn-ghost" id="album-bio-btn" onClick={onBio}>
-                    <ExternalLink size={16} /> {t('albumDetail.artistBio')}
+                    <Highlighter size={16} /> {t('albumDetail.artistBio')}
                   </button>
 
                   {downloadProgress !== null ? (
diff --git a/src/components/LiveSearch.tsx b/src/components/LiveSearch.tsx
index a371de2a..bb47e776 100644
--- a/src/components/LiveSearch.tsx
+++ b/src/components/LiveSearch.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Search, Disc3, Users, Music, SlidersVertical } from 'lucide-react';
+import { Search, Disc3, Users, Music, SlidersVertical, TextSearch } from 'lucide-react';
 import { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
@@ -126,7 +126,7 @@ export default function LiveSearch() {
           data-tooltip-pos="bottom"
           aria-label={t('search.advanced')}
         >
-          <SlidersVertical size={14} />
+          <TextSearch size={14} />
         </button>
       </div>
 
diff --git a/src/components/PlayerBar.tsx b/src/components/PlayerBar.tsx
index 65df14a4..da640700 100644
--- a/src/components/PlayerBar.tsx
+++ b/src/components/PlayerBar.tsx
@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
 import { createPortal } from 'react-dom';
 import {
   Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
-  Square, Repeat, Repeat1, Maximize2, SlidersVertical, X, Heart, MicVocal, Cast
+  Square, Repeat, Repeat1, Maximize2, SlidersVertical, X, Heart, Cast
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 import { useShallow } from 'zustand/react/shallow';
@@ -298,16 +298,6 @@ export default function PlayerBar() {
         )}
       </div>
 
-      {/* Lyrics Button */}
-      <button
-        className={`player-btn player-btn-sm ${activeTab === 'lyrics' && isQueueVisible ? 'active' : ''}`}
-        onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
-        aria-label={t('player.lyrics')}
-        data-tooltip={t('player.lyrics')}
-      >
-        <MicVocal size={15} />
-      </button>
-
       {/* EQ Button */}
       <button
         className={`player-btn player-btn-sm player-eq-btn ${eqOpen ? 'active' : ''}`}
diff --git a/src/styles/components.css b/src/styles/components.css
index f211190d..c509f95e 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1135,6 +1135,8 @@
 
 .album-detail-badge {
   margin-bottom: 0.5rem;
+  background: var(--accent);
+  color: #fff;
 }
 
 .album-detail-back {
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 39765b7f..6e41367d 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -6516,11 +6516,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
 /* Old Shire craftsmanship — vertical wood grain, warm hearthlight from right edge */
 [data-theme='middle-earth'] .sidebar {
   background-color: #221608;
-  background-image:
-    repeating-linear-gradient(90deg,
-      rgba(255, 220, 120, 0.04) 0px, rgba(255, 220, 120, 0.04) 1px,
-      transparent 1px, transparent 14px),
-    linear-gradient(180deg, #261a0a 0%, #1e1408 55%, #241c0e 100%);
+  background-image: linear-gradient(180deg, #261a0a 0%, #1e1408 55%, #241c0e 100%);
   border-right: 2px solid rgba(200, 160, 40, 0.28);
   box-shadow:
     inset -3px 0 12px rgba(200, 140, 30, 0.10),
@@ -6982,6 +6978,40 @@ input[type="range"]:hover::-webkit-slider-thumb {
   color: #7a5a30;
 }
 
+/* Queue: "Nächste Titel" divider label */
+[data-theme='middle-earth'] .queue-divider span {
+  color: #a07840 !important;
+}
+
+/* Queue: artist text visible on hover for inactive items */
+[data-theme='middle-earth'] .queue-item:hover .queue-item-artist,
+[data-theme='middle-earth'] .queue-item.context-active .queue-item-artist {
+  color: #e8c878;
+}
+
+/* AlbumDetail header: artist name readable */
+[data-theme='middle-earth'] .album-detail-artist,
+[data-theme='middle-earth'] .album-detail-artist-link {
+  color: #e8c878;
+}
+
+[data-theme='middle-earth'] .album-detail-artist-link:hover {
+  color: #f8e060;
+}
+
+/* ArtistDetail About: heading, bio text + "Mehr lesen" readable */
+[data-theme='middle-earth'] .np-card-title {
+  color: #6b4e2a;
+}
+
+[data-theme='middle-earth'] .np-bio-text {
+  color: #5a3e20;
+}
+
+[data-theme='middle-earth'] .np-bio-toggle {
+  color: #7a5228;
+}
+
 /* ─────────────────────────────────────────────────────────────
    Morpheus — Matrix Style
    ───────────────────────────────────────────────────────────── */
@@ -8281,19 +8311,19 @@ input[type="range"]:hover::-webkit-slider-thumb {
   --ctp-teal: #00f0f0;
   --ctp-yellow: #f0d000;
   /* O-piece  — yellow */
-  --ctp-mauve: #a020f0;
+  --ctp-mauve: #c070ff;
   /* T-piece  — purple */
-  --ctp-lavender: #a020f0;
-  --ctp-pink: #a020f0;
+  --ctp-lavender: #c070ff;
+  --ctp-pink: #c070ff;
   --ctp-green: #00d000;
   /* S-piece  — green  */
   --ctp-red: #f02000;
   /* Z-piece  — red    */
   --ctp-flamingo: #f02000;
   --ctp-maroon: #f02000;
-  --ctp-blue: #0060f0;
+  --ctp-blue: #4090ff;
   /* J-piece  — blue   */
-  --ctp-sapphire: #0060f0;
+  --ctp-sapphire: #4090ff;
   --ctp-peach: #f07800;
   /* L-piece  — orange */
   --ctp-rosewater: #f07800;
@@ -8315,7 +8345,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
   --text-primary: #ffffff;
   --text-secondary: #f0d000;
   /* O-piece yellow — like the score readout */
-  --text-muted: #3a3a6a;
+  --text-muted: #7878b8;
   --border: #1e1e48;
   --border-subtle: #0d0d22;
 
@@ -8343,7 +8373,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
 [data-theme='tetrastack'] .player-bar {
   border-top: 3px solid #00f0f0;
   box-shadow:
-    0 -2px 0 #a020f0,
+    0 -2px 0 #c070ff,
     0 -8px 24px rgba(0, 240, 240, 0.12);
 }
 
@@ -8395,7 +8425,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
 
 /* Album title in queue = T-piece purple */
 [data-theme='tetrastack'] .queue-meta-album {
-  color: #a020f0;
+  color: #c070ff;
 }
 
 /* Active queue item = I-piece left border */
@@ -8473,8 +8503,8 @@ input[type="range"]:hover::-webkit-slider-thumb {
 /* Artist pill links = J-piece blue */
 [data-theme='tetrastack'] .artist-ext-link:hover {
   background: rgba(0, 96, 240, 0.1);
-  color: #0060f0 !important;
-  border-color: rgba(0, 96, 240, 0.4) !important;
+  color: #4090ff !important;
+  border-color: rgba(64, 144, 255, 0.4) !important;
 }
 
 /* Now playing active track = Z-piece red accent */
@@ -8490,6 +8520,26 @@ input[type="range"]:hover::-webkit-slider-thumb {
   color: #f0d000;
 }
 
+/* Sidebar section labels */
+[data-theme='tetrastack'] .nav-section-label {
+  color: rgba(0, 240, 240, 0.45);
+}
+
+/* Queue tab buttons (Lyrics / Warteschlange) — inactive */
+[data-theme='tetrastack'] .queue-tab-btn {
+  color: #6060a8;
+}
+
+/* Queue: inactive song artist */
+[data-theme='tetrastack'] .queue-item-artist {
+  color: #6060a8;
+}
+
+/* Queue: "Nächste Titel" divider */
+[data-theme='tetrastack'] .queue-divider span {
+  color: #6060a8 !important;
+}
+
 /* ── The Book (Social Media) ────────────────────────────────── */
 [data-theme='the-book'] {
   color-scheme: light;
@@ -12138,11 +12188,6 @@ input[type="range"]:hover::-webkit-slider-thumb {
 /* Sidebar — iron plate lines + subtle red glow on active */
 [data-theme='horde'] .sidebar {
   background-color: #110300;
-  background-image: repeating-linear-gradient(180deg,
-      transparent 0px,
-      transparent 39px,
-      rgba(100, 20, 0, 0.18) 39px,
-      rgba(100, 20, 0, 0.18) 40px);
   border-right: 1px solid rgba(140, 40, 10, 0.35);
 }
 
@@ -12262,11 +12307,6 @@ input[type="range"]:hover::-webkit-slider-thumb {
 /* Sidebar — cathedral stone columns with gold right-border */
 [data-theme='alliance'] .sidebar {
   background-color: #040c18;
-  background-image: repeating-linear-gradient(180deg,
-      transparent 0px,
-      transparent 47px,
-      rgba(60, 100, 180, 0.14) 47px,
-      rgba(60, 100, 180, 0.14) 48px);
   border-right: 2px solid rgba(200, 170, 50, 0.30);
 }
 
@@ -12846,6 +12886,30 @@ input[type="range"]:hover::-webkit-slider-thumb {
   color: #6a5030;
 }
 
+/* Sidebar section labels (sky-blue bg needs light text) */
+[data-theme='toy-tale'] .nav-section-label {
+  color: rgba(200, 230, 255, 0.55);
+}
+
+/* Queue tab buttons (Lyrics / Warteschlange) — inactive */
+[data-theme='toy-tale'] .queue-tab-btn {
+  color: #b89060;
+}
+
+[data-theme='toy-tale'] .queue-tab-btn:hover {
+  color: #f0e8d8;
+}
+
+/* Queue: inactive song artist */
+[data-theme='toy-tale'] .queue-item-artist {
+  color: #9a7848;
+}
+
+/* Queue: "Nächste Titel" divider */
+[data-theme='toy-tale'] .queue-divider span {
+  color: #b89060 !important;
+}
+
 /* ─── North Park — South Park ─── */
 /* Construction paper flat aesthetic — paper-cream main, Colorado mountain-blue sidebar,
    Kenny orange accent, South Park sky blue player accents. Light, no dark mode. */