Replace the inset docs window with a full-viewport border layout

[radiumcoders]

Summary

• Drop the inset docs window (margins, rounded card, shadow) so the chrome fills the viewport and panes are split only by borders.
• Align search with the On this page column, keep the article at max-w-2xl and centered, and restore scroll-edge blur without washing over the TOC.
• Add a header theme toggle (to the right of the star count) and keep the D shortcut.

Test plan

• Open /docs and confirm sidebar, header, article, and TOC are edge-to-edge and separated by borders.
• Confirm search sits in the same column as On this page, and the article stays centered at the original content width.
• Toggle theme from the header control and with D; confirm no hydration mismatch on the search shortcut (Ctrl vs Cmd).
• Scroll a long page and confirm top/bottom edge blur on the article, with the TOC remaining sharp.
• Check a component page (e.g. Live Orb) and Getting Started; collapse the sidebar and retry on a narrow viewport.

Made with Cursor

Summary by CodeRabbit

• New Features

  • Added a theme toggle to switch between light and dark modes.
  • Improved documentation navigation with a wider, bordered table of contents.
  • Added a more flexible search trigger with improved layout and customization support.

• Style

  • Refreshed the documentation layout with full-height content, persistent headers, and off-canvas sidebar behavior.
  • Improved spacing, borders, scrolling, and responsive presentation across documentation pages.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 987ef0c8-1f89-49d2-a076-4cbfce1451b3

📥 Commits

Reviewing files that changed from the base of the PR and between fab6cdb and 05e368e.

📒 Files selected for processing (7)

• app/docs/[[...slug]]/page.tsx
• app/docs/template.tsx
• components/docs-shell.tsx
• components/docs-sidebar.tsx
• components/docs-toc.tsx
• components/search-trigger.tsx
• components/theme-toggle.tsx

---

📝 Walkthrough

Walkthrough

The documentation UI now uses full-height bordered panes. The table of contents sits beside the article, and the header includes separate navigation, search, GitHub, and theme controls.

Changes

Documentation shell layout

Layer / File(s)	Summary
Header controls components/search-trigger.tsx, components/theme-toggle.tsx	SearchTrigger accepts custom classes and uses responsive full-width styling. ThemeToggle switches between light and dark themes.
Shell pane and header integration components/docs-shell.tsx, components/docs-sidebar.tsx	The shell uses bordered full-viewport panes. The header separates navigation, GitHub stars, theme, and search areas.
Documentation content and table of contents app/docs/template.tsx, app/docs/[[...slug]]/page.tsx, components/docs-toc.tsx	The documentation content uses a full-height flexible layout. DocsToc is a separate wider sibling with a left border and updated spacing.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ThemeToggle
  participant next-themes
  User->>ThemeToggle: Click theme button
  ThemeToggle->>next-themes: setTheme("light" or "dark")
  next-themes-->>ThemeToggle: Apply selected theme

Loading

✨ 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 improve/docs-full-window

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

Cloudflare preview is ready.

Preview	https://pr-32-23rd-dev.radiumcoders.workers.dev
This commit	https://551e78dc-23rd-dev.radiumcoders.workers.dev

Production (23rd.dev) is unchanged. This preview URL stays the same as you push to this PR.