diff options
| author | David Hill <[email protected]> | 2026-03-12 23:40:09 +0000 |
|---|---|---|
| committer | Adam <[email protected]> | 2026-03-13 10:18:03 -0500 |
| commit | 050d71bcf9726cedefad090ba989549fd6e70ef0 (patch) | |
| tree | 115d7f180a7a6f3950f33e4206cbc80087f82798 | |
| parent | ffde837e8318900e92761ca8a7d9a0621143e04b (diff) | |
| download | opencode-050d71bcf9726cedefad090ba989549fd6e70ef0.tar.gz opencode-050d71bcf9726cedefad090ba989549fd6e70ef0.zip | |
fix(app): avoid clipping new session during sidebar anim
| -rw-r--r-- | packages/app/src/components/titlebar.tsx | 63 |
1 files changed, 35 insertions, 28 deletions
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx index 227670e42..345903420 100644 --- a/packages/app/src/components/titlebar.tsx +++ b/packages/app/src/components/titlebar.tsx @@ -218,40 +218,47 @@ export function Titlebar() { <div class="hidden xl:flex items-center shrink-0"> <Show when={params.dir}> <div - class="overflow-hidden flex items-center shrink-0 transition-[width,opacity,transform]" - classList={{ - "w-8 opacity-100 translate-x-0": !layout.sidebar.opened(), - "w-0 opacity-0 -translate-x-1 pointer-events-none": layout.sidebar.opened(), - "duration-180 ease-out": !layout.sidebar.opened(), - "duration-120 ease-in": layout.sidebar.opened(), - }} + class="flex items-center shrink-0 w-8 mr-1" aria-hidden={layout.sidebar.opened() ? "true" : undefined} > - <TooltipKeybind - placement="bottom" - title={language.t("command.session.new")} - keybind={command.keybind("session.new")} - openDelay={2000} + <div + class="transition-opacity" + classList={{ + "opacity-100 duration-120 ease-out": !layout.sidebar.opened(), + "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(), + }} > - <Button - variant="ghost" - icon={creating() ? "new-session-active" : "new-session"} - class="titlebar-icon w-8 h-6 p-0 box-border" - disabled={layout.sidebar.opened()} - tabIndex={layout.sidebar.opened() ? -1 : undefined} - onClick={() => { - if (!params.dir) return - navigate(`/${params.dir}/session`) - }} - aria-label={language.t("command.session.new")} - aria-current={creating() ? "page" : undefined} - /> - </TooltipKeybind> + <TooltipKeybind + placement="bottom" + title={language.t("command.session.new")} + keybind={command.keybind("session.new")} + openDelay={2000} + > + <Button + variant="ghost" + icon={creating() ? "new-session-active" : "new-session"} + class="titlebar-icon w-8 h-6 p-0 box-border" + disabled={layout.sidebar.opened()} + tabIndex={layout.sidebar.opened() ? -1 : undefined} + onClick={() => { + if (!params.dir) return + navigate(`/${params.dir}/session`) + }} + aria-label={language.t("command.session.new")} + aria-current={creating() ? "page" : undefined} + /> + </TooltipKeybind> + </div> </div> </Show> <div - class="flex items-center gap-0 transition-[margin] duration-180 ease-out" - classList={{ "ml-1": !!params.dir && !layout.sidebar.opened() }} + class="flex items-center gap-0 transition-transform" + classList={{ + "translate-x-0": !layout.sidebar.opened(), + "-translate-x-[36px]": layout.sidebar.opened(), + "duration-180 ease-out": !layout.sidebar.opened(), + "duration-180 ease-in": layout.sidebar.opened(), + }} > <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}> <Button |