fixes lol

frontend/src/routes/audio/realm/[id]/+page.svelte

@@ -2,7 +2,9 @@
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { browser } from '$app/environment';
-    import { audioPlaylist } from '$lib/stores/audioPlaylist';
+    import { audioPlaylist, currentTrack } from '$lib/stores/audioPlaylist';
+    import { auth, isAuthenticated } from '$lib/stores/auth';
+    import WaveformBackground from '$lib/components/WaveformBackground.svelte';
 
     let realm = null;
     let audioFiles = [];
@@ -41,6 +43,53 @@
         return $audioPlaylist.queue.some(t => t.id === audioId);
     }
 
+    function isCurrentlyPlaying(audioId) {
+        return $currentTrack?.id === audioId && $audioPlaylist.isPlaying;
+    }
+
+    function handlePlayClick(audio) {
+        if ($currentTrack?.id === audio.id) {
+            audioPlaylist.togglePlay();
+        } else {
+            playNow(audio);
+        }
+    }
+
+    async function downloadAudio(e, audio) {
+        e.stopPropagation();
+
+        if (!$isAuthenticated) {
+            alert('Please log in to download audio');
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/audio/${audio.id}/download`, {
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                const safeTitle = audio.title.replace(/[<>:"/\\|?*]/g, '_').substring(0, 100);
+                a.download = safeTitle || 'audio';
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            } else if (response.status === 401) {
+                alert('Please log in to download audio');
+            } else {
+                alert('Download failed');
+            }
+        } catch (err) {
+            console.error('Download error:', err);
+            alert('Download failed');
+        }
+    }
+
     function togglePlaylist(audio) {
         if (isInPlaylist(audio.id)) {
             audioPlaylist.removeTrack(audio.id);
@@ -51,6 +100,7 @@
                 username: audio.username || realm?.username,
                 filePath: audio.filePath,
                 thumbnailPath: audio.thumbnailPath || '',
+                waveformPath: audio.waveformPath || '',
                 durationSeconds: audio.durationSeconds,
                 realmName: realm?.name
             });
@@ -64,6 +114,7 @@
             username: audio.username || realm?.username,
             filePath: audio.filePath,
             thumbnailPath: audio.thumbnailPath || '',
+            waveformPath: audio.waveformPath || '',
             durationSeconds: audio.durationSeconds,
             realmName: realm?.name
         });
@@ -76,6 +127,7 @@
             username: audio.username || realm?.username,
             filePath: audio.filePath,
             thumbnailPath: audio.thumbnailPath || '',
+            waveformPath: audio.waveformPath || '',
             durationSeconds: audio.durationSeconds,
             realmName: realm?.name
         });
@@ -114,6 +166,7 @@
     let prevRealmId = null;
 
     onMount(() => {
+        auth.init();
         prevRealmId = realmId;
         loadRealmAudio();
     });
@@ -240,6 +293,13 @@
         border: 1px solid var(--border);
         border-radius: 8px;
         transition: all 0.2s;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .audio-item > :not(:global(.waveform-container)) {
+        position: relative;
+        z-index: 1;
     }
 
     .audio-item:hover {
@@ -350,6 +410,17 @@
         color: white;
     }
 
+    .action-btn.play.playing {
+        background: #ec4899;
+        color: white;
+    }
+
+    .action-btn.download:hover {
+        background: rgba(59, 130, 246, 0.2);
+        border-color: #3b82f6;
+        color: #3b82f6;
+    }
+
     .action-btn.added {
         background: rgba(126, 231, 135, 0.2);
         border-color: #7ee787;
@@ -444,6 +515,15 @@
             <div class="audio-list">
                 {#each audioFiles as audio, index}
                     <div class="audio-item">
+                        {#if audio.waveformPath}
+                            <WaveformBackground
+                                waveformPath={audio.waveformPath}
+                                isPlaying={$audioPlaylist.isPlaying}
+                                currentTime={$audioPlaylist.currentTime}
+                                duration={$audioPlaylist.duration}
+                                isCurrentTrack={$currentTrack?.id === audio.id}
+                            />
+                        {/if}
                         <span class="audio-number">{index + 1}</span>
                         <div class="audio-thumbnail">
                             {#if audio.thumbnailPath}
@@ -466,19 +546,29 @@
                         <div class="audio-actions">
                             <button
                                 class="action-btn play"
-                                on:click={() => playNow(audio)}
+                                class:playing={isCurrentlyPlaying(audio.id)}
-                                title="Play now"
+                                on:click={() => handlePlayClick(audio)}
+                                title={isCurrentlyPlaying(audio.id) ? 'Pause' : 'Play now'}
                             >
-                                ▶
+                                {isCurrentlyPlaying(audio.id) ? '▮▮' : '▶'}
                             </button>
                             <button
                                 class="action-btn"
-                                class:added={$audioPlaylist.queue.some(t => t.id === audio.id)}
+                                class:added={isInPlaylist(audio.id)}
                                 on:click={() => togglePlaylist(audio)}
-                                title={$audioPlaylist.queue.some(t => t.id === audio.id) ? 'Remove from playlist' : 'Add to playlist'}
+                                title={isInPlaylist(audio.id) ? 'Remove from playlist' : 'Add to playlist'}
                             >
-                                {$audioPlaylist.queue.some(t => t.id === audio.id) ? '✓' : '+'}
+                                {isInPlaylist(audio.id) ? '✓' : '+'}
                             </button>
+                            {#if $isAuthenticated}
+                                <button
+                                    class="action-btn download"
+                                    on:click={(e) => downloadAudio(e, audio)}
+                                    title="Download"
+                                >
+                                    ↓
+                                </button>
+                            {/if}
                         </div>
                     </div>
                 {/each}