diff --git a/src/elekf/web/components/library_view.css b/src/elekf/web/components/library_view.css index a17e2b9..d218447 100644 --- a/src/elekf/web/components/library_view.css +++ b/src/elekf/web/components/library_view.css @@ -46,11 +46,7 @@ font-size: 2rem; } -#library-list { - height: 100%; - overflow-y: auto; - padding-bottom: 0; - +.library-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-flow: dense; @@ -59,6 +55,11 @@ grid-auto-rows: min-content; gap: var(--double-margin); +} + +#library-list { + height: 100%; + overflow-y: auto; padding: var(--double-margin); } diff --git a/src/elekf/web/components/library_view.gleam b/src/elekf/web/components/library_view.gleam index 9df4fd2..2dbbb2e 100644 --- a/src/elekf/web/components/library_view.gleam +++ b/src/elekf/web/components/library_view.gleam @@ -272,6 +272,7 @@ pub fn library_view( div( [ attribute.id("library-list"), + attribute.class("library-item-grid"), event.on("scrollend", handle_scrollend), scroll_to.on(ScrollRequested), ], diff --git a/src/elekf/web/components/library_views/single_artist_view.gleam b/src/elekf/web/components/library_views/single_artist_view.gleam index 1391669..c15adef 100644 --- a/src/elekf/web/components/library_views/single_artist_view.gleam +++ b/src/elekf/web/components/library_views/single_artist_view.gleam @@ -1,10 +1,12 @@ //// A library view to a single artist's albums and non-album tracks. import elekf/library.{type Library} +import elekf/library/album_utils import elekf/library/track.{type Track} import elekf/library/track_utils import elekf/web/common import elekf/web/components/library_view +import elekf/web/components/library_views/album_item import elekf/web/components/library_views/track_item import elekf/web/components/track_length import elekf/web/library_item.{type LibraryItem} @@ -92,6 +94,18 @@ fn header_view( track_length.short_delimiters, ) + let album_items = + set.fold(albums, [], fn(acc, album_id) { + case library.get_album(library, album_id) { + Ok(album) -> [#(album_id, album), ..acc] + Error(_) -> acc + } + }) + |> list.sort(fn(a, b) { album_utils.sort_by_year(a.1, b.1) }) + |> list.flat_map(fn(item) { + album_item.view(library, model.settings, item) + }) + [ div([attribute.id("library-list-stats-header")], [ h1([], [text(artist.name)]), @@ -105,6 +119,13 @@ fn header_view( ), ]), ]), + div( + [ + attribute.id("artist-albums-list"), + attribute.class("library-item-grid"), + ], + album_items, + ), ] } Error(_) -> library_view.empty_header(model, library, filter, items)