Build a sticky in-page TOC for ApiDetailPage sections (Overview, Endpoints, Pricing, Reviews)

[greatest0fallt1me]

Description

This is a UI/UX issue. ApiDetailPage.tsx is over 1,000 lines tall and users currently lose orientation when scrolling through Overview, Endpoints, Pricing, and Reviews. Add a sticky right-rail table of contents that highlights the active section via IntersectionObserver and supports keyboard jump-to.

Requirements and Context

• Reference: src/pages/ApiDetailPage.tsx
• The TOC must collapse into a <details> summary at <1024px so it does not steal width from content
• Active item must be styled via tokens and announced with aria-current="location"
• Smooth scroll must respect prefers-reduced-motion
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/api-detail-toc

2. Implement changes
   • src/components/InPageToc.tsx — new component, accepts sections: { id, label }[]
   • src/pages/ApiDetailPage.tsx — render <InPageToc /> and add id anchors to each section heading
   • src/index.css — .toc, .toc__item--active styles using --accent and --text-muted
3. Test and commit
   • Manually verify section highlights track scroll position
   • Tab through TOC and confirm focus styles + Enter activation
   • npm test to run existing tests

Example commit message

feat: add sticky in-page TOC to ApiDetailPage

Acceptance Criteria

• TOC items reflect active section as user scrolls
• Keyboard users can Tab to TOC and Enter to jump
• At <1024px the TOC collapses behind a disclosure
• Smooth-scroll falls back to instant under reduced-motion

Guidelines

• IntersectionObserver thresholds should not flicker between adjacent sections
• No layout shift on scroll — reserve space for the TOC rail
• Clear documentation and inline comments
• Timeframe: 96 hours

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.

[emynogithub]

@emynogithub has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I have the skill it takes to work on this issue , please give me the opportunity to show my competence in problems solving

ℹ️ Repo Maintainers: To accept this application, review their application or assign @emynogithub to this issue.

[uche102]

@uche102 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @uche102 to this issue.

[FELIX1090]

@FELIX1090 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi Maintainer i want to work on issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @FELIX1090 to this issue.

[Glam26]

@Glam26 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I'd like to work on this issue.

I've contributed to similar frontend reliability improvements involving React components, error recovery flows, and user experience polish. This aligns well with work I've done improving failure handling while keeping components lightweight and maintainable.

I'll implement the fallback UI, ensure retry behavior is reliable, add the necessary test coverage, and keep the solution consistent with the existing design system and project patterns.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Glam26 to this issue.