feat(lucky-mix): instant mix from your preferences

Lucky Mix targets ~50 tracks in one run: pick seeds from your most-played artists/albums and 4+ rated songs, add similar tracks, then fill the mix with random library picks, skipping anything you rated 1–2.
On start it trims the old “upcoming” tail so the queue does not show stale next tracks, starts playback on the first viable seed, routes to Now Playing, and can emit structured steps to the backend debug log.

src/components/MobileMoreOverlay.tsx

@@ -14,8 +14,11 @@ export default function MobileMoreOverlay({ onClose }: { onClose: () => void })
   const sidebarItems = useSidebarStore(s => s.items);
   const randomNavMode = useAuthStore(s => s.randomNavMode);
   const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const showLuckyMixMenu = useAuthStore(s => s.showLuckyMixMenu);
+  const audiomuseByServer = useAuthStore(s => s.audiomuseNavidromeByServer);
   const offlineAlbums = useOfflineStore(s => s.albums);
   const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
+  const luckyMixAvailable = randomNavMode === 'separate' && showLuckyMixMenu && Boolean(serverId && audiomuseByServer[serverId]);
 
   const items = sidebarItems
     .filter(cfg => {
@@ -25,6 +28,7 @@ export default function MobileMoreOverlay({ onClose }: { onClose: () => void })
       if (BOTTOM_NAV_ROUTES.has(item.to)) return false;
       if (randomNavMode === 'hub' && (cfg.id === 'randomMix' || cfg.id === 'randomAlbums')) return false;
       if (randomNavMode === 'separate' && cfg.id === 'randomPicker') return false;
+      if (cfg.id === 'luckyMix' && !luckyMixAvailable) return false;
       return true;
     })
     .map(cfg => ALL_NAV_ITEMS[cfg.id]);

src/components/QueuePanel.tsx

@@ -17,6 +17,7 @@ import LyricsPane from './LyricsPane';
 import NowPlayingInfo from './NowPlayingInfo';
 import { TFunction } from 'i18next';
 import OverlayScrollArea from './OverlayScrollArea';
+import { useLuckyMixStore } from '../store/luckyMixStore';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -269,6 +270,7 @@ export default function QueuePanel() {
 
   const activeTab  = useLyricsStore(s => s.activeTab);
   const setTab     = useLyricsStore(s => s.setTab);
+  const luckyRolling = useLuckyMixStore(s => s.isRolling);
 
   const [showRemainingTime, setShowRemainingTime] = useState(false);
   const [showCrossfadePopover, setShowCrossfadePopover] = useState(false);
@@ -657,7 +659,8 @@ export default function QueuePanel() {
             {t('queue.emptyQueue')}
           </div>
         ) : (
-          queue.map((track, idx) => {
+          <>
+          {queue.map((track, idx) => {
             const isPlaying = idx === queueIndex;
             const isFirstAutoAdded = track.autoAdded && (idx === 0 || !queue[idx - 1].autoAdded);
             const isFirstRadioAdded = track.radioAdded && (idx === 0 || !queue[idx - 1].radioAdded);
@@ -726,9 +729,30 @@ export default function QueuePanel() {
                   {formatTime(track.duration)}
                 </div>
               </div>
+              {luckyRolling && isPlaying && (
+                <div className="queue-lucky-loading" aria-hidden>
+                  <div className="queue-lucky-loading__dice">
+                    <div className="queue-lucky-cube queue-lucky-cube--a">
+                      <span className="lucky-mix-pip lucky-mix-pip--tl" />
+                      <span className="lucky-mix-pip lucky-mix-pip--tr" />
+                      <span className="lucky-mix-pip lucky-mix-pip--bl" />
+                      <span className="lucky-mix-pip lucky-mix-pip--br" />
+                    </div>
+                    <div className="queue-lucky-cube queue-lucky-cube--b">
+                      <span className="lucky-mix-pip lucky-mix-pip--center" />
+                    </div>
+                    <div className="queue-lucky-cube queue-lucky-cube--c">
+                      <span className="lucky-mix-pip lucky-mix-pip--tl" />
+                      <span className="lucky-mix-pip lucky-mix-pip--center" />
+                      <span className="lucky-mix-pip lucky-mix-pip--br" />
+                    </div>
+                  </div>
+                </div>
+              )}
               </React.Fragment>
             );
-          })
+          })}
+          </>
         )}
       </OverlayScrollArea>
       </>) : activeTab === 'lyrics' ? (

src/components/Sidebar.tsx

@@ -68,6 +68,9 @@ export default function Sidebar({
   const sidebarItems = useSidebarStore(s => s.items);
   const setSidebarItems = useSidebarStore(s => s.setItems);
   const randomNavMode = useAuthStore(s => s.randomNavMode);
+  const showLuckyMixMenu = useAuthStore(s => s.showLuckyMixMenu);
+  const audiomuseByServer = useAuthStore(s => s.audiomuseNavidromeByServer);
+  const luckyMixAvailable = randomNavMode === 'separate' && showLuckyMixMenu && Boolean(serverId && audiomuseByServer[serverId]);
   const [libraryDropdownOpen, setLibraryDropdownOpen] = useState(false);
   const [playlistsExpanded, setPlaylistsExpanded] = useState(false);
   const playlistsRaw = usePlaylistStore(s => s.playlists);
@@ -95,8 +98,13 @@ export default function Sidebar({
     [sidebarItems],
   );
   const visibleLibraryConfigs = useMemo(
-    () => libraryItemsForReorder.filter(c => c.visible),
-    [libraryItemsForReorder],
+    () =>
+      libraryItemsForReorder.filter(c => {
+        if (!c.visible) return false;
+        if (c.id === 'luckyMix' && !luckyMixAvailable) return false;
+        return true;
+      }),
+    [libraryItemsForReorder, luckyMixAvailable],
   );
   const visibleSystemConfigs = useMemo(
     () => systemItemsForReorder.filter(c => c.visible),