feat(web): update nav (Home/Artists/Albums); retire ArtistRow

Add Artists and Albums nav entries, rename root label from Library to
Home. Migrate all three ArtistRow call sites (search, search/artists,
library/liked) to ArtistCard with grid wrapper; delete ArtistRow
component and its test.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/lib/components/ArtistRow.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import type { ArtistRef } from '$lib/api/types';
-  import LikeButton from './LikeButton.svelte';
-
-  let { artist }: { artist: ArtistRef } = $props();
-
-  const initial = $derived(artist.name ? artist.name.charAt(0).toUpperCase() : '');
-  const countLabel = $derived(artist.album_count === 1 ? '1 album' : `${artist.album_count} albums`);
-</script>
-
-<div class="relative flex items-center gap-3 border-b border-border px-3 py-3 hover:bg-surface-hover">
-  <a
-    href={`/artists/${artist.id}`}
-    class="absolute inset-0 focus-visible:ring-2 focus-visible:ring-accent"
-    aria-label={artist.name}
-  ></a>
-  <span
-    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-surface font-semibold relative"
-    aria-hidden="true"
-  >
-    {initial}
-  </span>
-  <span class="flex-1 truncate relative">{artist.name}</span>
-  <span class="text-sm text-text-secondary relative">{countLabel}</span>
-  <span class="relative">
-    <LikeButton entityType="artist" entityId={artist.id} />
-  </span>
-  <span class="text-text-secondary relative" aria-hidden="true">›</span>
-</div>

web/src/lib/components/ArtistRow.test.ts

@@ -1,45 +0,0 @@
-import { describe, expect, test, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import { readable } from 'svelte/store';
-import ArtistRow from './ArtistRow.svelte';
-import type { ArtistRef } from '$lib/api/types';
-
-vi.mock('$lib/api/likes', () => ({
-  createLikedIdsQuery: () => readable({
-    data: { track_ids: [], album_ids: [], artist_ids: [] },
-    isPending: false,
-    isError: false
-  }),
-  likeEntity: vi.fn(),
-  unlikeEntity: vi.fn()
-}));
-
-vi.mock('@tanstack/svelte-query', async (orig) => {
-  const actual = (await orig()) as Record<string, unknown>;
-  return { ...actual, useQueryClient: () => ({}) };
-});
-
-const artist: ArtistRef = { id: 'abc', name: 'alice', sort_name: 'alice', album_count: 12, cover_url: '' };
-
-describe('ArtistRow', () => {
-  test('renders initial, name, album count inside a link to /artists/:id', () => {
-    render(ArtistRow, { props: { artist } });
-
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', '/artists/abc');
-    expect(screen.getByText('alice')).toBeInTheDocument();
-    expect(screen.getByText('12 albums')).toBeInTheDocument();
-    expect(screen.getByText('A')).toBeInTheDocument();
-  });
-
-  test('singular "1 album" when album_count is 1', () => {
-    render(ArtistRow, { props: { artist: { ...artist, album_count: 1 } } });
-    expect(screen.getByText('1 album')).toBeInTheDocument();
-  });
-
-  test('empty name still renders a safe initial', () => {
-    render(ArtistRow, { props: { artist: { ...artist, name: '' } } });
-    // No crash; initial container present but empty or a placeholder char.
-    expect(screen.getByRole('link')).toBeInTheDocument();
-  });
-});

web/src/lib/components/Shell.svelte

@@ -22,7 +22,9 @@
   }
 
   const navItems = [
-    { href: '/',                label: 'Library' },
+    { href: '/',                label: 'Home' },
+    { href: '/library/artists', label: 'Artists' },
+    { href: '/library/albums',  label: 'Albums' },
     { href: '/library/liked',   label: 'Liked' },
     { href: '/library/hidden',  label: 'Hidden' },
     { href: '/search',          label: 'Search' },

web/src/lib/components/Shell.test.ts

@@ -39,9 +39,16 @@ describe('Shell', () => {
     expect(screen.getByText('alice')).toBeInTheDocument();
   });
 
-  test('renders nav items including Discover and Requests between Search and Playlists', () => {
+  test('renders nav items in expected order', () => {
     render(Shell);
-    expect(screen.getByRole('link', { name: 'Library' })).toHaveAttribute('href', '/');
+    const labels = ['Home', 'Artists', 'Albums', 'Liked', 'Hidden', 'Search',
+                    'Discover', 'Requests', 'Playlists', 'Settings'];
+    for (const label of labels) {
+      expect(screen.getByRole('link', { name: label })).toBeInTheDocument();
+    }
+    expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute('href', '/');
+    expect(screen.getByRole('link', { name: 'Artists' })).toHaveAttribute('href', '/library/artists');
+    expect(screen.getByRole('link', { name: 'Albums' })).toHaveAttribute('href', '/library/albums');
     expect(screen.getByRole('link', { name: 'Search' })).toHaveAttribute('href', '/search');
     expect(screen.getByRole('link', { name: 'Discover' })).toHaveAttribute('href', '/discover');
     expect(screen.getByRole('link', { name: 'Requests' })).toHaveAttribute('href', '/requests');

web/src/routes/library/liked/+page.svelte

@@ -4,7 +4,7 @@
     createLikedAlbumsInfiniteQuery,
     createLikedArtistsInfiniteQuery
   } from '$lib/api/likes';
-  import ArtistRow from '$lib/components/ArtistRow.svelte';
+  import ArtistCard from '$lib/components/ArtistCard.svelte';
   import AlbumCard from '$lib/components/AlbumCard.svelte';
   import TrackRow from '$lib/components/TrackRow.svelte';
 
@@ -33,9 +33,9 @@
     {#if artistsTotal === 0}
       <p class="text-text-secondary">No liked artists yet.</p>
     {:else}
-      <div>
+      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
         {#each artists as a (a.id)}
-          <ArtistRow artist={a} />
+          <ArtistCard artist={a} />
         {/each}
       </div>
       {#if artistsQuery?.hasNextPage}

web/src/routes/search/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { createSearchQuery } from '$lib/api/queries';
-  import ArtistRow from '$lib/components/ArtistRow.svelte';
+  import ArtistCard from '$lib/components/ArtistCard.svelte';
   import AlbumCard from '$lib/components/AlbumCard.svelte';
   import TrackRow from '$lib/components/TrackRow.svelte';
   import SearchSkeleton from '$lib/components/SearchSkeleton.svelte';
@@ -59,9 +59,9 @@
             </a>
           {/if}
         </header>
-        <div>
+        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
           {#each artists.items as a (a.id)}
-            <ArtistRow artist={a} />
+            <ArtistCard artist={a} />
           {/each}
         </div>
       </section>

web/src/routes/search/artists/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { createSearchArtistsInfiniteQuery } from '$lib/api/queries';
-  import ArtistRow from '$lib/components/ArtistRow.svelte';
+  import ArtistCard from '$lib/components/ArtistCard.svelte';
   import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
   import { useDelayed } from '$lib/utils/useDelayed.svelte';
@@ -35,9 +35,9 @@
   {:else if total === 0}
     <p class="text-text-secondary">No artist matches.</p>
   {:else}
-    <div>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
       {#each artists as a (a.id)}
-        <ArtistRow artist={a} />
+        <ArtistCard artist={a} />
       {/each}
     </div>
     {#if query?.hasNextPage}