feat(web): add /settings page with ListenBrainz section

Adds api.put helper, ListenBrainz API module with query/mutation
helpers, a /settings route with token + enable/disable UI, and 5
tests. Adds Settings to the Shell nav.

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

web/src/lib/api/client.ts

@@ -45,6 +45,8 @@ export const api = {
   get: <T>(path: string): Promise<T> => apiFetch(path) as Promise<T>,
   post: <T>(path: string, body: unknown): Promise<T> =>
     apiFetch(path, { method: 'POST', body: JSON.stringify(body) }) as Promise<T>,
+  put: <T>(path: string, body: unknown): Promise<T> =>
+    apiFetch(path, { method: 'PUT', body: JSON.stringify(body) }) as Promise<T>,
   del: (path: string): Promise<null> =>
     apiFetch(path, { method: 'DELETE' }) as Promise<null>
 };

web/src/lib/api/listenbrainz.ts

@@ -0,0 +1,44 @@
+import { createQuery, createMutation } from '@tanstack/svelte-query';
+import type { QueryClient } from '@tanstack/svelte-query';
+import { api } from './client';
+
+export type LBStatus = {
+  enabled: boolean;
+  token_set: boolean;
+  last_scrobbled_at: string | null;
+};
+
+export function getListenBrainzStatus(): Promise<LBStatus> {
+  return api.get<LBStatus>('/api/me/listenbrainz');
+}
+
+export function setListenBrainzToken(token: string): Promise<LBStatus> {
+  return api.put<LBStatus>('/api/me/listenbrainz', { token });
+}
+
+export function setListenBrainzEnabled(enabled: boolean): Promise<LBStatus> {
+  return api.put<LBStatus>('/api/me/listenbrainz', { enabled });
+}
+
+export const LB_QUERY_KEY = ['settings', 'listenbrainz'] as const;
+
+export function createLBStatusQuery() {
+  return createQuery({
+    queryKey: LB_QUERY_KEY,
+    queryFn: getListenBrainzStatus
+  });
+}
+
+export function createTokenMutation(queryClient: QueryClient) {
+  return createMutation<LBStatus, Error, string>({
+    mutationFn: (token: string) => setListenBrainzToken(token),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: LB_QUERY_KEY })
+  });
+}
+
+export function createEnabledMutation(queryClient: QueryClient) {
+  return createMutation<LBStatus, Error, boolean>({
+    mutationFn: (enabled: boolean) => setListenBrainzEnabled(enabled),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: LB_QUERY_KEY })
+  });
+}

web/src/lib/components/Shell.svelte

@@ -25,7 +25,8 @@
     { href: '/',              label: 'Library' },
     { href: '/library/liked', label: 'Liked' },
     { href: '/search',        label: 'Search' },
