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.
|
||
|---|---|---|
| .. | ||
| docs | ||
| vendor | ||
| api-monitor.js | ||
| artists.png | ||
| automation.png | ||
| beatport-ui.js | ||
| core.js | ||
| dashboard.png | ||
| discover.js | ||
| discover.png | ||
| docs-images-needed.md | ||
| docs.js | ||
| downloads.js | ||
| enrichment.js | ||
| explorer.png | ||
| favicon.png | ||
| help.png | ||
| helper.js | ||
| hydrabase.png | ||
| import.png | ||
| init.js | ||
| library.js | ||
| library.png | ||
| media-player.js | ||
| mobile.css | ||
| pages-extra.js | ||
| particles.js | ||
| placeholder-album.png | ||
| search.js | ||
| search.png | ||
| settings.js | ||
| settings.png | ||
| setup-wizard.css | ||
| setup-wizard.js | ||
| shared-helpers.js | ||
| stats-automations.js | ||
| style.css | ||
| sync-services.js | ||
| sync-spotify.js | ||
| sync.png | ||
| trans.png | ||
| trans2.png | ||
| whisoul.png | ||
| wishlist-tools.js | ||
| worker-orbs.js | ||
