feat(settings): adds navigation TOC and section grouping#106
Merged
Conversation
- Add optional id prop to Section component for scroll-spy targeting
- Assign stable IDs to all 12 Section usages in SettingsPage
- Reorder sections into 4 logical groups: Data Sources, Display,
Integrations, Account
- Add group heading dividers between groups
- Export SETTINGS_PAGE_SECTION_IDS constant for test sync
- Fix existing tests to use getByRole('heading') for disambiguation
- Replaces Map.groupBy (ES2024) with manual reduce for browser compat - Promotes displayedActiveId to createMemo - Adds scrollend listener cleanup on unmount - Adds aria-current='location' to active TOC items - Adds aria-label to mobile toggle button - Increases mobile touch target (btn-sm → btn, full width) - Bumps mobile dropdown z-index from z-30 to z-40 - Removes redundant 'relative' class on mobile container - Scopes mobile toggle test query with within()
When prefers-reduced-motion is active, scrollIntoView uses behavior 'instant' which completes synchronously. The scrollend event may not fire in all browsers for instant scrolls, leaving scrollingTo stuck. Uses requestAnimationFrame to clear in the next frame instead.
- Fixes closing tag indentation in two-column layout wrapper - Adds animate-pulse to prefers-reduced-motion override - Adds test verifying requestAnimationFrame is used for instant scroll
Object.defineProperty on window.innerHeight, scrollY, and scrollHeight leaked between tests. Captures original values and restores in afterEach to prevent cross-test contamination.
Native scrollIntoView({behavior: 'smooth'}) can be overridden by
browser settings (Vivaldi, some Chromium forks disable smooth scroll
at the engine level). Replaces with requestAnimationFrame-driven
eased scroll that works regardless of browser scroll settings.
Still uses scrollIntoView for instant scroll (reduced-motion).
The scroll listener that shrinks/expands the header was firing during programmatic TOC scrolling, causing a feedback loop: scroll crosses 50px threshold → header resizes → content shifts → scroll position changes → header resizes again. Uses a data-scrollLock attribute to suppress header state updates during TOC-driven scroll animations. Dispatches a synthetic scroll event on completion to sync final state.
Shrink at scrollY > 50, expand only at scrollY < 10. The 40px dead zone absorbs the ~32px content shift from header padding change, preventing the layout feedback loop where header resize triggers scroll position change which re-triggers header resize.
Adds 'dependencies' to SETTINGS_SECTIONS (13 entries) to match upstream's new Dependencies section in SettingsPage.
wgordon17
force-pushed
the
feat/settings-nav-toc
branch
from
b48e641 to
96a6c93
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #105