feat: the Wanted view becomes Collection, shaped like Lidarr: an artist catalogue first, the state sections down a left rail (M502 #5577)

The section opens on a catalogue of every artist on the list, A–Z with a letter rail, each card showing how many of their albums are held. An artist opens on their page: every album of theirs, held or not, with its status, search, releases and tracks. Wanted, Missing files, Activity, Following and Blocked sit down a left rail as the sections that show state; Held is gone, the catalogue shows it. The section moves from /wanted to /collection. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-10 21:14:33 -04:00
parent a4fbe44bd5
commit 358849de77
34 changed files with 994 additions and 356 deletions
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import type { WantCounts } from '#lib/api/types.js';
+
+  // The Collection's sections, down the left like Lidarr's (#5572): the
+  // catalogue of artists first, then the sections that show state. On a
+  // narrow screen the rail runs across the top. Activity carries a second,
+  // accented count when downloads are waiting on a person.
+
+  let { counts }: { counts?: WantCounts } = $props();
+
+  type Item = { href: string; label: string; count?: number; attention?: number };
+
+  const items = $derived<Item[]>([
+    { href: '/collection', label: 'Catalogue', count: counts?.artists },
+    { href: '/collection/wanted', label: 'Wanted', count: counts?.wanted },
+    { href: '/collection/missing', label: 'Missing files', count: counts?.missing },
+    { href: '/collection/activity', label: 'Activity', count: counts?.activity, attention: counts?.attention },
+    { href: '/collection/following', label: 'Following', count: counts?.following },
+    { href: '/collection/blocked', label: 'Blocked', count: counts?.blocked }
+  ]);
+
+  // An artist's page belongs to the catalogue.
+  function isActive(href: string): boolean {
+    const path = page.url.pathname;
+    if (href === '/collection') return path === '/collection' || path.startsWith('/collection/artist/');
+    return path.startsWith(href);
+  }
+</script>
+
+<nav aria-label="Collection sections" class="border-b border-border md:border-b-0 md:border-r md:pr-3">
+  <ul class="flex gap-1 overflow-x-auto md:flex-col md:overflow-visible">
+    {#each items as item (item.href)}
+      {@const active = isActive(item.href)}
+      <li>
+        <a
+          href={item.href}
+          aria-current={active ? 'page' : undefined}
+          class="flex items-center gap-1.5 whitespace-nowrap border-b-2 px-3 py-2 text-sm transition-colors md:rounded-md md:border-b-0 md:border-l-2 {active
+            ? 'border-accent text-text-primary md:bg-surface-hover'
+            : 'border-transparent text-text-secondary hover:text-text-primary md:hover:bg-surface-hover'}"
+        >
+          <span class="md:flex-1">{item.label}</span>
+          {#if item.attention}
+            <span
+              class="rounded-full bg-accent px-1.5 text-xs text-text-on-accent"
+              aria-label="{item.attention} need you"
+              data-testid="tab-attention">{item.attention}</span
+            >
+          {/if}
+          {#if item.count !== undefined}
+            <span class="text-xs tabular-nums text-text-muted">{item.count}</span>
+          {/if}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>