From 1aa7e9eb3ad5660482a7c29a81cde0839538d7d7 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 1 Feb 2026 08:10:42 -0600
Subject: [PATCH] fix(immersive): center mode toggle and fix icon direction

- Move mode toggle inside tabs nav (centered)
- Icon now shows target mode, not current mode
- Add divider between toggle and tabs
---
 .../immersive/ImmersiveHeader.svelte          | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/immersive/ImmersiveHeader.svelte b/src/lib/components/immersive/ImmersiveHeader.svelte
index 8c50a8e13..4ff780a1c 100644
--- a/src/lib/components/immersive/ImmersiveHeader.svelte
+++ b/src/lib/components/immersive/ImmersiveHeader.svelte
@@ -93,23 +93,25 @@
 </script>
 
 <header class="immersive-header" class:visible>
-  <!-- Left: View mode toggle -->
-  <div class="header-left">
+  <!-- Left: Spacer for balance -->
+  <div class="header-left"></div>
+
+  <!-- Center: Mode toggle + Tabs -->
+  <nav class="tabs">
+    <!-- Mode toggle button (icon shows target mode) -->
     <button
       class="mode-toggle"
       onclick={() => onViewModeChange(isFocusMode ? 'split' : 'focus')}
-      title={isFocusMode ? 'Switch to Split View' : 'Switch to Focus View'}
+      title={isFocusMode ? 'Switch to Split View (V)' : 'Switch to Focus View (V)'}
     >
       <img
-        src={isFocusMode ? '/lotus.svg' : '/split-view.svg'}
-        alt={isFocusMode ? 'Focus Mode' : 'Split Mode'}
+        src={isFocusMode ? '/split-view.svg' : '/lotus.svg'}
+        alt={isFocusMode ? 'Split Mode' : 'Focus Mode'}
         class="mode-icon"
       />
     </button>
-  </div>
 
-  <!-- Center: Tabs (change based on view mode) -->
-  <nav class="tabs">
+    <div class="tab-divider"></div>
     {#if isFocusMode}
       {#each focusTabs as tab (tab.id)}
         <button
@@ -224,32 +226,31 @@
   }
 
   .header-left {
-    flex: 0 0 auto;
-    min-width: 50px;
+    flex: 1;
+    min-width: 100px;
   }
 
   .mode-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 42px;
-    height: 42px;
-    padding: 8px;
-    background: rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 12px;
+    width: 36px;
+    height: 36px;
+    padding: 6px;
+    background: none;
+    border: none;
+    border-radius: 8px;
     cursor: pointer;
     transition: all 150ms ease;
   }
 
   .mode-toggle:hover {
-    background: rgba(0, 0, 0, 0.6);
-    border-color: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.12);
   }
 
   .mode-icon {
-    width: 22px;
-    height: 22px;
+    width: 20px;
+    height: 20px;
     filter: invert(1) opacity(0.85);
     transition: filter 150ms ease;
   }
@@ -258,6 +259,13 @@
     filter: invert(1) opacity(1);
   }
 
+  .tab-divider {
+    width: 1px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    margin: 0 4px;
+  }
+
   .tabs {
     display: flex;
     align-items: center;