feat(web): highlight visible settings sections#9812

merged1
t3code/settings-sidebar-motion
t3code/settings-sidebar-visible-sections
openedSep 4, 2026byJJulius Marminge
View on GitHubTwo-way sync enabledPR last imported 4d ago

Problem

The nested section links did not indicate which settings sections were currently visible in the viewport.

Fix

Track every section intersecting the settings viewport and give only those labels a subtle medium-weight, foreground-color treatment. Row backgrounds remain transparent. The observer follows the resolved route, handles asynchronously mounted sections and replaced scroll roots, and scopes results to a single resolved page visit so stale visibility cannot return during navigation. Appearance also gains its missing Motion link.

This is the second layer of the stack and depends on #9811.

UI evidence

After scrolling: visible lower-section labels receive the same subtle treatment, with transparent row backgrounds

Scroll and route demonstration:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/fd680341d0a94ff4/final2-visible-sections.webm

Verification

  • vp test run apps/web/src/components/settings/settingsSectionVisibility.test.ts — 7 tests
  • vp run --filter @t3tools/web typecheck
  • Focused formatting and lint for the changed settings files; lint exits successfully with the existing search-index effect warning
  • Integrated Chromium pass for entry from chat, General ↔ Appearance navigation, multi-section scrolling, async Source Control sections, Connections, and sectioned → unsectioned → sectioned navigation
  • Computed styles confirm visible labels use weight 500 with transparent backgrounds; non-visible labels use weight 400
  • Sidebar axe scan: zero violations

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

Synced from GitHub

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

ProviderMetricMain baselineThis PRImpactPR ceiling
CodexTotal thread wire—13.8 KiB—15.1 KiB✅
CodexThread snapshot wire—7.0 KiB—7.3 KiB✅
CodexLive turn WebSocket wire—6.7 KiB—7.8 KiB✅
CodexLive turn WebSocket decoded—58.5 KiB—66.4 KiB✅
CodexLive turn messages—10—21✅
ClaudeTotal thread wire—13.6 KiB—15.1 KiB✅
ClaudeThread snapshot wire—7.0 KiB—7.3 KiB✅
ClaudeLive turn WebSocket wire—6.5 KiB—7.8 KiB✅
ClaudeLive turn WebSocket decoded—57.8 KiB—66.4 KiB✅
ClaudeLive turn messages—9—21✅

Baseline: unavailable · PR result: 0ee9038 · 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.

Synced from GitHub

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR adds runtime IntersectionObserver/MutationObserver coordination to highlight settings sections as users scroll and navigate, changing the existing settings-sidebar experience. The behavior is localized and tested, but the new lifecycle and navigation state management are substantial enough to warrant human review.

You can add or adjust custom eligibility rules. Learn more.

Added 1 commit

  • feat(web): highlight visible settings sections0ee9038