feat(client): animated sidebar collapse/expand via Reanimated #221

New issue

Open

opened 2026-06-21 16:40:35 +00:00 by james · 0 comments

james commented

2026-06-21 16:40:35 +00:00

Owner

Context

PR #211 shipped the sidebar collapse/expand toggle with a static width swap between SIDEBAR_WIDTHS.collapsed (64px) and expanded (240px). A Reanimated transition would smooth the swap into an animated width change — polish, not parity, but explicitly called out in PR #211's "Follow-ups worth filing" list.

Source

PR #211 body:

Animation — shipped the static width swap for collapse/expand. The two halves of the width transition (SIDEBAR_WIDTHS.collapsed vs expanded) are the load-bearing change; a Reanimated transition would be polish, not parity. Filed as a follow-up.

Follow-ups worth filing

Animated collapse/expand transition via Reanimated.

Scope

Add react-native-reanimated to apps/client/ (or confirm it's already present via Expo SDK 56's preinstalled set; either way wire babel.config.js per Reanimated's setup).
Animate the sidebar width swap with a spring or timing curve matching the design package's motion guidance (../carol-design/design_system_readme.md — Motion).
Animate the contents-collapse (label hide/show) in tandem so the labels fade in/out rather than appearing on the snap.
Preserve the existing collapse-state persistence (lib/sidebarCollapsed.ts) — animation is orthogonal.
Keep web parity: on web the same animation runs through react-native-reanimated's web target.

Acceptance criteria

Toggling the collapse button animates the width over ~150-250ms (match the design's motion spec).
Labels fade in/out instead of snap-appearing.
No regression on the 720px breakpoint drawer-mode swap (the swap remains instant; only the in-mode collapse animates).
pnpm -F @carol/client test stays green; the unit tests don't depend on real timing.
No new lefthook / lint warnings.

Composes with

#210 (closed — nav shell).
PR #211 (the parent change).

## Context PR #211 shipped the sidebar collapse/expand toggle with a static width swap between `SIDEBAR_WIDTHS.collapsed` (64px) and `expanded` (240px). A Reanimated transition would smooth the swap into an animated width change — polish, not parity, but explicitly called out in PR #211's "Follow-ups worth filing" list. ## Source PR #211 body: > Animation — shipped the static width swap for collapse/expand. The two halves of the width transition (`SIDEBAR_WIDTHS.collapsed` vs `expanded`) are the load-bearing change; a Reanimated transition would be polish, not parity. Filed as a follow-up. > Follow-ups worth filing > - Animated collapse/expand transition via Reanimated. ## Scope - Add `react-native-reanimated` to `apps/client/` (or confirm it's already present via Expo SDK 56's preinstalled set; either way wire `babel.config.js` per Reanimated's setup). - Animate the sidebar width swap with a spring or timing curve matching the design package's motion guidance (`../carol-design/design_system_readme.md` — `Motion`). - Animate the contents-collapse (label hide/show) in tandem so the labels fade in/out rather than appearing on the snap. - Preserve the existing collapse-state persistence (`lib/sidebarCollapsed.ts`) — animation is orthogonal. - Keep web parity: on web the same animation runs through `react-native-reanimated`'s web target. ## Acceptance criteria - [ ] Toggling the collapse button animates the width over ~150-250ms (match the design's motion spec). - [ ] Labels fade in/out instead of snap-appearing. - [ ] No regression on the 720px breakpoint drawer-mode swap (the swap remains instant; only the in-mode collapse animates). - [ ] `pnpm -F @carol/client test` stays green; the unit tests don't depend on real timing. - [ ] No new lefthook / lint warnings. ## Composes with - #210 (closed — nav shell). - PR #211 (the parent change).