From 9b1d7047d4f17b37f6b3a3223a2669948424be08 Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Tue, 17 Feb 2026 13:49:39 +0000
Subject: [PATCH] tweak(app): keep file tree toggle visible

Always show the titlebar file tree button (and space the right-side icon buttons at 4px) so it stays accessible regardless of the review panel state.
---
 .../src/components/session/session-header.tsx | 71 +++++++------------
 1 file changed, 25 insertions(+), 46 deletions(-)

diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index c14b28a66..8d4acb45f 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -553,7 +553,7 @@ export function SessionHeader() {
                 </div>
               </Show>
               <div class="flex items-center gap-1">
-                <div class="hidden md:flex items-center gap-3 shrink-0">
+                <div class="hidden md:flex items-center gap-1 shrink-0">
                   <TooltipKeybind
                     title={language.t("command.terminal.toggle")}
                     keybind={command.keybind("terminal.toggle")}
@@ -585,8 +585,7 @@ export function SessionHeader() {
                       </div>
                     </Button>
                   </TooltipKeybind>
-                </div>
-                <div class="hidden md:block shrink-0">
+
                   <TooltipKeybind
                     title={language.t("command.review.toggle")}
                     keybind={command.keybind("review.toggle")}
@@ -618,51 +617,31 @@ export function SessionHeader() {
                       </div>
                     </Button>
                   </TooltipKeybind>
-                </div>
-                <div class="hidden md:block shrink-0">
-                  <div
-                    aria-hidden={!view().reviewPanel.opened()}
-                    class="overflow-hidden transition-[width,margin-left] duration-200 ease-out motion-reduce:transition-none"
-                    classList={{
-                      "w-8 ml-0": view().reviewPanel.opened(),
-                      "w-0 -ml-1": !view().reviewPanel.opened(),
-                    }}
+
+                  <TooltipKeybind
+                    title={language.t("command.fileTree.toggle")}
+                    keybind={command.keybind("fileTree.toggle")}
                   >
-                    <div
-                      class="transition-[opacity,transform] duration-200 ease-out origin-center motion-reduce:transition-none"
-                      classList={{
-                        "opacity-100 scale-100": view().reviewPanel.opened(),
-                        "opacity-0 scale-90": !view().reviewPanel.opened(),
-                      }}
+                    <Button
+                      variant="ghost"
+                      class="titlebar-icon w-8 h-6 p-0 box-border"
+                      onClick={() => layout.fileTree.toggle()}
+                      aria-label={language.t("command.fileTree.toggle")}
+                      aria-expanded={layout.fileTree.opened()}
+                      aria-controls="file-tree-panel"
                     >
-                      <TooltipKeybind
-                        title={language.t("command.fileTree.toggle")}
-                        keybind={command.keybind("fileTree.toggle")}
-                      >
-                        <Button
-                          variant="ghost"
-                          class="titlebar-icon w-8 h-6 p-0 box-border"
-                          onClick={() => layout.fileTree.toggle()}
-                          disabled={!view().reviewPanel.opened()}
-                          aria-label={language.t("command.fileTree.toggle")}
-                          aria-expanded={layout.fileTree.opened()}
-                          aria-controls="file-tree-panel"
-                          tabIndex={view().reviewPanel.opened() ? undefined : -1}
-                        >
-                          <div class="relative flex items-center justify-center size-4">
-                            <Icon
-                              size="small"
-                              name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
-                              classList={{
-                                "text-icon-strong": layout.fileTree.opened(),
-                                "text-icon-weak": !layout.fileTree.opened(),
-                              }}
-                            />
-                          </div>
-                        </Button>
-                      </TooltipKeybind>
-                    </div>
-                  </div>
+                      <div class="relative flex items-center justify-center size-4">
+                        <Icon
+                          size="small"
+                          name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
+                          classList={{
+                            "text-icon-strong": layout.fileTree.opened(),
+                            "text-icon-weak": !layout.fileTree.opened(),
+                          }}
+                        />
+                      </div>
+                    </Button>
+                  </TooltipKeybind>
                 </div>
               </div>
             </div>