Render albums for artist

src/elekf/web/components/library_view.css

@@ -46,11 +46,7 @@
   font-size: 2rem;
 }
 
-#library-list {
+.library-item-grid {
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 0;
-
   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);
 }
 

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),
           ],

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)