feat(pages): add a table of contents to the page side panel

[martian56]

What

Closes #189. Pages had no outline, so there was no quick way to jump between sections on a long page. This adds an Outline tab to the page's right-hand side panel.

How

• New PageOutline component lists the page's headings, indented by their level. Clicking an entry moves the caret to that heading and scrolls it into view.
• The outline is derived straight from the editor with TipTap's useEditorState, so it stays in sync as you type without any extra state plumbing. An equality check keeps it from re-rendering on selection-only changes.
• Wired into the existing side panel as a third tab (Outline / Sub-pages / History). The panel toggle now opens the Outline by default.

Frontend-only, no API changes.

Testing

Created a page with an H1 and two H2 headings. The Outline tab listed all three with the H2s indented under the H1. Clicking "Configuration" moved the caret into that heading (confirmed the focused node was the H2) and scrolled to it. Verified in the browser with Playwright, no console errors.

AI assistance

Produced with the help of Claude Code (Claude Opus 4.8). AI-assisted commits carry a Co-Authored-By trailer.

Summary by CodeRabbit

• New Features

  • Added an editor outline panel that shows a clickable table of contents based on page headings.
  • Introduced a new “Outline” tab in the right-side panel for quicker navigation within long pages.

• Bug Fixes

  • Heading navigation now focuses the editor and scrolls directly to the selected section.
  • The outline updates automatically as content changes and shows a placeholder when no headings exist.

[strix-security]

Strix Security Review

No security issues found.

_{Updated for 2587029.}

---

Reviewed by Strix
_{Re-run review · Configure security review settings}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e1250438-55d9-4704-bd5d-a17cb60d5b12

📥 Commits

Reviewing files that changed from the base of the PR and between 841eb34 and 2587029.

📒 Files selected for processing (3)

• apps/web/src/components/page-editor/PageOutline.tsx
• apps/web/src/components/page-editor/index.ts
• apps/web/src/pages/PageDetailPage.tsx

---

📝 Walkthrough

Walkthrough

Adds a new PageOutline React component that derives a table-of-contents from TipTap editor heading nodes, exports it from the page-editor barrel, and integrates it into PageDetailPage as a new "Outline" right-rail tab with click-to-navigate scrolling.

Changes

Page Outline Feature

Layer / File(s)	Summary
PageOutline component and export apps/web/src/components/page-editor/PageOutline.tsx, apps/web/src/components/page-editor/index.ts	Adds Props/Heading types, readHeadings to extract heading nodes, sameHeadings for memoization equality, and the exported PageOutline component that renders a navigable, indented heading list with click-to-scroll behavior; re-exports it from the barrel file.
PageDetailPage side-panel integration apps/web/src/pages/PageDetailPage.tsx	Extends the SidePanel type with 'outline', adds ListTree icon and PageOutline imports, adds an Outline tab button, adjusts tab button styling/alignment, changes the toggle default to 'outline', and renders PageOutline in a scrollable container when selected.

Estimated code review effort: 2 (Simple) | ~15 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant PageDetailPage
  participant PageOutline
  participant Editor

  User->>PageDetailPage: open side panel toggle
  PageDetailPage->>PageDetailPage: set sidePanel to 'outline'
  PageDetailPage->>PageOutline: render with editor prop
  PageOutline->>Editor: useEditorState reads headings
  Editor-->>PageOutline: heading list (level, text, pos)
  User->>PageOutline: click heading entry
  PageOutline->>Editor: focus and set selection at pos+1
  PageOutline->>Editor: scroll heading into view

Loading

Estimated code review effort: 2 (Simple) | ~15 minutes

Poem

A heading here, a heading there,
Now gathered in a list so fair,
Click a line, and off we hop,
Scrolling straight to the very top!
🐇📜 Hooray, no more scroll despair!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a table of contents to the page side panel.
Description check	✅ Passed	The description covers the change, approach, testing, and frontend-only scope, though several template sections are left unfilled.
Linked Issues check	✅ Passed	The PR implements the requested frontend-only page outline/TOC navigation for #189 and matches the linked issue scope.
Out of Scope Changes check	✅ Passed	The diff stays focused on the outline panel and related page-side-panel wiring, with no clear unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/page-outline

---

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

Adds an Outline (table of contents) tab to the Page Detail right-hand side panel, enabling quick navigation between headings in long TipTap-edited pages.

Changes:

• Added PageOutline component that derives headings from the TipTap editor state and navigates to a heading on click.
• Wired the Outline into PageDetailPage as a new side-panel tab and made the panel toggle open the Outline by default.
• Exported PageOutline from the page-editor barrel.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
apps/web/src/pages/PageDetailPage.tsx	Adds “Outline” as a third side-panel tab and updates the panel toggle default behavior.
apps/web/src/components/page-editor/PageOutline.tsx	New component that reads editor headings and renders a clickable outline list.
apps/web/src/components/page-editor/index.ts	Re-exports PageOutline for consumption by pages.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.