mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
fix(ui): icon updates, remove mic button, theme fixes
- 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>
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
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 { SubsonicSong, buildCoverArtUrl } from '../api/subsonic';
|
||||||
import CachedImage from './CachedImage';
|
import CachedImage from './CachedImage';
|
||||||
import CoverLightbox from './CoverLightbox';
|
import CoverLightbox from './CoverLightbox';
|
||||||
@@ -243,7 +243,7 @@ export default function AlbumHeader({
|
|||||||
aria-label={t('albumDetail.artistBio')}
|
aria-label={t('albumDetail.artistBio')}
|
||||||
data-tooltip={t('albumDetail.artistBio')}
|
data-tooltip={t('albumDetail.artistBio')}
|
||||||
>
|
>
|
||||||
<ExternalLink size={16} />
|
<Highlighter size={16} />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{downloadProgress !== null ? (
|
{downloadProgress !== null ? (
|
||||||
@@ -313,7 +313,7 @@ export default function AlbumHeader({
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button className="btn btn-ghost" id="album-bio-btn" onClick={onBio}>
|
<button className="btn btn-ghost" id="album-bio-btn" onClick={onBio}>
|
||||||
<ExternalLink size={16} /> {t('albumDetail.artistBio')}
|
<Highlighter size={16} /> {t('albumDetail.artistBio')}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{downloadProgress !== null ? (
|
{downloadProgress !== null ? (
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
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 { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
|
||||||
import { usePlayerStore, songToTrack } from '../store/playerStore';
|
import { usePlayerStore, songToTrack } from '../store/playerStore';
|
||||||
import { useAuthStore } from '../store/authStore';
|
import { useAuthStore } from '../store/authStore';
|
||||||
@@ -126,7 +126,7 @@ export default function LiveSearch() {
|
|||||||
data-tooltip-pos="bottom"
|
data-tooltip-pos="bottom"
|
||||||
aria-label={t('search.advanced')}
|
aria-label={t('search.advanced')}
|
||||||
>
|
>
|
||||||
<SlidersVertical size={14} />
|
<TextSearch size={14} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
|
|||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
import {
|
import {
|
||||||
Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
|
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';
|
} from 'lucide-react';
|
||||||
import { usePlayerStore } from '../store/playerStore';
|
import { usePlayerStore } from '../store/playerStore';
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
import { useShallow } from 'zustand/react/shallow';
|
||||||
@@ -298,16 +298,6 @@ export default function PlayerBar() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</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 */}
|
{/* EQ Button */}
|
||||||
<button
|
<button
|
||||||
className={`player-btn player-btn-sm player-eq-btn ${eqOpen ? 'active' : ''}`}
|
className={`player-btn player-btn-sm player-eq-btn ${eqOpen ? 'active' : ''}`}
|
||||||
|
|||||||
@@ -1135,6 +1135,8 @@
|
|||||||
|
|
||||||
.album-detail-badge {
|
.album-detail-badge {
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
|
background: var(--accent);
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.album-detail-back {
|
.album-detail-back {
|
||||||
|
|||||||
+89
-25
@@ -6516,11 +6516,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
/* Old Shire craftsmanship — vertical wood grain, warm hearthlight from right edge */
|
/* Old Shire craftsmanship — vertical wood grain, warm hearthlight from right edge */
|
||||||
[data-theme='middle-earth'] .sidebar {
|
[data-theme='middle-earth'] .sidebar {
|
||||||
background-color: #221608;
|
background-color: #221608;
|
||||||
background-image:
|
background-image: linear-gradient(180deg, #261a0a 0%, #1e1408 55%, #241c0e 100%);
|
||||||
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%);
|
|
||||||
border-right: 2px solid rgba(200, 160, 40, 0.28);
|
border-right: 2px solid rgba(200, 160, 40, 0.28);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset -3px 0 12px rgba(200, 140, 30, 0.10),
|
inset -3px 0 12px rgba(200, 140, 30, 0.10),
|
||||||
@@ -6982,6 +6978,40 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
color: #7a5a30;
|
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
|
Morpheus — Matrix Style
|
||||||
───────────────────────────────────────────────────────────── */
|
───────────────────────────────────────────────────────────── */
|
||||||
@@ -8281,19 +8311,19 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
--ctp-teal: #00f0f0;
|
--ctp-teal: #00f0f0;
|
||||||
--ctp-yellow: #f0d000;
|
--ctp-yellow: #f0d000;
|
||||||
/* O-piece — yellow */
|
/* O-piece — yellow */
|
||||||
--ctp-mauve: #a020f0;
|
--ctp-mauve: #c070ff;
|
||||||
/* T-piece — purple */
|
/* T-piece — purple */
|
||||||
--ctp-lavender: #a020f0;
|
--ctp-lavender: #c070ff;
|
||||||
--ctp-pink: #a020f0;
|
--ctp-pink: #c070ff;
|
||||||
--ctp-green: #00d000;
|
--ctp-green: #00d000;
|
||||||
/* S-piece — green */
|
/* S-piece — green */
|
||||||
--ctp-red: #f02000;
|
--ctp-red: #f02000;
|
||||||
/* Z-piece — red */
|
/* Z-piece — red */
|
||||||
--ctp-flamingo: #f02000;
|
--ctp-flamingo: #f02000;
|
||||||
--ctp-maroon: #f02000;
|
--ctp-maroon: #f02000;
|
||||||
--ctp-blue: #0060f0;
|
--ctp-blue: #4090ff;
|
||||||
/* J-piece — blue */
|
/* J-piece — blue */
|
||||||
--ctp-sapphire: #0060f0;
|
--ctp-sapphire: #4090ff;
|
||||||
--ctp-peach: #f07800;
|
--ctp-peach: #f07800;
|
||||||
/* L-piece — orange */
|
/* L-piece — orange */
|
||||||
--ctp-rosewater: #f07800;
|
--ctp-rosewater: #f07800;
|
||||||
@@ -8315,7 +8345,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
--text-primary: #ffffff;
|
--text-primary: #ffffff;
|
||||||
--text-secondary: #f0d000;
|
--text-secondary: #f0d000;
|
||||||
/* O-piece yellow — like the score readout */
|
/* O-piece yellow — like the score readout */
|
||||||
--text-muted: #3a3a6a;
|
--text-muted: #7878b8;
|
||||||
--border: #1e1e48;
|
--border: #1e1e48;
|
||||||
--border-subtle: #0d0d22;
|
--border-subtle: #0d0d22;
|
||||||
|
|
||||||
@@ -8343,7 +8373,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
[data-theme='tetrastack'] .player-bar {
|
[data-theme='tetrastack'] .player-bar {
|
||||||
border-top: 3px solid #00f0f0;
|
border-top: 3px solid #00f0f0;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 -2px 0 #a020f0,
|
0 -2px 0 #c070ff,
|
||||||
0 -8px 24px rgba(0, 240, 240, 0.12);
|
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 */
|
/* Album title in queue = T-piece purple */
|
||||||
[data-theme='tetrastack'] .queue-meta-album {
|
[data-theme='tetrastack'] .queue-meta-album {
|
||||||
color: #a020f0;
|
color: #c070ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Active queue item = I-piece left border */
|
/* Active queue item = I-piece left border */
|
||||||
@@ -8473,8 +8503,8 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
/* Artist pill links = J-piece blue */
|
/* Artist pill links = J-piece blue */
|
||||||
[data-theme='tetrastack'] .artist-ext-link:hover {
|
[data-theme='tetrastack'] .artist-ext-link:hover {
|
||||||
background: rgba(0, 96, 240, 0.1);
|
background: rgba(0, 96, 240, 0.1);
|
||||||
color: #0060f0 !important;
|
color: #4090ff !important;
|
||||||
border-color: rgba(0, 96, 240, 0.4) !important;
|
border-color: rgba(64, 144, 255, 0.4) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Now playing active track = Z-piece red accent */
|
/* Now playing active track = Z-piece red accent */
|
||||||
@@ -8490,6 +8520,26 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
color: #f0d000;
|
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) ────────────────────────────────── */
|
/* ── The Book (Social Media) ────────────────────────────────── */
|
||||||
[data-theme='the-book'] {
|
[data-theme='the-book'] {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
@@ -12138,11 +12188,6 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
/* Sidebar — iron plate lines + subtle red glow on active */
|
/* Sidebar — iron plate lines + subtle red glow on active */
|
||||||
[data-theme='horde'] .sidebar {
|
[data-theme='horde'] .sidebar {
|
||||||
background-color: #110300;
|
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);
|
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 */
|
/* Sidebar — cathedral stone columns with gold right-border */
|
||||||
[data-theme='alliance'] .sidebar {
|
[data-theme='alliance'] .sidebar {
|
||||||
background-color: #040c18;
|
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);
|
border-right: 2px solid rgba(200, 170, 50, 0.30);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -12846,6 +12886,30 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
|||||||
color: #6a5030;
|
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 ─── */
|
/* ─── North Park — South Park ─── */
|
||||||
/* Construction paper flat aesthetic — paper-cream main, Colorado mountain-blue sidebar,
|
/* Construction paper flat aesthetic — paper-cream main, Colorado mountain-blue sidebar,
|
||||||
Kenny orange accent, South Park sky blue player accents. Light, no dark mode. */
|
Kenny orange accent, South Park sky blue player accents. Light, no dark mode. */
|
||||||
|
|||||||
Reference in New Issue
Block a user