feat(sidebar): add split Mix navigation mode with separate sidebar entries

Extract ALL_NAV_ITEMS to src/config/navItems.ts and add randomMix/randomAlbums
nav items. A new toggle in Settings switches between a single "Build a Mix" hub
and separate "Random Mix" / "Random Albums" sidebar entries (randomNavMode in
authStore). Fixes reorder crash caused by hidden items being overwritten with
undefined during the merge step.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package-lock.json

@@ -1033,9 +1033,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1050,9 +1047,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1067,9 +1061,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1084,9 +1075,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1101,9 +1089,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1118,9 +1103,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1135,9 +1117,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1152,9 +1131,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1169,9 +1145,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1186,9 +1159,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1203,9 +1173,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1220,9 +1187,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1237,9 +1201,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1463,9 +1424,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -1483,9 +1441,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -1503,9 +1458,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -1523,9 +1475,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [
@@ -1543,9 +1492,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0 OR MIT",
       "optional": true,
       "os": [

src/components/Sidebar.tsx

@@ -9,33 +9,15 @@ import { useSidebarStore } from '../store/sidebarStore';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
-  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3,
-  PanelLeftClose, PanelLeft, HelpCircle, AudioLines, HardDriveDownload, Tags, ListMusic, Cast,
-  ChevronDown, Check, Music2, TrendingUp, FolderOpen, X, Wand2, ChevronRight, PlayCircle, HardDriveUpload,
+  Settings,
+  PanelLeftClose, PanelLeft, AudioLines, HardDriveDownload, HardDriveUpload,
+  ChevronDown, Check, Music2, X, ChevronRight, PlayCircle,
 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';
 import { getPlaylists } from '../api/subsonic';
 import { usePlaylistStore } from '../store/playlistStore';
-
-// All configurable nav items — order and visibility controlled by sidebarStore.
-// Exported so Settings can render the same item metadata.
-export const ALL_NAV_ITEMS: Record<string, { icon: React.ElementType; labelKey: string; to: string; section: 'library' | 'system' }> = {
-  mainstage:    { icon: Disc3,      labelKey: 'sidebar.mainstage',    to: '/',              section: 'library' },
-  newReleases:  { icon: Radio,      labelKey: 'sidebar.newReleases',  to: '/new-releases',  section: 'library' },
-  allAlbums:    { icon: Music4,     labelKey: 'sidebar.allAlbums',    to: '/albums',        section: 'library' },
-  randomPicker: { icon: Wand2,      labelKey: 'sidebar.randomPicker', to: '/random',        section: 'library' },
-  artists:      { icon: Users,      labelKey: 'sidebar.artists',      to: '/artists',       section: 'library' },
-  genres:       { icon: Tags,       labelKey: 'sidebar.genres',       to: '/genres',        section: 'library' },
-  favorites:    { icon: Heart,       labelKey: 'sidebar.favorites',    to: '/favorites',      section: 'library' },
-  playlists:    { icon: ListMusic,   labelKey: 'sidebar.playlists',    to: '/playlists',      section: 'library' },
-  mostPlayed:   { icon: TrendingUp,  labelKey: 'sidebar.mostPlayed',   to: '/most-played',    section: 'library' },
-  radio:        { icon: Cast,        labelKey: 'sidebar.radio',        to: '/radio',          section: 'library' },
-  folderBrowser: { icon: FolderOpen,      labelKey: 'sidebar.folderBrowser', to: '/folders',       section: 'library' },
-  deviceSync:    { icon: HardDriveUpload, labelKey: 'sidebar.deviceSync',    to: '/device-sync',   section: 'library' },
-  statistics:   { icon: BarChart3,   labelKey: 'sidebar.statistics',   to: '/statistics',     section: 'system'  },
-  help:         { icon: HelpCircle, labelKey: 'sidebar.help',         to: '/help',          section: 'system'  },
-};
+import { ALL_NAV_ITEMS } from '../config/navItems';
 
 
 export default function Sidebar({
@@ -65,6 +47,7 @@ export default function Sidebar({
   const setMusicLibraryFilter = useAuthStore(s => s.setMusicLibraryFilter);
   const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
   const sidebarItems = useSidebarStore(s => s.items);
+  const randomNavMode = useAuthStore(s => s.randomNavMode);
   const [libraryDropdownOpen, setLibraryDropdownOpen] = useState(false);
   const [playlistsExpanded, setPlaylistsExpanded] = useState(false);
   const playlistsRaw = usePlaylistStore(s => s.playlists);
@@ -139,10 +122,16 @@ export default function Sidebar({
 
   // Resolve ordered, visible items per section from store config
   const visibleLibrary = sidebarItems
-    .filter(cfg => cfg.visible && ALL_NAV_ITEMS[cfg.id]?.section === 'library')
+    .filter(cfg => {
+      if (cfg == null || !cfg.visible || ALL_NAV_ITEMS[cfg.id]?.section !== 'library') return false;
+      // Hide mode-inactive mix entries so the active mode controls what's shown
+      if (randomNavMode === 'hub' && (cfg.id === 'randomMix' || cfg.id === 'randomAlbums')) return false;
+      if (randomNavMode === 'separate' && cfg.id === 'randomPicker') return false;
+      return true;
+    })
     .map(cfg => ALL_NAV_ITEMS[cfg.id]);
   const visibleSystem = sidebarItems
-    .filter(cfg => cfg.visible && ALL_NAV_ITEMS[cfg.id]?.section === 'system')
+    .filter(cfg => cfg != null && cfg.visible && ALL_NAV_ITEMS[cfg.id]?.section === 'system')
     .map(cfg => ALL_NAV_ITEMS[cfg.id]);
 
 

src/config/navItems.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Disc3, Users, Music4, Radio, Heart, BarChart3,
+  HelpCircle, Tags, ListMusic, Cast, TrendingUp,
+  FolderOpen, HardDriveUpload, Wand2, Shuffle, Dices,
+} from 'lucide-react';
+
+export interface NavItemMeta {
+  icon: React.ElementType;
+  labelKey: string;
+  to: string;
+  section: 'library' | 'system';
+}
+
+// All configurable nav items — order and visibility controlled by sidebarStore.
+export const ALL_NAV_ITEMS: Record<string, NavItemMeta> = {
+  mainstage:    { icon: Disc3,          labelKey: 'sidebar.mainstage',    to: '/',              section: 'library' },
+  newReleases:  { icon: Radio,          labelKey: 'sidebar.newReleases',  to: '/new-releases',  section: 'library' },
+  allAlbums:    { icon: Music4,         labelKey: 'sidebar.allAlbums',    to: '/albums',        section: 'library' },
+  randomPicker: { icon: Wand2,          labelKey: 'sidebar.randomPicker', to: '/random',        section: 'library' },
+  randomMix:    { icon: Shuffle,        labelKey: 'sidebar.randomMix',    to: '/random/mix',    section: 'library' },
+  randomAlbums: { icon: Dices,          labelKey: 'sidebar.randomAlbums', to: '/random/albums', section: 'library' },
+  artists:      { icon: Users,          labelKey: 'sidebar.artists',      to: '/artists',       section: 'library' },
+  genres:       { icon: Tags,           labelKey: 'sidebar.genres',       to: '/genres',        section: 'library' },
+  favorites:    { icon: Heart,          labelKey: 'sidebar.favorites',    to: '/favorites',     section: 'library' },
+  playlists:    { icon: ListMusic,      labelKey: 'sidebar.playlists',    to: '/playlists',     section: 'library' },
+  mostPlayed:   { icon: TrendingUp,     labelKey: 'sidebar.mostPlayed',   to: '/most-played',   section: 'library' },
+  radio:        { icon: Cast,           labelKey: 'sidebar.radio',        to: '/radio',         section: 'library' },
+  folderBrowser:{ icon: FolderOpen,     labelKey: 'sidebar.folderBrowser',to: '/folders',       section: 'library' },
+  deviceSync:   { icon: HardDriveUpload,labelKey: 'sidebar.deviceSync',   to: '/device-sync',   section: 'library' },
+  statistics:   { icon: BarChart3,      labelKey: 'sidebar.statistics',   to: '/statistics',    section: 'system'  },
+  help:         { icon: HelpCircle,     labelKey: 'sidebar.help',         to: '/help',          section: 'system'  },
+};

src/locales/de.ts

@@ -584,6 +584,8 @@ export const deTranslation = {
     sidebarReset: 'Zurücksetzen',
     sidebarDrag: 'Ziehen zum Umsortieren',
     sidebarFixed: 'Immer sichtbar',
+    randomNavSplitTitle: 'Mix-Navigation aufteilen',
+    randomNavSplitDesc: '"Zufallsmix" und "Zufallsalben" als separate Sidebar-Einträge statt als "Mix erstellen"-Hub anzeigen.',
     tabInput: 'Eingabe',
     tabServer: 'Server',
     shortcutsReset: 'Auf Standard zurücksetzen',

src/locales/en.ts

@@ -586,6 +586,8 @@ export const enTranslation = {
     sidebarReset: 'Reset to default',
     sidebarDrag: 'Drag to reorder',
     sidebarFixed: 'Always visible',
+    randomNavSplitTitle: 'Split Mix navigation',
+    randomNavSplitDesc: 'Show "Random Mix" and "Random Albums" as separate sidebar entries instead of the "Build a Mix" hub.',
     tabInput: 'Input',
     tabServer: 'Server',
     tabSystem: 'System',

src/locales/es.ts

@@ -587,6 +587,8 @@ export const esTranslation = {
     sidebarReset: 'Restablecer a predeterminado',
     sidebarDrag: 'Arrastra para reordenar',
     sidebarFixed: 'Siempre visible',
+    randomNavSplitTitle: 'Dividir navegación Mix',
+    randomNavSplitDesc: 'Mostrar "Mezcla Aleatoria" y "Álbumes Aleatorios" como entradas separadas en la barra lateral en lugar del hub "Crear Mezcla".',
     tabInput: 'Entrada',
     tabServer: 'Servidor',
     tabSystem: 'Sistema',

src/locales/fr.ts

@@ -582,6 +582,8 @@ export const frTranslation = {
     sidebarReset: 'Réinitialiser',
     sidebarDrag: 'Glisser pour réorganiser',
     sidebarFixed: 'Toujours visible',
+    randomNavSplitTitle: 'Diviser la navigation Mix',
+    randomNavSplitDesc: 'Afficher "Mix Aléatoire" et "Albums Aléatoires" comme entrées séparées dans la barre latérale plutôt que le hub "Créer un Mix".',
     tabInput: 'Entrée',
     tabServer: 'Serveur',
     shortcutsReset: 'Réinitialiser',

src/locales/nb.ts

@@ -581,6 +581,8 @@ export const nbTranslation = {
     sidebarReset: 'Tilbakestill til standard',
     sidebarDrag: 'Dra for å endre rekkefølge',
     sidebarFixed: 'Alltid synlig',
+    randomNavSplitTitle: 'Del Mix-navigasjon',
+    randomNavSplitDesc: 'Vis "Tilfeldig miks" og "Tilfeldige album" som separate sidefeltsoppføringer i stedet for "Lag en miks"-huben.',
     tabShortcuts: 'Snarveier',
     tabServer: 'Tjener',
     tabSystem: 'System',

src/locales/nl.ts

@@ -581,6 +581,8 @@ export const nlTranslation = {
     sidebarReset: 'Standaard herstellen',
     sidebarDrag: 'Slepen om te herordenen',
     sidebarFixed: 'Altijd zichtbaar',
+    randomNavSplitTitle: 'Mix-navigatie splitsen',
+    randomNavSplitDesc: 'Toon "Willekeurige mix" en "Willekeurige albums" als afzonderlijke zijbalkitems in plaats van de "Mix samenstellen"-hub.',
     tabInput: 'Invoer',
     tabServer: 'Server',
     shortcutsReset: 'Standaard herstellen',

src/locales/ru.ts

@@ -607,6 +607,8 @@ export const ruTranslation = {
     sidebarReset: 'Сбросить порядок',
     sidebarDrag: 'Перетащите для порядка',
     sidebarFixed: 'Всегда показывать',
+    randomNavSplitTitle: 'Разделить навигацию микса',
+    randomNavSplitDesc: 'Показывать «Случайный микс» и «Случайные альбомы» как отдельные пункты боковой панели вместо хаба «Собрать микс».',
     tabInput: 'Ввод',
     tabServer: 'Сервер',
     tabSystem: 'Система',

src/locales/zh.ts

@@ -577,6 +577,8 @@ export const zhTranslation = {
     sidebarReset: '重置为默认',
     sidebarDrag: '拖动以重新排序',
     sidebarFixed: '始终显示',
+    randomNavSplitTitle: '拆分混音导航',
+    randomNavSplitDesc: '在侧边栏中将"随机混音"和"随机专辑"显示为独立条目，而非"创建混音"合并入口。',
     tabInput: '输入',
     tabServer: '服务器',
     tabSystem: '系统',

src/main.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './i18n';
@@ -7,7 +7,7 @@ import './styles/layout.css';
 import './styles/components.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );

src/pages/Settings.tsx

@@ -31,7 +31,7 @@ import { useGlobalShortcutsStore, GlobalAction, buildGlobalShortcut, formatGloba
 import { useSidebarStore, DEFAULT_SIDEBAR_ITEMS, SidebarItemConfig } from '../store/sidebarStore';
 import { useHomeStore, HomeSectionId } from '../store/homeStore';
 import { useDragDrop, useDragSource } from '../contexts/DragDropContext';
-import { ALL_NAV_ITEMS } from '../components/Sidebar';
+import { ALL_NAV_ITEMS } from '../config/navItems';
 import { pingWithCredentials, scheduleInstantMixProbeForServer } from '../api/subsonic';
 import { switchActiveServer } from '../utils/switchActiveServer';
 import { open as openDialog } from '@tauri-apps/plugin-dialog';
@@ -2577,8 +2577,15 @@ function SidebarCustomizer() {
   const dropTargetRef = useRef<DropTarget>(null);
   const itemsRef = useRef(items);
   itemsRef.current = items;
+  const randomNavMode = useAuthStore(s => s.randomNavMode);
+  const setRandomNavMode = useAuthStore(s => s.setRandomNavMode);
 
-  const libraryItems = items.filter(cfg => ALL_NAV_ITEMS[cfg.id]?.section === 'library');
+  const libraryItems = items.filter(cfg => {
+    if (!ALL_NAV_ITEMS[cfg.id] || ALL_NAV_ITEMS[cfg.id].section !== 'library') return false;
+    if (randomNavMode === 'hub' && (cfg.id === 'randomMix' || cfg.id === 'randomAlbums')) return false;
+    if (randomNavMode === 'separate' && cfg.id === 'randomPicker') return false;
+    return true;
+  });
   const systemItems  = items.filter(cfg => ALL_NAV_ITEMS[cfg.id]?.section === 'system');
 
   useEffect(() => {
@@ -2608,10 +2615,13 @@ function SidebarCustomizer() {
       const [moved] = sectionItems.splice(fromIdx, 1);
       sectionItems.splice(insertBefore > fromIdx ? insertBefore - 1 : insertBefore, 0, moved);
 
-      // Merge reordered section back into flat items array
+      // Merge reordered section back into flat items array.
+      // Only update positions of the *visible* items (same filter as libraryItems/systemItems)
+      // so hidden entries like randomMix/randomAlbums are never overwritten with undefined.
       const all = [...itemsRef.current];
+      const visibleIds = new Set(sectionItems.map(c => c.id));
       const positions = all.map((cfg, i) => ({ cfg, i }))
-        .filter(({ cfg }) => ALL_NAV_ITEMS[cfg.id]?.section === fromSection)
+        .filter(({ cfg }) => visibleIds.has(cfg.id))
         .map(({ i }) => i);
       positions.forEach((pos, i) => { all[pos] = sectionItems[i]; });
       setItems(all);
@@ -2677,6 +2687,22 @@ function SidebarCustomizer() {
           <RotateCcw size={14} />
         </button>
       </div>
+      <div className="settings-card" style={{ marginBottom: '1rem' }}>
+        <div className="settings-toggle-row">
+          <div>
+            <div style={{ fontWeight: 500 }}>{t('settings.randomNavSplitTitle')}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.randomNavSplitDesc')}</div>
+          </div>
+          <label className="toggle-switch" aria-label={t('settings.randomNavSplitTitle')}>
+            <input
+              type="checkbox"
+              checked={randomNavMode === 'separate'}
+              onChange={e => setRandomNavMode(e.target.checked ? 'separate' : 'hub')}
+            />
+            <span className="toggle-track" />
+          </label>
+        </div>
+      </div>
       <div ref={containerRef} onMouseMove={handleMouseMove} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
         {/* Library block */}
         <div className="settings-card" style={{ padding: '4px 0' }}>

src/store/authStore.ts

@@ -212,6 +212,11 @@ interface AuthState {
   setMixMinRatingArtist: (v: number) => void;
   setMusicFolders: (folders: Array<{ id: string; name: string }>) => void;
   setMusicLibraryFilter: (folderId: 'all' | string) => void;
+
+  /** Navigation style for Mix pages: single hub ('hub') or separate sidebar entries ('separate'). */
+  randomNavMode: 'hub' | 'separate';
+  setRandomNavMode: (v: 'hub' | 'separate') => void;
+
   logout: () => void;
 
   // Derived
@@ -304,6 +309,7 @@ export const useAuthStore = create<AuthState>()(
       mixMinRatingSong: 0,
       mixMinRatingAlbum: 0,
       mixMinRatingArtist: 0,
+      randomNavMode: 'hub',
       musicFolders: [],
       musicLibraryFilterByServer: {},
       musicLibraryFilterVersion: 0,
@@ -457,6 +463,7 @@ export const useAuthStore = create<AuthState>()(
       setMixMinRatingSong: (v) => set({ mixMinRatingSong: clampMixFilterMinStars(v) }),
       setMixMinRatingAlbum: (v) => set({ mixMinRatingAlbum: clampMixFilterMinStars(v) }),
       setMixMinRatingArtist: (v) => set({ mixMinRatingArtist: clampMixFilterMinStars(v) }),
+      setRandomNavMode: (v) => set({ randomNavMode: v }),
 
       setMusicFolders: (folders) => {
         const sid = get().activeServerId;

src/store/sidebarStore.ts

@@ -13,6 +13,8 @@ export const DEFAULT_SIDEBAR_ITEMS: SidebarItemConfig[] = [
   { id: 'newReleases',   visible: true },
   { id: 'allAlbums',     visible: true },
   { id: 'randomPicker',  visible: true },
+  { id: 'randomMix',     visible: true },
+  { id: 'randomAlbums',  visible: true },
   { id: 'artists',       visible: true },
   { id: 'genres',        visible: true },
   { id: 'favorites',     visible: true },
@@ -49,11 +51,11 @@ export const useSidebarStore = create<SidebarStore>()(
       name: 'psysonic_sidebar',
       onRehydrateStorage: () => (state) => {
         if (!state) return;
-        const known = new Set(state.items.map(i => i.id));
+        // Sanitize: remove any null/corrupted entries that may have been persisted
+        const safe = (state.items ?? []).filter((i): i is SidebarItemConfig => i != null && typeof i.id === 'string');
+        const known = new Set(safe.map(i => i.id));
         const missing = DEFAULT_SIDEBAR_ITEMS.filter(i => !known.has(i.id));
-        if (missing.length > 0) {
-          state.items = [...state.items, ...missing];
-        }
+        state.items = missing.length > 0 ? [...safe, ...missing] : safe;
       },
     }
   )