From c0e9a94f98028adfde4608f66d890ee6aaaae04f Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Wed, 28 Jan 2026 19:28:43 -0600
Subject: [PATCH] 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/QualityBadge.svelte        | 82 ++++++++++++++-----
 .../components/views/ArtistDetailView.svelte  | 35 ++------
 src/lib/components/views/FavoritesView.svelte | 43 +++-------
 src/lib/components/views/SearchView.svelte    | 28 ++++---
 4 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/src/lib/components/QualityBadge.svelte b/src/lib/components/QualityBadge.svelte
index 2ca436f99..95625aa65 100644
--- a/src/lib/components/QualityBadge.svelte
+++ b/src/lib/components/QualityBadge.svelte
@@ -4,13 +4,15 @@
     bitDepth?: number;
     samplingRate?: number;
     format?: string;
+    compact?: boolean;
   }
 
   let {
     quality = '',
     bitDepth,
     samplingRate,
-    format
+    format,
+    compact = false
   }: Props = $props();
 
   // Determine quality tier
@@ -53,7 +55,7 @@
     return 'cd'; // Default to CD instead of unknown
   });
 
-  // Format the display text
+  // Format the display text for full mode
   const displayText = $derived.by(() => {
     if (tier === 'max') {
       const depth = bitDepth || 24;
@@ -77,6 +79,19 @@
     return '16-bit / 44.1 kHz';
   });
 
+  // Format the compact display text
+  const compactText = $derived.by(() => {
+    if (tier === 'max' || tier === 'hires') {
+      const depth = bitDepth || 24;
+      const rate = samplingRate || (tier === 'max' ? 192 : 96);
+      return `${depth}bit/${rate}kHz`;
+    }
+    if (tier === 'mp3') {
+      return 'MP3';
+    }
+    return 'CD Quality';
+  });
+
   const tierLabel = $derived.by(() => {
     if (tier === 'max') return 'Hi-Res';
     if (tier === 'hires') return 'Hi-Res';
@@ -96,23 +111,52 @@
   const isHiRes = $derived(tier === 'max' || tier === 'hires');
 </script>
 
-<div class="quality-badge" title="{tierLabel}: {displayText}">
-  <!-- Icon -->
-  <img
-    src={iconPath}
-    alt={tierLabel}
-    class="badge-icon"
-    class:hires={isHiRes}
-  />
+{#if compact}
+  <span class="quality-badge-compact" class:hires={isHiRes} title="{tierLabel}: {displayText}">
+    {compactText}
+  </span>
+{:else}
+  <div class="quality-badge" title="{tierLabel}: {displayText}">
+    <!-- Icon -->
+    <img
+      src={iconPath}
+      alt={tierLabel}
+      class="badge-icon"
+      class:hires={isHiRes}
+    />
 
-  <!-- Text -->
-  <div class="badge-text">
-    <span class="tier-label">{tierLabel}</span>
-    <span class="quality-info">{displayText}</span>
+    <!-- Text -->
+    <div class="badge-text">
+      <span class="tier-label">{tierLabel}</span>
+      <span class="quality-info">{displayText}</span>
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
+  /* Compact mode styles */
+  .quality-badge-compact {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 3px 8px;
+    border-radius: 6px;
+    background: var(--alpha-10);
+    color: var(--alpha-85);
+    border: 1px solid var(--alpha-15);
+    min-width: 90px;
+    text-align: center;
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+
+  .quality-badge-compact.hires {
+    background: linear-gradient(135deg, #fbbf24 0%, #b8860b 100%);
+    color: #1a1a1a;
+    border-color: transparent;
+  }
+
+  /* Full mode styles */
   .quality-badge {
     display: inline-flex;
     align-items: center;
@@ -125,21 +169,21 @@
     box-sizing: border-box;
     cursor: help;
   }
-  
+
   [data-theme="light"] .quality-badge {
     background: rgba(40, 42, 54, 0.85);
     border: 1px solid rgba(40, 42, 54, 0.95);
   }
-  
+
   [data-theme="light"] .tier-label,
   [data-theme="light"] .quality-info {
     color: #ffffff;
   }
-  
+
   [data-theme="light"] .badge-icon {
     filter: invert(1) brightness(1.5);
   }
-  
+
   [data-theme="light"] .badge-icon.hires {
     filter: brightness(1.2);
   }
diff --git a/src/lib/components/views/ArtistDetailView.svelte b/src/lib/components/views/ArtistDetailView.svelte
index 8d850e9f3..59db6e841 100644
--- a/src/lib/components/views/ArtistDetailView.svelte
+++ b/src/lib/components/views/ArtistDetailView.svelte
@@ -4,6 +4,7 @@
   import type { ArtistDetail, QobuzArtist } from '$lib/types';
   import AlbumCard from '../AlbumCard.svelte';
   import TrackMenu from '../TrackMenu.svelte';
+  import QualityBadge from '../QualityBadge.svelte';
   import { consumeContextTrackFocus, setPlaybackContext, getPlaybackContext } from '$lib/stores/playbackContextStore';
   import { togglePlay } from '$lib/stores/playerStore';
   import { getQueue, syncQueueState, playQueueIndex } from '$lib/stores/queueStore';
@@ -643,13 +644,6 @@
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   }
 
-  function getQualityLabel(track: Track): string {
-    if (track.hires_streamable && track.maximum_bit_depth && track.maximum_sampling_rate) {
-      return `${track.maximum_bit_depth}bit/${track.maximum_sampling_rate}kHz`;
-    }
-    return 'CD Quality';
-  }
-
   function handlePausePlayback(event: MouseEvent) {
     event.stopPropagation();
     void togglePlay();
@@ -1426,9 +1420,11 @@
                 {/if}
               </div>
               <div class="track-quality">
-                <span class="quality-badge" class:hires={track.hires_streamable}>
-                  {getQualityLabel(track)}
-                </span>
+                <QualityBadge
+                  bitDepth={track.maximum_bit_depth}
+                  samplingRate={track.maximum_sampling_rate}
+                  compact
+                />
               </div>
               <div class="track-duration">{formatDuration(track.duration)}</div>
               <div class="track-actions">
@@ -3435,25 +3431,6 @@
     align-items: center;
   }
 
-  .track-quality .quality-badge {
-    font-size: 11px;
-    font-weight: 600;
-    padding: 3px 8px;
-    border-radius: 6px;
-    background: var(--alpha-10);
-    color: var(--alpha-85);
-    border: 1px solid var(--alpha-15);
-    white-space: nowrap;
-    min-width: 90px;
-    text-align: center;
-  }
-
-  .track-quality .quality-badge.hires {
-    background: linear-gradient(135deg, #fbbf24 0%, #b8860b 100%);
-    color: #1a1a1a;
-    border-color: transparent;
-  }
-
   .track-duration {
     font-size: 13px;
     color: var(--text-muted);
diff --git a/src/lib/components/views/FavoritesView.svelte b/src/lib/components/views/FavoritesView.svelte
index 2bc77c4d8..35a9a87ce 100644
--- a/src/lib/components/views/FavoritesView.svelte
+++ b/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));
diff --git a/src/lib/components/views/SearchView.svelte b/src/lib/components/views/SearchView.svelte
index c23848043..09db35109 100644
--- a/src/lib/components/views/SearchView.svelte
+++ b/src/lib/components/views/SearchView.svelte
@@ -4,6 +4,7 @@
   import { Search, Disc3, Music, Mic2, User, X, ChevronLeft, ChevronRight, Crown } from 'lucide-svelte';
   import AlbumCard from '../AlbumCard.svelte';
   import TrackMenu from '../TrackMenu.svelte';
+  import QualityBadge from '../QualityBadge.svelte';
   import { getSearchState, setSearchState, subscribeSearchFocus, type SearchResults, type SearchAllResults, type SearchTab, type SearchFilterType } from '$lib/stores/searchState';
   import { setPlaybackContext } from '$lib/stores/playbackContextStore';
   import { togglePlay } from '$lib/stores/playerStore';
@@ -988,7 +989,13 @@
                         <div class="track-artist">{track.performer?.name || 'Unknown Artist'}</div>
                       {/if}
                     </div>
-                    <div class="track-quality">{getQualityLabel(track)}</div>
+                    <div class="track-quality">
+                      <QualityBadge
+                        bitDepth={track.maximum_bit_depth}
+                        samplingRate={track.maximum_sampling_rate}
+                        compact
+                      />
+                    </div>
                     <div class="track-duration">{formatDuration(track.duration)}</div>
                     <div class="track-actions">
                       <TrackMenu
@@ -1126,7 +1133,13 @@
                   <div class="track-artist">{track.performer?.name || 'Unknown Artist'}</div>
                 {/if}
               </div>
-              <div class="track-quality">{getQualityLabel(track)}</div>
+              <div class="track-quality">
+                <QualityBadge
+                  bitDepth={track.maximum_bit_depth}
+                  samplingRate={track.maximum_sampling_rate}
+                  compact
+                />
+              </div>
               <div class="track-duration">{formatDuration(track.duration)}</div>
               <div class="track-actions">
                 <TrackMenu
@@ -1574,15 +1587,8 @@
   }
 
   .track-quality {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--alpha-85);
-    background: var(--alpha-10);
-    border: 1px solid var(--alpha-15);
-    padding: 3px 8px;
-    border-radius: 6px;
-    min-width: 90px;
-    text-align: center;
+    display: flex;
+    align-items: center;
   }
 
   .track-duration {