# feat\(web\): highlight visible settings sections · PR \#9812 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/9812)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: merged

Source repository: pingdotgg/t3code

Source branch: t3code/settings-sidebar-visible-sections

Target branch: t3code/settings-sidebar-motion

Head commit: 0ee9038f68b3717cc2d8a30b3ee74d47deab9b0c

[Discussion and reviews](https://git.cafe/pingdotgg/t3code/pull/9812)

[Commits](https://git.cafe/pingdotgg/t3code/pull/9812/commits?format=markdown)

[Files changed](https://git.cafe/pingdotgg/t3code/pull/9812/diffs?format=markdown)

## Description

---

## 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](https://github.com/pingdotgg/t3code/pull/9811).

## UI evidence

| Before | After at page top |
| --- | --- |
| ![Before: all nested labels use the same muted treatment](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b4fa467a4b4861be/reworked-motion-general.png) | ![After: visible Organization and Behavior labels are slightly darker and bolder](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/53eb43b22d88cfce/final2-visible-general-subtle.png) |

![After scrolling: visible lower-section labels receive the same subtle treatment, with transparent row backgrounds](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d2c9e656dd897f21/final2-visible-general-scrolled-subtle.png)

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).