First working POC

src/routes/library/music/albums/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import GenericMediaListPage from "$lib/components/library/GenericMediaListPage.svelte";
+  import type { MediaItem } from "$lib/api/types";
+
+  /**
+   * Album browser
+   * @req: UR-007 - Navigate media in library
+   * @req: UR-008 - Search media across libraries
+   * @req: DR-007 - Library browsing screens
+   */
+
+  const config = {
+    itemType: "MusicAlbum",
+    title: "Albums",
+    backPath: "/library/music",
+    searchPlaceholder: "Search albums or artists...",
+    sortOptions: [
+      {
+        key: "name",
+        label: "A-Z",
+        compareFn: (a: MediaItem, b: MediaItem) => a.name.localeCompare(b.name),
+      },
+      {
+        key: "artist",
+        label: "Artist",
+        compareFn: (a: MediaItem, b: MediaItem) => {
+          const aArtist = a.artists?.[0] || "";
+          const bArtist = b.artists?.[0] || "";
+          return aArtist.localeCompare(bArtist);
+        },
+      },
+      {
+        key: "year",
+        label: "Year",
+        compareFn: (a: MediaItem, b: MediaItem) => {
+          const aYear = a.productionYear || 0;
+          const bYear = b.productionYear || 0;
+          return bYear - aYear;
+        },
+      },
+      {
+        key: "recent",
+        label: "Recent",
+        compareFn: (a: MediaItem, b: MediaItem) => {
+          const aDate = a.userData?.lastPlayedDate || "";
+          const bDate = b.userData?.lastPlayedDate || "";
+          return bDate.localeCompare(aDate);
+        },
+      },
+    ],
+    defaultSort: "name",
+    displayComponent: "grid" as const,
+    searchFields: ["name", "artists"],
+  };
+</script>
+
+<GenericMediaListPage {config} />