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

feat(queue): collapse ReplayGain into a click-to-expand badge

Browse Source 
Per @cucadmuh's feedback: the presence of ReplayGain matters more than
the actual numbers. The tech bar now shows a small 'RG' pill on line 1
whenever the track has any RG metadata; hovering reveals the values via
tooltip, clicking persistently expands the second line.

- Source icon stays inline before the format string (was getting
  separated from FLAC by the centred stack layout)
- Pill uses --accent-tinted color-mix so it adapts to every theme
- ChevronDown rotates on expand for a clear affordance
- New persisted state: themeStore.expandReplayGain (default collapsed)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-19 12:34:52 +02:00
parent 6456f13bde
commit e07ef0ebf1
3 changed files with 86 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/layout.css
+42 -3
View File
@@ -1725,9 +1725,10 @@
text-overflow: ellipsis;
}
/* Two-line layout: base info on top, ReplayGain underneath. The stack
wraps both spans so the source icon stays vertically centered next to
the whole text block. */
/* Two-line layout: base info + RG badge on top, optional ReplayGain
values underneath when the badge is expanded. The stack wraps both
rows so the source icon stays vertically centered next to the whole
text block. */
.queue-current-tech-stack {
min-width: 0;
display: flex;
@@ -1736,6 +1737,44 @@
gap: 1px;
}
.queue-current-tech-row {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* Pill-shaped toggle that signals "this track has ReplayGain metadata"
without committing screen space to the numbers — values appear in the
tooltip and on the second line when expanded. */
.queue-current-tech-rg-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 5px 1px 6px;
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
border-radius: 999px;
font: inherit;
font-size: 8px;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.queue-current-tech-rg-badge:hover {
background: color-mix(in srgb, var(--accent) 22%, transparent);
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.queue-current-tech-rg-badge svg {
transition: transform 0.18s ease;
}
.queue-current-tech-rg-badge--open svg {
transform: rotate(180deg);
}
.queue-current-tech-rg {
min-width: 0;
max-width: 100%;