Sign up
View stargazers13Sign up

fix(web): smooth settings sidebar transitions#9811

merged1
main
t3code/settings-sidebar-motion
openedSep 4, 2026byJJulius Marminge
1 files changed
View on GitHubTwo-way sync enabledPR last imported 4d ago

Problem

The settings sidebar's existing nested section links appeared and disappeared instantly when changing pages. That made the otherwise stable sidebar jump during navigation.

Fix

Preserve the current sidebar hierarchy, ordering, spacing, and search UI exactly as they are. Each existing nested section list now uses the shared collapsible primitive to animate between zero and its natural height over 150 ms. The primitive removes closed content from interaction and the accessibility tree, and reduced-motion users get the state change without a transition.

This is the first layer of the stack; subtle visible-section emphasis follows in #9812.

UI evidence

The sidebar is intentionally unchanged at rest:

BeforeAfter
Before: existing nested settings sidebarAfter: the same nested settings sidebar

Before — nested sections snap between pages:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8d50afd2cddbb42d/before-motion-clean-trimmed.webm

After — the same nested sections collapse and expand smoothly:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/11656b1370f699a5/final-motion-after.webm

Verification

  • vp run --filter @t3tools/web typecheck
  • Focused formatting and lint for SettingsSidebarNav.tsx; lint exits successfully with the existing search-index effect warning
  • Integrated Chromium pass across General, Appearance, and Connections
  • Frame probe confirms both outgoing and incoming lists have intermediate heights during navigation, then settle to the existing dimensions
  • Reduced-motion probe confirms the same navigation settles immediately
  • Same-state screenshot comparison: SSIM 0.999232

Model and harness: GPT-5.6-Sol in T3 Code (Codex harness).

Ggithub-actionsBotSep 4, 2026
Synced from GitHub

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ProviderMetricMain baselineThis PRImpactPR ceiling
CodexTotal thread wire13.6 KiB13.6 KiB−11 B (−0.1%)15.1 KiB✅
CodexThread snapshot wire7.0 KiB7.0 KiB+7 B (+0.1%)7.3 KiB✅
CodexLive turn WebSocket wire6.6 KiB6.6 KiB−18 B (−0.3%)7.8 KiB✅
CodexLive turn WebSocket decoded57.1 KiB57.1 KiB0 B (0.0%)66.4 KiB✅
CodexLive turn messages10100 (0.0%)21✅
ClaudeTotal thread wire13.6 KiB13.6 KiB−17 B (−0.1%)15.1 KiB✅
ClaudeThread snapshot wire7.0 KiB7.0 KiB0 B (0.0%)7.3 KiB✅
ClaudeLive turn WebSocket wire6.6 KiB6.5 KiB−17 B (−0.3%)7.8 KiB✅
ClaudeLive turn WebSocket decoded57.9 KiB57.8 KiB−44 B (−0.1%)66.4 KiB✅
ClaudeLive turn messages109−1 (−10.0%)21✅

Baseline: b906ce2 · PR result: 5949f65 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

  • Codex decoded thread snapshot: 113.8 KiB
  • Claude decoded thread snapshot: 114.5 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

MmacroscopeappBotSep 4, 2026
Synced from GitHub

Approvability

A prior Macroscope approval was dismissed. Re-evaluating be1d52b…

No code changes detected at 5949f65. Prior analysis still applies.

apps/web/src/components/settings/SettingsSidebarNav.tsxlines 119–137Outdated · ff22045Open thread
……@@ -114,6 +116,27 @@ function SettingsSectionIcon({ to }: { to: SettingsPath }) {
134+ >
135+ <div className="min-h-0 overflow-hidden">{children}</div>
136+ </div>
137+ );
MmacroscopeappBoton lines 119–137Sep 4, 2026

Shared primitives over custom controls: this hand-builds an open/close collapse (grid-rows transition, inert/aria-hidden, overflow wrapper) that Collapsible + CollapsiblePanel in apps/web/src/components/ui/collapsible.tsx already provide. Consider rendering <Collapsible open={isActive}><CollapsiblePanel>…</CollapsiblePanel></Collapsible> instead, and adding a variant/class there if the settings sidebar needs a different duration.

Posted via Macroscope — UI Consistency

JJulius MarmingeSep 4, 2026

Addressed in 5949f65: the sidebar wrapper now uses the shared Collapsible and CollapsiblePanel primitives, with only the settings-specific 150 ms, ease-out, and reduced-motion classes.

Added 1 commit

  • fix(web): smooth settings sidebar transitions5949f65