feat(settings): dim disabled toggle rows + rename Clear → Clear queue (#778)

* feat(settings): dim disabled toggle rows + rename Clear → Clear queue

* Settings toggle rows (`.settings-toggle-row`, `.sidebar-customizer-row`) dim
  their non-toggle content to 0.6 opacity when the switch is off. Driven by a
  single `:has(.toggle-switch input:not(:checked):not(:disabled))` rule so it
  applies across every Settings tab without per-row markup. Mutex-disabled
  toggles (Crossfade/Gapless) are excluded to avoid stacking with the existing
  inline 0.45 dim on their row.
* Queue toolbar "Clear" button now reads "Clear queue" in all 9 locales for
  parity with "Shuffle queue" and to distinguish from playlist clear/delete.

Adopted from @kveld9's PR #558 — cherry-picked the spirit, rewrote the dim as
a single global selector instead of three inline-styled customizer rows, and
extended the rename to the Romanian locale that landed after #558 was opened.

Co-Authored-By: kveld9 <179108235+kveld9@users.noreply.github.com>

* docs(changelog,credits): credit @kveld9 for #778

Co-Authored-By: kveld9 <179108235+kveld9@users.noreply.github.com>

---------

Co-authored-by: kveld9 <179108235+kveld9@users.noreply.github.com>
This commit is contained in:
Frank Stellmacher
2026-05-18 15:21:45 +02:00
committed by GitHub
parent 9f10d8fafb
commit 562218f447
13 changed files with 31 additions and 10 deletions
+11
View File
@@ -14,6 +14,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
> **📦 Version jump 1.34.x → 1.40.0:** The 1.34.x patch series was bumped a lot as each small feature landed. 1.40.0 consolidates the last few weeks of work — macOS signing + auto-updater, the Device-Sync overhaul, theme work and contrast audits — into a single coherent release. The next major bump (2.0.0) is planned once Windows code-signing + Windows auto-updater are active as well.
## [1.47.0]
### Settings + Queue polish
**By [@kveld9](https://github.com/kveld9) + [@Psychotoxical](https://github.com/Psychotoxical), adopted from PR [#558](https://github.com/Psychotoxical/psysonic/pull/558), rewritten in PR [#778](https://github.com/Psychotoxical/psysonic/pull/778)**
* Settings toggle rows dim non-toggle content to 0.6 opacity when their switch is off; mutex-disabled rows (Crossfade/Gapless) unchanged.
* Queue toolbar `Clear``Clear queue` across all 9 locales.
## [1.46.0] - 2026-05-18
> **🙏 Special thanks to [@zz5zz](https://github.com/zz5zz)** for his tireless quirk-spotting and bug reports on the [Psysonic Discord](https://discord.gg/AMnDRErm4u) — several of the polish fixes in this release landed directly off the back of his messages.
+1 -1
View File
@@ -112,7 +112,7 @@ describe('QueuePanel — toolbar', () => {
expect(getByLabelText('Save Playlist')).toBeInTheDocument();
expect(getByLabelText('Load Playlist')).toBeInTheDocument();
expect(getByLabelText('Copy queue share link')).toBeInTheDocument();
expect(getByLabelText('Clear')).toBeInTheDocument();
expect(getByLabelText('Clear queue')).toBeInTheDocument();
});
it('Shuffle button is disabled when the queue has fewer than 2 tracks', () => {
+1
View File
@@ -176,6 +176,7 @@ const CONTRIBUTOR_ENTRIES = [
'Playlist page layout — per-element visibility toggles (Add Songs, Import CSV, Download ZIP, Cache Offline, Suggestions) under Settings → Personalisation (PR #556)',
'Player bar layout — per-control visibility toggles (Star rating, Favorite, Last.fm love, Equalizer, Mini player) under Settings → Personalisation (PR #627)',
'Queue panel — persist header duration mode (total / remaining / ETA) across app restarts (PR #625)',
'Settings: dim disabled toggle rows; Queue toolbar "Clear" → "Clear queue" rename across 9 locales (adopted from PR #558, rewritten in PR #778)',
],
},
{
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: 'An Warteschlange anhängen',
delete: 'Löschen',
deleteConfirm: 'Playlist "{{name}}" löschen?',
clear: 'Leeren',
clear: 'Warteschlange leeren',
shuffle: 'Warteschlange mischen',
gapless: 'Nahtlos',
crossfade: 'Crossfade',
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: 'Append to queue',
delete: 'Delete',
deleteConfirm: 'Delete playlist "{{name}}"?',
clear: 'Clear',
clear: 'Clear queue',
shuffle: 'Shuffle queue',
gapless: 'Gapless',
crossfade: 'Crossfade',
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: 'Agregar a cola',
delete: 'Eliminar',
deleteConfirm: '¿Eliminar lista "{{name}}"?',
clear: 'Limpiar',
clear: 'Limpiar cola',
shuffle: 'Mezclar cola',
gapless: 'Gapless',
crossfade: 'Crossfade',
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: 'Ajouter à la file',
delete: 'Supprimer',
deleteConfirm: 'Supprimer la liste « {{name}} » ?',
clear: 'Vider',
clear: 'Vider la file',
shuffle: 'Mélanger la file',
gapless: 'Sans blanc',
crossfade: 'Fondu',
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: 'Legg til i kø',
delete: 'Slett',
deleteConfirm: 'Slett spillelisten "{{name}}"?',
clear: 'Fjern',
clear: 'Tøm kø',
shuffle: 'Bland kø',
gapless: 'Uten mellomrom',
crossfade: 'Crossfade',
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: 'Toevoegen aan wachtrij',
delete: 'Verwijderen',
deleteConfirm: 'Afspeellijst "{{name}}" verwijderen?',
clear: 'Leegmaken',
clear: 'Wachtrij leegmaken',
shuffle: 'Wachtrij shufflen',
gapless: 'Naadloos',
crossfade: 'Overgang',
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: 'Adaugă la coadă',
delete: 'Șterge',
deleteConfirm: 'Șterge playlist "{{name}}"?',
clear: 'Golește',
clear: 'Golește coada',
shuffle: 'Amestecă coada',
gapless: 'Gapless',
crossfade: 'Crossfade',
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: 'Добавить в очередь',
delete: 'Удалить',
deleteConfirm: 'Удалить плейлист «{{name}}»?',
clear: 'Очистить',
clear: 'Очистить очередь',
shuffle: 'Перемешать',
gapless: 'Без пауз',
crossfade: 'Кроссфейд',
+1 -1
View File
@@ -13,7 +13,7 @@ export const queue = {
appendToQueue: '追加到队列',
delete: '删除',
deleteConfirm: '删除播放列表 "{{name}}"',
clear: '清空',
clear: '清空队列',
shuffle: '随机打乱队列',
gapless: '无缝播放',
crossfade: '交叉淡入淡出',
+9
View File
@@ -520,3 +520,12 @@
color: var(--text-secondary);
}
/* Dim the non-toggle content of a settings row when its toggle is off.
* `:not(:disabled)` excludes mutex-disabled toggles (e.g. Crossfade/Gapless)
* whose row already carries an inline opacity — avoids dim-stacking. */
.settings-toggle-row:has(.toggle-switch input:not(:checked):not(:disabled)) > *:not(.toggle-switch),
.sidebar-customizer-row:has(.toggle-switch input:not(:checked):not(:disabled)) > *:not(.toggle-switch) {
opacity: 0.6;
transition: opacity 150ms ease;
}