Skip to content

UI polish pass: library sorting, empty states, Now Playing queue, playlist covers #39

Description

@EnesYilmazcode

General UI improvement pass. Each item is independent and small enough to land separately; all grounded in current components.

Library (src/components/LibraryView.jsx)

  • Sort control next to the All/Favorites segmented control: Recently added / Most played / A–Z. The data already exists on every track (dateAdded, playCount are even indexed in db.js) — this is pure UI
  • Real empty state: today an empty library is just a dim text line (LibraryView.jsx:50). Replace with a centered empty state: icon, one-line explanation of the Files→Import flow, and a prominent Import button (reuse ImportButton)
  • Track count + total duration under the header ("42 songs · 2 hr 51 min")

Now Playing (src/components/Player.jsx)

  • Queue view: no way to see or reorder what plays next. Add a third panel (alongside artwork/lyrics) listing the current queue with the active track highlighted; tap to jump, drag to reorder
  • Swipe-down to dismiss the full-screen sheet (currently only the chevron button closes it) — standard iOS player gesture
  • Mini bar: swipe left/right for next/previous (long-press infra in useLongPress.js shows the touch-handling pattern to follow; ensure no conflict with tap-to-expand)

Playlists (src/components/PlaylistsView.jsx)

  • Cover art mosaic: 2×2 grid built from the first four tracks' artwork (Artwork.jsx already resolves per-track art + fallback) instead of a generic tile
  • Show track count and total duration per playlist row

Feedback & notices

  • Replace inline import notices (importnote in ImportButton.jsx) with a toast component that slides above the dock and auto-dismisses — reusable for "added to playlist", sync results (see the a-Shell sync issue), and update notices
  • Import progress: per-file count exists (Importing… (n)); add a thin determinate progress bar

Search (src/components/SearchView.jsx)

  • When the query is empty, show something useful instead of a blank pane: recently played + most played shortcuts (again playCount/lastPlayedAt already stored)

Acceptance criteria

Each checkbox is a self-contained PR; no data-model changes required for any of them.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions