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
This commit is contained in:
vicrodh committed 2026-02-01 07:44:18 -06:00
1 parent 730ce323c4
commit 2c389408d0
5 files changed
+323 -14

No files matched your search

@@ -1,5 +1,5 @@
<script lang="ts">
import { Disc3, LayoutGrid, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square } from 'lucide-svelte';
import { Disc3, LayoutGrid, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square, Copy, Minus } from 'lucide-svelte';
import { t } from '$lib/i18n';
import { getCurrentWindow } from '@tauri-apps/api/window';
@@ -18,8 +18,10 @@
hasTrackInfo?: boolean;
hasSuggestions?: boolean;
isFullscreen?: boolean;
isMaximized?: boolean;
onToggleFullscreen?: () => void;
onToggleMaximize?: () => void;
onMinimize?: () => void;
}
let {
@@ -34,8 +36,10 @@
hasTrackInfo = true,
hasSuggestions = true,
isFullscreen = false,
isMaximized = false,
onToggleFullscreen,
onToggleMaximize
onToggleMaximize,
onMinimize
}: Props = $props();
// Expandable window controls state
@@ -144,9 +148,20 @@
<button
class="window-btn"
onclick={onToggleMaximize}
title="Maximize Window"
title={isMaximized ? 'Restore Window' : 'Maximize Window'}
>
<Square size={14} />
{#if isMaximized}
<Copy size={14} />
{:else}
<Square size={14} />
{/if}
</button>
<button
class="window-btn"
onclick={onMinimize}
title="Minimize"
>
<Minus size={16} />
</button>
<button
class="window-btn"
@@ -334,7 +349,7 @@
}
.window-controls.expanded .expanded-buttons {
max-width: 160px;
max-width: 200px;
opacity: 1;
margin-right: 4px;
}