diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte index 691f79a08..72826d06e 100644 --- a/src/lib/components/Sidebar.svelte +++ b/src/lib/components/Sidebar.svelte @@ -868,6 +868,7 @@ .local-library-section { flex-shrink: 0; + margin-bottom: 2px; } .section-header { diff --git a/src/lib/components/views/ArtistDetailView.svelte b/src/lib/components/views/ArtistDetailView.svelte index 3145e9ec8..e36ae4ceb 100644 --- a/src/lib/components/views/ArtistDetailView.svelte +++ b/src/lib/components/views/ArtistDetailView.svelte @@ -139,10 +139,20 @@ let searchInputEl = $state(null); let currentSearchIndex = $state(0); - // Album sorting state + // Album sorting state - independent per section type AlbumSortMode = 'default' | 'newest' | 'oldest' | 'title-asc' | 'title-desc'; let albumSortMode = $state('default'); let showAlbumSortMenu = $state(false); + let epsSinglesSortMode = $state('default'); + let showEpsSinglesSortMenu = $state(false); + let liveAlbumsSortMode = $state('default'); + let showLiveAlbumsSortMenu = $state(false); + let compilationsSortMode = $state('default'); + let showCompilationsSortMenu = $state(false); + let tributesSortMode = $state('default'); + let showTributesSortMenu = $state(false); + let othersSortMode = $state('default'); + let showOthersSortMenu = $state(false); // Popular tracks display state let visibleTracksCount = $state(5); @@ -218,7 +228,13 @@ similarArtists = []; similarArtistImageErrors = new Set(); activeJumpSection = 'about'; - albumSortMode = 'default'; // Reset sort when artist changes + // Reset all sort modes when artist changes + albumSortMode = 'default'; + epsSinglesSortMode = 'default'; + liveAlbumsSortMode = 'default'; + compilationsSortMode = 'default'; + tributesSortMode = 'default'; + othersSortMode = 'default'; loadTopTracks(); loadSimilarArtists(); @@ -682,31 +698,31 @@ let albums = searchLower ? artist.epsSingles.filter(a => a.title.toLowerCase().includes(searchLower)) : artist.epsSingles; - return sortAlbums(albums, albumSortMode); + return sortAlbums(albums, epsSinglesSortMode); }); let filteredLiveAlbums = $derived.by(() => { let albums = searchLower ? artist.liveAlbums.filter(a => a.title.toLowerCase().includes(searchLower)) : artist.liveAlbums; - return sortAlbums(albums, albumSortMode); + return sortAlbums(albums, liveAlbumsSortMode); }); let filteredCompilations = $derived.by(() => { let albums = searchLower ? artist.compilations.filter(a => a.title.toLowerCase().includes(searchLower)) : artist.compilations; - return sortAlbums(albums, albumSortMode); + return sortAlbums(albums, compilationsSortMode); }); let filteredTributes = $derived.by(() => { let albums = searchLower ? artist.tributes.filter(a => a.title.toLowerCase().includes(searchLower)) : artist.tributes; - return sortAlbums(albums, albumSortMode); + return sortAlbums(albums, tributesSortMode); }); let filteredOthers = $derived.by(() => { let albums = searchLower ? artist.others.filter(a => a.title.toLowerCase().includes(searchLower)) : artist.others; - return sortAlbums(albums, albumSortMode); + return sortAlbums(albums, othersSortMode); }); let filteredPlaylists = $derived( searchLower @@ -1281,6 +1297,28 @@

EPs & Singles

{artist.epsSingles.length} +
+ + {#if showEpsSinglesSortMenu} +
+ + + + + +
+ {/if} +
{#each filteredEpsSingles as album} @@ -1318,6 +1356,28 @@

Live Albums

{artist.liveAlbums.length}
+
+ + {#if showLiveAlbumsSortMenu} +
+ + + + + +
+ {/if} +
{#each filteredLiveAlbums as album} @@ -1355,6 +1415,28 @@

Compilations

{artist.compilations.length}
+
+ + {#if showCompilationsSortMenu} +
+ + + + + +
+ {/if} +
{#each filteredCompilations as album} @@ -1392,6 +1474,28 @@

Tributes & Covers

{artist.tributes.length}
+
+ + {#if showTributesSortMenu} +
+ + + + + +
+ {/if} +
{#each filteredTributes as album} @@ -1429,6 +1533,28 @@

Others

{artist.others.length}
+
+ + {#if showOthersSortMenu} +
+ + + + + +
+ {/if} +
{#each filteredOthers as album} @@ -2094,7 +2220,7 @@ .divider { height: 1px; - background: linear-gradient(90deg, transparent, var(--bg-tertiary) 20%, var(--bg-tertiary) 80%, transparent); + background: transparent; margin: 32px 0; }