Add quality badges (CD, HiRes, MAX) to replace dot indicators

- Create QualityBadge component with tier detection
- CD badge shows disc icon for 16-bit lossless
- HR badge for 24-bit Hi-Res audio
- MAX badge for 24-bit >96kHz Hi-Res+
- Update NowPlayingBar and FullScreenNowPlaying to use badges
- Pass bitDepth and samplingRate props through components

src/lib/components/FullScreenNowPlaying.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { X, Shuffle, SkipBack, Play, Pause, SkipForward, Repeat, Heart, List, Mic2, Maximize2, MoreHorizontal } from 'lucide-svelte';
+  import QualityBadge from './QualityBadge.svelte';
 
   interface Props {
     isOpen: boolean;
@@ -10,6 +11,8 @@
     album: string;
     quality: string;
     qualityLevel: number;
+    bitDepth?: number;
+    samplingRate?: number;
     isPlaying: boolean;
     onTogglePlay: () => void;
     onSkipBack?: () => void;
@@ -38,6 +41,8 @@
     album,
     quality,
     qualityLevel,
+    bitDepth,
+    samplingRate,
     isPlaying,
     onTogglePlay,
     onSkipBack,
@@ -139,12 +144,8 @@
 
     <!-- Quality Info -->
     <div class="quality-info">
+      <QualityBadge {quality} {bitDepth} {samplingRate} size="md" />
       <div class="quality-text">{quality}</div>
-      <div class="quality-dots">
-        {#each Array(5) as _, i}
-          <div class="dot" class:active={i < qualityLevel}></div>
-        {/each}
-      </div>
     </div>
 
     <!-- Progress Bar -->
@@ -312,9 +313,8 @@
 
   .quality-info {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     margin-bottom: 32px;
   }
 
@@ -323,23 +323,6 @@
     color: #666666;
   }
 
-  .quality-dots {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-  }
-
-  .dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: #444444;
-  }
-
-  .dot.active {
-    background-color: #888888;
-  }
-
   .progress-container {
     width: 100%;
     max-width: 600px;

src/lib/components/NowPlayingBar.svelte

@@ -13,6 +13,7 @@
     VolumeX,
     Volume1
   } from 'lucide-svelte';
+  import QualityBadge from './QualityBadge.svelte';
 
   interface Props {
     artwork?: string;
@@ -20,6 +21,8 @@
     artist?: string;
     quality?: string;
     qualityLevel?: number;
+    bitDepth?: number;
+    samplingRate?: number;
     isPlaying?: boolean;
     onTogglePlay?: () => void;
     onSkipBack?: () => void;
@@ -45,6 +48,8 @@
     artist = '',
     quality = '',
     qualityLevel = 0,
+    bitDepth,
+    samplingRate,
     isPlaying = false,
     onTogglePlay,
     onSkipBack,
@@ -148,14 +153,9 @@
         <div class="track-title">{trackTitle}</div>
         <div class="track-artist">{artist}</div>
         <div class="track-quality">
-          <span>{quality}</span>
+          <QualityBadge {quality} {bitDepth} {samplingRate} />
           {#if quality}
-            <span>•</span>
-            <div class="quality-dots">
-              {#each Array(5) as _, i}
-                <div class="dot" class:active={i < qualityLevel}></div>
-              {/each}
-            </div>
+            <span class="quality-text">{quality}</span>
           {/if}
         </div>
       </div>
@@ -357,26 +357,12 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 12px;
-    color: #666666;
     margin-top: 2px;
   }
 
-  .quality-dots {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-  }
-
-  .dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: #444444;
-  }
-
-  .dot.active {
-    background-color: #888888;
+  .quality-text {
+    font-size: 11px;
+    color: #666666;
   }
 
   /* Controls */

src/lib/components/QualityBadge.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { Disc } from 'lucide-svelte';
+
+  interface Props {
+    quality?: string;
+    bitDepth?: number;
+    samplingRate?: number;
+    size?: 'sm' | 'md';
+  }
+
+  let {
+    quality = '',
+    bitDepth,
+    samplingRate,
+    size = 'sm'
+  }: Props = $props();
+
+  // Determine quality tier
+  const tier = $derived.by(() => {
+    if (bitDepth && bitDepth >= 24 && samplingRate && samplingRate > 96) {
+      return 'max'; // Hi-Res+ (24-bit/>96kHz)
+    }
+    if (bitDepth && bitDepth >= 24) {
+      return 'hires'; // Hi-Res (24-bit)
+    }
+    if (quality.toLowerCase().includes('flac') || quality.toLowerCase().includes('16-bit') || quality.toLowerCase().includes('lossless')) {
+      return 'cd'; // CD Quality
+    }
+    if (quality.toLowerCase().includes('mp3')) {
+      return 'lossy';
+    }
+    // Default based on sampling rate
+    if (samplingRate && samplingRate >= 44.1) {
+      if (bitDepth && bitDepth >= 24) return 'hires';
+      return 'cd';
+    }
+    return 'unknown';
+  });
+
+  const sizeClass = $derived(size === 'md' ? 'badge-md' : 'badge-sm');
+</script>
+
+{#if tier === 'max'}
+  <span class="badge badge-max {sizeClass}">MAX</span>
+{:else if tier === 'hires'}
+  <span class="badge badge-hires {sizeClass}">HR</span>
+{:else if tier === 'cd'}
+  <span class="badge badge-cd {sizeClass}">
+    <Disc size={size === 'md' ? 12 : 10} />
+  </span>
+{/if}
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    border-radius: 3px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .badge-sm {
+    height: 16px;
+    padding: 0 4px;
+    font-size: 9px;
+    gap: 2px;
+  }
+
+  .badge-md {
+    height: 20px;
+    padding: 0 6px;
+    font-size: 10px;
+    gap: 3px;
+  }
+
+  .badge-max {
+    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+    color: #1a1a1a;
+  }
+
+  .badge-hires {
+    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+    color: white;
+  }
+
+  .badge-cd {
+    background: rgba(255, 255, 255, 0.15);
+    color: var(--text-muted);
+  }
+</style>

src/routes/+page.svelte

@@ -173,6 +173,8 @@
     artwork: string;
     duration: number;
     quality: string;
+    bitDepth?: number;
+    samplingRate?: number;
   }
 
   // Auth State
@@ -513,7 +515,9 @@
       album: track.album?.title || '',
       artwork,
       duration: track.duration,
-      quality
+      quality,
+      bitDepth: track.maximum_bit_depth,
+      samplingRate: track.maximum_sampling_rate
     };
 
     duration = track.duration;
@@ -1506,6 +1510,8 @@
         trackTitle={currentTrack.title}
         artist={currentTrack.artist}
         quality={currentTrack.quality}
+        bitDepth={currentTrack.bitDepth}
+        samplingRate={currentTrack.samplingRate}
         {isPlaying}
         onTogglePlay={togglePlay}
         onSkipBack={handleSkipBack}
@@ -1553,6 +1559,8 @@
         album={currentTrack.album}
         quality={currentTrack.quality}
         qualityLevel={currentTrack.quality.includes('24') ? 5 : 3}
+        bitDepth={currentTrack.bitDepth}
+        samplingRate={currentTrack.samplingRate}
         {isPlaying}
         onTogglePlay={togglePlay}
         onSkipBack={handleSkipBack}