muzick/ui/REVIEW_RESULTS.md

# muzick UI Review

> Reviewed against criteria in `REVIEW_PROMPT.md`. Screenshots were taken **before** a set of known fixes (see bottom of file for pre-fix checklist).

---

## `photo_1` — Albums grid (close-up)

**1. Page:** Albums  
**2. Layout integrity:** No overlapping or clipped elements. Grid gaps are even. Cards do not touch edges. ✅  
**3. Spacing & density:** Card gutters are consistent. No orphan cards visible in this partial view. ✅  
**4. Typography & legibility:** Album titles and artist/year captions are small but legible. No awkward truncation in the visible titles. ✅  
**5. Color & theme:** Gradients and dark background work well. Purple accent is not overused here. ✅  
**6. Images / artwork:**
- Most placeholders show a clear music-note icon on a colored gradient.
- **Minor:** The top-left *Before Neon* card is extremely dark—almost black—making the title text below it harder to read against the dark page background (though the card itself has its own background).
- **Minor:** One album in the bottom row has vivid neon-green/purple glitch-style art. If this is intentional album art, ignore; if it is corrupted decoding, it should be investigated.
- **Nit:** *Blade Runner* and *Before Neon 2* appear multiple times consecutively (duplicate library entries), which makes the grid look repetitive.
**7. Affordances:** Cards have clear hover area (whole card is a target). ✅  
**8. Empty / loading / error states:** Not applicable.  
**9. PlaybackBar:** Not visible in this crop.  
**10. Vibe page:** Not shown.  
**11. Anything off:** No critical issues.

---

## `photo_2` — Home / Dashboard

**1. Page:** Home  
**2. Layout integrity:** Clean three-pane feel (NavRail + main + playback bar). Nothing is running under the playback bar. The right edge of horizontal shelves shows a peeking card to imply scroll—good pattern, not a bug. ✅  
**3. Spacing & density:**
- Header section breathes well.
- Horizontal shelves have consistent internal padding.
- **Nit:** The gap between the "Start a Vibe" feature card and the three shortcut pills (Songs / Albums / Artists) feels slightly large; not broken, just spacious.
**4. Typography & legibility:**
- "Good listening" headline is crisp.
- Muted subtitle "Your music, your way." has adequate contrast.
- Shelf section headers ("Continue Listening", "Most Played") and "View all >" links are consistent in weight/size. ✅
**5. Color & theme:** Ambient background glow is subtle and adds atmosphere without muddying content. ✅  
**6. Images / artwork:**
- Continue Listening uses gradient placeholders uniformly.
- Most Played mixes real artwork and placeholders. No stretched images. ✅
**7. Affordances:**
- "Start a Vibe" card and shortcut pills look clickable.
- **Minor:** The playback-bar lyrics/queue toggle icons on the far right are small and low-contrast; their purpose is only decipherable if you already know the app.
**8. Empty / loading / error states:** Not applicable.  
**9. PlaybackBar:**
- "Nothing playing" state is clear.
- Transport buttons are centered and evenly spaced.
- Timestamps are tiny (0:00) but legible.
- Volume slider looks usable.
**10. Vibe page:** Not shown.  
**11. Anything off:** No critical issues.

---

## `photo_3` — Songs (`/tracks`)

**1. Page:** Songs  
**2. Layout integrity:** List sits cleanly in the main area. No overlap. ✅  
**3. Spacing & density:**
- Row heights are uniform.
- Vertical rhythm is even.
- **Nit:** The list is very dense; there is no sticky alphabet header or subheader to orient the user while scrolling through hundreds of tracks.
**4. Typography & legibility:**
- Track titles are clear.
- Artist names are appropriately muted.
- Durations are right-aligned and consistent.
- A few long Cyrillic titles appear slightly cramped but not truncated. ✅
**5. Color & theme:** ✅  
**6. Images / artwork:** Small thumbnails on the left are square and consistent. No broken images. ✅  
**7. Affordances:** Rows look tappable/clickable. No visible row-hover state in the static screenshot, which is expected. ✅  
**8. Empty / loading / error states:** Not applicable.  
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page:** Not shown.  
**11. Anything off:** No critical issues.

---

## `photo_4` — Albums

**1. Page:** Albums  
**2. Layout integrity:** Grid aligns to the container. No elements clipped by the viewport. ✅  
**3. Spacing & density:**
- 5-column grid feels appropriate for the width.
- Gaps are consistent.
- **Nit:** The last visible row appears to have 5 cards, but the page cuts off just below them; a tiny bit more bottom padding before the playback bar would help the grid feel fully "landed."
**4. Typography & legibility:**
- Long album titles truncate with ellipsis (e.g., "100 Favors (Feat. Detail, Birdman & Kendric..."). This is acceptable for a card grid.
- **Minor:** The "50 on this page" subtitle under "Albums" is very muted; it could be slightly brighter to aid discoverability.
**5. Color & theme:** ✅  
**6. Images / artwork:**
- Placeholder gradients are consistent corner-radius and icon sizing.
- **Minor:** The neon green/purple zig-zag artwork (middle-bottom) is jarring compared to everything else. Verify it is real artwork and not a decode/render error.
**7. Affordances:** Cards look clickable. ✅  
**8. Empty / loading / error states:** Not applicable.  
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page:** Not shown.  
**11. Anything off:** No critical issues.

