Add proof-of-concept vertical NowBar layout positions

[handofhate]

Adds proof-of-concept top and bottom NowBar positions.

This expands the existing NowBar side preference from left/right to left/top/right/bottom and makes the existing position button cycle through all four layouts. The goal is to support portrait/narrow displays where artwork above or below the lyrics is more usable than left/right artwork.

Notes:

• Left/right behavior is preserved.
• Top layout is working well in local testing.
• Bottom layout is usable but may need maintainer polish.
• There are still some spacing/style differences around the experimental progress bar and timeline placement.
• Compact mode still forces the existing left-side layout to avoid changing compact/PIP behavior.

I’m opening this as a proof of concept because the main structure is there, but I expect you may want to adjust the final UI/spacing/progress-bar behavior to match the project’s preferred design.

[greptile-apps]

Greptile Summary

The PR expands the persisted NowBar position from left/right to a four-position cycle and adds top/bottom layout styling while retaining the left layout in compact mode.

• Centralizes validation and application of NowBar position classes.
• Adds top and bottom artwork geometry and corresponding lyrics-area sizing.
• Updates compact-mode cleanup and the position-control tooltip.

Confidence Score: 5/5

The PR appears safe to merge, with no concrete changed-code failure identified.

Position validation, compact-mode left-side enforcement, persisted-position restoration, and the new vertical layout selectors form a consistent reachable lifecycle without an established broken state.

Important Files Changed

Filename	Overview
src/components/Utils/NowBar.ts	Adds validated four-position cycling and centralizes DOM class updates for the NowBar and page.
src/components/Utils/CompactMode.ts	Extends compact-mode cleanup so top and bottom classes are removed when forcing the existing left layout.
src/css/ContentBox.css	Implements vertical artwork placement and reserves corresponding vertical space for lyrics; no concrete blocking defect was established.
src/utils/uiState.ts	Expands the persisted NowBar position union to include top and bottom.
src/components/Pages/PageView.ts	Renames the position control tooltip to reflect the expanded four-position behavior.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  L[Left] --> T[Top]
  T --> R[Right]
  R --> B[Bottom]
  B --> L
  C[Compact or PIP mode] --> L
  X[Exit compact mode] --> P[Restore persisted position]

Loading

_{Reviews (1): Last reviewed commit: "Add vertical NowBar layout positions" | Re-trigger Greptile}