feat: UI polish, DnD fix, navigation, and installer improvements (v1.0.10)

- Fix queue DnD on macOS/Windows: delay ref cleanup in onDragEnd so onDropQueue
  reads correct source/destination before dragend clears them
- Active track highlighting in album tracklist (pulsing accent bg + play icon)
- Marquee scrolling for long titles in Fullscreen Player
- Clickable artist/album in Player Bar and Queue now-playing strip
- Tracklist: format column moved after duration, auto width, kHz/filesize removed
- Settings dropdowns: visible border (base bg + overlay0 border)
- Sidebar: fixed responsive width via clamp(), removed drag-to-resize
- Favorites icon: HandMetal → Star in Random Mix page
- Linux app menu category set to Multimedia (AudioVideo)
- Windows MSI: stable upgradeCode for in-place upgrades
- Bundle: category/description fields at correct config level
- About: Claude Code credit, fixed German MIT licence wording

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-03-14 11:36:03 +01:00
parent 32571a2986
commit 623a6a4a54
16 changed files with 177 additions and 72 deletions
+27 -11
View File
@@ -567,7 +567,7 @@
.tracklist { padding: 0 var(--space-6) var(--space-6); }
.tracklist-header {
display: grid;
grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
font-size: 11px;
@@ -579,12 +579,12 @@
margin-bottom: var(--space-2);
}
.tracklist-header.tracklist-va {
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
}
.track-row {
display: grid;
grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
gap: var(--space-3);
align-items: start;
padding: var(--space-2) var(--space-3);
@@ -593,37 +593,46 @@
transition: background var(--transition-fast);
}
.track-row.track-row-va {
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
}
.tracklist-total {
display: grid;
grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
gap: var(--space-3);
border-top: 1px solid var(--border-subtle);
padding: var(--space-3) var(--space-4);
padding: var(--space-2) var(--space-3);
margin-top: var(--space-1);
}
.tracklist-total.tracklist-va {
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
}
.tracklist-total-label {
grid-column: 1 / -2;
grid-column: 1 / 5;
text-align: right;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
padding-right: var(--space-3);
}
.tracklist-total-value {
grid-column: 5 / 6;
text-align: right;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.tracklist-total.tracklist-va .tracklist-total-label { grid-column: 1 / 6; }
.tracklist-total.tracklist-va .tracklist-total-value { grid-column: 6 / 7; }
.track-row:hover { background: var(--bg-hover); }
.track-row.active { background: var(--accent-dim); animation: track-pulse 2.5s ease-in-out infinite; }
.track-row.active:hover { background: var(--accent-dim); animation: none; }
@keyframes track-pulse {
0%, 100% { background: var(--accent-dim); }
50% { background: transparent; }
}
.track-row > * { padding-top: 6px; padding-bottom: 6px; }
/* CD / Disc separator */
@@ -1070,7 +1079,7 @@
text-align: center;
width: 100%;
}
.fs-title {
.fs-title-wrap {
font-family: var(--font-display);
font-size: clamp(20px, 3vw, 32px);
font-weight: 800;
@@ -1079,7 +1088,14 @@
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fs-title-marquee {
display: inline-block;
animation: marquee-scroll 14s linear infinite alternate;
}
@keyframes marquee-scroll {
0%, 15% { transform: translateX(0); }
85%, 100% { transform: translateX(var(--scroll-amount, 0px)); }
}
.fs-album {
font-size: 14px;
-1
View File
@@ -29,7 +29,6 @@
background: var(--accent);
}
.resizer-sidebar { left: calc(var(--sidebar-width) - 3px); }
.resizer-queue { right: calc(var(--queue-width) - 3px); }
/* ─── Sidebar ─── */
+2 -2
View File
@@ -580,8 +580,8 @@ body.is-dragging * {
.input {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--ctp-surface0);
border: 1px solid var(--border);
background: var(--ctp-base);
border: 1px solid var(--ctp-overlay0);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-sans);