From 2c389408d0896860e3ebff1fcd432eadb01ee7e6 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 1 Feb 2026 07:44:18 -0600
Subject: [PATCH] Add maximize/restore/minimize buttons and QualityBadge
placement
Window controls:
- Maximize button shows restore icon when maximized
- Add minimize button
- Button order: Fullscreen | Maximize/Restore | Minimize | Exit | Close
QualityBadge placement:
- Coverflow: below album name
- Split views (Lyrics/TrackInfo/Suggestions/Queue): below album name
- Added album name display in split view
Layout improvements:
- Panel section max-height 80vh
- Lyrics scrollbar only visible on hover
- Content vertically centered with artwork
---
.../immersive/ImmersiveHeader.svelte | 25 ++-
.../immersive/ImmersivePlayer.svelte | 51 ++++-
.../immersive/panels/CoverflowPanel.svelte | 17 +-
.../immersive/panels/LyricsPanel.svelte | 37 +++-
static/lotus.svg | 207 ++++++++++++++++++
5 files changed, 323 insertions(+), 14 deletions(-)
create mode 100644 static/lotus.svg
diff --git a/src/lib/components/immersive/ImmersiveHeader.svelte b/src/lib/components/immersive/ImmersiveHeader.svelte
index e1f220adf..a8224b685 100644
--- a/src/lib/components/immersive/ImmersiveHeader.svelte
+++ b/src/lib/components/immersive/ImmersiveHeader.svelte
@@ -1,5 +1,5 @@
@@ -40,6 +48,9 @@
{#if album}
{album}
{/if}
+
+
+
@@ -158,6 +169,10 @@
font-style: italic;
}
+ .quality-badge-wrapper {
+ margin-top: 12px;
+ }
+
/* Responsive */
@media (max-width: 768px) {
.coverflow-panel {
diff --git a/src/lib/components/immersive/panels/LyricsPanel.svelte b/src/lib/components/immersive/panels/LyricsPanel.svelte
index 9034c1a65..fca4927f9 100644
--- a/src/lib/components/immersive/panels/LyricsPanel.svelte
+++ b/src/lib/components/immersive/panels/LyricsPanel.svelte
@@ -68,7 +68,8 @@
.lyrics-container {
flex: 1;
min-height: 0;
- overflow: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
mask-image: linear-gradient(
to bottom,
transparent 0%,
@@ -85,6 +86,40 @@
);
}
+ /* Hide scrollbar by default, show on hover */
+ .lyrics-container::-webkit-scrollbar {
+ width: 6px;
+ opacity: 0;
+ }
+
+ .lyrics-container::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ .lyrics-container::-webkit-scrollbar-thumb {
+ background: transparent;
+ border-radius: 3px;
+ transition: background 200ms ease;
+ }
+
+ .lyrics-container:hover::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.3);
+ }
+
+ .lyrics-container:hover::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ /* Firefox */
+ .lyrics-container {
+ scrollbar-width: thin;
+ scrollbar-color: transparent transparent;
+ }
+
+ .lyrics-container:hover {
+ scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+ }
+
.lyrics-container :global(.lyrics-lines) {
--text-primary: var(--alpha-95, rgba(255, 255, 255, 0.95));
--text-secondary: var(--alpha-50, rgba(255, 255, 255, 0.5));
diff --git a/static/lotus.svg b/static/lotus.svg
new file mode 100644
index 000000000..1d8dac664
--- /dev/null
+++ b/static/lotus.svg
@@ -0,0 +1,207 @@
+
+
+
\ No newline at end of file