initial state: muzick music player + recommendation engine

ui/REVIEW_PROMPT.md

@@ -0,0 +1,38 @@
+You are reviewing screenshots of a self-hosted music player called **muzick**. The app has a fixed 3-pane layout: a left **NavRail** (icons + labels, groups: Library / Personal / System), a **TopBar** with a search input, a **main content** area, an optional right-hand **NowPlayingPanel** (queue + lyrics tabs), and a bottom **PlaybackBar** (track info on the left, transport + seek bar in the center, volume + lyrics/queue toggles on the right). It uses a dark theme with an accent color and faint ambient gradient glows in the background.
+
+The screenshots in this directory (`photo_1` through `photo_11`) show various pages of the app. Review each one against the criteria below.
+
+For each screenshot, tell me:
+
+1. **Which page/view it is.** The pages are: Home, Songs (`/tracks`), Albums, AlbumDetail, Artists, ArtistDetail, Genres, Vibe, Discover, Search, Quarantine, Settings, Jobs.
+
+2. **Layout integrity.** Any overlapping or clipped elements, content running under the playback bar, nav rail collapsing, now-playing panel covering content, horizontal scrollbars appearing where they shouldn't, elements touching edges with no padding.
+
+3. **Spacing & density.** Is anything cramped or conversely too sparse? Card grids — are gaps consistent, do cards align, are there orphan cards on the last row? List rows — is vertical rhythm even? Headers — do they breathe?
+
+4. **Typography & legibility.** Truncation that cuts off important text, text too small, low-contrast text (muted-on-surface), font rendering issues, inconsistent font weights/sizes between similar elements.
+
+5. **Color & theme.** Does the accent color work against the background? Any off-theme colors (raw grays, blues that don't match)? Are hover/active states visible? Do the ambient background glows add atmosphere or muddy the content?
+
+6. **Images / artwork.** Broken image icons, blank squares where album art should be, stretched/squished artwork, inconsistent corner radius between cards, no fallback gradient visible.
+
+7. **Affordances.** Buttons that don't look clickable, links that look like plain text, no visible hover state on things you'd expect, icon-only buttons missing tooltips (you can't see tooltips in a screenshot but note any icon button whose purpose isn't obvious from the icon alone).
+
+8. **Empty / loading / error states.** If a page looks empty, is there a helpful empty state or just blank space? Any bare "Loading…" text? Any visible error?
+
+9. **The PlaybackBar specifically.** Is the seek bar usable, are timestamps legible, does the track-info cluster on the left truncate gracefully, does the volume control feel right, are the lyrics/queue toggle icons clear?
+
+10. **The Vibe page specifically** (if shown): there's a "rolling vibe" feature with a timeline of upcoming tracks and seed controls. Is the concept understandable from the UI alone? Is the timeline readable? Are the controls clear?
+
+11. **Anything that just looks off** — even if you can't articulate why. List it; I'll diagnose against the source.
+
+Be specific about location (top-left, bottom bar, right panel, etc.) and severity (critical / major / minor / nit). If a screenshot is fine, say "no issues" and move on — don't invent problems.
+
+Group your findings by screenshot filename (e.g. `photo_1: …`, `photo_4: …`) so each can be mapped to the right source file.
+
+Note: these screenshots were taken **before** the following fixes were applied, so if you see any of these, they may already be resolved and you can mark them as "likely already fixed":
+- `scrollbar-hide` utility was missing (horizontal shelves showed scrollbars)
+- Geist webfont was loaded but not wired into the app
+- No `:focus-visible` outlines anywhere
+- `Artwork` component had no lazy-load or error fallback (broken images showed blank)
+- Settings theme toggle used an off-theme `bg-zinc-700` instead of the semantic border token