From bdb49f65bbf9977eba46aa2e432369a1752fce79 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sat, 24 Jan 2026 17:05:08 -0600
Subject: [PATCH] Fix PlaylistDetailView track list header column alignment

Update header to use flexbox layout matching AlbumDetailView pattern.
Add missing column classes: col-title, col-album, col-quality, col-icon, col-spacer.
---
 src/lib/components/AlbumCard.svelte           |  17 +-
 .../components/VirtualizedAlbumList.svelte    |  13 +-
 .../components/views/AlbumDetailView.svelte   | 290 +++++++++++++++++-
 .../components/views/ArtistDetailView.svelte  |  26 +-
 .../components/views/LocalLibraryView.svelte  |  49 +--
 .../views/PlaylistDetailView.svelte           | 168 +++++-----
 src/lib/components/views/SearchView.svelte    | 288 ++++++++---------
 src/routes/+page.svelte                       |  71 +++++
 8 files changed, 608 insertions(+), 314 deletions(-)

diff --git a/src/lib/components/AlbumCard.svelte b/src/lib/components/AlbumCard.svelte
index 8b82f74a4..6e7e7fb0d 100644
--- a/src/lib/components/AlbumCard.svelte
+++ b/src/lib/components/AlbumCard.svelte
@@ -169,11 +169,13 @@
     class="artwork-container"
     style="width: {cardSize}px; height: {cardSize}px"
   >
