From e82940810bf658a2dc74637811647570e684ac67 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Fri, 20 Feb 2026 18:03:41 -0600
Subject: [PATCH] feat(immersive): make window draggable and rename to
 Immersive Mode

- Add persistent drag region (32px strip) at top of immersive overlay
  that remains active even when the header auto-hides after 4 seconds
- Add app-region: drag CSS to ImmersiveHeader's left spacer for proper
  drag support when header is visible
- Add app-region: no-drag to tabs and window controls to keep them
  clickable
- Double-click on drag strip toggles maximize
- Rename "Full Screen" to "Immersive Mode" in all 4 locales (en/es/de/fr)
---
 .../immersive/ImmersiveHeader.svelte          |  6 ++++++
 .../immersive/ImmersivePlayer.svelte          | 19 +++++++++++++++++++
 src/lib/i18n/locales/de.json                  |  4 ++--
 src/lib/i18n/locales/en.json                  |  4 ++--
 src/lib/i18n/locales/es.json                  |  4 ++--
 src/lib/i18n/locales/fr.json                  |  4 ++--
 6 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/immersive/ImmersiveHeader.svelte b/src/lib/components/immersive/ImmersiveHeader.svelte
index 3046c7489..993ede9d2 100644
--- a/src/lib/components/immersive/ImmersiveHeader.svelte
+++ b/src/lib/components/immersive/ImmersiveHeader.svelte
@@ -330,6 +330,8 @@
     min-width: 100px;
     height: 100%;
     cursor: grab;
+    -webkit-app-region: drag;
+    app-region: drag;
   }
 
   .mode-toggle {
@@ -376,6 +378,8 @@
     background: rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 12px;
+    -webkit-app-region: no-drag;
+    app-region: no-drag;
   }
 
   .tab {
@@ -474,6 +478,8 @@
     display: flex;
     justify-content: flex-end;
     gap: 8px;
+    -webkit-app-region: no-drag;
+    app-region: no-drag;
   }
 
   /* Expandable Window Controls */
diff --git a/src/lib/components/immersive/ImmersivePlayer.svelte b/src/lib/components/immersive/ImmersivePlayer.svelte
index b21d757ad..ae9eed053 100644
--- a/src/lib/components/immersive/ImmersivePlayer.svelte
+++ b/src/lib/components/immersive/ImmersivePlayer.svelte
@@ -379,6 +379,7 @@
 </script>
 
 {#if isOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="immersive-player"
     onmousemove={handleMouseMove}
@@ -387,6 +388,13 @@
     aria-label="Now Playing"
     tabindex="-1"
   >
+    <!-- Persistent drag region for window movement (always active, unaffected by UI auto-hide) -->
+    <div
+      class="immersive-drag-region"
+      data-tauri-drag-region
+      ondblclick={toggleMaximize}
+    ></div>
+
     <!-- Background (skip for canvas-based visualizers that render their own black background) -->
     {#if activeFocusTab !== 'visualizer' && activeFocusTab !== 'oscilloscope' && activeFocusTab !== 'spectral-ribbon' && activeFocusTab !== 'energy-bands' && activeFocusTab !== 'lissajous' && activeFocusTab !== 'transient-pulse'}
       <ImmersiveBackground {artwork} />
@@ -674,6 +682,17 @@
     overflow: hidden;
   }
 
+  .immersive-drag-region {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 32px;
+    z-index: 15; /* Above content (1-5), below header controls (20) */
+    -webkit-app-region: drag;
+    app-region: drag;
+  }
+
   @keyframes fadeIn {
     from {
       opacity: 0;
diff --git a/src/lib/i18n/locales/de.json b/src/lib/i18n/locales/de.json
index c50d0152e..1b7fd34d2 100644
--- a/src/lib/i18n/locales/de.json
+++ b/src/lib/i18n/locales/de.json
@@ -442,8 +442,8 @@
     "castToDevice": "An Gerät übertragen",
     "castingManage": "Casting – klicken, um zu verwalten",
     "miniPlayer": "Mini-Player",
-    "fullScreen": "Vollbild",
-    "exitFullScreen": "Vollbild beenden",
+    "fullScreen": "Immersiv-Modus",
+    "exitFullScreen": "Immersiv-Modus beenden",
     "maximize": "Maximieren",
     "restore": "Wiederherstellen",
     "minimize": "Minimieren",
diff --git a/src/lib/i18n/locales/en.json b/src/lib/i18n/locales/en.json
index b9ca63912..bcf5bae4d 100644
--- a/src/lib/i18n/locales/en.json
+++ b/src/lib/i18n/locales/en.json
@@ -457,8 +457,8 @@
     "castToDevice": "Cast to device",
     "castingManage": "Casting - Click to manage",
     "miniPlayer": "Mini Player",
-    "fullScreen": "Full Screen",
-    "exitFullScreen": "Exit Full Screen",
+    "fullScreen": "Immersive Mode",
+    "exitFullScreen": "Exit Immersive Mode",
     "maximize": "Maximize",
     "restore": "Restore",
     "minimize": "Minimize",
diff --git a/src/lib/i18n/locales/es.json b/src/lib/i18n/locales/es.json
index 7db987a63..80fa2ce9d 100644
--- a/src/lib/i18n/locales/es.json
+++ b/src/lib/i18n/locales/es.json
@@ -457,8 +457,8 @@
     "castToDevice": "Transmitir a dispositivo",
     "castingManage": "Transmitiendo - Clic para administrar",
     "miniPlayer": "Mini Reproductor",
-    "fullScreen": "Pantalla Completa",
-    "exitFullScreen": "Salir de Pantalla Completa",
+    "fullScreen": "Modo Inmersivo",
+    "exitFullScreen": "Salir del Modo Inmersivo",
     "maximize": "Maximizar",
     "restore": "Restaurar",
     "minimize": "Minimizar",
diff --git a/src/lib/i18n/locales/fr.json b/src/lib/i18n/locales/fr.json
index 4e1b05148..abd5b530a 100644
--- a/src/lib/i18n/locales/fr.json
+++ b/src/lib/i18n/locales/fr.json
@@ -442,8 +442,8 @@
     "castToDevice": "Caster vers un appareil",
     "castingManage": "Casting - Cliquez pour gérer",
     "miniPlayer": "Mini lecteur",
-    "fullScreen": "Plein écran",
-    "exitFullScreen": "Quitter le plein écran",
+    "fullScreen": "Mode Immersif",
+    "exitFullScreen": "Quitter le Mode Immersif",
     "maximize": "Agrandir",
     "restore": "Restaurer",
     "minimize": "Réduire",