monadical/opencode
13
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

tweak(app): keep file tree toggle visible

Browse Source 
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.
This commit is contained in:
David Hill
2026-02-17 13:49:39 +00:00
parent 703d634744
commit 9b1d7047d4
1 changed files with 25 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
packages/app/src/components/session/session-header.tsx
View File

@@ -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>