Skip to content

feat(station-chrome): animate header insets on sidebar and chat toggles - #1883

Merged
FresnelR27 merged 1 commit into
developfrom
feat/pane-toggle-header-inset
Sep 16, 2026
Merged

FresnelR27 merged 1 commit into
developfrom
feat/pane-toggle-header-inset

Conversation

@Harry19081

Copy link
Copy Markdown
Member

Problem

Station and chat header rows reserve an inset under the window's pinned chrome. #1838 made that inset animate only while a station opens or closes (useStationToggleInsetTransition), so tab changes stopped gliding the header controls. The sidebar collapse and the chat pane opening or closing also move a pane on PANE_WIDTH_TRANSITION_CLASSES and change the same reservation. For those toggles the inset still snapped: the header content jumped by the whole reservation on the first frame, then glided along with the pane, landing somewhere it never travelled to.

Solution

  • usePaneLayoutInsetTransition (in src/scaffold/AppLayout) replaces useStationToggleInsetTransition. It watches a layout signature made of three flags: station open (effectiveChatPanelMaximizedAtom), sidebar collapsed (sidebarCollapsedAtom), and chat pane open (chatWidthAtom > 0).
  • When the signature changes, the hook returns CHROME_INSET_TRANSITION_CLASSES for 320 ms. The class is added in the same render as the new inset, and each change ends only its own timer.
  • Anything that changes a reservation without moving a pane still snaps: tab, session, station or route switches, and dragging the chat divider (only crossing zero width flips the chat flag).
  • Callers are swapped one for one: ChatPanelHeader, the My Station TabBar, and AgentStationTopHeader. The CHROME_INSET_TRANSITION_CLASSES doc comment is updated to match.

Potential risks

  • This widens the rule settled in fix(station-chrome): animate header insets only on station toggle #1838 ("insets animate only on station open/close") to all three pane toggles. Reviewers should confirm that is still the intended design.
  • Closing the chat pane by dragging the divider to zero flips the chat flag, so that one moment gets a 320 ms inset transition.
  • Not checked in the running app: the Tauri app could not be captured from this environment, so there are no recordings of the motion.

Verification

  • pnpm exec vitest run --config config/vitest.config.ts src/scaffold/AppLayout src/engines/ChatPanel/__tests__ src/engines/ChatPanel/ChatPanelHeader src/modules/WorkStation/shared/TabBar src/scaffold/WorkbenchChrome src/components/layout: 168 passed.
    • The new usePaneLayoutInsetTransition.test.ts covers: at rest; sidebar, chat pane and station toggles; tab re-renders; overlapping changes; divider drags.
    • The old hook's test is removed with the hook.
  • npx tsgo --noEmit: exit 0. No remaining references to useStationToggleInsetTransition under src/ or tests/.
  • pnpm exec prettier --check and pnpm exec eslint --max-warnings 0 --report-unused-disable-directives on the changed files: clean.
  • The pre-commit hook ran on the commit (lint-staged with oxlint, eslint and prettier, plus tsgo gated to staged files). The commit has no Pre-commit hook ran. trailer because it was made in a linked worktree, where .git is a file and the stats step cannot write its output.
  • Not run: the full vitest suite and E2E.

Header rows animated their pinned-chrome inset only while a station
opened or closed, so collapsing the app sidebar or closing the chat pane
slid the panes while the header content jumped by the whole reservation
and then glided. usePaneLayoutInsetTransition replaces
useStationToggleInsetTransition and also triggers on the sidebar
collapse flag and on the chat pane opening or closing. Tab, session and
route changes still snap, and so does dragging the chat divider.
@FresnelR27
FresnelR27 merged commit 158fa26 into develop Sep 16, 2026
14 checks passed
@FresnelR27
FresnelR27 deleted the feat/pane-toggle-header-inset branch September 16, 2026 12:14
@Harry19081 Harry19081 added UX Improvements to user experience, workflow smoothness frontend-ui Frontend UI, design system, accessibility, layout, or theming labels Sep 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend-ui Frontend UI, design system, accessibility, layout, or theming UX Improvements to user experience, workflow smoothness

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants