From 22f0aa5a0e654400b5d2eb78eb038f42ddab2ac9 Mon Sep 17 00:00:00 2001
From: Joel C <joel@vorce.se>
Date: Sun, 25 Jan 2026 15:39:33 +0100
Subject: [PATCH] Display genre on AlbumCard when mouse over it

---
 src/lib/adapters/qobuzAdapters.ts             |  3 ++-
 src/lib/components/AlbumCard.svelte           | 22 ++++++++++++++++++-
 .../components/VirtualizedAlbumList.svelte    |  1 +
 .../components/views/ArtistDetailView.svelte  |  6 +++++
 src/lib/components/views/FavoritesView.svelte |  7 ++++++
 src/lib/components/views/HomeView.svelte      |  9 ++++++++
 src/lib/components/views/SearchView.svelte    |  8 +++++++
 src/lib/types/index.ts                        |  6 +++++
 8 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/lib/adapters/qobuzAdapters.ts b/src/lib/adapters/qobuzAdapters.ts
index 04fcf53aa..e0b76efe1 100644
--- a/src/lib/adapters/qobuzAdapters.ts
+++ b/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"
   };
 }
 
diff --git a/src/lib/components/AlbumCard.svelte b/src/lib/components/AlbumCard.svelte
index 2496a2de4..58b9b78bc 100644
--- a/src/lib/components/AlbumCard.svelte
+++ b/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,
@@ -180,6 +182,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
@@ -315,7 +318,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;
@@ -379,6 +382,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;
diff --git a/src/lib/components/VirtualizedAlbumList.svelte b/src/lib/components/VirtualizedAlbumList.svelte
index b87e224a4..66299d1f7 100644
--- a/src/lib/components/VirtualizedAlbumList.svelte
+++ b/src/lib/components/VirtualizedAlbumList.svelte
@@ -310,6 +310,7 @@
                 artwork={getArtworkUrl(album.artwork_path)}
                 title={album.title}
                 artist={album.artist}
+                genre={"Unknown genre"}
                 quality={getQualityBadge(album)}
                 showFavorite={true}
                 favoriteEnabled={false}
diff --git a/src/lib/components/views/ArtistDetailView.svelte b/src/lib/components/views/ArtistDetailView.svelte
index 9200c01e5..2e8ef45e5 100644
--- a/src/lib/components/views/ArtistDetailView.svelte
+++ b/src/lib/components/views/ArtistDetailView.svelte
@@ -1016,6 +1016,7 @@
               artwork={album.artwork}
               title={album.title}
               artist={album.year || ''}
+              genre={album.genre}
               quality={album.quality}
               searchId={`album-${album.id}`}
               onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1060,6 +1061,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             quality={album.quality}
             searchId={`album-${album.id}`}
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1092,6 +1094,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             quality={album.quality}
             searchId={`album-${album.id}`}
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1124,6 +1127,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             quality={album.quality}
             searchId={`album-${album.id}`}
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1156,6 +1160,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             quality={album.quality}
             searchId={`album-${album.id}`}
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1188,6 +1193,7 @@
             artwork={album.artwork}
             title={album.title}
             artist={album.year || ''}
+            genre={album.genre}
             quality={album.quality}
             searchId={`album-${album.id}`}
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
diff --git a/src/lib/components/views/FavoritesView.svelte b/src/lib/components/views/FavoritesView.svelte
index 6cfc335b3..4e91f5aaf 100644
--- a/src/lib/components/views/FavoritesView.svelte
+++ b/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;
@@ -517,6 +518,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`;
@@ -1190,6 +1195,7 @@
                         artwork={album.image?.large || album.image?.thumbnail || ''}
                         title={album.title}
                         artist={album.artist.name}
+                        genre={getGenreLabel(album)}
                         quality={getQualityLabel(album)}
                         onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                         onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -1261,6 +1267,7 @@
                 artwork={album.image?.large || album.image?.thumbnail || ''}
                 title={album.title}
                 artist={album.artist.name}
+                genre={getGenreLabel(album)}
                 quality={getQualityLabel(album)}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
diff --git a/src/lib/components/views/HomeView.svelte b/src/lib/components/views/HomeView.svelte
index 918a4f310..100031bdf 100644
--- a/src/lib/components/views/HomeView.svelte
+++ b/src/lib/components/views/HomeView.svelte
@@ -36,6 +36,7 @@
     artwork: string;
     title: string;
     artist: string;
+    genre: string;
     quality?: string;
   }
 
@@ -328,6 +329,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)
     };
   }
@@ -637,6 +639,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -666,6 +669,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -695,6 +699,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -724,6 +729,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -753,6 +759,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -782,6 +789,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -881,6 +889,7 @@
                 artwork={album.artwork}
                 title={album.title}
                 artist={album.artist}
+                genre={album.genre}
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
diff --git a/src/lib/components/views/SearchView.svelte b/src/lib/components/views/SearchView.svelte
index db4ac184d..5865de712 100644
--- a/src/lib/components/views/SearchView.svelte
+++ b/src/lib/components/views/SearchView.svelte
@@ -132,6 +132,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;
@@ -376,6 +377,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`;
@@ -624,6 +629,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])}
                 quality={getQualityLabel(allResults.albums.items[0])}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(allResults.albums.items[0].id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(allResults.albums.items[0].id) : undefined}
@@ -756,6 +762,7 @@
                           artwork={getAlbumArtwork(album)}
                           title={album.title}
                           artist={album.artist?.name || 'Unknown Artist'}
+                          genre={getGenreLabel(album)}
                           quality={getQualityLabel(album)}
                           onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                           onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
@@ -923,6 +930,7 @@
               artwork={getAlbumArtwork(album)}
               title={album.title}
               artist={album.artist?.name || 'Unknown Artist'}
+              genre={getGenreLabel(album)}
               quality={getQualityLabel(album)}
               onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
               onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 5cfe44b60..4344901ef 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -130,6 +130,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   epsSingles: {
     id: string;
@@ -137,6 +138,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   liveAlbums: {
     id: string;
@@ -144,6 +146,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   compilations: {
     id: string;
@@ -151,6 +154,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   tributes: {
     id: string;
@@ -158,6 +162,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   others: {
     id: string;
@@ -165,6 +170,7 @@ export interface ArtistDetail {
     artwork: string;
     year?: string;
     quality: string;
+    genre: string;
   }[];
   playlists: {
     id: number;