fix(app): animate titlebar controls on sidebar open

packages/app/src/components/titlebar.tsx

@@ -217,6 +217,16 @@ export function Titlebar() {
           </TooltipKeybind>
           <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(),
+                }}
+                aria-hidden={layout.sidebar.opened() ? "true" : undefined}
+              >
                 <TooltipKeybind
                   placement="bottom"
                   title={language.t("command.session.new")}
@@ -227,6 +237,8 @@ export function Titlebar() {
                     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`)
@@ -235,8 +247,12 @@ export function Titlebar() {
                     aria-current={creating() ? "page" : undefined}
                   />
                 </TooltipKeybind>
+              </div>
             </Show>
-            <div class="flex items-center gap-0" classList={{ "ml-1": !!params.dir }}>
+            <div
+              class="flex items-center gap-0 transition-[margin] duration-180 ease-out"
+              classList={{ "ml-1": !!params.dir && !layout.sidebar.opened() }}
+            >
               <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
                 <Button
                   variant="ghost"