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

feat(sidebar): long-press drag to reorder and hide nav items (#269)

Browse Source 
Hold for 1s then drag to reorder configurable library and system links;
drop outside the sidebar to hide items (same visibility as Settings).
Show a trash hint near the cursor when outside removal applies.
Extract shared reorder helpers into src/utils/sidebarNavReorder.ts and
reuse them from the Settings sidebar customizer.
This commit is contained in:
cucadmuh
2026-04-23 00:31:30 +03:00
committed by GitHub
parent 2d320d8681
commit c5dfabf739
4 changed files with 494 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/layout.css
+47
View File
@@ -435,6 +435,53 @@ body.is-overlay-scrollbar-thumb-drag .resizer {
padding: var(--space-4) var(--space-3) var(--space-2);
}
/* Long-press reorder targets (library / system blocks in Sidebar) */
.sidebar-nav-dnd-row {
position: relative;
border-radius: var(--radius-md);
}
.sidebar-nav-dnd-row--dragging {
opacity: 0.45;
}
.sidebar-nav-dnd-row--drop-before::before,
.sidebar-nav-dnd-row--drop-after::after {
content: '';
position: absolute;
left: 6px;
right: 6px;
height: 2px;
background: var(--accent);
border-radius: 1px;
pointer-events: none;
z-index: 3;
}
.sidebar-nav-dnd-row--drop-before::before {
top: 0;
}
.sidebar-nav-dnd-row--drop-after::after {
bottom: 0;
}
/* Drag-out-of-sidebar: hide item — trash follows pointer */
.sidebar-nav-dnd-trash-hint {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
pointer-events: none;
z-index: 100002;
color: var(--danger, #e05555);
background: color-mix(in srgb, var(--danger, #e05555) 18%, var(--bg-card, #1e1e2e));
border: 1px solid color-mix(in srgb, var(--danger, #e05555) 45%, transparent);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.nav-link {
display: flex;
align-items: center;