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>

src/components/QueuePanel.test.tsx

@@ -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', () => {

src/config/settingsCredits.ts

@@ -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)',
     ],
   },
   {

src/locales/de/queue.ts

@@ -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',

src/locales/en/queue.ts

@@ -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',

src/locales/es/queue.ts

@@ -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',

src/locales/fr/queue.ts

@@ -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',

src/locales/nb/queue.ts

@@ -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',

src/locales/nl/queue.ts

@@ -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',

src/locales/ro/queue.ts

@@ -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',

src/locales/ru/queue.ts

@@ -13,7 +13,7 @@ export const queue = {
   appendToQueue: 'Добавить в очередь',
   delete: 'Удалить',
   deleteConfirm: 'Удалить плейлист «{{name}}»?',
-  clear: 'Очистить',
+  clear: 'Очистить очередь',
   shuffle: 'Перемешать',
   gapless: 'Без пауз',
   crossfade: 'Кроссфейд',

src/locales/zh/queue.ts

@@ -13,7 +13,7 @@ export const queue = {
   appendToQueue: '追加到队列',
   delete: '删除',
   deleteConfirm: '删除播放列表 "{{name}}"？',
-  clear: '清空',
+  clear: '清空队列',
   shuffle: '随机打乱队列',
   gapless: '无缝播放',
   crossfade: '交叉淡入淡出',

src/styles/components/settings.css

@@ -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;
+}
+