feat(web/m7-363): per-route svelte:head titles for static routes

Add browser tab titles to all 18 static page routes using the pageTitle()
helper from $lib/branding. Titles follow the Minstrel · Section format.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-03 17:37:13 -04:00
parent f31dbcc087
commit 9ad2e0343a
18 changed files with 54 additions and 0 deletions
+3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { createHomeQuery } from '$lib/api/home';
import HorizontalScrollRow from '$lib/components/HorizontalScrollRow.svelte';
import AlbumCard from '$lib/components/AlbumCard.svelte';
@@ -22,6 +23,8 @@
}
</script>
<svelte:head><title>{pageTitle('Home')}</title></svelte:head>
<div class="space-y-8">
{#if query.isError}
<ApiErrorBanner error={query.error} onRetry={query.refetch} />
+3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { Disc3, Album, Music2, Check, X, RotateCcw, Trash2, Cloud, ChevronRight } from 'lucide-svelte';
import { useQueryClient } from '@tanstack/svelte-query';
import {
@@ -177,6 +178,8 @@
}
</script>
<svelte:head><title>{pageTitle('Admin · Overview')}</title></svelte:head>
<div class="space-y-8">
<header>
<h2 class="font-display text-2xl font-medium text-text-primary">Overview</h2>
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { Save, RefreshCw, Trash2 } from 'lucide-svelte';
import { useQueryClient } from '@tanstack/svelte-query';
import {
@@ -162,6 +163,8 @@
}
</script>
<svelte:head><title>{pageTitle('Admin · Integrations')}</title></svelte:head>
<div class="space-y-6">
<header class="flex items-center justify-between">
<h2 class="font-display text-2xl font-medium text-text-primary">Integrations</h2>
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { Music2, RotateCcw, Trash2, Cloud, Play, ChevronRight } from 'lucide-svelte';
import { useQueryClient } from '@tanstack/svelte-query';
import {
@@ -162,6 +163,8 @@
);
</script>
<svelte:head><title>{pageTitle('Admin · Quarantine')}</title></svelte:head>
<div class="space-y-6">
<header class="space-y-1">
<div class="flex items-center gap-2">
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { Disc3, Album, Music2, Check, X, SlidersHorizontal } from 'lucide-svelte';
import { useQueryClient } from '@tanstack/svelte-query';
import {
@@ -170,6 +171,8 @@
);
</script>
<svelte:head><title>{pageTitle('Admin · Requests')}</title></svelte:head>
<div class="space-y-6">
<header class="space-y-1">
<h2 class="font-display text-2xl font-medium text-text-primary">Requests</h2>
+3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { createLidarrSearchQuery } from '$lib/api/lidarr';
import { createRequest } from '$lib/api/requests';
import DiscoverResultCard from '$lib/components/DiscoverResultCard.svelte';
@@ -115,6 +116,8 @@
];
</script>
<svelte:head><title>{pageTitle('Discover')}</title></svelte:head>
<!--
Page layout: a full-height flex column so the persistent chrome
(DiscoverTabs, search input, facet tabs) stays anchored at the top
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { createAlbumsAlphaInfiniteQuery } from '$lib/api/albums';
import AlbumCard from '$lib/components/AlbumCard.svelte';
import AlphabeticalGrid from '$lib/components/AlphabeticalGrid.svelte';
@@ -14,6 +15,8 @@
const showSkeleton = useDelayed(() => query.isPending);
</script>
<svelte:head><title>{pageTitle('Library · Albums')}</title></svelte:head>
<div class="space-y-4">
<header>
<h1 class="font-display text-2xl font-medium text-text-primary">Albums</h1>
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { createArtistsQuery } from '$lib/api/queries';
import ArtistCard from '$lib/components/ArtistCard.svelte';
import AlphabeticalGrid from '$lib/components/AlphabeticalGrid.svelte';
@@ -14,6 +15,8 @@
const showSkeleton = useDelayed(() => query.isPending);
</script>
<svelte:head><title>{pageTitle('Library · Artists')}</title></svelte:head>
<div class="space-y-4">
<header>
<h1 class="font-display text-2xl font-medium text-text-primary">Artists</h1>
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { Music2, RotateCcw } from 'lucide-svelte';
import { useQueryClient } from '@tanstack/svelte-query';
import { createMyQuarantineQuery, unflagTrack } from '$lib/api/quarantine';
@@ -40,6 +41,8 @@
}
</script>
<svelte:head><title>{pageTitle('Library · Hidden')}</title></svelte:head>
<div class="space-y-6">
<header class="space-y-1">
<h2 class="font-display text-2xl font-medium text-text-primary">Hidden</h2>
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import {
createLikedTracksInfiniteQuery,
createLikedAlbumsInfiniteQuery,
@@ -25,6 +26,8 @@
const tracksTotal = $derived(tracksQuery?.data?.pages?.[0]?.total ?? 0);
</script>
<svelte:head><title>{pageTitle('Library · Liked')}</title></svelte:head>
<div class="space-y-6">
<h1 class="text-2xl font-semibold">Liked</h1>
+3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { page } from '$app/state';
import { goto } from '$app/navigation';
import { login } from '$lib/auth/store.svelte';
@@ -41,6 +42,8 @@
}
</script>
<svelte:head><title>{pageTitle('Sign in')}</title></svelte:head>
<main class="flex min-h-screen items-center justify-center bg-background text-text-primary">
<div class="w-full max-w-sm rounded-lg border border-border bg-surface p-6 shadow">
<h1 class="mb-6 text-center text-2xl font-semibold">Minstrel</h1>
+3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { goto } from '$app/navigation';
import { Plus } from 'lucide-svelte';
import PlaylistCard from '$lib/components/PlaylistCard.svelte';
@@ -37,6 +38,8 @@
}
</script>
<svelte:head><title>{pageTitle('Playlists')}</title></svelte:head>
<div class="mx-auto max-w-6xl px-4 py-6">
<header class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-medium text-text-primary">Playlists</h1>
+3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { Disc3, Album, Music2, X } from 'lucide-svelte';
import { useQueryClient } from '@tanstack/svelte-query';
import { createMyRequestsQuery, cancelRequest } from '$lib/api/requests';
@@ -61,6 +62,8 @@
}
</script>
<svelte:head><title>{pageTitle('Requests')}</title></svelte:head>
<DiscoverTabs />
<div class="space-y-6 pt-6">
+3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { page } from '$app/state';
import { createSearchQuery } from '$lib/api/queries';
import ArtistCard from '$lib/components/ArtistCard.svelte';
@@ -32,6 +33,8 @@
}
</script>
<svelte:head><title>{pageTitle('Search')}</title></svelte:head>
<div class="space-y-6">
{#if !q}
<p class="text-text-secondary">
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { page } from '$app/state';
import { createSearchAlbumsInfiniteQuery } from '$lib/api/queries';
import AlbumCard from '$lib/components/AlbumCard.svelte';
@@ -15,6 +16,8 @@
const showSkeleton = useDelayed(() => !!query?.isPending);
</script>
<svelte:head><title>{pageTitle('Search · Albums')}</title></svelte:head>
<div class="space-y-4">
<header>
<a href={`/search?q=${encodeURIComponent(q)}`} class="text-sm text-text-secondary hover:text-text-primary">
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { page } from '$app/state';
import { createSearchArtistsInfiniteQuery } from '$lib/api/queries';
import ArtistCard from '$lib/components/ArtistCard.svelte';
@@ -15,6 +16,8 @@
const showSkeleton = useDelayed(() => !!query?.isPending);
</script>
<svelte:head><title>{pageTitle('Search · Artists')}</title></svelte:head>
<div class="space-y-4">
<header>
<a href={`/search?q=${encodeURIComponent(q)}`} class="text-sm text-text-secondary hover:text-text-primary">
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { page } from '$app/state';
import { createSearchTracksInfiniteQuery } from '$lib/api/queries';
import TrackRow from '$lib/components/TrackRow.svelte';
@@ -21,6 +22,8 @@
}
</script>
<svelte:head><title>{pageTitle('Search · Tracks')}</title></svelte:head>
<div class="space-y-4">
<header>
<a href={`/search?q=${encodeURIComponent(q)}`} class="text-sm text-text-secondary hover:text-text-primary">
+3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { pageTitle } from '$lib/branding';
import { useQueryClient } from '@tanstack/svelte-query';
import type { CreateQueryResult, CreateMutationResult } from '@tanstack/svelte-query';
import {
@@ -33,6 +34,8 @@
}
</script>
<svelte:head><title>{pageTitle('Settings')}</title></svelte:head>
<div class="space-y-6">
<h1 class="text-2xl font-semibold">Settings</h1>