From 730ce323c49e348ff1184120dd16c98235ecd303 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 1 Feb 2026 07:30:03 -0600
Subject: [PATCH] Exit fullscreen when leaving immersive mode, add maximize
 button

- Exit fullscreen automatically when closing immersive view
- Add maximize (window) button separate from fullscreen
- Button order: Fullscreen | Maximize | Exit Immersive | Close App
---
 .../immersive/ImmersiveHeader.svelte          | 15 +++++++++---
 .../immersive/ImmersivePlayer.svelte          | 24 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/immersive/ImmersiveHeader.svelte b/src/lib/components/immersive/ImmersiveHeader.svelte
index 5a094c904..e1f220adf 100644
--- a/src/lib/components/immersive/ImmersiveHeader.svelte
+++ b/src/lib/components/immersive/ImmersiveHeader.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Disc3, LayoutGrid, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X } from 'lucide-svelte';
+  import { Disc3, LayoutGrid, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square } from 'lucide-svelte';
   import { t } from '$lib/i18n';
   import { getCurrentWindow } from '@tauri-apps/api/window';
 
@@ -19,6 +19,7 @@
     hasSuggestions?: boolean;
     isFullscreen?: boolean;
     onToggleFullscreen?: () => void;
+    onToggleMaximize?: () => void;
   }
 
   let {
@@ -33,7 +34,8 @@
     hasTrackInfo = true,
     hasSuggestions = true,
     isFullscreen = false,
-    onToggleFullscreen
+    onToggleFullscreen,
+    onToggleMaximize
   }: Props = $props();
 
   // Expandable window controls state
@@ -139,6 +141,13 @@
             <Maximize size={16} />
           {/if}
         </button>
+        <button
+          class="window-btn"
+          onclick={onToggleMaximize}
+          title="Maximize Window"
+        >
+          <Square size={14} />
+        </button>
         <button
           class="window-btn"
           onclick={onClose}
@@ -325,7 +334,7 @@
   }
 
   .window-controls.expanded .expanded-buttons {
-    max-width: 120px;
+    max-width: 160px;
     opacity: 1;
     margin-right: 4px;
   }
diff --git a/src/lib/components/immersive/ImmersivePlayer.svelte b/src/lib/components/immersive/ImmersivePlayer.svelte
index 66a7fb4a7..4f8a2e0a6 100644
--- a/src/lib/components/immersive/ImmersivePlayer.svelte
+++ b/src/lib/components/immersive/ImmersivePlayer.svelte
@@ -137,6 +137,27 @@
     isFullscreen = await window.isFullscreen();
   }
 
+  // Exit immersive and fullscreen
+  async function handleExitImmersive() {
+    if (isFullscreen) {
+      const window = getCurrentWindow();
+      await window.setFullscreen(false);
+      isFullscreen = false;
+    }
+    onClose();
+  }
+
+  // Toggle maximize (not fullscreen)
+  async function toggleMaximize() {
+    const window = getCurrentWindow();
+    const maximized = await window.isMaximized();
+    if (maximized) {
+      await window.unmaximize();
+    } else {
+      await window.maximize();
+    }
+  }
+
   // Auto-hide UI after inactivity
   function resetHideTimer() {
     showUI = true;
@@ -253,13 +274,14 @@
       {displayMode}
       onTabChange={(tab) => activeTab = tab}
       onDisplayModeChange={(mode) => displayMode = mode}
-      {onClose}
+      onClose={handleExitImmersive}
       visible={showUI}
       hasLyrics={true}
       hasTrackInfo={enableCredits}
       hasSuggestions={enableSuggestions}
       {isFullscreen}
       onToggleFullscreen={toggleFullscreen}
+      onToggleMaximize={toggleMaximize}
     />
 
     <!-- Content based on display mode -->