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

feat(folder-browser): keyboard nav, context menus, now-playing path UX

Browse Source 
Adds full keyboard navigation (arrow keys, Enter, Ctrl+Enter for context menu) across Folder Browser columns. Context menus for all row types with keyboard-operable submenus and star-rating control via arrow keys + Enter. Now-playing path is visually emphasized and stays stable; rebuilds on hotkey re-invoke or active-path follow-along. Adaptive column layout for deep trees with right-side visibility priority. New configurable 'Open Folder Browser' keybinding. StarRating animation sync for keyboard-driven changes. All 7 locales updated.
This commit is contained in:
cucadmuh
2026-04-12 12:27:26 +03:00
committed by GitHub
parent 3d07a877f2
commit ae2e1bcb97
16 changed files with 1082 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+165 -3
View File
@@ -3701,6 +3701,26 @@ html.no-compositing .fs-lyrics-rail {
color: var(--accent);
}
.context-menu-item.context-menu-keyboard-active,
.context-menu-rating-row.context-menu-keyboard-active {
background: var(--surface-2);
color: var(--accent);
}
.context-menu-item.context-menu-keyboard-active {
box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.context-menu-rating-row.context-menu-keyboard-active {
background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.context-menu-rating-row.context-menu-keyboard-active .context-menu-rating-icon {
color: var(--accent);
opacity: 1;
}
.context-menu-divider {
height: 1px;
background: var(--border-subtle);
@@ -3708,12 +3728,48 @@ html.no-compositing .fs-lyrics-rail {
}
.context-menu-rating-row {
padding: 6px 12px;
/* Match .context-menu-item padding so the row lines up with other entries */
padding: var(--space-2) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--text-primary);
}
.context-menu-rating-row .context-menu-rating-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
color: var(--text-muted);
opacity: 0.95;
}
.context-menu-rating-row .context-menu-rating-icon svg {
display: block;
}
.context-menu-rating-row .star-rating {
flex: 1;
min-width: 0;
width: auto;
justify-content: flex-start;
align-items: center;
line-height: 1;
}
.context-menu-rating-row .star-rating .star {
padding: 0;
margin: 0;
line-height: 1;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1em;
min-height: 1em;
}
/* ─ CSS Tooltips ─ */
@@ -7077,19 +7133,87 @@ html.no-compositing .fs-lyrics-rail {
/* height fallback for browsers that don't support flex: 1 correctly here */
height: calc(100vh - var(--player-height, 88px) - var(--titlebar-height, 0px) - 70px);
border-top: 1px solid var(--border-subtle);
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--accent) 35%, var(--text-muted)) transparent;
}
.folder-browser-columns:focus,
.folder-browser-columns:focus-visible {
outline: none;
}
.folder-browser-columns::-webkit-scrollbar {
height: 6px;
height: 8px;
}
.folder-browser-columns::-webkit-scrollbar-track {
background: transparent;
}
.folder-browser-columns::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--accent) 35%, var(--text-muted));
border-radius: 999px;
border: 2px solid transparent;
background-clip: content-box;
}
.folder-col {
flex: 1;
flex: 1 1 220px;
min-width: 200px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
border-right: 1px solid var(--border-subtle);
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--accent) 35%, var(--text-muted)) transparent;
transition: min-width 0.18s ease, max-width 0.18s ease, flex-basis 0.18s ease, flex-grow 0.18s ease;
}
.folder-browser-columns--compact .folder-col {
flex: 0 0 var(--folder-col-width, 220px);
min-width: var(--folder-col-width, 220px);
max-width: var(--folder-col-width, 220px);
}
.folder-col.folder-col--compact {
flex-basis: 56px;
min-width: 56px;
max-width: 56px;
}
.folder-col.folder-col--compact .folder-col-row {
justify-content: center;
gap: 0;
padding-left: 0.2rem;
padding-right: 0.2rem;
}
.folder-col.folder-col--compact .folder-col-name,
.folder-col.folder-col--compact .folder-col-chevron {
display: none;
}
.folder-col.folder-col--compact .folder-col-icon {
opacity: 0.95;
}
.folder-col::-webkit-scrollbar {
width: 8px;
}
.folder-col::-webkit-scrollbar-track {
background: transparent;
}
.folder-col::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--accent) 35%, var(--text-muted));
border-radius: 999px;
border: 2px solid transparent;
background-clip: content-box;
}
.folder-col::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--accent) 55%, var(--text-primary));
}
.folder-col-status {
@@ -7127,6 +7251,19 @@ html.no-compositing .fs-lyrics-rail {
background: var(--bg-hover, color-mix(in srgb, var(--accent) 8%, transparent));
}
.folder-browser-columns.keyboard-nav-active .folder-col-row:hover:not(.selected):not(.context-active):not(.keyboard-active) {
background: none;
}
/* Context-menu anchor only — does not replace Miller “open” selection (accent). */
.folder-col-row.context-active:not(.selected) {
background: var(--bg-hover, color-mix(in srgb, var(--accent) 8%, transparent));
}
.folder-col-row.keyboard-active:not(.selected) {
background: var(--bg-hover, color-mix(in srgb, var(--accent) 8%, transparent));
}
.folder-col-row.selected {
background: var(--accent);
color: #fff;
@@ -7147,6 +7284,31 @@ html.no-compositing .fs-lyrics-rail {
opacity: 1;
}
.folder-col-row.now-playing .folder-col-name {
font-weight: 600;
}
.folder-col-playing-icon {
animation: folderTrackPulse 1.2s ease-in-out infinite;
transform-origin: center;
}
.folder-col-path-playing-icon {
animation: folderTrackPulse 1.2s ease-in-out infinite;
transform-origin: center;
}
.folder-col-path-playing-icon svg {
stroke-width: 2.6;
filter: saturate(1.08) contrast(1.06);
}
@keyframes folderTrackPulse {
0% { transform: scale(1); opacity: 0.92; }
50% { transform: scale(1.16); opacity: 1; }
100% { transform: scale(1); opacity: 0.92; }
}
.folder-col-name {
flex: 1;
min-width: 0;