Linthra UI Lab / editable design structure for Now Playing

[TheZupZup]

Goal

Make the current Now Playing design easy for the maintainer to edit by hand (on Windows) without digging through playback/provider logic.

The current Now Playing design is the reference and is preserved. This is not a redesign. The config files were filled in with the exact values the screen already used, so the rendered screen is unchanged — only where the numbers live moved.

What changed

A new, heavily-commented design surface at lib/ui_linthra/:

File	Edit it to change…
design_tokens.dart	Artwork size, blur strength, corner radius, shadows, button/icon sizes, text weights, muted-text opacity
now_playing_layout_config.dart	Spacing/gaps/paddings, every on-screen word, and the text styles
now_playing_actions_config.dart	The bottom action row: button order, which buttons show, icons, labels
now_playing_preview_data.dart	Fake states for the preview
preview/	Dev-only preview app (real screen + fake data)
README.md	Folder overview

The player widgets (lib/features/player/…) now read their values from these files instead of hard-coding numbers. Playback logic, provider logic, and the "Playing from …" safe labelling are untouched.

Easy button editing

nowPlayingActionOrder is the one obvious knob for the bottom row:

const List<NowPlayingAction> nowPlayingActionOrder = <NowPlayingAction>[
  NowPlayingAction.favorite,
  NowPlayingAction.addToPlaylist,
  NowPlayingAction.queue,
  NowPlayingAction.lyrics,
  NowPlayingAction.sleepTimer,
  // NowPlayingAction.shuffle, // ← uncomment to add a shuffle toggle here
  // NowPlayingAction.repeat,  // ← uncomment to add a repeat toggle here
];

• Reorder → move a line. Hide → delete/comment a line. Show → uncomment a line.
• favorite, addToPlaylist, queue, lyrics, sleepTimer, shuffle, repeat are all supported and wired. No playback code to touch.

Dev-only preview (no server needed)

flutter run -t lib/ui_linthra/preview/now_playing_preview_main.dart

Renders the real PlayerScreen with fake data and a dropdown to flip between samples (Plex / Jellyfin / Navidrome / local / cache, paused / buffering / error, long titles, no-artwork). Works fully offline — the preview paints its own cover so the blurred-artwork hero shows without Plex/Jellyfin/Navidrome. Hot-reload to see edits instantly.

Docs

• docs/ui-editing-guide.md — how to open the project on Windows, exactly which file/line to edit for button order, spacing, colours, artwork size, labels, text size; how to preview/test; and which files not to edit unless changing playback logic.
• Pointer added from the codebase tour.

Preserved behaviour ✅

• Current Now Playing screen looks the same (large artwork, blurred dynamic background, centered title/artist/album, "Playing from …" source label, orange progress + play button, clean bottom action row).
• Existing / Plex / Jellyfin / Subsonic-Navidrome / local playback paths unchanged.
• Cast button and source label retained.
• No provider/token/security behaviour changed.

Out of scope (as requested)

No redesign, no new provider, no lyrics implementation, no cache/offline changes, no Plex.tv OAuth, no version bump, no user-facing theme editor / runtime customization UI.

Verification

• flutter analyze — clean
• dart format --set-exit-if-changed . — clean
• flutter test — full suite passes, including the existing Now Playing widget tests (labels, tooltips, icons, source badges, transport) and new tests for the preview controller + screen.

https://claude.ai/code/session_01Bv1N4G2akQmaLGzSNAWgqb

---

Generated by Claude Code