From e9c7e4672c031cb85a473dad64049a177be520ca Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 25 Jan 2026 23:47:33 -0600
Subject: [PATCH] Add release date display to AlbumCard overlay

- Add releaseDate prop to AlbumCard component
- Display release date below genre in overlay (format: "Jan 25, 2026")
- Update all AlbumCard usages across views to pass releaseDate:
  - ArtistDetailView (all album sections)
  - HomeView (all featured album sections)
  - SearchView (search results)
  - FavoritesView (favorite albums)
  - LabelView (label albums)
  - AlbumDetailView ("By the same artist" section)
- Add releaseDate to types and adapters
- Skip local library view (VirtualizedAlbumList)
---
 src/lib/adapters/qobuzAdapters.ts             |  1 +
 src/lib/components/AlbumCard.svelte           | 39 ++++++++++++++++++-
 .../components/views/AlbumDetailView.svelte   |  2 +
 .../components/views/ArtistDetailView.svelte  |  6 +++
 src/lib/components/views/FavoritesView.svelte |  2 +
 src/lib/components/views/HomeView.svelte      | 11 +++++-
 src/lib/components/views/LabelView.svelte     |  1 +
 src/lib/components/views/SearchView.svelte    |  3 ++
 src/lib/types/index.ts                        |  6 +++
 src/routes/+page.svelte                       |  8 ++--
 10 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/src/lib/adapters/qobuzAdapters.ts b/src/lib/adapters/qobuzAdapters.ts
index ffa8efdcb..444803b70 100644
--- a/src/lib/adapters/qobuzAdapters.ts
+++ b/src/lib/adapters/qobuzAdapters.ts
@@ -260,6 +260,7 @@ function toArtistAlbumSummary(album: QobuzAlbum): ArtistAlbumSummary {
     title: album.title,
     artwork,
     year: album.release_date_original?.split('-')[0],
+    releaseDate: album.release_date_original,
     quality,
     genre: album.genre?.name || "Unknown genre"
   };
diff --git a/src/lib/components/AlbumCard.svelte b/src/lib/components/AlbumCard.svelte
index be1005ac6..c52baa308 100644
--- a/src/lib/components/AlbumCard.svelte
+++ b/src/lib/components/AlbumCard.svelte
@@ -15,6 +15,7 @@
     title: string;
     artist: string;
     genre: string;
+    releaseDate?: string;
     quality?: string;
     size?: 'standard' | 'large';
     searchId?: string;
@@ -40,6 +41,7 @@
     title,
     artist,
     genre,
+    releaseDate,
     quality,
     size = 'standard',
     searchId,
@@ -90,6 +92,19 @@
     imageError = true;
   }
 
