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:
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user