docs: archive track detail page to COMPLETED.md; update CLAUDE.md

COMPLETED.md

@@ -381,6 +381,55 @@ Eliminated `!important` declarations from track card CSS by replacing MudBlazor
 - Plain-div shell re-enables CSS isolation as an option (a `TrackCard.razor.css` would now work against the shell divs). Section 8's public-only scoping remains convenient; isolation is optional for future polish.
 - Removes the structural mismatch of using a Material surface component (`MudCard`/`MudPaper`) solely as a layout shell. TrackCard now mirrors the construction of `NowPlayingCard` (plain divs + themed CSS).
 
+---
+
+## Track Detail Page (/track/{entryKey})
+
+**Status:** Landed on 2026-06-06 (branch `track-detail-page`, merged to dev).
+
+A focused, editorial single-track view in `DeepDrftPublic.Client`. The track gallery answers "what is in the library"; this page answers "tell me about *this* track" — full metadata, cover art, and a single prominent play affordance, styled to feel like a record-sleeve back-cover rather than a form. Link-only for now (reached from a gallery card / Now Playing), not a top-level nav entry.
+
+### Implemented solution
+
+**Components (`DeepDrftPublic.Client/Pages/`):**
+- `TrackDetail.razor` + `TrackDetail.razor.cs` — routed at `@page "/track/{EntryKey}"` with `@rendermode InteractiveWebAssembly`. Three render states (loading skeleton, loaded layout, 404 not-found) driven by `TrackDetailViewModel` flags. Cascades `IStreamingPlayerService` for play-affordance wiring. Subscribes to `PlayerService.StateChanged` to keep the play button label in sync with live transport state.
+
+**ViewModel (`DeepDrftPublic.Client/ViewModels/`):**
+- `TrackDetailViewModel` — scoped, registered in `Startup.ConfigureDomainServices`. Depends on `ITrackDataService` (render-mode-agnostic seam, existing). Properties: `Track` (loaded DTO), `IsLoading`, `NotFound`. Single `Load(entryKey)` command idempotent per route, fully resetting all three flags on each call to prevent stale track bleed on navigation.
+
+**DI registration (`DeepDrftPublic.Client/Startup.cs`):**
+- `TrackDetailViewModel` registered scoped.
+
+**UI layout:**
+1. Subtle back-link `← All tracks` to `/tracks`, muted low-emphasis text affordance.
+2. Large square cover art block — placeholder themed `MudPaper` with `Album` glyph when cover unavailable (default state pending 2.1 image-vault wiring); will display `<img src>` once 2.1 lands.
+3. Title (TrackName, display-serif h3) / artist (h6, primary accent) masthead.
+4. Prominent **Play** button under masthead with state-reactive label ("Play" / "Pause" / "Resume" keyed to current track and playback state via `PlayerService` subscription).
+5. `MudDivider` separator.
+6. Optional-field metadata block (Album, Genre, ReleaseDate) — definition-row layout, rendered only if non-null; all three omit silently if unavailable.
+7. Skeleton loading state matching the loaded layout silhouette.
+8. 404 messaging on not-found.
+
+**CSS classes (`DeepDrftPublic/wwwroot/styles/deepdrft-styles.css` §14):**
+- `deepdrft-track-detail-container` — centered single column, max-width, auto-margins, vertical padding.
+- `deepdrft-track-detail-cover` — square aspect-ratio frame, rounded, subtle shadow/border (light/dark theme-aware), `overflow: hidden` for clean image crop.
+- `deepdrft-track-detail-masthead` — title/artist spacing, display-serif via existing `deepdrft-` font classes.
+- `deepdrft-track-detail-meta` — metadata block rhythm, small-caps muted labels.
+- `deepdrft-track-detail-back` — back-link affordance, muted color, hover treatment.
+
+**Inbound links wired (`DeepDrftShared.Client/Components/TrackCard.razor`):**
+- Cover block and title/artist are now `display:contents` anchors to `href="/track/{track.EntryKey}"`, making the entire card clickable to the detail page.
+- Play button on the card untouched (still functions independently for gallery playback).
+
+**Architecture notes:**
+- Render mode `InteractiveWebAssembly` (server prerender → WASM hydrate) mirrors `TracksView` consistency.
+- `TrackDetailViewModel` is scoped (per-instance), not singleton — navigating between `/track/A` and `/track/B` reuses the same scoped instance, so `Load` must fully reset state to prevent cross-navigation bleed.
+- Play button implements the same `PlayerService.StateChanged` subscription pattern as `TracksView` — mandatory for label coherence when the dock bar drives state.
+- Cover-art default (placeholder) is intentional and designed to be the resting state, not degraded; the page ships immediately without waiting for 2.1 image-vault wiring. Once 2.1 lands and `api/image/{entryKey}` exists on `DeepDrftContent`, the `<img src>` binding swaps in without further component changes (the placeholder's `onerror` fallback ensures graceful degradation if a vault entry is missing).
+- Page is link-only navigation (not in the header `MenuPages`); reachability depends on inbound links from `TrackCard` and Now Playing surfaces, which were wired simultaneously.
+
+---
+
 **Status:** Desktop AudioPlayerBar redesign landed on 2026-06-04.
 
 ### Desktop AudioPlayerBar — migrate to MudBlazor theme system