improvements to the sleep timer

src/routes/settings/+page.svelte

@@ -23,8 +23,18 @@
   interface VideoSettings {
     autoPlayNextEpisode: boolean;
     autoPlayCountdownSeconds: number;
+    autoPlayMaxEpisodes: number;
   }
 
+  const episodeLimitOptions = [
+    { value: 0, label: "Unlimited" },
+    { value: 1, label: "1" },
+    { value: 2, label: "2" },
+    { value: 3, label: "3" },
+    { value: 5, label: "5" },
+    { value: 10, label: "10" },
+  ];
+
   let settings = $state<AudioSettings>({
     crossfadeDuration: 0,
     gaplessPlayback: true,
@@ -35,6 +45,7 @@
   let videoSettings = $state<VideoSettings>({
     autoPlayNextEpisode: true,
     autoPlayCountdownSeconds: 10,
+    autoPlayMaxEpisodes: 0,
   });
 
   let loading = $state(true);
@@ -172,7 +183,7 @@
   }
 </script>
 
-<div class="max-w-2xl mx-auto space-y-8 p-6">
+<div class="max-w-2xl mx-auto space-y-8 p-6 pb-24 h-full overflow-y-auto">
   <div>
     <h1 class="text-3xl font-bold text-white mb-2">Audio Settings</h1>
     <p class="text-gray-400">Configure playback and audio processing</p>
@@ -359,6 +370,29 @@
                 <span>30s</span>
               </div>
             </div>
+
+            <!-- Episode Limit -->
+            <div class="pt-4 border-t border-gray-700">
+              <div class="mb-4">
+                <p class="text-sm font-medium text-gray-300">Episode Limit</p>
+                <p class="text-xs text-gray-500 mt-1">
+                  Stop auto-playing after this many consecutive episodes
+                </p>
+              </div>
+              <div class="grid grid-cols-3 md:grid-cols-6 gap-2">
+                {#each episodeLimitOptions as option}
+                  <button
+                    onclick={() => { videoSettings.autoPlayMaxEpisodes = option.value; }}
+                    class="py-3 px-3 rounded-lg transition-all text-sm
+                      {videoSettings.autoPlayMaxEpisodes === option.value
+                        ? 'bg-[var(--color-jellyfin)] text-white'
+                        : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}"
+                  >
+                    <div class="font-semibold">{option.label}</div>
+                  </button>
+                {/each}
+              </div>
+            </div>
           {/if}
         </div>
       </div>