fix(app): toggle file tree and review panel better ux (#12481)

packages/app/src/components/session/session-header.tsx

@@ -544,11 +544,7 @@ export function SessionHeader() {
                   <Button
                     variant="ghost"
                     class="group/file-tree-toggle size-6 p-0"
-                    onClick={() => {
+                    onClick={() => layout.fileTree.toggle()}
-                      const opening = !layout.fileTree.opened()
-                      if (opening && !view().reviewPanel.opened()) view().reviewPanel.open()
-                      layout.fileTree.toggle()
-                    }}
                     aria-label={language.t("command.fileTree.toggle")}
                     aria-expanded={layout.fileTree.opened()}
                     aria-controls="file-tree-panel"

packages/app/src/components/settings-keybinds.tsx

@@ -44,7 +44,7 @@ function groupFor(id: string): KeybindGroup {
   if (id === PALETTE_ID) return "General"
   if (id.startsWith("terminal.")) return "Terminal"
   if (id.startsWith("model.") || id.startsWith("agent.") || id.startsWith("mcp.")) return "Model and agent"
-  if (id.startsWith("file.")) return "Navigation"
+  if (id.startsWith("file.") || id.startsWith("fileTree.")) return "Navigation"
   if (id.startsWith("prompt.")) return "Prompt"
   if (
     id.startsWith("session.") ||

packages/app/src/pages/session.tsx

@@ -233,7 +233,15 @@ export default function Page() {
   }
 
   const isDesktop = createMediaQuery("(min-width: 768px)")
-  const centered = createMemo(() => isDesktop() && !view().reviewPanel.opened())
+  const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
+  const desktopFileTreeOpen = createMemo(() => isDesktop() && layout.fileTree.opened())
+  const desktopSidePanelOpen = createMemo(() => desktopReviewOpen() || desktopFileTreeOpen())
+  const sessionPanelWidth = createMemo(() => {
+    if (!desktopSidePanelOpen()) return "100%"
+    if (desktopReviewOpen()) return `${layout.session.width()}px`
+    return `calc(100% - ${layout.fileTree.width()}px)`
+  })
+  const centered = createMemo(() => isDesktop() && !desktopSidePanelOpen())
 
   function normalizeTab(tab: string) {
     if (!tab.startsWith("file://")) return tab
@@ -252,12 +260,18 @@ export default function Page() {
     return next
   }
 
+  const openReviewPanel = () => {
+    if (!view().reviewPanel.opened()) view().reviewPanel.open()
+  }
+
   const openTab = (value: string) => {
     const next = normalizeTab(value)
     tabs().open(next)
 
     const path = file.pathFromTab(next)
-    if (path) file.load(path)
+    if (!path) return
+    file.load(path)
+    openReviewPanel()
   }
 
   createEffect(() => {
@@ -1085,6 +1099,7 @@ export default function Page() {
   }
 
   const focusReviewDiff = (path: string) => {
+    openReviewPanel()
     const current = view().review.open() ?? []
     if (!current.includes(path)) view().review.setOpen([...current, path])
     setTree({ activeDiff: path, pendingDiff: path })
@@ -1203,7 +1218,7 @@ export default function Page() {
     if (!id) return
 
     const wants = isDesktop()
-      ? view().reviewPanel.opened() && (layout.fileTree.opened() || activeTab() === "review")
+      ? desktopFileTreeOpen() || (desktopReviewOpen() && activeTab() === "review")
       : store.mobileTab === "changes"
     if (!wants) return
     if (sync.data.session_diff[id] !== undefined) return
@@ -1216,7 +1231,6 @@ export default function Page() {
   createEffect(() => {
     const dir = sdk.directory
     if (!isDesktop()) return
-    if (!view().reviewPanel.opened()) return
     if (!layout.fileTree.opened()) return
     if (sync.status === "loading") return
 
@@ -1533,10 +1547,10 @@ export default function Page() {
           classList={{
             "@container relative shrink-0 flex flex-col min-h-0 h-full bg-background-stronger": true,
             "flex-1 pt-2 md:pt-3": true,
-            "md:flex-none": view().reviewPanel.opened(),
+            "md:flex-none": desktopSidePanelOpen(),
           }}
           style={{
-            width: isDesktop() && view().reviewPanel.opened() ? `${layout.session.width()}px` : "100%",
+            width: sessionPanelWidth(),
             "--prompt-height": store.promptHeight ? `${store.promptHeight}px` : undefined,
           }}
         >
@@ -1663,7 +1677,7 @@ export default function Page() {
             setPromptDockRef={(el) => (promptDock = el)}
           />
 
-          <Show when={isDesktop() && view().reviewPanel.opened()}>
+          <Show when={desktopReviewOpen()}>
             <ResizeHandle
               direction="horizontal"
               size={layout.session.width()}
@@ -1675,7 +1689,8 @@ export default function Page() {
         </div>
 
         <SessionSidePanel
-          open={isDesktop() && view().reviewPanel.opened()}
+          open={desktopSidePanelOpen()}
+          reviewOpen={desktopReviewOpen()}
           language={language}
           layout={layout}
           command={command}

packages/app/src/pages/session/session-side-panel.tsx

@@ -24,6 +24,7 @@ import { useSync } from "@/context/sync"
 
 export function SessionSidePanel(props: {
   open: boolean
+  reviewOpen: boolean
   language: ReturnType<typeof useLanguage>
   layout: ReturnType<typeof useLayout>
   command: ReturnType<typeof useCommand>
@@ -72,8 +73,14 @@ export function SessionSidePanel(props: {
       <aside
         id="review-panel"
         aria-label={props.language.t("session.panel.reviewAndFiles")}
-        class="relative flex-1 min-w-0 h-full border-l border-border-weak-base flex"
+        class="relative min-w-0 h-full border-l border-border-weak-base flex"
+        classList={{
+          "flex-1": props.reviewOpen,
+          "shrink-0": !props.reviewOpen,
+        }}
+        style={{ width: props.reviewOpen ? undefined : `${props.layout.fileTree.width()}px` }}
       >
+        <Show when={props.reviewOpen}>
           <div class="flex-1 min-w-0 h-full">
             <Show
               when={props.layout.fileTree.opened() && props.fileTreeTab() === "changes"}
@@ -223,6 +230,7 @@ export function SessionSidePanel(props: {
               {props.reviewPanel()}
             </Show>
           </div>
+        </Show>
 
         <Show when={props.layout.fileTree.opened()}>
           <div
@@ -230,7 +238,10 @@ export function SessionSidePanel(props: {
             class="relative shrink-0 h-full"
             style={{ width: `${props.layout.fileTree.width()}px` }}
           >
-            <div class="h-full border-l border-border-weak-base flex flex-col overflow-hidden group/filetree">
+            <div
+              class="h-full flex flex-col overflow-hidden group/filetree"
+              classList={{ "border-l border-border-weak-base": props.reviewOpen }}
+            >
               <Tabs
                 variant="pill"
                 value={props.fileTreeTab()}

packages/app/src/pages/session/use-session-commands.tsx

@@ -139,11 +139,8 @@ export const useSessionCommands = (input: {
       title: input.language.t("command.fileTree.toggle"),
       description: "",
       category: input.language.t("command.category.view"),
-      onSelect: () => {
+      keybind: "mod+\\",
-        const opening = !input.layout.fileTree.opened()
+      onSelect: () => input.layout.fileTree.toggle(),
-        if (opening && !input.view().reviewPanel.opened()) input.view().reviewPanel.open()
-        input.layout.fileTree.toggle()
-      },
     },
     {
       id: "terminal.new",