fix(app): remove sidebar slide animation

packages/app/src/shell/shell.tsx

@@ -1,4 +1,4 @@
-import { createEffect, on, Show, Suspense, type ParentProps } from "solid-js"
+import { Show, Suspense, type ParentProps } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createMediaQuery } from "@solid-primitives/media"
 import { ResizeHandle } from "@opencode/ui/resize-handle"
@@ -26,26 +26,13 @@ export default function Layout(props: ParentProps) {
   const [state, setState] = createStore<{
     tabsWidth: number
     tabsMount: HTMLElement | undefined
-    tabsAnimating: boolean
   }>({
     tabsWidth: 260,
     tabsMount: undefined,
-    tabsAnimating: false,
   })
 
   const verticalTabs = () => preferences.appearance.tabLayout() === "vertical" && !mobile()
 
-  // Animate only open/close; resize drags must track the pointer.
-  createEffect(
-    on(
-      preferences.appearance.sidebarOpen,
-      () => {
-        if (verticalTabs()) setState("tabsAnimating", true)
-      },
-      { defer: true },
-    ),
-  )
-
   command.register("sidebar", () =>
     verticalTabs()
       ? [
@@ -87,19 +74,9 @@ export default function Layout(props: ParentProps) {
               id="vertical-tabs-sidebar"
               data-slot="vertical-tabs-sidebar"
               data-state={preferences.appearance.sidebarOpen() ? "open" : "closed"}
-              classList={{
-                "relative h-full min-h-0 shrink-0": true,
-                "transition-[width] duration-[240ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none":
-                  state.tabsAnimating,
-              }}
+              class="relative h-full min-h-0 shrink-0"
               style={{ width: preferences.appearance.sidebarOpen() ? `${state.tabsWidth}px` : "0px" }}
               inert={!preferences.appearance.sidebarOpen()}
-              onTransitionEnd={(event) => {
-                if (event.target === event.currentTarget) setState("tabsAnimating", false)
-              }}
-              onTransitionCancel={(event) => {
-                if (event.target === event.currentTarget) setState("tabsAnimating", false)
-              }}
             >
               <div class="absolute inset-0 overflow-hidden">
                 <div

packages/app/src/shell/sidebar-toggle.tsx

@@ -71,11 +71,10 @@ function useCollapsedSlot() {
   }
 }
 
-const slotClass =
-  "flex shrink-0 justify-end overflow-hidden transition-[width] duration-[240ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none"
+const slotClass = "flex shrink-0 justify-end overflow-hidden"
 
-// Floats over the top of every screen, centered on the session header's 48px row. Slides in from the content's start
-// edge as the sidebar closes.
+// Floats over the top of every screen, centered on the session header's 48px row. Appears at the content's start edge
+// when the sidebar closes.
 export function CollapsedSidebarToggle() {
   const slot = useCollapsedSlot()
 
@@ -94,7 +93,7 @@ export function CollapsedSidebarToggle() {
   )
 }
 
-// Reserves the floating toggle's room in a header, pushing its contents along as the toggle slides in. `start` is where
+// Reserves the floating toggle's room in a header, pushing its contents along while the toggle is shown. `start` is where
 // the space begins, in pixels from the content area's start edge, so every header's contents line up after the toggle.
 export function CollapsedSidebarToggleSpace(props: { start?: number; class?: string }) {
   const slot = useCollapsedSlot()