itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(most-played): quick actions, real context menu, prominent plays badge (#482)

Browse Source 
* feat(most-played): quick actions, real context menu, prominent plays badge

Three UX refinements on Settings → Most Played, in response to user
feedback:

* **Quick actions on each album row** — Play and Enqueue buttons that
  reuse the same logic as AlbumCard (Play kicks the existing
  `playAlbum` fade-out flow; Enqueue fetches the album and appends its
  songs to the queue). Always visible, not hover-gated.
* **Real context menu** on right-click — replaces a hidden direct
  `playAlbum` action with the standard `openContextMenu(...)` flow
  used elsewhere in the app, so right-click on an album row now opens
  the full album context menu (Play / Add to queue / Play next /
  Add to playlist / Go to artist), and right-click on a Top Artists
  card opens the artist context menu.
* **Plays badge next to the album title** — replaces the small
  right-aligned plays count that was easy to miss. Each row now shows
  a localized pill (`11 plays` / `11× gespielt`) right next to the
  album title, since the play count is the central datum on this
  page.

CSS: new `.mp-album-name-row`, `.mp-album-plays-pill`,
`.mp-album-actions` and `.mp-album-action-btn` rules; the unused
`.mp-album-plays` block and its right-most grid column were removed.

* docs: changelog entry for PR #482

Logs the Most Played quick-actions / real context menu / prominent
plays badge changes under v1.46.0 "## Changed".
This commit is contained in:
Frank Stellmacher
2026-05-06 16:55:33 +02:00
committed by GitHub
parent ebce53f8a7
commit 6c1deeeb7f
3 changed files with 104 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+47 -10
View File
@@ -9318,6 +9318,53 @@ html.no-compositing .fs-seekbar-played {
transition: background var(--transition-fast);
}
.mp-album-name-row {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.mp-album-plays-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: var(--bg-card);
color: var(--accent);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.mp-album-actions {
display: flex;
gap: 4px;
}
.mp-album-action-btn {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.mp-album-action-btn:hover {
background: var(--bg-card);
color: var(--text-primary);
}
.mp-album-row:hover {
background: var(--bg-hover);
}
@@ -9367,16 +9414,6 @@ html.no-compositing .fs-seekbar-played {
font-variant-numeric: tabular-nums;
}
.mp-album-plays {
font-size: 13px;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
font-variant-numeric: tabular-nums;
min-width: 36px;
text-align: right;
}
.mp-load-more {
margin-top: 1rem;
display: flex;