From 07b228dd4e77254f4fa21875e4cd93360f25b5aa Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 17:40:08 -0400
Subject: [PATCH] feat(web/m7-363): per-route svelte:head titles for dynamic
 detail pages

---
 web/src/routes/albums/[id]/+page.svelte    | 5 +++++
 web/src/routes/artists/[id]/+page.svelte   | 5 +++++
 web/src/routes/playlists/[id]/+page.svelte | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/web/src/routes/albums/[id]/+page.svelte b/web/src/routes/albums/[id]/+page.svelte
index b79e4a05..6ad1cc58 100644
--- a/web/src/routes/albums/[id]/+page.svelte
+++ b/web/src/routes/albums/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { createAlbumQuery } from '$lib/api/queries';
+  import { pageTitle } from '$lib/branding';
   import TrackRow from '$lib/components/TrackRow.svelte';
   import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
@@ -23,6 +24,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>{pageTitle(query.data?.title ? `Album · ${query.data.title}` : 'Album')}</title>
+</svelte:head>
+
 <div class="space-y-6">
   {#if notFound}
     <div role="alert" class="rounded border border-border bg-surface p-4">
diff --git a/web/src/routes/artists/[id]/+page.svelte b/web/src/routes/artists/[id]/+page.svelte
index 8c119acf..72a119f2 100644
--- a/web/src/routes/artists/[id]/+page.svelte
+++ b/web/src/routes/artists/[id]/+page.svelte
@@ -2,6 +2,7 @@
   import { Play } from 'lucide-svelte';
   import { page } from '$app/state';
   import { createArtistQuery } from '$lib/api/queries';
+  import { pageTitle } from '$lib/branding';
   import AlbumCard from '$lib/components/AlbumCard.svelte';
   import LikeButton from '$lib/components/LikeButton.svelte';
   import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
@@ -48,6 +49,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>{pageTitle(query.data?.name ? `Artist · ${query.data.name}` : 'Artist')}</title>
+</svelte:head>
+
 <div class="space-y-4">
   <a href="/" class="text-sm text-text-secondary hover:text-text-primary">← Library</a>
 
diff --git a/web/src/routes/playlists/[id]/+page.svelte b/web/src/routes/playlists/[id]/+page.svelte
index 3952cd25..9fe1a8f8 100644
--- a/web/src/routes/playlists/[id]/+page.svelte
+++ b/web/src/routes/playlists/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { goto } from '$app/navigation';
+  import { pageTitle } from '$lib/branding';
   import { Pencil, Trash2 } from 'lucide-svelte';
   import { useQueryClient } from '@tanstack/svelte-query';
   import PlaylistTrackRow from '$lib/components/PlaylistTrackRow.svelte';
@@ -136,6 +137,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>{pageTitle(playlistQuery?.data?.name ? `Playlists · ${playlistQuery.data.name}` : 'Playlists')}</title>
+</svelte:head>
+
 <div class="mx-auto max-w-4xl px-4 py-6">
   {#if playlistQuery?.isPending}
     <p class="text-text-muted">Loading…</p>