---

## `photo_5` — Artists

**1. Page:** Artists  
**2. Layout integrity:** Grid is tidy. No overlap. ✅  
**3. Spacing & density:**
- 5-column grid of circular avatars feels balanced.
- Gaps are even.
- **Minor:** Because avatars are circles inside square cards, the text below each card has a lot of horizontal space; very long artist names might still truncate, but none visible here do.
**4. Typography & legibility:** Artist names are centered and readable. ✅  
**5. Color & theme:** Placeholder gradients use a nice variety of hues; they add visual interest without clashing. ✅  
**6. Images / artwork:**
- Circles are well-cropped.
- Real photos (21 Savage, ACRAZE) look good.
- **Minor:** *2 Chainz* appears twice in the grid (row 2, columns 1 and 2). *Acryl madness* and *Acryl Madness* appear as two separate entries (row 4). This is almost certainly a **data-level duplicate** (case/whitespace normalization), but it makes the UI look buggy.
**7. Affordances:** Cards look clickable. ✅  
**8. Empty / loading / error states:** Not applicable.  
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page:** Not shown.  
**11. Anything off:** Duplicate artist entries are the only visible blemish.

---

## `photo_6` — Vibe (Start a Vibe)

**1. Page:** Vibe  
**2. Layout integrity:** Centered narrow column works well. Nothing overlaps. ✅  
**3. Spacing & density:**
- Top "Rolling Vibe" badge, headline, subhead, and "Surprise me" button have good vertical rhythm.
- Seed track list is well-spaced.
- **Nit:** The list only shows ~4.5 tracks before the screenshot ends; if the list is short, centering is fine, but for long lists it might feel odd to be center-constrained rather than left-aligned in the main area.
**4. Typography & legibility:**
- "Start a Vibe" is large and clear.
- Subhead explains the concept succinctly.
- Track titles/durations in the seed list are legible. ✅
**5. Color & theme:** ✅  
**6. Images / artwork:** Seed track thumbnails are small but clear. ✅  
**7. Affordances:**
- "Surprise me" is a strong primary action.
- Seed rows look tappable.
- **Minor:** It is not obvious from the UI what happens after you pick a seed (does playback start instantly? does a timeline appear?). A small hint or a secondary button like "Preview timeline" might help first-time users.
**8. Empty / loading / error states:** Not applicable (there are seed tracks).  
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page specifically:**
- The concept is mostly understandable: "infinite recommendations from a track you love."
- Because this is the **seed-selection** step, the actual rolling timeline is not visible here, so I cannot evaluate timeline readability from this screenshot.
- The seed controls are clear.
**11. Anything off:** No critical issues.

---

## `photo_7` — Quarantine

**1. Page:** Quarantine  
**2. Layout integrity:** Clean centered empty-state card. No overlap. ✅  
**3. Spacing & density:** The empty-state box sits comfortably in the middle of the page. ✅  
**4. Typography & legibility:** "No tracks in quarantine." and the helper sentence are readable. ✅  
**5. Color & theme:** Shield icon uses a muted tone that fits the theme. ✅  
**6. Images / artwork:** Not applicable.  
**7. Affordances:** Not applicable.  
**8. Empty / loading / error states:**
- **Excellent.** This is a well-designed empty state: icon + headline + explanatory subtext ("Disliked tracks will appear here during the grace period."). It is not just blank space.
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page:** Not shown.  
**11. Anything off:** No issues.

---

## `photo_8` — Settings

**1. Page:** Settings  
**2. Layout integrity:** Vertical stack is clean. No overlap. ✅  
**3. Spacing & density:**
- Each section (Theme, Default volume, Library, Enrichment) has comfortable internal padding.
- **Nit:** The page feels slightly narrow; the main content column is centered and does not use the full available width, leaving a lot of dead space on wider screens.
**4. Typography & legibility:** Section headers and labels are clear. Toggle text is readable. ✅  
**5. Color & theme:**
- Theme selector shows 5 options. Default (Purple) has a visible active ring.
- **Minor:** "Dark" and "Midnight" swatches are very similar; users may struggle to tell them apart at a glance.
- **Pre-fix note:** The prompt mentions the theme toggle formerly used `bg-zinc-700`. I cannot confirm that raw gray is present from the screenshot alone; the active state now appears to use a semantic border.
**6. Images / artwork:** Not applicable.  
**7. Affordances:**
- Toggle switches are standard and look interactive.
- Buttons (Scan library, Reindex search, Reprocess artists) look clickable.
- The volume slider is clear.
**8. Empty / loading / error states:** Not applicable.  
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page:** Not shown.  
**11. Anything off:** No critical issues.

---

## `photo_9` — Jobs Overview