-    { href: '/playlists',     label: 'Playlists' }
+    { href: '/playlists',     label: 'Playlists' },
+    { href: '/settings',      label: 'Settings' }
   ];
 </script>
 

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

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import type { CreateQueryResult, CreateMutationResult } from '@tanstack/svelte-query';
+  import {
+    createLBStatusQuery,
+    createTokenMutation,
+    createEnabledMutation,
+    type LBStatus
+  } from '$lib/api/listenbrainz';
+
+  const queryClient = useQueryClient();
+
+  const status = createLBStatusQuery() as CreateQueryResult<LBStatus>;
+  const tokenMutation = createTokenMutation(queryClient);
+  const enabledMutation = createEnabledMutation(queryClient);
+
+  let tokenInput = $state('');
+
+  function saveToken() {
+    const t = tokenInput.trim();
+    if (!t) return;
+    $tokenMutation.mutate(t, { onSuccess: () => { tokenInput = ''; } });
+  }
+
+  function clearToken() {
+    $tokenMutation.mutate('');
+  }
+
+  function toggleEnabled() {
+    if (!$status.data) return;
+    $enabledMutation.mutate(!$status.data.enabled);
+  }
+</script>
+
+<div class="space-y-6">
+  <h1 class="text-2xl font-semibold">Settings</h1>
+
+  <section class="space-y-4 rounded border border-border bg-surface p-4">
+    <h2 class="text-lg font-semibold">ListenBrainz</h2>
+
+    {#if $status.isPending}
+      <p class="text-text-secondary">Loading…</p>
+    {:else if $status.isError}
+      <p class="text-text-secondary">Couldn't load status.</p>
+    {:else if $status.data}
+      <div class="space-y-3">
+        <label class="block text-sm">
+          <span class="block text-text-secondary mb-1">User token</span>
+          {#if $status.data.token_set}
+            <div class="flex items-center gap-2">
+              <span class="text-text-primary">••••••••••• (set)</span>
+              <button
+                type="button"
+                onclick={clearToken}
+                class="text-sm text-accent hover:underline"
+                disabled={$tokenMutation.isPending}
+              >clear</button>
+            </div>
+          {:else}
+            <div class="flex gap-2">
+              <input
+                type="password"
+                bind:value={tokenInput}
+                placeholder="paste your LB token"
+                class="flex-1 rounded border border-border bg-background px-2 py-1 text-sm"
+              />
+              <button
+                type="button"
+                onclick={saveToken}
+                disabled={!tokenInput.trim() || $tokenMutation.isPending}
+                class="rounded bg-accent px-3 py-1 text-sm text-background disabled:opacity-50"
+              >Save</button>
+            </div>
+          {/if}
+        </label>
+
+        <label class="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            checked={$status.data.enabled}
+            disabled={!$status.data.token_set || $enabledMutation.isPending}
+            onchange={toggleEnabled}
+          />
+          <span>Send my plays to ListenBrainz</span>
+        </label>
+
+        {#if $status.data.last_scrobbled_at}
+          <p class="text-sm text-text-secondary">
+            Last scrobbled: {new Date($status.data.last_scrobbled_at).toLocaleString()}
+          </p>
+        {/if}
+
+        <p class="text-xs text-text-secondary">
+          Get a token at <a href="https://listenbrainz.org/profile/" target="_blank" rel="noopener" class="text-accent hover:underline">listenbrainz.org/profile</a>.
+          Tokens are stored unencrypted in this server's database — treat as sensitive.
+        </p>
+      </div>
+    {/if}
+  </section>
+</div>

web/src/routes/settings/settings.test.ts

@@ -0,0 +1,102 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import { readable, writable } from 'svelte/store';
+import type { LBStatus } from '$lib/api/listenbrainz';
+
+vi.mock('$lib/api/listenbrainz', () => ({
+  createLBStatusQuery: vi.fn(),
+  createTokenMutation: vi.fn(),
+  createEnabledMutation: vi.fn(),
+  setListenBrainzToken: vi.fn(),
+  setListenBrainzEnabled: vi.fn()
+}));
+
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return {
+    ...actual,
+    useQueryClient: () => ({ invalidateQueries: vi.fn() })
+  };
+});
+
+import SettingsPage from './+page.svelte';
+import {
+  createLBStatusQuery,
+  createTokenMutation,
+  createEnabledMutation,
+  setListenBrainzToken,
+  setListenBrainzEnabled
+} from '$lib/api/listenbrainz';
+
+function mockStatusStore(data: LBStatus) {
+  return readable({ data, isPending: false, isError: false });
+}
+
+function mockMutationStore(mutateFn: (vars: unknown) => void = vi.fn()) {
+  return readable({ isPending: false, mutate: mutateFn, mutateAsync: vi.fn() });
+}
+
+afterEach(() => vi.clearAllMocks());
+
+describe('Settings page — ListenBrainz', () => {
+  test('token-not-set state renders input + Save button', async () => {
+    (createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockStatusStore({ enabled: false, token_set: false, last_scrobbled_at: null })
+    );
+    (createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    (createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    render(SettingsPage);
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(/paste your lb token/i)).toBeInTheDocument()
+    );
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+  });
+
+  test('token-set state renders masked + Clear button', async () => {
+    (createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockStatusStore({ enabled: false, token_set: true, last_scrobbled_at: null })
+    );
+    (createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    (createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    render(SettingsPage);
+    await waitFor(() => expect(screen.getByText(/\(set\)/)).toBeInTheDocument());
+    expect(screen.getByText('clear')).toBeInTheDocument();
+  });
+
+  test('Save button calls setListenBrainzToken with typed value', async () => {
+    (createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockStatusStore({ enabled: false, token_set: false, last_scrobbled_at: null })
+    );
+    const mutateFn = vi.fn();
+    (createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore(mutateFn));
+    (createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    render(SettingsPage);
+    const input = await screen.findByPlaceholderText(/paste your lb token/i);
+    await fireEvent.input(input, { target: { value: 'mytoken' } });
+    await fireEvent.click(screen.getByRole('button', { name: /save/i }));
+    await waitFor(() => expect(mutateFn).toHaveBeenCalledWith('mytoken', expect.anything()));
+  });
+
+  test('Enabled checkbox is disabled when no token', async () => {
+    (createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockStatusStore({ enabled: false, token_set: false, last_scrobbled_at: null })
+    );
+    (createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    (createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    render(SettingsPage);
+    const checkbox = await screen.findByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+  });
+
+  test('Last-scrobbled-at renders when present', async () => {
+    (createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
+      mockStatusStore({ enabled: true, token_set: true, last_scrobbled_at: '2026-04-28T03:00:00Z' })
+    );
+    (createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    (createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
+    render(SettingsPage);
+    await waitFor(() =>
+      expect(screen.getByText(/last scrobbled:/i)).toBeInTheDocument()
+    );
+  });
+});