From c428d37e0ee6de237528c4f3f19c0d500b8d2a0e Mon Sep 17 00:00:00 2001 From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com> Date: Fri, 19 Jun 2026 13:57:08 +0200 Subject: [PATCH] =?UTF-8?q?Settings=20=E2=80=94=20own=20Audio=20categories?= =?UTF-8?q?=20+=20Queue=20Settings=20consolidation=20(#1130)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(settings): promote Normalization and Track transitions to own Audio categories Pull Normalization and Track transitions out of the combined Playback section into their own top-level SettingsSubSection categories, placed directly under Audio Output Device. Both follow the established reusable pattern (SettingsSubSection header + title-less SettingsGroup inside a single-group settings-card, so the frame-collapse CSS applies). - New TrackTransitionsBlock extracted from PlaybackBehaviorBlock; the latter now holds only the Queue behaviour toggle (slated to move to Personalisation). - NormalizationBlock's SettingsGroup is now title-less; the section header and description name it. - Split the single audio search-index row into three (Normalization / Track transitions / Playback) so crossfade/replaygain/lufs keywords focus the right section. * refactor(settings): consolidate Queue Settings under Personalisation, drop Audio Playback section Combine Queue Display Mode and Queue Toolbar under one 'Queue Settings' category in the Personalisation tab, and move the Queue behaviour toggle (preservePlayNextOrder) there from Audio. The now-empty Audio Playback section is removed. - New 'Queue Settings' SettingsSubSection holds three titled groups: Queue Display Mode, Queue behaviour, and (advanced-only) Queue Toolbar. The toolbar group keeps its reset, now via a new optional 'action' slot on SettingsGroup (+ .settings-group-title-action CSS). - Delete PlaybackBehaviorBlock; its single toggle is inlined. - Search index: drop the audio 'playbackTitle' row; the personalisation queue row now points at 'queueSettingsTitle' with merged keywords. - i18n: add settings.queueSettingsTitle to all 9 locales. * fix(settings): align queue-toolbar separator label and restore Advanced badge - QueueToolbarCustomizer: the separator row rendered a 1px rule where other rows have a 16px icon, so its label sat shifted left. Reserve the full 16px icon column (1px rule centred) so the label lines up. (Preexisting.) - SettingsGroup gains an optional 'advanced' flag rendering the Advanced badge; badge + action now share a right-aligned title-end slot (.settings-group-title-end), so the badge sits just left of the reset button. Restores the Advanced indicator the Queue Toolbar lost when it moved from a SettingsSubSection into a group. * fix(audio): hide the output-device category on macOS instead of showing a notice Playback is pinned to the system default on macOS, so the picker showed a notice explaining it does nothing there. Gate the whole Audio Output Device category out on macOS (`!IS_MACOS` in AudioTab) and drop the now-dead notice branch + the `audioOutputDeviceMacNotice` string from all 9 locales. The device-probe hook already short-circuits on macOS, so no work is wasted. * refactor(settings): box the sidebar customizer groups consistently The sidebar display toggles sat as a bare div and looked unfinished. Box them in a SettingsGroup, with the nav-item drag list in a second group. Render the groups directly in the sub-section content (no settings-card wrapper) — matching the other Personalisation customizers, which use bare SettingsGroups. Also drop the settings-card around Queue Settings for the same reason, so every Personalisation section's boxes share one width and inset instead of the card-wrapped ones sitting narrower/indented. * docs(settings): changelog, what's new, and credits for the settings reorg (#1130) Fold the Audio/Personalisation reorganization into the existing 'Settings — consistent grouped layout' changelog entry (now #1126 + #1130) and the matching What's New highlight, and add a consolidated settings- refactor line to the contributor credits. --- CHANGELOG.md | 5 +- WHATS_NEW.md | 1 + src/components/settings/AudioTab.tsx | 61 +++++++----- .../settings/PersonalisationTab.tsx | 69 +++++++------ .../settings/QueueToolbarCustomizer.tsx | 6 +- src/components/settings/SettingsGroup.tsx | 20 +++- src/components/settings/SidebarCustomizer.tsx | 34 ++++--- .../audio/AudioOutputDeviceSection.tsx | 84 +++++++--------- .../settings/audio/NormalizationBlock.tsx | 9 +- .../settings/audio/PlaybackBehaviorBlock.tsx | 98 ------------------- .../settings/audio/TrackTransitionsBlock.tsx | 90 +++++++++++++++++ src/components/settings/settingsTabs.ts | 5 +- src/config/settingsCredits.ts | 1 + src/hooks/useAudioDevicesProbe.ts | 2 +- src/locales/de/settings.ts | 2 +- src/locales/en/settings.ts | 2 +- src/locales/es/settings.ts | 2 +- src/locales/fr/settings.ts | 2 +- src/locales/nb/settings.ts | 2 +- src/locales/nl/settings.ts | 2 +- src/locales/ro/settings.ts | 2 +- src/locales/ru/settings.ts | 2 +- src/locales/zh/settings.ts | 2 +- src/styles/components/settings.css | 8 ++ 24 files changed, 281 insertions(+), 230 deletions(-) delete mode 100644 src/components/settings/audio/PlaybackBehaviorBlock.tsx create mode 100644 src/components/settings/audio/TrackTransitionsBlock.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index a5a182e9..d6afd83d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -47,11 +47,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Settings — consistent grouped layout -**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#1126](https://github.com/Psychotoxical/psysonic/pull/1126)** +**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#1126](https://github.com/Psychotoxical/psysonic/pull/1126) and PR [#1130](https://github.com/Psychotoxical/psysonic/pull/1130)** * The settings tabs now group related controls into clearly bordered, labelled panels for a more consistent, easier-to-scan layout — across Appearance, System, Audio, Storage, Library, Integrations, Music Network, Lyrics, Personalisation, Input and Themes. Standalone toggles are left as they were, and a few duplicated section titles are gone. * The **Lucky Mix menu** toggle moved from the Library tab to the sidebar customizer, alongside the other navigation toggles. * The **Native Hi-Res Playback** description now explains what turning it on actually does — play each track at its original sample rate, matching the audio device to the file, instead of resampling everything to 44.1 kHz. The old wording described the off state and read as if the option forced 44.1 kHz. +* **Settings → Audio**: **Normalization** and **Track transitions** are now their own top-level categories (directly under Audio Output Device) instead of being grouped together inside one *Playback* section. +* **Settings → Personalisation** gains a **Queue Settings** category that brings the queue display mode, the queue toolbar customizer, and the **Preserve "Play Next" order** toggle (moved here from Audio) together in one place. +* On macOS, the **Audio Output Device** category is now hidden rather than showing a notice — playback there always follows the system output device. ## Fixed diff --git a/WHATS_NEW.md b/WHATS_NEW.md index 6778a9b9..3d87cbac 100644 --- a/WHATS_NEW.md +++ b/WHATS_NEW.md @@ -28,6 +28,7 @@ Within each section, order by **user impact** (most noticeable first) — not PR ### Settings — tidier and easier to scan - Settings are grouped into clear, labelled panels so related options sit together — less hunting around. The **Native Hi-Res Playback** option now explains in plain language what it actually does. +- **Normalization** and **Track transitions** are now their own sections under **Settings → Audio**, and the queue options (display mode, toolbar, and Play-Next order) are gathered into one **Queue Settings** group under **Personalisation**. ## Fixed diff --git a/src/components/settings/AudioTab.tsx b/src/components/settings/AudioTab.tsx index 8c0e50d5..c8d360f8 100644 --- a/src/components/settings/AudioTab.tsx +++ b/src/components/settings/AudioTab.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { Music2, Sliders, Waves } from 'lucide-react'; +import { Blend, Gauge, Sliders, Volume2, Waves } from 'lucide-react'; import { useAuthStore } from '../../store/authStore'; import Equalizer from '../Equalizer'; import SettingsSubSection from '../SettingsSubSection'; @@ -8,11 +8,11 @@ import { SettingsGroup } from './SettingsGroup'; import { SettingsToggle } from './SettingsToggle'; import { effectiveLoudnessPreAnalysisAttenuationDb } from '../../utils/audio/loudnessPreAnalysisSlider'; import { useAudioDevicesProbe } from '../../hooks/useAudioDevicesProbe'; +import { IS_MACOS } from '../../utils/platform'; import { AudioOutputDeviceSection } from './audio/AudioOutputDeviceSection'; import { NormalizationBlock } from './audio/NormalizationBlock'; -import { Gauge } from 'lucide-react'; -import { PlaybackBehaviorBlock } from './audio/PlaybackBehaviorBlock'; import { PlaybackRateBlock } from './audio/PlaybackRateBlock'; +import { TrackTransitionsBlock } from './audio/TrackTransitionsBlock'; import { TrackPreviewsSection } from './audio/TrackPreviewsSection'; export function AudioTab() { @@ -37,15 +37,41 @@ export function AudioTab() { return ( <> - + {/* Output-device picker is hidden on macOS — the stream is pinned to the + system default there, so the whole category is gated out. */} + {!IS_MACOS && ( + + )} + + {/* Normalization — loudness levelling (own category) */} + } + > +
+ +
+ + + {/* Track transitions — crossfade / gapless / AutoDJ (own category) */} + } + > +
+ +
+ {/* Native Hi-Res Playback */} - {/* Replay Gain + Crossfade + Gapless */} - } - > -
- - -
- - ); diff --git a/src/components/settings/PersonalisationTab.tsx b/src/components/settings/PersonalisationTab.tsx index e06658ec..76750f54 100644 --- a/src/components/settings/PersonalisationTab.tsx +++ b/src/components/settings/PersonalisationTab.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next'; -import { Disc3, LayoutGrid, ListMusic, ListOrdered, ListTodo, PanelLeft, RotateCcw, Users } from 'lucide-react'; +import { Disc3, LayoutGrid, ListOrdered, ListTodo, PanelLeft, RotateCcw, Users } from 'lucide-react'; import { useArtistLayoutStore } from '../../store/artistLayoutStore'; import { useAuthStore } from '../../store/authStore'; import { useHomeStore } from '../../store/homeStore'; @@ -21,6 +21,9 @@ export function PersonalisationTab() { const { t } = useTranslation(); const queueDisplayMode = useAuthStore(s => s.queueDisplayMode); const setQueueDisplayMode = useAuthStore(s => s.setQueueDisplayMode); + const preservePlayNextOrder = useAuthStore(s => s.preservePlayNextOrder); + const setPreservePlayNextOrder = useAuthStore(s => s.setPreservePlayNextOrder); + const advancedSettingsEnabled = useAuthStore(s => s.advancedSettingsEnabled); return ( <> } > - - - + + {/* Queue Settings — display mode, queue behaviour and (advanced) the + toolbar customizer, grouped under one category. */} } > -
- + <> + {/* Three mutually exclusive modes — exactly one is always active, so turning one on turns the others off; the active one cannot be switched off directly (ignore the uncheck). */} @@ -117,29 +120,37 @@ export function PersonalisationTab() { onChange={c => { if (c) setQueueDisplayMode('timeline'); }} /> -
- - } - advanced - action={ - - } - > - - - + + + + + {advancedSettingsEnabled && ( + useQueueToolbarStore.getState().reset()} + data-tooltip={t('settings.queueToolbarReset')} + aria-label={t('settings.queueToolbarReset')} + > + + + } + > + + + )} + ) : ( -
+ // Reserve the same 16px icon column so the label lines up with the + // other rows; the 1px rule is centred within it. +
+
+
)} {label}