itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(genres): replace icon cards with tag-cloud pills

Browse Source 
The previous genre grid mounted ~60 Lucide SVG cards per page (with
Watermark icon, gradient bg, infinite scroll) and froze the WebKitGTK
renderer for several seconds on libraries with many genres.

The new layout flows all genres as compact pills with log-scaled font
size based on albumCount — one <span>-equivalent button per genre, no
SVGs, no pagination needed. Pill colour is dimly tinted by the same
deterministic hash-to-CTP palette used before; text picks up the genre
colour on hover only, so the page reads calmly at rest.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-25 23:57:44 +02:00
parent 9306f0af2c
commit d31291a463
2 changed files with 64 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+29 -43
View File
@@ -7144,55 +7144,41 @@ html.no-compositing .fs-seekbar-played {
justify-content: flex-end;
}
/* ─ Genre Cards ─ */
.genre-card {
aspect-ratio: 1;
border-radius: 12px;
padding: 0.9rem;
cursor: pointer;
position: relative;
overflow: hidden;
/* ─ Genre Tag Cloud ─ */
.genre-cloud {
display: flex;
flex-direction: column;
justify-content: flex-end;
background:
linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, transparent 70%),
var(--genre-color, var(--accent));
transition: transform 0.15s ease, box-shadow 0.15s ease;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem 0.6rem;
padding-bottom: 1rem;
}
.genre-pill {
appearance: none;
border: 1px solid color-mix(in srgb, var(--genre-color, var(--accent)) 22%, transparent);
background: color-mix(in srgb, var(--genre-color, var(--accent)) 6%, transparent);
color: var(--text-primary);
border-radius: 999px;
padding: 0.28em 0.78em;
cursor: pointer;
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
user-select: none;
font-family: inherit;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.genre-card:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
.genre-pill:hover {
background: color-mix(in srgb, var(--genre-color, var(--accent)) 14%, transparent);
border-color: color-mix(in srgb, var(--genre-color, var(--accent)) 45%, transparent);
color: var(--genre-color, var(--accent));
transform: translateY(-1px);
}
.genre-card-watermark {
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-55%);
opacity: 0.22;
color: #fff;
pointer-events: none;
}
.genre-card-name {
font-size: 0.86rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.25;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.genre-card-count {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.85);
margin: 0.2rem 0 0;
.genre-pill:focus-visible {
outline: 2px solid var(--genre-color, var(--accent));
outline-offset: 2px;
}
/* ─ Random Landing ─ */