fix(app): animate titlebar controls on sidebar open

Author: iamdavidhill

packages/app/src/components/titlebar.tsx

@@ -217,26 +217,42 @@ export function Titlebar() {
           </TooltipKeybind>
           <div class="hidden xl:flex items-center shrink-0">
             <Show when={params.dir}>
-              <TooltipKeybind
-                placement="bottom"
-                title={language.t("command.session.new")}
-                keybind={command.keybind("session.new")}
-                openDelay={2000}
+              <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}
               >
-                <Button
-                  variant="ghost"
-                  icon={creating() ? "new-session-active" : "new-session"}
-                  class="titlebar-icon w-8 h-6 p-0 box-border"
-                  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>
             </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"