Refactor quality badges to use QualityBadge component with compact mode

- Add compact prop to QualityBadge for inline usage in track lists
- Compact mode shows simple text (24bit/96kHz or CD Quality)
- Use golden gradient for hires badges in compact mode
- Update ArtistDetailView to use QualityBadge compact
- Update FavoritesView to use QualityBadge compact
- Update SearchView to use QualityBadge compact
- Remove duplicate CSS and getQualityLabel functions
- LocalLibrary views keep custom format showing codec (FLAC 24/96)

src/lib/components/views/FavoritesView.svelte

@@ -4,6 +4,7 @@
   import { Heart, Play, Disc3, Mic2, Music, Search, X, LayoutGrid, List, ChevronDown, ListMusic, Edit3, Star, Folder, Library } from 'lucide-svelte';
   import AlbumCard from '../AlbumCard.svelte';
   import TrackRow from '../TrackRow.svelte';
+  import QualityBadge from '../QualityBadge.svelte';
   import VirtualizedTrackList from '../VirtualizedTrackList.svelte';
   import PlaylistCollage from '../PlaylistCollage.svelte';
   import FavoritesEditModal from '../FavoritesEditModal.svelte';
@@ -607,13 +608,6 @@
     return album.release_date_original.slice(0, 4);
   }
 
-  function getAlbumQualityLabel(album: FavoriteAlbum): string {
-    if (album.hires && album.maximum_bit_depth && album.maximum_sampling_rate) {
-      return `${album.maximum_bit_depth}bit/${album.maximum_sampling_rate}kHz`;
-    }
-    return album.hires ? 'Hi-Res' : 'CD Quality';
-  }
-
   function groupAlbums(items: FavoriteAlbum[], mode: AlbumGroupMode) {
     const prefix = `album-${mode}`;
     const sorted = [...items].sort((a, b) => {
@@ -1342,9 +1336,11 @@
                           </div>
                         </div>
                         <div class="album-row-quality">
-                          <span class="quality-badge" class:hires={album.hires}>
-                            {getAlbumQualityLabel(album)}
-                          </span>
+                          <QualityBadge
+                            bitDepth={album.maximum_bit_depth}
+                            samplingRate={album.maximum_sampling_rate}
+                            compact
+                          />
                         </div>
                       </div>
                     {/each}
@@ -1416,9 +1412,11 @@
                   </div>
                 </div>
                 <div class="album-row-quality">
-                  <span class="quality-badge" class:hires={album.hires}>
-                    {getAlbumQualityLabel(album)}
-                  </span>
+                  <QualityBadge
+                    bitDepth={album.maximum_bit_depth}
+                    samplingRate={album.maximum_sampling_rate}
+                    compact
+                  />
                 </div>
               </div>
             {/each}
@@ -2160,25 +2158,6 @@
     justify-content: flex-end;
   }
 
-  .album-row-quality .quality-badge {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--alpha-85);
-    background: var(--alpha-10);
-    border: 1px solid var(--alpha-15);
-    border-radius: 6px;
-    padding: 3px 8px;
-    min-width: 90px;
-    text-align: center;
-    box-sizing: border-box;
-  }
-
-  .album-row-quality .quality-badge.hires {
-    background: linear-gradient(135deg, #fbbf24 0%, #b8860b 100%);
-    color: #1a1a1a;
-    border-color: transparent;
-  }
-
   .artist-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));