muzick/ui/REVIEW_PROMPT.md

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