feat: persist shuffle and repeat state across reloads/updates

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

src/main.js

@@ -7,7 +7,7 @@ import {
   toggleShuffle, toggleRepeat, toggleQueue, setVolume, seekTo,
   initProgressScrub, updateProgress, updatePreviewProgress, stopPreview,
   toggleRadioMode, starCurrent, downloadCurrent, renderQueue, playPreview,
-  toggleStar, dlSongLocal, _applyRadioBtn, _restoreLastPlayed, setPlayIcon,
+  toggleStar, dlSongLocal, _applyRadioBtn, _applyShuffleRepeat, _restoreLastPlayed, setPlayIcon,
   npToggleStar, updateMediaSession,
 } from './player.js';
 import {
@@ -84,6 +84,10 @@ async function startApp() {
   initNotifBell();
   _restoreLastPlayed();
   if(localStorage.getItem('ns_radio')==='1') { S.radioMode=true; _applyRadioBtn(); }
+  const sr = localStorage.getItem('ns_repeat');
+  if(sr === 'all' || sr === 'one') S.repeat = sr;
+  if(localStorage.getItem('ns_shuffle') === '1') S.shuffle = true;
+  _applyShuffleRepeat();
 }
 
 // ─── INIT ───

src/player.js

@@ -144,23 +144,30 @@ export function onEnded() {
   nextSong();
 }
 
-export function toggleShuffle() {
-  S.shuffle = !S.shuffle;
-  document.getElementById('btn-shuffle').classList.toggle('active', S.shuffle);
+export function _applyShuffleRepeat() {
+  document.getElementById('btn-shuffle')?.classList.toggle('active', S.shuffle);
   document.getElementById('np-shuffle-btn')?.classList.toggle('active', S.shuffle);
   document.getElementById('badge-shuffle')?.classList.toggle('on', S.shuffle);
-}
-
-export function toggleRepeat() {
-  S.repeat = S.repeat === false ? 'all' : S.repeat === 'all' ? 'one' : false;
-  document.getElementById('btn-repeat').classList.toggle('active', S.repeat !== false);
-  document.getElementById('btn-repeat').classList.toggle('repeat-one', S.repeat === 'one');
+  document.getElementById('btn-repeat')?.classList.toggle('active', S.repeat !== false);
+  document.getElementById('btn-repeat')?.classList.toggle('repeat-one', S.repeat === 'one');
   const nb = document.getElementById('np-repeat-btn');
   if(nb) { nb.classList.toggle('active', S.repeat !== false); nb.classList.toggle('repeat-one', S.repeat === 'one'); }
   const badge = document.getElementById('badge-repeat');
   if(badge) { badge.classList.toggle('on', S.repeat !== false); badge.textContent = S.repeat === 'one' ? '🔂 Einmal' : '🔁 Repeat'; }
 }
 
+export function toggleShuffle() {
+  S.shuffle = !S.shuffle;
+  localStorage.setItem('ns_shuffle', S.shuffle ? '1' : '0');
+  _applyShuffleRepeat();
+}
+
+export function toggleRepeat() {
+  S.repeat = S.repeat === false ? 'all' : S.repeat === 'all' ? 'one' : false;
+  localStorage.setItem('ns_repeat', S.repeat === false ? '0' : S.repeat);
+  _applyShuffleRepeat();
+}
+
 // ─── RADIO ───
 export function _applyRadioBtn() {
   const btn = document.getElementById('btn-radio-mode');