-    {#if imageError || !artwork}
-      <div class="artwork-placeholder">
-        <Disc3 size={48} />
-      </div>
-    {:else}
+    <!-- Placeholder always rendered as background layer (visible while image loads) -->
+    <div class="artwork-placeholder">
+      <Disc3 size={48} />
+    </div>
+
+    <!-- Image overlays placeholder when loaded -->
+    {#if !imageError && artwork}
       <img src={artwork} alt={title} loading="lazy" decoding="async" onerror={handleImageError} />
     {/if}
 
@@ -256,13 +258,17 @@
     position: relative;
     margin-bottom: 8px;
     border-radius: 8px;
+    overflow: hidden;
   }
 
   .artwork-container img {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: inherit;
+    z-index: 1;
   }
 
   .artwork-placeholder {
@@ -321,6 +327,7 @@
     -webkit-backdrop-filter: blur(4px);
     pointer-events: auto;
     border-radius: inherit;
+    z-index: 2;
   }
 
   .album-card:hover .action-overlay,
diff --git a/src/lib/components/VirtualizedAlbumList.svelte b/src/lib/components/VirtualizedAlbumList.svelte
index b87e224a4..57ee7a048 100644
--- a/src/lib/components/VirtualizedAlbumList.svelte
+++ b/src/lib/components/VirtualizedAlbumList.svelte
@@ -274,6 +274,11 @@
             onkeydown={(e) => e.key === 'Enter' && onAlbumClick(item.album)}
           >
             <div class="album-row-art">
+              <!-- Placeholder always visible as background -->
+              <div class="artwork-placeholder">
+                <Disc3 size={28} />
+              </div>
+              <!-- Image overlays placeholder when loaded -->
               {#if item.album.artwork_path}
                 <img
                   src={getArtworkUrl(item.album.artwork_path)}
@@ -281,10 +286,6 @@
                   loading="lazy"
                   decoding="async"
                 />
-              {:else}
-                <div class="artwork-placeholder">
-                  <Disc3 size={28} />
-                </div>
               {/if}
             </div>
             <div class="album-row-info">
@@ -382,6 +383,7 @@
   }
 
   .album-row-art {
+    position: relative;
     width: 52px;
     height: 52px;
     border-radius: 8px;
@@ -390,9 +392,12 @@
   }
 
   .album-row-art img {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
+    z-index: 1;
   }
 
   .artwork-placeholder {
diff --git a/src/lib/components/views/AlbumDetailView.svelte b/src/lib/components/views/AlbumDetailView.svelte
index 83e685295..730d42a52 100644
--- a/src/lib/components/views/AlbumDetailView.svelte
+++ b/src/lib/components/views/AlbumDetailView.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
-  import { ArrowLeft, Play, Shuffle, Heart, CloudDownload } from 'lucide-svelte';
+  import { ArrowLeft, Play, Shuffle, Heart, CloudDownload, ChevronLeft, ChevronRight } from 'lucide-svelte';
+  import AlbumCard from '../AlbumCard.svelte';
   import TrackRow from '../TrackRow.svelte';
   import AlbumMenu from '../AlbumMenu.svelte';
   import { getOfflineCacheState, type OfflineCacheStatus, isAlbumFullyCached } from '$lib/stores/offlineCacheState';
@@ -26,6 +27,13 @@
     isrc?: string;
   }
 
+  interface ArtistAlbum {
+    id: string;
+    title: string;
+    artwork: string;
+    quality: string;
+  }
+
   interface Props {
     album: {
       id: string;
@@ -70,6 +78,17 @@
     isPlaybackActive?: boolean;
     onOpenAlbumFolder?: () => void;
     onReDownloadAlbum?: () => void;
+    // By the same artist section
+    artistAlbums?: ArtistAlbum[];
+    onRelatedAlbumClick?: (albumId: string) => void;
+    onRelatedAlbumPlay?: (albumId: string) => void;
+    onRelatedAlbumPlayNext?: (albumId: string) => void;
+    onRelatedAlbumPlayLater?: (albumId: string) => void;
+    onRelatedAlbumDownload?: (albumId: string) => void;
+    onRelatedAlbumShareQobuz?: (albumId: string) => void;
+    onRelatedAlbumShareSonglink?: (albumId: string) => void;
+    onViewArtistDiscography?: () => void;
+    checkRelatedAlbumDownloaded?: (albumId: string) => Promise<boolean>;
   }
 
   let {
@@ -101,12 +120,88 @@
     activeTrackId = null,
     isPlaybackActive = false,
     onOpenAlbumFolder,
-    onReDownloadAlbum
+    onReDownloadAlbum,
+    artistAlbums = [],
+    onRelatedAlbumClick,
+    onRelatedAlbumPlay,
+    onRelatedAlbumPlayNext,
+    onRelatedAlbumPlayLater,
+    onRelatedAlbumDownload,
+    onRelatedAlbumShareQobuz,
+    onRelatedAlbumShareSonglink,
+    onViewArtistDiscography,
+    checkRelatedAlbumDownloaded
   }: Props = $props();
 
   let isFavorite = $state(false);
   let isFavoriteLoading = $state(false);
   let scrollContainer: HTMLDivElement | null = $state(null);
+
+  // Carousel state for "By the same artist" section
+  let carouselContainer: HTMLDivElement | null = $state(null);
+  let albumsPerPage = $state(4);
+  let currentPage = $state(0);
+
+  // Filter out current album from artist albums
+  const filteredArtistAlbums = $derived(
+    artistAlbums.filter(a => a.id !== album.id).slice(0, 16)
+  );
+
+  const totalPages = $derived(Math.ceil(filteredArtistAlbums.length / albumsPerPage));
+  const visibleAlbums = $derived(
+    filteredArtistAlbums.slice(currentPage * albumsPerPage, (currentPage + 1) * albumsPerPage)
+  );
+  const canScrollLeft = $derived(currentPage > 0);
+  const canScrollRight = $derived(currentPage < totalPages - 1);
+  const hasMoreThanVisible = $derived(filteredArtistAlbums.length > albumsPerPage);
+
+  // Download status tracking for "By the same artist" albums
+  let relatedAlbumDownloadStatuses = $state<Map<string, boolean>>(new Map());
+
+  async function loadRelatedAlbumDownloadStatus(albumId: string) {
+    if (!checkRelatedAlbumDownloaded) return false;
+    try {
+      const isDownloaded = await checkRelatedAlbumDownloaded(albumId);
+      relatedAlbumDownloadStatuses.set(albumId, isDownloaded);
+      relatedAlbumDownloadStatuses = relatedAlbumDownloadStatuses;
+      return isDownloaded;
+    } catch {
+      return false;
+    }
+  }
+
+  async function loadAllRelatedAlbumDownloadStatuses() {
+    if (!checkRelatedAlbumDownloaded || filteredArtistAlbums.length === 0) return;
+    await Promise.all(filteredArtistAlbums.map(album => loadRelatedAlbumDownloadStatus(album.id)));
+  }
+
+  function isRelatedAlbumDownloaded(albumId: string): boolean {
+    return relatedAlbumDownloadStatuses.get(albumId) ?? false;
+  }
+
+  // Load download statuses when artist albums change
+  $effect(() => {
+    if (filteredArtistAlbums.length > 0) {
+      loadAllRelatedAlbumDownloadStatuses();
+    }
+  });
+
+  function calculateAlbumsPerPage() {
+    if (!carouselContainer) return;
+    const containerWidth = carouselContainer.clientWidth;
+    const gap = 16;
+    const cardWidth = 162;
+    const cols = Math.floor((containerWidth + gap) / (cardWidth + gap));
+    albumsPerPage = Math.max(2, cols);
+  }
+
+  function scrollCarousel(direction: 'left' | 'right') {
+    if (direction === 'left') {
+      currentPage = Math.max(0, currentPage - 1);
+    } else {
+      currentPage = Math.min(totalPages - 1, currentPage + 1);
+    }
+  }
   
   const albumFullyDownloaded = $derived(
     isAlbumFullyCached(album.tracks.map(t => t.id))
@@ -157,6 +252,17 @@
     };
   });
 
