Merge PR #22: Add genre display on album hover

Resolved merge conflicts with size="large" changes from pre-release.
Both genre and size="large" props now included in AlbumCard components.

src/lib/adapters/qobuzAdapters.ts

@@ -260,7 +260,8 @@ function toArtistAlbumSummary(album: QobuzAlbum): ArtistAlbumSummary {
     title: album.title,
     artwork,
     year: album.release_date_original?.split('-')[0],
-    quality
+    quality,
+    genre: album.genre?.name || "Unknown genre"
   };
 }
 

src/lib/components/AlbumCard.svelte

@@ -14,6 +14,7 @@
     artwork: string;
     title: string;
     artist: string;
+    genre: string;
     quality?: string;
     size?: 'standard' | 'large';
     searchId?: string;
@@ -38,6 +39,7 @@
     artwork,
     title,
     artist,
+    genre,
     quality,
     size = 'standard',
     searchId,
@@ -182,6 +184,7 @@
     <!-- Action Overlay -->
     {#if hasOverlay}
       <div class="action-overlay" class:menu-open={menuOpen}>
+        <div class="overlay-genre">{genre}</div>
         <div class="action-buttons">
           {#if showFavoriteButton}
             <button
@@ -322,7 +325,7 @@
     justify-content: center;
     opacity: 0;
     transition: opacity 150ms ease;
-    background: rgba(10, 10, 10, 0.25);
+    background: rgba(10, 10, 10, 0.5);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     pointer-events: auto;
@@ -390,6 +393,23 @@
     height: 30px;
   }
 
+  .overlay-genre {
+    align-self: flex-start;
+    width: 100%;
+    text-align: left;
+    padding-left: 1em;
+    color: white;
+    text-shadow:
+    0.06em 0 black,
+            0 0.06em black,
+            -0.06em 0 black,
+            0 -0.06em black,
+            -0.06em -0.06em black,
+            -0.06em 0.06em black,
+            0.06em -0.06em black,
+            0.06em 0.06em black;
+  }
+
   :global(.album-card .album-menu) {
     display: flex;
     align-items: center;

src/lib/components/VirtualizedAlbumList.svelte

@@ -312,6 +312,7 @@
                 artwork={getArtworkUrl(album.artwork_path)}
                 title={album.title}
                 artist={album.artist}
+                genre={"Unknown genre"}
                 quality={getQualityBadge(album)}
                 size="large"
                 showFavorite={true}

src/lib/components/views/ArtistDetailView.svelte

@@ -1443,6 +1443,7 @@
               artwork={album.artwork}
               title={album.title}
               artist={album.year || ''}
+              genre={album.genre}
               size="large"
               quality={album.quality}
               searchId={`album-${album.id}`}
@@ -1504,6 +1505,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             size="large"
             quality={album.quality}
             searchId={`album-${album.id}`}
@@ -1564,6 +1566,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             size="large"
             quality={album.quality}
             searchId={`album-${album.id}`}
@@ -1624,6 +1627,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             size="large"
             quality={album.quality}
             searchId={`album-${album.id}`}
@@ -1684,6 +1688,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             size="large"
             quality={album.quality}
             searchId={`album-${album.id}`}
@@ -1807,6 +1812,7 @@
               artwork={album.artwork}
               title={album.title}
               artist={album.year || ''}
+              genre={album.genre}
               size="large"
               quality={album.quality}
               searchId={`album-${album.id}`}

src/lib/components/views/FavoritesView.svelte

@@ -16,6 +16,7 @@
     id: string;
     title: string;
     artist: { id: number; name: string };
+    genre?: { name: string };
     image: { small?: string; thumbnail?: string; large?: string };
     release_date_original?: string;
     hires: boolean;
@@ -558,6 +559,10 @@
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   }
 
+  function getGenreLabel(album: FavoriteAlbum): string {
+    return album.genre?.name || 'Unknown genre'
+  }
+
   function getQualityLabel(item: { hires?: boolean; maximum_bit_depth?: number; maximum_sampling_rate?: number }): string {
     if (item.hires && item.maximum_bit_depth && item.maximum_sampling_rate) {
       return `${item.maximum_bit_depth}bit/${item.maximum_sampling_rate}kHz`;
@@ -1295,6 +1300,7 @@
                         artwork={album.image?.large || album.image?.thumbnail || ''}
                         title={album.title}
                         artist={album.artist.name}
+                        genre={getGenreLabel(album)}
                         size="large"
                         quality={getQualityLabel(album)}
                         onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1367,6 +1373,7 @@
                 artwork={album.image?.large || album.image?.thumbnail || ''}
                 title={album.title}
                 artist={album.artist.name}
+                genre={getGenreLabel(album)}
                 size="large"
                 quality={getQualityLabel(album)}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}

src/lib/components/views/HomeView.svelte

@@ -36,6 +36,7 @@
     artwork: string;
     title: string;
     artist: string;
+    genre: string;
     quality?: string;
   }
 
@@ -332,6 +333,7 @@
       artwork: getQobuzImage(album.image),
       title: album.title,
       artist: album.artist?.name || 'Unknown Artist',
+      genre: album.genre?.name || 'Unknown genre',
       quality: formatQuality(album.hires_streamable, album.maximum_bit_depth, album.maximum_sampling_rate)
     };
   }
@@ -644,6 +646,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -674,6 +677,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -704,6 +708,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -734,6 +739,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -764,6 +770,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -794,6 +801,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -895,6 +903,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}

src/lib/components/views/SearchView.svelte

@@ -140,6 +140,7 @@
     id: string;
     title: string;
     artist: { name: string };
+    genre?: { name: string; };
     image: { small?: string; thumbnail?: string; large?: string };
     release_date_original?: string;
     hires_streamable?: boolean;
@@ -417,6 +418,10 @@
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   }
 
+  function getGenreLabel(album: Album): string {
+    return album.genre?.name || 'Unknown genre'
+  }
+
   function getQualityLabel(track: Track | Album): string {
     if (track.hires_streamable && track.maximum_bit_depth && track.maximum_sampling_rate) {
       return `${track.maximum_bit_depth}bit/${track.maximum_sampling_rate}kHz`;
@@ -720,6 +725,7 @@
                 artwork={getAlbumArtwork(allResults.albums.items[0])}
                 title={allResults.albums.items[0].title}
                 artist={allResults.albums.items[0].artist?.name || 'Unknown Artist'}
+                genre={getGenreLabel(allResults.albums.items[0])}
                 size="large"
                 quality={getQualityLabel(allResults.albums.items[0])}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(allResults.albums.items[0].id) : undefined}
@@ -856,6 +862,7 @@
                           artwork={getAlbumArtwork(album)}
                           title={album.title}
                           artist={album.artist?.name || 'Unknown Artist'}
+                          genre={getGenreLabel(album)}
                           size="large"
                           quality={getQualityLabel(album)}
                           onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -995,6 +1002,7 @@
               artwork={getAlbumArtwork(album)}
               title={album.title}
               artist={album.artist?.name || 'Unknown Artist'}
+              genre={getGenreLabel(album)}
               size="large"
               quality={getQualityLabel(album)}
               onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}

src/lib/types/index.ts

@@ -188,6 +188,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   epsSingles: {
     id: string;
@@ -195,6 +196,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   liveAlbums: {
     id: string;
@@ -202,6 +204,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   compilations: {
     id: string;
@@ -209,6 +212,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   tributes: {
     id: string;
@@ -216,6 +220,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   others: {
     id: string;
@@ -223,6 +228,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   playlists: {
     id: number;