feat: split AutoDJ into a standalone playback feature (#1124)

* feat(playback): add transition-mode helper

Centralise the crossfade/AutoDJ/gapless mutual exclusivity in one place
instead of the scattered setter combinations across the toolbar, mini
player and settings. AutoDJ stays encoded as crossfade + trim-silence, so
the persisted flags and the audio engine are unchanged.

* feat(queue): split AutoDJ into its own toolbar button + playlist submenu

- AutoDJ becomes a standalone toolbar button (Blend icon) next to
  crossfade, driven by the shared transition-mode helper. The crossfade
  right-click popover drops the mode switch and keeps only the seconds
  slider.
- Save + load playlist collapse into one Playlist button opening a small
  submenu, freeing up toolbar space.
- queueToolbarStore gains a position-preserving rehydrate migration
  (legacy save/load -> playlist, autodj inserted after crossfade) with
  unit tests.
- Toolbar customizer and all 9 queue locales updated to match.

* feat(mini-player): standalone AutoDJ button, shared transition helper

Mirror the queue toolbar: AutoDJ gets its own Blend button, the crossfade
popover keeps only the seconds slider. The mini player now drives all
three transitions through a single additive `mini:set-transition-mode`
event handled by the shared helper, replacing the per-flag mini events.
Drop the now-dead crossfade-mode CSS.

* feat(settings): segmented track-transition picker, regroup playback

Replace the crossfade toggle + inner crossfade/AutoDJ switch with a single
Off | Gapless | Crossfade | AutoDJ segmented control (mirroring the
Normalization picker above), driven by the shared transition helper — the
mutual exclusivity now reads at a glance. Crossfade keeps its seconds
slider; AutoDJ shows its content-driven explainer. The block is regrouped
under "Track transitions" and "Queue behaviour" headings. Drops the now
unused crossfade/gapless description and not-available i18n keys across all
9 locales and adds the new transition strings.

* fix(queue): open the playlist submenu inward

The playlist submenu inherited the crossfade popover's right:0 anchor and,
sitting on the left of the toolbar, opened out under the main container.
Anchor it left:0 so it stays inside the queue panel. Update the toolbar
test for the new playlist submenu (save/load moved off the toolbar).

* feat(settings): box playback sub-sections into panels

Wrap Normalization, Track transitions and Queue behaviour each in their own
bordered panel with an accent uppercase header (new reusable .settings-group
classes), so the sections read as distinct blocks instead of one wall of
text. Drops the thin divider that separated them.

* docs: changelog, credits and what's new for AutoDJ standalone

Fold the standalone-AutoDJ changes into the existing AutoDJ entry in the
changelog and the in-app What's New, and add the credit (#1124).

src/store/queueToolbarStore.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest';
+import {
+  DEFAULT_QUEUE_TOOLBAR_BUTTONS,
+  migrateQueueToolbarButtons,
+  type QueueToolbarButtonConfig,
+} from './queueToolbarStore';
+
+const ids = (b: QueueToolbarButtonConfig[]) => b.map(x => x.id);
+const vis = (b: QueueToolbarButtonConfig[], id: string) => b.find(x => x.id === id)?.visible;
+
+describe('migrateQueueToolbarButtons', () => {
+  it('passes the current default through unchanged', () => {
+    expect(migrateQueueToolbarButtons(DEFAULT_QUEUE_TOOLBAR_BUTTONS)).toEqual(DEFAULT_QUEUE_TOOLBAR_BUTTONS);
+  });
+
+  it('collapses legacy save + load into a single playlist button at the earlier position', () => {
+    const legacy = [
+      { id: 'shuffle', visible: true },
+      { id: 'save', visible: true },
+      { id: 'load', visible: true },
+      { id: 'share', visible: true },
+      { id: 'clear', visible: true },
+      { id: 'separator', visible: true },
+      { id: 'gapless', visible: true },
+      { id: 'crossfade', visible: true },
+      { id: 'infinite', visible: true },
+    ];
+    const out = migrateQueueToolbarButtons(legacy);
+    expect(ids(out)).toEqual([
+      'shuffle', 'playlist', 'share', 'clear', 'separator', 'gapless', 'crossfade', 'autodj', 'infinite',
+    ]);
+  });
+
+  it('keeps playlist visible if either legacy save or load was visible', () => {
+    const out = migrateQueueToolbarButtons([
+      { id: 'save', visible: false },
+      { id: 'load', visible: true },
+    ]);
+    expect(vis(out, 'playlist')).toBe(true);
+
+    const hidden = migrateQueueToolbarButtons([
+      { id: 'save', visible: false },
+      { id: 'load', visible: false },
+    ]);
+    expect(vis(hidden, 'playlist')).toBe(false);
+  });
+
+  it('inserts autodj right after crossfade and inherits its visibility', () => {
+    const out = migrateQueueToolbarButtons([
+      { id: 'crossfade', visible: false },
+      { id: 'infinite', visible: true },
+    ]);
+    const i = ids(out);
+    expect(i.indexOf('autodj')).toBe(i.indexOf('crossfade') + 1);
+    expect(vis(out, 'autodj')).toBe(false);
+  });
+
+  it('preserves a customised order', () => {
+    const out = migrateQueueToolbarButtons([
+      { id: 'crossfade', visible: true },
+      { id: 'shuffle', visible: true },
+      { id: 'playlist', visible: true },
+    ]);
+    // autodj follows crossfade, leading items keep their order, missing defaults appended.
+    expect(ids(out).slice(0, 4)).toEqual(['crossfade', 'autodj', 'shuffle', 'playlist']);
+    // every default id is present exactly once
+    for (const d of DEFAULT_QUEUE_TOOLBAR_BUTTONS) {
+      expect(ids(out).filter(x => x === d.id)).toHaveLength(1);
+    }
+  });
+
+  it('drops corrupt entries and tolerates non-array input', () => {
+    const out = migrateQueueToolbarButtons([
+      null,
+      { id: 'shuffle', visible: true },
+      { id: 123, visible: true },
+      { id: 'bogus', visible: true },
+      { visible: true },
+    ]);
+    expect(ids(out)).toContain('shuffle');
+    expect(ids(out)).not.toContain('bogus');
+    // unknown/corrupt gone, defaults filled in
+    expect(ids(out).sort()).toEqual(DEFAULT_QUEUE_TOOLBAR_BUTTONS.map(b => b.id).sort());
+
+    expect(migrateQueueToolbarButtons(undefined)).toEqual(DEFAULT_QUEUE_TOOLBAR_BUTTONS);
+  });
+});

src/store/queueToolbarStore.ts

@@ -3,13 +3,13 @@ import { persist } from 'zustand/middleware';
 
 export type QueueToolbarButtonId =
   | 'shuffle'
-  | 'save'
-  | 'load'
+  | 'playlist'
   | 'share'
   | 'clear'
   | 'separator'
   | 'gapless'
   | 'crossfade'
+  | 'autodj'
   | 'infinite';
 
 export interface QueueToolbarButtonConfig {
@@ -18,21 +18,81 @@ export interface QueueToolbarButtonConfig {
 }
 
 /**
- * Default order and visibility for queue toolbar buttons.
- * Matches the historical layout in QueuePanel.tsx.
+ * Default order and visibility for queue toolbar buttons. `playlist` is a
+ * submenu hosting save + load; `crossfade` and `autodj` sit next to each other
+ * as the two crossfade-style transition modes.
  */
 export const DEFAULT_QUEUE_TOOLBAR_BUTTONS: QueueToolbarButtonConfig[] = [
   { id: 'shuffle',   visible: true },
-  { id: 'save',      visible: true },
-  { id: 'load',      visible: true },
+  { id: 'playlist',  visible: true },
   { id: 'share',     visible: true },
   { id: 'clear',     visible: true },
   { id: 'separator', visible: true },
   { id: 'gapless',   visible: true },
   { id: 'crossfade', visible: true },
+  { id: 'autodj',    visible: true },
   { id: 'infinite',  visible: true },
 ];
 
+/** Pre-split ids that still live in persisted configs from older versions. */
+type LegacyEntry = { id: QueueToolbarButtonId | 'save' | 'load'; visible: boolean };
+
+/**
+ * Bring a persisted button array up to the current id set, preserving the
+ * user's order and visibility:
+ *   1. drop corrupt entries,
+ *   2. collapse legacy `save` + `load` into a single `playlist` button at the
+ *      earlier of the two positions (visible if either was visible),
+ *   3. drop anything not in the current id set,
+ *   4. insert the new `autodj` button right after `crossfade`, and
+ *   5. append any still-missing defaults.
+ */
+export function migrateQueueToolbarButtons(raw: unknown): QueueToolbarButtonConfig[] {
+  const arr = Array.isArray(raw) ? raw : [];
+  const cleaned = arr.filter(
+    (b): b is LegacyEntry =>
+      b != null && typeof b.id === 'string' && typeof (b as LegacyEntry).visible === 'boolean',
+  );
+
+  // Legacy save + load -> single playlist button.
+  const legacySaveLoad = cleaned.filter(b => b.id === 'save' || b.id === 'load');
+  const alreadyHasPlaylist = cleaned.some(b => b.id === 'playlist');
+  let collapsed: LegacyEntry[] = cleaned;
+  if (legacySaveLoad.length > 0 && !alreadyHasPlaylist) {
+    const playlistVisible = legacySaveLoad.some(b => b.visible);
+    let inserted = false;
+    collapsed = [];
+    for (const b of cleaned) {
+      if (b.id === 'save' || b.id === 'load') {
+        if (!inserted) { collapsed.push({ id: 'playlist', visible: playlistVisible }); inserted = true; }
+        continue;
+      }
+      collapsed.push(b);
+    }
+  }
+
+  // Keep only current ids (also drops any leftover save/load).
+  const knownIds = new Set<QueueToolbarButtonId>(DEFAULT_QUEUE_TOOLBAR_BUTTONS.map(b => b.id));
+  let safe = collapsed.filter(
+    (b): b is QueueToolbarButtonConfig => knownIds.has(b.id as QueueToolbarButtonId),
+  );
+
+  // Insert the new autodj button next to an existing crossfade, inheriting its
+  // visibility (the upgrade case). When crossfade isn't present yet (fresh or
+  // corrupt input) we leave autodj to the default-fill step below so it lands
+  // in its canonical position instead of at the front.
+  const cfIdx = safe.findIndex(b => b.id === 'crossfade');
+  if (cfIdx >= 0 && !safe.some(b => b.id === 'autodj')) {
+    const autodj: QueueToolbarButtonConfig = { id: 'autodj', visible: safe[cfIdx].visible };
+    safe = [...safe.slice(0, cfIdx + 1), autodj, ...safe.slice(cfIdx + 1)];
+  }
+
+  // Append any default still missing (fresh install, or pruned ids).
+  const seen = new Set(safe.map(b => b.id));
+  const missing = DEFAULT_QUEUE_TOOLBAR_BUTTONS.filter(b => !seen.has(b.id));
+  return missing.length > 0 ? [...safe, ...missing] : safe;
+}
+
 interface QueueToolbarStore {
   buttons: QueueToolbarButtonConfig[];
   setButtons: (buttons: QueueToolbarButtonConfig[]) => void;
@@ -57,13 +117,7 @@ export const useQueueToolbarStore = create<QueueToolbarStore>()(
       name: 'psysonic_queue_toolbar',
       onRehydrateStorage: () => (state) => {
         if (!state) return;
-        // Sanitize: remove null/corrupt entries
-        const knownIds = new Set(DEFAULT_QUEUE_TOOLBAR_BUTTONS.map(b => b.id));
-        const safe = (state.buttons ?? [])
-          .filter((b): b is QueueToolbarButtonConfig => b != null && typeof b.id === 'string' && knownIds.has(b.id as QueueToolbarButtonId));
-        const seen = new Set(safe.map(b => b.id));
-        const missing = DEFAULT_QUEUE_TOOLBAR_BUTTONS.filter(b => !seen.has(b.id));
-        state.buttons = missing.length > 0 ? [...safe, ...missing] : safe;
+        state.buttons = migrateQueueToolbarButtons(state.buttons);
       },
     }
   )