+  // Set up resize observer for carousel when container is available
+  $effect(() => {
+    if (!carouselContainer) return;
+    calculateAlbumsPerPage();
+    const resizeObserver = new ResizeObserver(() => {
+      calculateAlbumsPerPage();
+    });
+    resizeObserver.observe(carouselContainer);
+    return () => resizeObserver.disconnect();
+  });
+
   $effect(() => {
     if (!album.tracks?.length) return;
     const targetId = consumeContextTrackFocus('album', album.id);
@@ -312,6 +418,73 @@
       {/each}
     </div>
   </div>
+
+  <!-- By the same artist Section -->
+  {#if filteredArtistAlbums.length > 0 && !isVariousArtists}
+    <div class="same-artist-section">
+      <div class="section-header">
+        <h2 class="section-title">By the same artist</h2>
+        {#if hasMoreThanVisible}
+          <div class="carousel-controls">
+            <button
+              class="carousel-btn"
+              onclick={() => scrollCarousel('left')}
+              disabled={!canScrollLeft}
+              aria-label="Previous albums"
+            >
+              <ChevronLeft size={20} />
+            </button>
+            <button
+              class="carousel-btn"
+              onclick={() => scrollCarousel('right')}
+              disabled={!canScrollRight}
+              aria-label="Next albums"
+            >
+              <ChevronRight size={20} />
+            </button>
+          </div>
+        {/if}
+      </div>
+      <div class="albums-carousel-wrapper" bind:this={carouselContainer}>
+        <div class="albums-carousel">
+          {#each visibleAlbums as relatedAlbum}
+            <div class="album-card-wrapper">
+              <AlbumCard
+                albumId={relatedAlbum.id}
+                artwork={relatedAlbum.artwork}
+                title={relatedAlbum.title}
+                artist={album.artist}
+                quality={relatedAlbum.quality}
+                onclick={() => onRelatedAlbumClick?.(relatedAlbum.id)}
+                onPlay={onRelatedAlbumPlay ? () => onRelatedAlbumPlay(relatedAlbum.id) : undefined}
+                onPlayNext={onRelatedAlbumPlayNext ? () => onRelatedAlbumPlayNext(relatedAlbum.id) : undefined}
+                onPlayLater={onRelatedAlbumPlayLater ? () => onRelatedAlbumPlayLater(relatedAlbum.id) : undefined}
+                onDownload={onRelatedAlbumDownload ? () => onRelatedAlbumDownload(relatedAlbum.id) : undefined}
+                onShareQobuz={onRelatedAlbumShareQobuz ? () => onRelatedAlbumShareQobuz(relatedAlbum.id) : undefined}
+                onShareSonglink={onRelatedAlbumShareSonglink ? () => onRelatedAlbumShareSonglink(relatedAlbum.id) : undefined}
+                isAlbumFullyDownloaded={isRelatedAlbumDownloaded(relatedAlbum.id)}
+              />
+            </div>
+          {/each}
+          {#if onViewArtistDiscography && filteredArtistAlbums.length >= albumsPerPage && currentPage === totalPages - 1}
+            <div class="album-card-wrapper">
+              <div class="view-more-card">
+                <button class="view-more-cover" onclick={onViewArtistDiscography}>
+                  <div class="view-more-label">
+                    <span>View more</span>
+                    <ChevronRight size={20} />
+                  </div>
+                </button>
+                <div class="view-more-info">
+                  <span class="view-more-text">See full discography</span>
+                </div>
+              </div>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -520,4 +693,117 @@
     flex-direction: column;
     width: 100%;
   }
+
+  /* By the same artist section */
+  .same-artist-section {
+    margin-top: 48px;
+    padding-top: 32px;
+    border-top: 1px solid var(--bg-tertiary);
+  }
+
+  .same-artist-section .section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .same-artist-section .section-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .carousel-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .carousel-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background-color: transparent;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .carousel-btn:hover:not(:disabled) {
+    background-color: var(--bg-tertiary);
+  }
+
+  .carousel-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .albums-carousel-wrapper {
+    position: relative;
+    overflow-x: hidden;
+  }
+
+  .albums-carousel {
+    display: flex;
+    gap: 16px;
+  }
+
+  .album-card-wrapper {
+    min-width: 162px;
+    flex-shrink: 0;
+  }
+
+  .view-more-card {
+    width: 162px;
+    min-width: 162px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .view-more-cover {
+    width: 162px;
+    height: 162px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
+    border: 1px dashed var(--border-strong);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .view-more-cover:hover {
+    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
+    border-color: var(--accent-primary);
+  }
+
+  .view-more-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--text-muted);
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .view-more-cover:hover .view-more-label {
+    color: var(--accent-primary);
+  }
+
+  .view-more-info {
+    padding: 0 4px;
+  }
+
+  .view-more-text {
+    font-size: 13px;
+    color: var(--text-muted);
+  }
 </style>
diff --git a/src/lib/components/views/ArtistDetailView.svelte b/src/lib/components/views/ArtistDetailView.svelte
index cddff283b..8cf022b09 100644
--- a/src/lib/components/views/ArtistDetailView.svelte
+++ b/src/lib/components/views/ArtistDetailView.svelte
@@ -1120,12 +1120,13 @@
             >
               <div class="track-number">{index + 1}</div>
               <div class="track-artwork">
+                <!-- Placeholder always visible as background -->
+                <div class="track-artwork-placeholder">
+                  <Music size={16} />
+                </div>
+                <!-- Image overlays placeholder when loaded -->
                 {#if track.album?.image?.thumbnail || track.album?.image?.small}
                   <img src={track.album?.image?.thumbnail || track.album?.image?.small} alt={track.title} loading="lazy" decoding="async" />
-                {:else}
-                  <div class="track-artwork-placeholder">
-                    <Music size={16} />
-                  </div>
                 {/if}
                 <button
                   class="track-play-overlay"
@@ -1549,12 +1550,13 @@
             disabled={!onPlaylistClick}
           >
             <div class="playlist-artwork">
+              <!-- Placeholder always visible as background -->
+              <div class="playlist-artwork-placeholder">
+                <Music size={18} />
+              </div>
+              <!-- Image overlays placeholder when loaded -->
               {#if playlist.artwork}
                 <img src={playlist.artwork} alt={playlist.title} loading="lazy" decoding="async" />
-              {:else}
-                <div class="playlist-artwork-placeholder">
-                  <Music size={18} />
-                </div>
               {/if}
             </div>
             <div class="playlist-info">
@@ -2384,6 +2386,7 @@
   }
 
   .playlist-artwork {
+    position: relative;
     width: 56px;
     height: 56px;
     border-radius: 8px;
@@ -2392,9 +2395,12 @@
   }
 
   .playlist-artwork img {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
+    z-index: 1;
   }
 
   .playlist-artwork-placeholder {
@@ -2573,9 +2579,12 @@
   }
 
   .track-artwork img {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
+    z-index: 1;
   }
 
   .track-artwork-placeholder {
@@ -2598,6 +2607,7 @@
     border: none;
     cursor: pointer;
     transition: background 150ms ease;
+    z-index: 2;
   }
 
   .track-row:hover .track-play-overlay {
diff --git a/src/lib/components/views/LocalLibraryView.svelte b/src/lib/components/views/LocalLibraryView.svelte
index f827d93b6..2f1bf178c 100644
--- a/src/lib/components/views/LocalLibraryView.svelte
+++ b/src/lib/components/views/LocalLibraryView.svelte
@@ -2082,13 +2082,11 @@
             </div>
           {/if}
           <div class="album-actions">
-            <button class="play-btn" onclick={handlePlayAllAlbum}>
-              <Play size={16} fill="white" />
-              <span>Play All</span>
+            <button class="action-btn-circle primary" onclick={handlePlayAllAlbum} title="Play All">
+              <Play size={20} fill="currentColor" color="currentColor" />
             </button>
-            <button class="shuffle-btn" onclick={handleShuffleAllAlbum}>
-              <Shuffle size={16} />
-              <span>Shuffle</span>
+            <button class="action-btn-circle" onclick={handleShuffleAllAlbum} title="Shuffle">
+              <Shuffle size={18} />
             </button>
           </div>
         </div>
@@ -4232,45 +4230,6 @@
     gap: 12px;
   }
 
-  .play-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 28px;
-    background: var(--accent-primary);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 150ms ease;
-  }
-
-  .play-btn:hover {
-    background: var(--accent-hover);
-  }
-
-  .shuffle-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 24px;
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-subtle);
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .shuffle-btn:hover {
-    background: var(--bg-hover);
-    border-color: var(--text-muted);
-  }
-
   /* Nav row for album detail */
   .nav-row {
     display: flex;
diff --git a/src/lib/components/views/PlaylistDetailView.svelte b/src/lib/components/views/PlaylistDetailView.svelte
index ef37a2b82..deb0a1627 100644
--- a/src/lib/components/views/PlaylistDetailView.svelte
+++ b/src/lib/components/views/PlaylistDetailView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ArrowLeft, Play, Shuffle, ListMusic, Search, X, ChevronDown, ChevronRight, ImagePlus, Edit3, BarChart2, Heart } from 'lucide-svelte';
+  import { ArrowLeft, Play, Shuffle, ListMusic, Search, X, ChevronDown, ChevronRight, ImagePlus, Edit3, BarChart2, Heart, CloudDownload } from 'lucide-svelte';
   import AlbumMenu from '../AlbumMenu.svelte';
   import PlaylistCollage from '../PlaylistCollage.svelte';
   import PlaylistModal from '../PlaylistModal.svelte';
@@ -183,7 +183,6 @@
 
   let loading = $state(true);
   let error = $state<string | null>(null);
-  let playBtnHovered = $state(false);
   let scrollContainer: HTMLDivElement | null = $state(null);
 
   // Offline mode state
@@ -978,17 +977,7 @@
       <!-- Playlist Metadata -->
       <div class="metadata">
         <span class="playlist-label">Playlist</span>
-        <div class="title-row">
-          <h1 class="playlist-title">{playlist.name}</h1>
-          <button
-            class="favorite-btn"
-            class:active={isFavorite}
-            onclick={toggleFavorite}
-            title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
-          >
-            <Heart size={24} fill={isFavorite ? 'var(--accent-primary)' : 'none'} color={isFavorite ? 'var(--accent-primary)' : 'var(--text-secondary)'} />
-          </button>
-        </div>
+        <h1 class="playlist-title">{playlist.name}</h1>
         {#if playlist.description}
           <p class="playlist-description">{playlist.description}</p>
         {/if}
@@ -1010,18 +999,30 @@
         <!-- Action Buttons -->
         <div class="actions">
           <button
-            class="play-btn"
-            style="background-color: {playBtnHovered ? 'var(--accent-hover)' : 'var(--accent-primary)'}"
-            onmouseenter={() => (playBtnHovered = true)}
-            onmouseleave={() => (playBtnHovered = false)}
+            class="action-btn-circle primary"
             onclick={handlePlayAll}
+            title="Play"
           >
-            <Play size={18} fill="white" color="white" />
-            <span>Play</span>
+            <Play size={20} fill="currentColor" color="currentColor" />
           </button>
-          <button class="secondary-btn" onclick={handleShuffle}>
+          <button
+            class="action-btn-circle"
+            onclick={handleShuffle}
+            title="Shuffle"
+          >
             <Shuffle size={18} />
-            <span>Shuffle</span>
+          </button>
+          <button
+            class="action-btn-circle"
+            class:is-active={isFavorite}
+            onclick={toggleFavorite}
+            title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+          >
+            <Heart
+              size={18}
+              color={isFavorite ? 'var(--accent-primary)' : 'currentColor'}
+              fill={isFavorite ? 'var(--accent-primary)' : 'none'}
+            />
           </button>
           <AlbumMenu
             onPlayNext={handlePlayAllNext}
@@ -1092,10 +1093,14 @@
     <!-- Track List -->
     <div class="track-list">
       <div class="track-list-header">
-        <span class="col-number">#</span>
-        <span class="col-title">Title</span>
-        <span class="col-album">Album</span>
-        <span class="col-duration">Duration</span>
+        <div class="col-number">#</div>
+        <div class="col-title">Title</div>
+        <div class="col-album">Album</div>
+        <div class="col-duration">Duration</div>
+        <div class="col-quality">Quality</div>
+        <div class="col-icon"><Heart size={14} /></div>
+        <div class="col-icon"><CloudDownload size={14} /></div>
+        <div class="col-spacer"></div>
       </div>
 
       {#each displayTracks as track, idx (`${idx}-${track.id}-${downloadStateVersion}`)}
@@ -1406,33 +1411,6 @@
     margin-bottom: 8px;
   }
 
-  .title-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .favorite-btn {
-    background: none;
-    border: none;
-    padding: 4px;
-    cursor: pointer;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.15s ease, background-color 0.15s ease;
-  }
-
-  .favorite-btn:hover {
-    background-color: var(--bg-tertiary);
-    transform: scale(1.1);
-  }
-
-  .favorite-btn.active:hover {
-    background-color: rgba(var(--accent-primary-rgb), 0.15);
-  }
-
   .playlist-title {
     font-size: 24px;
     font-weight: 700;
@@ -1476,42 +1454,25 @@
   .actions {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 12px;
   }
 
-  .play-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 32px;
-    background-color: var(--accent-primary);
-    color: white;
+  /* Style AlbumMenu trigger to match action buttons */
+  .actions :global(.album-menu .menu-trigger) {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
     border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 150ms ease;
+    box-shadow: inset 0 0 0 1px var(--border-strong);
+    color: var(--text-muted);
   }
 
-  .secondary-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 24px;
-    background-color: transparent;
+  .actions :global(.album-menu .menu-trigger:hover) {
+    background: var(--bg-hover);
     color: var(--text-primary);
-    border: 1px solid var(--text-muted);
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: border-color 150ms ease;
+    box-shadow: inset 0 0 0 1px var(--text-primary);
   }
 
-  .secondary-btn:hover {
-    border-color: var(--text-primary);
-  }
 
   .icon-btn {
     width: 40px;
@@ -1535,25 +1496,58 @@
   }
 
   .track-list-header {
-    display: grid;
-    grid-template-columns: 48px 1fr 1fr 80px;
+    width: 100%;
+    height: 40px;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     gap: 16px;
-    padding: 8px 16px;
     font-size: 12px;
     text-transform: uppercase;
-    color: var(--text-muted);
-    font-weight: 600;
-    letter-spacing: 0.05em;
+    color: #666666;
+    font-weight: 400;
+    box-sizing: border-box;
     border-bottom: 1px solid var(--bg-tertiary);
     margin-bottom: 8px;
   }
 
   .col-number {
+    width: 48px;
     text-align: center;
   }
 
+  .col-title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .col-album {
+    flex: 1;
+    min-width: 0;
+  }
+
   .col-duration {
-    text-align: right;
+    width: 80px;
+    text-align: center;
+  }
+
+  .col-quality {
+    width: 80px;
+    text-align: center;
+  }
+
+  .col-icon {
+    width: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    opacity: 0.5;
+  }
+
+  .col-spacer {
+    width: 28px;
   }
 
   /* Track Controls */
diff --git a/src/lib/components/views/SearchView.svelte b/src/lib/components/views/SearchView.svelte
index f52c726fd..511b809b7 100644
--- a/src/lib/components/views/SearchView.svelte
+++ b/src/lib/components/views/SearchView.svelte
@@ -604,18 +604,23 @@
             <div class="most-popular-wrapper">
               {#if allResults.artists.items.length > 0}
               <button class="artist-card most-popular-card" onclick={() => onArtistClick?.(allResults.artists.items[0].id)}>
-                {#if failedArtistImages.has(allResults.artists.items[0].id) || !getArtistImage(allResults.artists.items[0])}
+                <div class="artist-image-wrapper">
+                  <!-- Placeholder always visible as background -->
                   <div class="artist-image-placeholder">
                     <User size={40} />
                   </div>
-                {:else}
-                  <img 
-                    src={getArtistImage(allResults.artists.items[0])} 
-                    alt={allResults.artists.items[0].name} 
-                    class="artist-image" 
-                    onerror={() => handleArtistImageError(allResults.artists.items[0].id)} 
-                  />
-                {/if}
+                  <!-- Image overlays placeholder when loaded -->
+                  {#if !failedArtistImages.has(allResults.artists.items[0].id) && getArtistImage(allResults.artists.items[0])}
+                    <img
+                      src={getArtistImage(allResults.artists.items[0])}
+                      alt={allResults.artists.items[0].name}
+                      class="artist-image"
+                      loading="lazy"
+                      decoding="async"
+                      onerror={() => handleArtistImageError(allResults.artists.items[0].id)}
+                    />
+                  {/if}
+                </div>
                 <div class="artist-name">{allResults.artists.items[0].name}</div>
                 {#if allResults.artists.items[0].albums_count}
                   <div class="artist-albums">{$t('library.albumCount', { values: { count: allResults.artists.items[0].albums_count } })}</div>
@@ -687,13 +692,16 @@
                     </div>
                   {:else}
                     <button class="artist-card" onclick={() => onArtistClick?.(artist.id)}>
-                      {#if failedArtistImages.has(artist.id) || !getArtistImage(artist)}
+                      <div class="artist-image-wrapper">
+                        <!-- Placeholder always visible as background -->
                         <div class="artist-image-placeholder">
                           <User size={40} />
                         </div>
-                      {:else}
-                        <img src={getArtistImage(artist)} alt={artist.name} class="artist-image" onerror={() => handleArtistImageError(artist.id)} />
-                      {/if}
+                        <!-- Image overlays placeholder when loaded -->
+                        {#if !failedArtistImages.has(artist.id) && getArtistImage(artist)}
+                          <img src={getArtistImage(artist)} alt={artist.name} class="artist-image" loading="lazy" decoding="async" onerror={() => handleArtistImageError(artist.id)} />
+                        {/if}
+                      </div>
                       <div class="artist-name">{artist.name}</div>
                       {#if artist.albums_count}
                         <div class="artist-albums">{$t('library.albumCount', { values: { count: artist.albums_count } })}</div>
@@ -803,75 +811,45 @@
                     onkeydown={(e) => e.key === 'Enter' && handleSearchTrackPlay(track, index)}
                   >
                     <div class="track-number">{index + 1}</div>
-                    {#if failedTrackImages.has(track.id) || !getTrackArtwork(track)}
-                      <div class="track-artwork-container">
-                        <div class="track-artwork-placeholder">
-                          <Music size={20} />
+                    <div class="track-artwork-container">
+                      <!-- Placeholder always visible as background -->
+                      <div class="track-artwork-placeholder">
+                        <Music size={20} />
+                      </div>
+                      <!-- Image overlays placeholder when loaded -->
+                      {#if !failedTrackImages.has(track.id) && getTrackArtwork(track)}
+                        <img src={getTrackArtwork(track)} alt={track.title} class="track-artwork" loading="lazy" decoding="async" onerror={() => handleTrackImageError(track.id)} />
+                      {/if}
+                      <button
+                        class="track-play-overlay"
+                        class:is-playing={isActiveTrack}
+                        onclick={(e) => {
+                          if (isActiveTrack) {
+                            handlePausePlayback(e);
+                          } else {
+                            e.stopPropagation();
+                            handleSearchTrackPlay(track, index);
+                          }
+                        }}
+                        aria-label={isActiveTrack ? 'Pause track' : 'Play track'}
+                      >
+                        <span class="play-icon" aria-hidden="true">
+                          <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+                            <path d="M8 5v14l11-7z"/>
+                          </svg>
+                        </span>
+                        <div class="playing-indicator" aria-hidden="true">
+                          <div class="bar"></div>
+                          <div class="bar"></div>
+                          <div class="bar"></div>
                         </div>
-                        <button
-                          class="track-play-overlay"
-                          class:is-playing={isActiveTrack}
-                          onclick={(e) => {
-                            if (isActiveTrack) {
-                              handlePausePlayback(e);
-                            } else {
-                              e.stopPropagation();
-                              handleSearchTrackPlay(track, index);
-                            }
-                          }}
-                          aria-label={isActiveTrack ? 'Pause track' : 'Play track'}
-                        >
-                          <span class="play-icon" aria-hidden="true">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
-                              <path d="M8 5v14l11-7z"/>
-                            </svg>
-                          </span>
-                          <div class="playing-indicator" aria-hidden="true">
-                            <div class="bar"></div>
-                            <div class="bar"></div>
-                            <div class="bar"></div>
-                          </div>
-                          <span class="pause-icon" aria-hidden="true">
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
-                              <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
-                            </svg>
-                          </span>
-                        </button>
-                      </div>
-                    {:else}
-                      <div class="track-artwork-container">
-                        <img src={getTrackArtwork(track)} alt={track.title} class="track-artwork" onerror={() => handleTrackImageError(track.id)} />
-                        <button
-                          class="track-play-overlay"
-                          class:is-playing={isActiveTrack}
-                          onclick={(e) => {
-                            if (isActiveTrack) {
-                              handlePausePlayback(e);
-                            } else {
-                              e.stopPropagation();
-                              handleSearchTrackPlay(track, index);
-                            }
-                          }}
-                          aria-label={isActiveTrack ? 'Pause track' : 'Play track'}
-                        >
-                          <span class="play-icon" aria-hidden="true">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
-                              <path d="M8 5v14l11-7z"/>
-                            </svg>
-                          </span>
-                          <div class="playing-indicator" aria-hidden="true">
-                            <div class="bar"></div>
-                            <div class="bar"></div>
-                            <div class="bar"></div>
-                          </div>
-                          <span class="pause-icon" aria-hidden="true">
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
-                              <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
-                            </svg>
-                          </span>
-                        </button>
-                      </div>
-                    {/if}
+                        <span class="pause-icon" aria-hidden="true">
+                          <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+                            <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
                     <div class="track-info">
                       <div class="track-title">{track.title}</div>
                       {#if track.performer?.id && onTrackGoToArtist}
@@ -967,75 +945,45 @@
               onkeydown={(e) => e.key === 'Enter' && handleSearchTrackPlay(track, index)}
             >
               <div class="track-number">{index + 1}</div>
-              {#if failedTrackImages.has(track.id) || !getTrackArtwork(track)}
-                <div class="track-artwork-container">
-                  <div class="track-artwork-placeholder">
-                    <Music size={20} />
+              <div class="track-artwork-container">
+                <!-- Placeholder always visible as background -->
+                <div class="track-artwork-placeholder">
+                  <Music size={20} />
+                </div>
+                <!-- Image overlays placeholder when loaded -->
+                {#if !failedTrackImages.has(track.id) && getTrackArtwork(track)}
+                  <img src={getTrackArtwork(track)} alt={track.title} class="track-artwork" loading="lazy" decoding="async" onerror={() => handleTrackImageError(track.id)} />
+                {/if}
+                <button
+                  class="track-play-overlay"
+                  class:is-playing={isActiveTrack}
+                  onclick={(e) => {
+                    if (isActiveTrack) {
+                      handlePausePlayback(e);
+                    } else {
+                      e.stopPropagation();
+                      handleSearchTrackPlay(track, index);
+                    }
+                  }}
+                  aria-label={isActiveTrack ? 'Pause track' : 'Play track'}
+                >
+                  <span class="play-icon" aria-hidden="true">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+                      <path d="M8 5v14l11-7z"/>
+                    </svg>
+                  </span>
+                  <div class="playing-indicator" aria-hidden="true">
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
                   </div>
-                  <button
-                    class="track-play-overlay"
-                    class:is-playing={isActiveTrack}
-                    onclick={(e) => {
-                      if (isActiveTrack) {
-                        handlePausePlayback(e);
-                      } else {
-                        e.stopPropagation();
-                        handleSearchTrackPlay(track, index);
-                      }
-                    }}
-                    aria-label={isActiveTrack ? 'Pause track' : 'Play track'}
-                  >
-                    <span class="play-icon" aria-hidden="true">
-                      <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
-                        <path d="M8 5v14l11-7z"/>
-                      </svg>
-                    </span>
-                    <div class="playing-indicator" aria-hidden="true">
-                      <div class="bar"></div>
-                      <div class="bar"></div>
-                      <div class="bar"></div>
-                    </div>
-                    <span class="pause-icon" aria-hidden="true">
-                      <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
-                        <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              {:else}
-                <div class="track-artwork-container">
-                  <img src={getTrackArtwork(track)} alt={track.title} class="track-artwork" onerror={() => handleTrackImageError(track.id)} />
-                  <button
-                    class="track-play-overlay"
-                    class:is-playing={isActiveTrack}
-                    onclick={(e) => {
-                      if (isActiveTrack) {
-                        handlePausePlayback(e);
-                      } else {
-                        e.stopPropagation();
-                        handleSearchTrackPlay(track, index);
-                      }
-                    }}
-                    aria-label={isActiveTrack ? 'Pause track' : 'Play track'}
-                  >
-                    <span class="play-icon" aria-hidden="true">
-                      <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
-                        <path d="M8 5v14l11-7z"/>
-                      </svg>
-                    </span>
-                    <div class="playing-indicator" aria-hidden="true">
-                      <div class="bar"></div>
-                      <div class="bar"></div>
-                      <div class="bar"></div>
-                    </div>
-                    <span class="pause-icon" aria-hidden="true">
-                      <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
-                        <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              {/if}
+                  <span class="pause-icon" aria-hidden="true">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+                      <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+                    </svg>
+                  </span>
+                </button>
+              </div>
               <div class="track-info">
                 <div class="track-title">{track.title}</div>
                 {#if track.performer?.id && onTrackGoToArtist}
@@ -1090,13 +1038,16 @@
         <div class="artists-grid">
           {#each artistResults.items as artist}
             <button class="artist-card" onclick={() => onArtistClick?.(artist.id)}>
-              {#if failedArtistImages.has(artist.id) || !getArtistImage(artist)}
+              <div class="artist-image-wrapper">
+                <!-- Placeholder always visible as background -->
                 <div class="artist-image-placeholder">
                   <User size={40} />
                 </div>
-              {:else}
-                <img src={getArtistImage(artist)} alt={artist.name} class="artist-image" onerror={() => handleArtistImageError(artist.id)} />
-              {/if}
+                <!-- Image overlays placeholder when loaded -->
+                {#if !failedArtistImages.has(artist.id) && getArtistImage(artist)}
+                  <img src={getArtistImage(artist)} alt={artist.name} class="artist-image" loading="lazy" decoding="async" onerror={() => handleArtistImageError(artist.id)} />
+                {/if}
+              </div>
               <div class="artist-name">{artist.name}</div>
               {#if artist.albums_count}
                 <div class="artist-albums">{$t('library.albumCount', { values: { count: artist.albums_count } })}</div>
@@ -1325,10 +1276,13 @@
   }
 
   .track-artwork {
+    position: absolute;
+    inset: 0;
     width: 48px;
     height: 48px;
     border-radius: 4px;
     object-fit: cover;
+    z-index: 1;
   }
 
   .track-artwork-placeholder {
@@ -1430,22 +1384,31 @@
     background-color: var(--bg-tertiary);
   }
 
-  .artist-image {
+  .artist-image-wrapper {
+    position: relative;
     width: 120px;
     height: 120px;
     min-height: 120px;
     border-radius: 50%;
-    object-fit: cover;
     margin-bottom: 12px;
     flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .artist-image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    z-index: 1;
   }
 
   .artist-image-placeholder {
-    width: 120px;
-    height: 120px;
-    min-height: 120px;
+    width: 100%;
+    height: 100%;
     border-radius: 50%;
-    margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1556,8 +1519,7 @@
     height: 220px;
   }
 
-  .most-popular-card .artist-image,
-  .most-popular-card .artist-image-placeholder {
+  .most-popular-card .artist-image-wrapper {
     width: 120px;
     height: 120px;
     min-height: 120px;
@@ -1646,8 +1608,7 @@
     height: 220px;
   }
 
-  .artists-grid-compact .artist-image,
-  .artists-grid-compact .artist-image-placeholder {
+  .artists-grid-compact .artist-image-wrapper {
     width: 120px;
     height: 120px;
     min-height: 120px;
@@ -1783,6 +1744,7 @@
     border: none;
     cursor: pointer;
     transition: background 150ms ease;
+    z-index: 2;
   }
 
   .track-row:hover .track-play-overlay {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9d40bbed9..fefc0feab 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -318,6 +318,9 @@
   let selectedArtist = $state<ArtistDetail | null>(null);
   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 }[]>([]);
+
   // Overlay States (from uiStore subscription)
   let isQueueOpen = $state(false);
   let isFullScreenOpen = $state(false);
@@ -400,12 +403,70 @@
       selectedAlbum = convertQobuzAlbum(album);
       navigateTo('album');
       hideToast();
+
+      // Fetch artist albums for "By the same artist" section (non-blocking)
+      if (album.artist?.id) {
+        fetchAlbumArtistAlbums(album.artist.id);
+      } else {
+        albumArtistAlbums = [];
+      }
     } catch (err) {
       console.error('Failed to load album:', err);
       showToast('Failed to load album', 'error');
     }
   }
 
+  /**
+   * Fetch artist albums for the "By the same artist" section
+   * Only includes studio albums and live albums
+   */
+  async function fetchAlbumArtistAlbums(artistId: number) {
+    try {
+      const artist = await invoke<QobuzArtist>('get_artist_detail', { artistId });
+      const artistDetail = convertQobuzArtist(artist);
+
+      // Combine studio albums and live albums, limit to 16
+      const combined = [
+        ...artistDetail.albums.map(a => ({
+          id: a.id,
+          title: a.title,
+          artwork: a.artwork,
+          quality: a.quality
+        })),
+        ...artistDetail.liveAlbums.map(a => ({
+          id: a.id,
+          title: a.title,
+          artwork: a.artwork,
+          quality: a.quality
+        }))
+      ].slice(0, 16);
+
+      albumArtistAlbums = combined;
+    } catch (err) {
+      console.error('Failed to fetch artist albums for "By the same artist":', err);
+      albumArtistAlbums = [];
+    }
+  }
+
+  /**
+   * Navigate to artist view and scroll to Discography section
+   */
+  function handleViewArtistDiscography() {
+    if (selectedAlbum?.artistId) {
+      // Store scroll target for artist view
+      const artistId = selectedAlbum.artistId;
+      handleArtistClick(artistId).then(() => {
+        // Use setTimeout to allow the view to render before scrolling
+        setTimeout(() => {
+          const discographySection = document.querySelector('.artist-section');
+          if (discographySection) {
+            discographySection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }
+        }, 100);
+      });
+    }
+  }
+
 
   async function handleArtistClick(artistId: number) {
     try {
@@ -2403,6 +2464,16 @@
           onOpenAlbumFolder={handleOpenAlbumFolder}
           onReDownloadAlbum={handleReDownloadAlbum}
           {downloadStateVersion}
+          artistAlbums={albumArtistAlbums}
+          onRelatedAlbumClick={handleAlbumClick}
+          onRelatedAlbumPlay={playAlbumById}
+          onRelatedAlbumPlayNext={queueAlbumNextById}
+          onRelatedAlbumPlayLater={queueAlbumLaterById}
+          onRelatedAlbumDownload={downloadAlbumById}
+          onRelatedAlbumShareQobuz={shareAlbumQobuzLinkById}
+          onRelatedAlbumShareSonglink={shareAlbumSonglinkById}
+          onViewArtistDiscography={handleViewArtistDiscography}
+          checkRelatedAlbumDownloaded={checkAlbumFullyDownloaded}
         />
       {:else if activeView === 'artist' && selectedArtist}
         <ArtistDetailView