+  function formatReleaseDate(dateStr: string | undefined): string {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return '';
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  }
+
+  const formattedDate = $derived(formatReleaseDate(releaseDate));
+
   async function handleToggleFavorite(event: MouseEvent) {
     event.stopPropagation();
     if (!albumId || !favoriteAvailable) return;
@@ -184,7 +199,12 @@
     <!-- Action Overlay -->
     {#if hasOverlay}
       <div class="action-overlay" class:menu-open={menuOpen}>
-        <div class="overlay-genre">{genre}</div>
+        <div class="overlay-info">
+          <span class="overlay-genre">{genre}</span>
+          {#if formattedDate}
+            <span class="overlay-date">{formattedDate}</span>
+          {/if}
+        </div>
         <div class="action-buttons">
           {#if showFavoriteButton}
             <button
@@ -393,15 +413,30 @@
     height: 30px;
   }
 
-  .overlay-genre {
+  .overlay-info {
     align-self: flex-start;
     width: 100%;
     text-align: left;
     padding: 14px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .overlay-genre {
     font-size: 14px;
     font-weight: 600;
     color: white;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .overlay-date {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.85);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
   }
 
   :global(.album-card .album-menu) {
diff --git a/src/lib/components/views/AlbumDetailView.svelte b/src/lib/components/views/AlbumDetailView.svelte
index cc7eabcb0..34b4d22d6 100644
--- a/src/lib/components/views/AlbumDetailView.svelte
+++ b/src/lib/components/views/AlbumDetailView.svelte
@@ -33,6 +33,7 @@
     artwork: string;
     quality: string;
     genre: string;
+    releaseDate?: string;
   }
 
   interface Props {
@@ -485,6 +486,7 @@
                 title={relatedAlbum.title}
                 artist={album.artist}
                 genre={relatedAlbum.genre}
+                releaseDate={relatedAlbum.releaseDate}
                 size="large"
                 quality={relatedAlbum.quality}
                 onclick={() => onRelatedAlbumClick?.(relatedAlbum.id)}
diff --git a/src/lib/components/views/ArtistDetailView.svelte b/src/lib/components/views/ArtistDetailView.svelte
index f62c52bb0..43fc8059a 100644
--- a/src/lib/components/views/ArtistDetailView.svelte
+++ b/src/lib/components/views/ArtistDetailView.svelte
@@ -1519,6 +1519,7 @@
               title={album.title}
               artist={album.year || ''}
               genre={album.genre}
+              releaseDate={album.releaseDate}
               size="large"
               quality={album.quality}
               searchId={`album-${album.id}`}
@@ -1581,6 +1582,7 @@
             title={album.title}
             artist={album.year || ''}
             genre={album.genre}
+            releaseDate={album.releaseDate}
             size="large"
             quality={album.quality}
             searchId={`album-${album.id}`}
@@ -1642,6 +1644,7 @@
             title={album.title}
             artist={album.year || ''}
             genre={album.genre}
+            releaseDate={album.releaseDate}
             size="large"
             quality={album.quality}
             searchId={`album-${album.id}`}
@@ -1703,6 +1706,7 @@
             title={album.title}
             artist={album.year || ''}
             genre={album.genre}
+            releaseDate={album.releaseDate}
             size="large"
             quality={album.quality}
             searchId={`album-${album.id}`}
@@ -1764,6 +1768,7 @@
             title={album.title}
             artist={album.year || ''}
             genre={album.genre}
+            releaseDate={album.releaseDate}
             size="large"
             quality={album.quality}
             searchId={`album-${album.id}`}
@@ -1888,6 +1893,7 @@
               title={album.title}
               artist={album.year || ''}
               genre={album.genre}
+              releaseDate={album.releaseDate}
               size="large"
               quality={album.quality}
               searchId={`album-${album.id}`}
diff --git a/src/lib/components/views/FavoritesView.svelte b/src/lib/components/views/FavoritesView.svelte
index 0da71a8dc..561ddb9f4 100644
--- a/src/lib/components/views/FavoritesView.svelte
+++ b/src/lib/components/views/FavoritesView.svelte
@@ -1301,6 +1301,7 @@
                         title={album.title}
                         artist={album.artist.name}
                         genre={getGenreLabel(album)}
+                        releaseDate={album.release_date_original}
                         size="large"
                         quality={getQualityLabel(album)}
                         onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1374,6 +1375,7 @@
                 title={album.title}
                 artist={album.artist.name}
                 genre={getGenreLabel(album)}
+                releaseDate={album.release_date_original}
                 size="large"
                 quality={getQualityLabel(album)}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
diff --git a/src/lib/components/views/HomeView.svelte b/src/lib/components/views/HomeView.svelte
index 547bf0d7b..a1f559b9b 100644
--- a/src/lib/components/views/HomeView.svelte
+++ b/src/lib/components/views/HomeView.svelte
@@ -38,6 +38,7 @@
     artist: string;
     genre: string;
     quality?: string;
+    releaseDate?: string;
   }
 
   interface ArtistCardData {
@@ -334,7 +335,8 @@
       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)
+      quality: formatQuality(album.hires_streamable, album.maximum_bit_depth, album.maximum_sampling_rate),
+      releaseDate: album.release_date_original
     };
   }
 
@@ -647,6 +649,7 @@
                 title={album.title}
                 artist={album.artist}
                 genre={album.genre}
+                releaseDate={album.releaseDate}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -678,6 +681,7 @@
                 title={album.title}
                 artist={album.artist}
                 genre={album.genre}
+                releaseDate={album.releaseDate}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -709,6 +713,7 @@
                 title={album.title}
                 artist={album.artist}
                 genre={album.genre}
+                releaseDate={album.releaseDate}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -740,6 +745,7 @@
                 title={album.title}
                 artist={album.artist}
                 genre={album.genre}
+                releaseDate={album.releaseDate}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -771,6 +777,7 @@
                 title={album.title}
                 artist={album.artist}
                 genre={album.genre}
+                releaseDate={album.releaseDate}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -802,6 +809,7 @@
                 title={album.title}
                 artist={album.artist}
                 genre={album.genre}
+                releaseDate={album.releaseDate}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -904,6 +912,7 @@
                 title={album.title}
                 artist={album.artist}
                 genre={album.genre}
+                releaseDate={album.releaseDate}
                 size="large"
                 quality={album.quality}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
diff --git a/src/lib/components/views/LabelView.svelte b/src/lib/components/views/LabelView.svelte
index ab8b3ac6d..52e6a6e2f 100644
--- a/src/lib/components/views/LabelView.svelte
+++ b/src/lib/components/views/LabelView.svelte
@@ -278,6 +278,7 @@
             title={album.title}
             artist={album.artist?.name || 'Unknown Artist'}
             genre={getGenreLabel(album)}
+            releaseDate={album.release_date_original}
             quality={getQualityLabel(album)}
             size="large"
             onclick={() => onAlbumClick?.(album.id)}
diff --git a/src/lib/components/views/SearchView.svelte b/src/lib/components/views/SearchView.svelte
index 831273dd8..5fe5d92ff 100644
--- a/src/lib/components/views/SearchView.svelte
+++ b/src/lib/components/views/SearchView.svelte
@@ -726,6 +726,7 @@
                 title={allResults.albums.items[0].title}
                 artist={allResults.albums.items[0].artist?.name || 'Unknown Artist'}
                 genre={getGenreLabel(allResults.albums.items[0])}
+                releaseDate={allResults.albums.items[0].release_date_original}
                 size="large"
                 quality={getQualityLabel(allResults.albums.items[0])}
                 onPlay={onAlbumPlay ? () => onAlbumPlay(allResults.albums.items[0].id) : undefined}
@@ -863,6 +864,7 @@
                           title={album.title}
                           artist={album.artist?.name || 'Unknown Artist'}
                           genre={getGenreLabel(album)}
+                          releaseDate={album.release_date_original}
                           size="large"
                           quality={getQualityLabel(album)}
                           onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
@@ -1003,6 +1005,7 @@
               title={album.title}
               artist={album.artist?.name || 'Unknown Artist'}
               genre={getGenreLabel(album)}
+              releaseDate={album.release_date_original}
               size="large"
               quality={getQualityLabel(album)}
               onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 4a011bd51..f1d7fe598 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -188,6 +188,7 @@ export interface ArtistDetail {
     title: string;
     artwork: string;
     year?: string;
+    releaseDate?: string;
     quality: string;
     genre: string;
   }[];
@@ -196,6 +197,7 @@ export interface ArtistDetail {
     title: string;
     artwork: string;
     year?: string;
+    releaseDate?: string;
     quality: string;
     genre: string;
   }[];
@@ -204,6 +206,7 @@ export interface ArtistDetail {
     title: string;
     artwork: string;
     year?: string;
+    releaseDate?: string;
     quality: string;
     genre: string;
   }[];
@@ -212,6 +215,7 @@ export interface ArtistDetail {
     title: string;
     artwork: string;
     year?: string;
+    releaseDate?: string;
     quality: string;
     genre: string;
   }[];
@@ -220,6 +224,7 @@ export interface ArtistDetail {
     title: string;
     artwork: string;
     year?: string;
+    releaseDate?: string;
     quality: string;
     genre: string;
   }[];
@@ -228,6 +233,7 @@ export interface ArtistDetail {
     title: string;
     artwork: string;
     year?: string;
+    releaseDate?: string;
     quality: string;
     genre: string;
   }[];
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9c666dd33..c79c8aca2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -335,7 +335,7 @@
   let isArtistAlbumsLoading = $state(false);
 
   // Artist albums for "By the same artist" section in album view
-  let albumArtistAlbums = $state<{ id: string; title: string; artwork: string; quality: string; genre: string }[]>([]);
+  let albumArtistAlbums = $state<{ id: string; title: string; artwork: string; quality: string; genre: string; releaseDate?: string }[]>([]);
 
   // Overlay States (from uiStore subscription)
   let isQueueOpen = $state(false);
@@ -456,14 +456,16 @@
           title: a.title,
           artwork: a.artwork,
           quality: a.quality,
-          genre: a.genre
+          genre: a.genre,
+          releaseDate: a.releaseDate
         })),
         ...artistDetail.liveAlbums.map(a => ({
           id: a.id,
           title: a.title,
           artwork: a.artwork,
           quality: a.quality,
-          genre: a.genre
+          genre: a.genre,
+          releaseDate: a.releaseDate
         }))
       ].slice(0, 16);