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
This commit is contained in:
vicrodh committed 2026-02-01 08:10:42 -06:00
1 parent 2004a59660
commit 1aa7e9eb3a
1 file changed
+28 -20
@@ -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;