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

fix(playlists): refine smart playlist UX and library-scoped tracks

Browse Source 
Show edit/delete actions on hover in playlist cards, support opening metadata edit directly from the grid, and render smart playlist covers from active-library tracks. Playlist detail now filters displayed songs to the selected library instead of hiding whole playlists.
This commit is contained in:
Maxim Isaev
2026-04-24 17:09:59 +03:00
parent 27a59f6b23
commit 9baf01fdc2
3 changed files with 121 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+24 -16
View File
@@ -7286,43 +7286,51 @@ html.no-compositing .fs-seekbar-played {
opacity: 0.6;
}
/* Delete button — top-right corner of card cover, hidden until hover */
.playlist-card-delete {
/* Playlist card actions (edit/delete) — visible on hover */
.playlist-card-actions {
position: absolute;
top: 6px;
right: 6px;
top: 8px;
right: 8px;
display: flex;
gap: 6px;
opacity: 0;
transform: translateY(-2px);
transition: opacity var(--transition-fast), transform var(--transition-fast);
z-index: 6;
}
.album-card:hover .playlist-card-actions {
opacity: 1;
transform: translateY(0);
}
.playlist-card-action {
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(0, 0, 0, 0.55);
color: rgba(255, 255, 255, 0.75);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
z-index: 2;
}
.album-card:hover .playlist-card-delete {
opacity: 1;
.playlist-card-action--edit:hover {
background: rgba(90, 120, 255, 0.85);
color: #fff;
}
.playlist-card-delete:hover {
.playlist-card-action--delete:hover {
background: rgba(220, 60, 60, 0.85);
color: #fff;
}
.playlist-card-delete--confirm {
.playlist-card-action--delete-confirm {
background: #dc3c3c !important;
color: #fff !important;
opacity: 1 !important;
width: 30px !important;
height: 30px !important;
top: 3px !important;
right: 3px !important;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
animation: delete-confirm-pulse 0.7s ease-in-out infinite alternate;
}