improvements to the sleep timer

src/lib/components/player/Controls.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { untrack } from "svelte";
+  import { sleepTimerActive } from "$lib/stores/sleepTimer";
   import SleepTimerIndicator from "./SleepTimerIndicator.svelte";
 
   interface Props {
@@ -92,8 +93,28 @@
     </svg>
   </button>
 
-  <!-- Sleep Timer Indicator -->
-  <SleepTimerIndicator onClick={onSleepTimerClick} />
+  <!-- Sleep Timer -->
+  {#if !$sleepTimerActive}
+    <button
+      onclick={(e) => {
+        e.stopPropagation();
+        onSleepTimerClick?.();
+      }}
+      ontouchstart={(e) => e.stopPropagation()}
+      ontouchmove={(e) => e.stopPropagation()}
+      ontouchend={(e) => e.stopPropagation()}
+      class="p-2 rounded-full text-gray-400 hover:text-white transition-colors"
+      title="Sleep timer"
+      aria-label="Sleep timer"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+      </svg>
+    </button>
+  {:else}
+    <SleepTimerIndicator onClick={onSleepTimerClick} />
+  {/if}
 
   <!-- Previous -->
   <button