**1. Page:** Jobs (Overview tab)  
**2. Layout integrity:** Six stat cards in a horizontal row. No wrapping issues. ✅  
**3. Spacing & density:** Cards are evenly distributed. Numbers are large and impactful. ✅  
**4. Typography & legibility:**
- Labels (WAITING, ACTIVE, etc.) are small and uppercase—appropriate for metadata.
- Numbers are huge and readable.
- **Nit:** The comma in "3,294" is slightly hard to see at this resolution because the numeral weight is heavy; still legible, just dense.
**5. Color & theme:**
- Completed (green) and Failed (red/coral) are standard semantic colors.
- They are not strictly "on-theme" purple, but as status semantics they are acceptable.
**6. Images / artwork:** Not applicable.  
**7. Affordances:**
- Refresh and Auto-refresh toggle in the top-right are clear.
- **Minor:** It is not obvious whether the stat cards are clickable (e.g., to filter the History tab by status). If they are, a hover state or chevron would help.
**8. Empty / loading / error states:** Not applicable.  
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page:** Not shown.  
**11. Anything off:** No critical issues.

---

## `photo_10` — Jobs History

**1. Page:** Jobs (History tab)  
**2. Layout integrity:** List fills the width correctly. No overlap. ✅  
**3. Spacing & density:** Row heights are consistent. Timestamp column is right-aligned and does not collide with the arrow icon. ✅  
**4. Typography & legibility:**
- Job names and status badges are clear.
- Timestamps ("about 1 hour ago", "5 days ago") are readable.
- Durations below timestamps ("36min 13s") are small but legible. ✅
**5. Color & theme:** Status pills ("Completed", "Scheduled") use muted backgrounds that fit the dark theme. ✅  
**6. Images / artwork:** Not applicable.  
**7. Affordances:**
- Right-facing arrow on each row implies navigation/expansion.
- Filter tabs (All / Completed / Failed / Running) are clear.
- **Minor:** The "All Types" dropdown and "200 / 300 jobs" indicator are small but functional.
**8. Empty / loading / error states:** Not applicable.  
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page:** Not shown.  
**11. Anything off:** No critical issues.

---

## `photo_11` — Search

**1. Page:** Search  
**2. Layout integrity:** Results list is cleanly contained. No overlap. ✅  
**3. Spacing & density:** Same vertical rhythm as the Songs page. ✅  
**4. Typography & legibility:**
- "Search" headline and "50 results for 'Booker'" subhead are clear.
- Cyrillic track titles render correctly. ✅
**5. Color & theme:** ✅  
**6. Images / artwork:** Thumbnails are consistent. No broken images. ✅  
**7. Affordances:**
- Search input shows an `×` clear button—good.
- Rows look tappable.
**8. Empty / loading / error states:** Not applicable (results present).  
**9. PlaybackBar:** Same as photo_2. ✅  
**10. Vibe page:** Not shown.  
**11. Anything off:** No critical issues.

---

## Pre-fix checklist (from prompt)

The following issues were noted in `REVIEW_PROMPT.md` as already fixed **after** these screenshots were taken. I did not observe clear evidence of them in the current screenshots, but I am recording them here for completeness:

| Issue | Observed? | Notes |
|-------|-----------|-------|
| `scrollbar-hide` missing (horizontal shelves showed scrollbars) | Not visible | Horizontal shelves in photo_2 do not show native scrollbars; may be OS-hidden or already fixed. |
| Geist webfont loaded but not wired in | Cannot verify | Static screenshot; text looks fine but font family cannot be determined from image alone. |
| No `:focus-visible` outlines anywhere | Cannot verify | No focused elements are visible in any screenshot. |
| `Artwork` component had no lazy-load or error fallback | Not observed | Placeholder gradients and music-note icons are visible everywhere artwork is missing; no broken-image icons seen. |
| Settings theme toggle used `bg-zinc-700` | Cannot confirm | Theme toggles in photo_8 look acceptable, but exact token cannot be determined from image. |

---

## Summary

| Screenshot | Page | Severity | Notes |
|------------|------|----------|-------|
| `photo_1` | Albums | Minor | Possible corrupted/glitched artwork; very dark album cover hard to read. |
| `photo_2` | Home | Nit | Playback-bar utility icons are small/low-contrast. |
| `photo_3` | Songs | — | No issues. |
| `photo_4` | Albums | Minor | Neon glitch artwork looks suspicious; bottom grid row could use a hair more padding. |
| `photo_5` | Artists | Minor | Duplicate artist entries visible (data issue leaking into UI). |
| `photo_6` | Vibe | Nit | Seed selection is clear, but next-step affordance is implicit. |
| `photo_7` | Quarantine | — | No issues; great empty state. |
| `photo_8` | Settings | Nit | Content column is narrow; Dark/Midnight swatches are very similar. |
| `photo_9` | Jobs Overview | Nit | Stat cards may benefit from a click affordance if they filter history. |
| `photo_10` | Jobs History | — | No issues. |
| `photo_11` | Search | — | No issues. |

**No critical or major layout bugs found.** The app is visually coherent, spacing is generally consistent, and the dark theme with purple accents reads well.