monadical/opencode
14
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> </div>
</Show> </Show>
<div class="flex items-center gap-1"> <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 <TooltipKeybind
title={language.t("command.terminal.toggle")} title={language.t("command.terminal.toggle")}
keybind={command.keybind("terminal.toggle")} keybind={command.keybind("terminal.toggle")}
@@ -585,8 +585,7 @@ export function SessionHeader() {
</div> </div>
</Button> </Button>
</TooltipKeybind> </TooltipKeybind>
</div>
<div class="hidden md:block shrink-0">
<TooltipKeybind <TooltipKeybind
title={language.t("command.review.toggle")} title={language.t("command.review.toggle")}
keybind={command.keybind("review.toggle")} keybind={command.keybind("review.toggle")}
@@ -618,51 +617,31 @@ export function SessionHeader() {
</div> </div>
</Button> </Button>
</TooltipKeybind> </TooltipKeybind>
</div>
<div class="hidden md:block shrink-0"> <TooltipKeybind
<div title={language.t("command.fileTree.toggle")}
aria-hidden={!view().reviewPanel.opened()} keybind={command.keybind("fileTree.toggle")}
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(),
}}
> >
<div <Button
class="transition-[opacity,transform] duration-200 ease-out origin-center motion-reduce:transition-none" variant="ghost"
classList={{ class="titlebar-icon w-8 h-6 p-0 box-border"
"opacity-100 scale-100": view().reviewPanel.opened(), onClick={() => layout.fileTree.toggle()}
"opacity-0 scale-90": !view().reviewPanel.opened(), aria-label={language.t("command.fileTree.toggle")}
}} aria-expanded={layout.fileTree.opened()}
aria-controls="file-tree-panel"
> >
<TooltipKeybind <div class="relative flex items-center justify-center size-4">
title={language.t("command.fileTree.toggle")} <Icon
keybind={command.keybind("fileTree.toggle")} size="small"
> name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
<Button classList={{
variant="ghost" "text-icon-strong": layout.fileTree.opened(),
class="titlebar-icon w-8 h-6 p-0 box-border" "text-icon-weak": !layout.fileTree.opened(),
onClick={() => layout.fileTree.toggle()} }}
disabled={!view().reviewPanel.opened()} />
aria-label={language.t("command.fileTree.toggle")} </div>
aria-expanded={layout.fileTree.opened()} </Button>
aria-controls="file-tree-panel" </TooltipKeybind>
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> </div>
</div> </div>
</div> </div>