Add mode toggle buttons to switch between branches and diff views

src/App.svelte

@@ -617,15 +617,20 @@
       konamiIndex++;
       if (konamiIndex === konamiSequence.length) {
         konamiIndex = 0;
-        viewMode = viewMode === 'branches' ? 'diff' : 'branches';
-        saveViewMode(viewMode);
-        if (viewMode === 'branches') cameFromBranches = false;
+        handleToggleMode();
       }
     } else {
       konamiIndex = e.key === konamiSequence[0] ? 1 : 0;
     }
   }
 
+  // Toggle between branches and diff view modes
+  function handleToggleMode() {
+    viewMode = viewMode === 'branches' ? 'diff' : 'branches';
+    saveViewMode(viewMode);
+    if (viewMode === 'branches') cameFromBranches = false;
+  }
+
   // Lifecycle
   let unregisterPreferenceShortcuts: (() => void) | null = null;
   let unregisterFileSearchShortcut: (() => void) | null = null;
@@ -797,7 +802,7 @@
     </div>
   {:else if viewMode === 'branches'}
     <!-- Branch-based workflow view -->
-    <BranchTopBar onAddProject={triggerAddProject} />
+    <BranchTopBar onAddProject={triggerAddProject} onToggleMode={handleToggleMode} />
     <BranchHome
       onViewDiff={handleViewDiffFromBranches}
       onAddProjectRequest={(fn) => (triggerAddProject = fn)}
@@ -808,6 +813,7 @@
       <TabBar
         onNewTab={handleNewTab}
         onSwitchTab={handleTabSwitch}
+        onToggleMode={handleToggleMode}
         onBack={cameFromBranches
           ? () => {
               viewMode = 'branches';

src/lib/BranchTopBar.svelte

@@ -5,7 +5,7 @@
 -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Settings2, Keyboard, Palette, FolderPlus } from 'lucide-svelte';
+  import { Settings2, Keyboard, Palette, FolderPlus, FileDiff } from 'lucide-svelte';
   import { getCurrentWindow } from '@tauri-apps/api/window';
   import ThemeSelectorModal from './ThemeSelectorModal.svelte';
   import KeyboardShortcutsModal from './KeyboardShortcutsModal.svelte';
@@ -14,9 +14,10 @@
 
   interface Props {
     onAddProject?: () => void;
+    onToggleMode?: () => void;
   }
 
-  let { onAddProject }: Props = $props();
+  let { onAddProject, onToggleMode }: Props = $props();
 
   function startDrag(e: PointerEvent) {
     if (e.button !== 0) return;
@@ -82,6 +83,12 @@
       </button>
     {/if}
 
+    {#if onToggleMode}
+      <button class="icon-btn" onclick={onToggleMode} title="Switch to Diff view">
+        <FileDiff size={14} />
+      </button>
+    {/if}
+
     <button class="icon-btn" onclick={() => (showSettingsModal = true)} title="Settings (⌘,)">
       <Settings2 size={14} />
     </button>

src/lib/TabBar.svelte

@@ -9,6 +9,7 @@
     Keyboard,
     Palette,
     ChevronLeft,
+    GitBranch,
   } from 'lucide-svelte';
   import { windowState, closeTab } from './stores/tabState.svelte';
   import { getCurrentWindow } from '@tauri-apps/api/window';
@@ -36,9 +37,10 @@
     onNewTab: () => void;
     onSwitchTab: (index: number) => void;
     onBack?: () => void;
+    onToggleMode?: () => void;
   }
 
-  let { onNewTab, onSwitchTab, onBack }: Props = $props();
+  let { onNewTab, onSwitchTab, onBack, onToggleMode }: Props = $props();
 
   // Modal state
   let showThemeModal = $state(false);
@@ -170,6 +172,12 @@
 
   <!-- Action buttons (right side) -->
   <div class="tab-bar-actions">
+    {#if onToggleMode}
+      <button class="icon-btn" onclick={onToggleMode} title="Switch to Branches view">
+        <GitBranch size={14} />
+      </button>
+    {/if}
+
     <button class="icon-btn" onclick={() => (showSettingsModal = true)} title="Settings (⌘,)">
       <Settings2 size={14} />
     </button>