Animate the sidebar and thread when switching to and from Threads in Top Tabs

[matthewdias]

Going back to Threads was abrupt: the sidebar and a freshly rendered thread just appeared. The strip opens the sidebar instantly on a switch on purpose, so that a long thread lays out once at its final width. This keeps that and draws the motion on top.

What moves

• Sidebar slides in over the space it already has (200ms, ease-out), using translate only.
• Thread fades in (180ms), using opacity only.
• The Threads tab's title ("· thread name") opens as you leave Threads and shuts as you come back. It used to snap, and every tab after it jumped.
• Leaving Threads, the sidebar stays over the new page until bb has drawn it, then slides away (160ms, ease-in). Its space still collapses instantly, so the page lays out once.
• Opening Settings slides its sections in with the same entrance.
• The new page fades in on leaving Threads and going to or from Settings, starting with the sidebar's exit. Switching between other tabs keeps the layout and stays instant, like browser tabs. Leaving Threads for Plugins or Skills, bb swaps in that page's own sidebar partway through, so the old one disappears with it rather than sliding.
• With reduced motion on, nothing animates.

Getting it to play once, and play smoothly

• Played with the Web Animations API, not a class on <html>. bb swaps the sidebar and page elements during some navigations, and a class made every new element start the slide again.
• Coming back from Plugins, Skills or Settings, the first frames still show that page's own sidebar and content. Those are held out of sight until bb has the thread list ready, so the thread list is what slides in. bb marks each page's sidebar in its top row's test id (app-… vs skills-…). Only non-thread-list marks count, so a rename falls back to the plain behaviour.
• The entrance waits until bb has drawn the thread: two quick frames in a row, or 300ms at most. Started earlier, its clock ran through bb's long render frames, and the sidebar appeared half done or froze partway. The title's width animation runs on the main thread and would stall outright.
• Any element bb mounts mid-entrance takes the running animation's start time, so it carries on instead of restarting.

Testing

• npm run check passes: typecheck, tests (77 for Top Tabs) and builds.
• Checked in a headless bb with the plugin linked:
  • Chromium's trace shows the slide and fade running on the compositor.
  • Recorded frames show the sidebar slide starting near 0% and running smoothly to the end on returns from BB Live, Skills and Plugins, on leaving Threads for BB Live and Skills, and on opening Settings. The page fade starts on the same frame as the sidebar's exit, and BB Live → Skills stays instant.
  • Element tracing shows one entrance per return.
• Also tried in the desktop app during development: the double slide from Plugins/Skills and the mid-slide pause were both reported there and fixed.

🤖 Generated with Claude Code