e40eb213b4
Some checks failed
Compile the app and run tests / sanity-check (push) Has been cancelled
The current cards are full-width horizontal rows, which makes the tab feel
dense once a few playlists accumulate. Rework to a grid of compact cards
that match the Server Playlists visual language already used on the same
Sync page, so the two surfaces feel like the same app.
Changes (all visual — no impact on JohnBaumb's sync/poll logic):
- `.discover-sync-grid` wrapper renders cards as `repeat(auto-fill,
minmax(240px, 1fr))`. 4-6 cards per row at desktop width.
- Per-card hue derived deterministically from playlist type so each card
has a consistent color identity across reloads. Drives the icon tint,
source badge color, toggle color, action-button gradient, and a soft
radial glow in the top-right corner.
- Top row: 40x40 icon chip + source badge ("DEEZER" / "SPOTIFY") pushed
to the top-right (mirrors the chevron placement on Server Playlists).
- Body: playlist name (15px bold, 2-line clamp), track count + status
pill on one line, last-synced subtle line below.
- Compact toggles in a small bordered panel, stacked rows of
label+switch. Smaller 34x18 switch matches the denser card size.
- Full-width gradient action button ("Sync Now") at the bottom.
- Hover: card lifts 2px, glow + border intensify.
Deliberately kept purely visual to avoid touching JohnBaumb's logic:
- Button content stays flat text ("Sync Now" / "Syncing...") so his
`btn.textContent = ...` poll updates still work unchanged.
- Status text format matches the strings his sync-poll code writes
("Synced 10/15" / "Synced" / "Not synced" / "Syncing..." / "Failed"),
so initial render and post-sync updates stay consistent.
- All ids and state-managed class hooks preserved: `discover-sync-card-${type}`,
`discover-sync-btn-${type}`, `.discover-sync-status`, the
syncing/synced/not-synced modifier classes, and the
`discover-sync-card-highlight` deep-link animation class.
Staging branch for review — not targeting dev directly. JohnBaumb can
cherry-pick onto his PR branch if he wants the redesign, or skip it.
|
||
|---|---|---|
| .. | ||
| static | ||
| index.html | ||