Back to Plate

docs sidebar accordion

docs/plans/2026-05-28-docs-sidebar-accordion.md

53.0.812.9 KB
Original Source

docs sidebar accordion

Objective: Implement the Plate docs sidebar accordion in apps/www: top-level doc sections and nested nav branches collapse/expand, active branches stay open, multiple branches can remain open, installation children stay visible when that branch is open, and no sidebar filter is added.

Goal plan: docs/plans/2026-05-28-docs-sidebar-accordion.md

Task source:

  • User asked to proceed after approving an accordion-style Plate docs sidebar, preserving nested installation items and removing the old filter direction.

Completion threshold:

  • apps/www/src/components/docs-nav.tsx owns the accordion behavior.
  • /docs renders with compact open starter sections and collapsed later sections.
  • Collapsing and reopening Installation hides/shows its child pages.
  • Expanding Plugins works without closing Installation.
  • /docs/installation/next keeps Installation open and marks Next.js current.
  • pnpm --filter www typecheck passes.
  • Browser proof is captured against http://localhost:3002.
  • node .agents/rules/autogoal/scripts/check-complete.mjs docs/plans/2026-05-28-docs-sidebar-accordion.md passes.

Verification surface:

  • Source: apps/www/src/components/docs-nav.tsx.
  • Typecheck: pnpm --filter www typecheck.
  • Browser: Codex in-app browser at /docs and /docs/installation/next.
  • Dev server: existing pnpm dev session on http://localhost:3002.

Constraints:

  • Do not run build:registry.
  • Keep edits scoped to the docs nav source and the goal plan.
  • Preserve the global search UI; do not add a sidebar filter.
  • Preserve parent links for branch items that have hrefs.

Boundaries:

  • Source of truth: user decision in this thread plus current docs nav/sidebar component patterns.
  • Allowed edit scope: docs nav source, goal plan.
  • Browser surface: desktop docs sidebar on localhost:3002.
  • Tracker sync: N/A, no external issue.
  • Non-goals: registry sync, /create, theme work, mobile sidebar redesign, strict single-open accordion.

Output budget strategy:

  • Read only the docs nav, sidebar primitives, package scripts, and plan/checker files. One accidental broad rg hit generated font/json output; recovery was to stop broad output and use browser/source checks.

Blocked condition:

  • Work would block only if the local dev server could not render /docs or the approved browser tool could not connect. Neither happened.

Task state:

  • task_type: implementation
  • task_complexity: small
  • current_phase: closeout
  • current_phase_status: done
  • next_phase: final response
  • goal_status: active

Current verdict:

  • verdict: implemented
  • confidence: high
  • next owner: user
  • reason: source, typecheck, and browser behavior match the requested sidebar.

Start Gates:

GateAppliesEvidence
Skill analysis before editsyesUsed autogoal, task, frontend-design, and Browser for browser proof.
Active goal checked or createdyesActive goal and this plan created for the sidebar task.
Source of truth read before editsyesRead apps/www/src/components/docs-nav.tsx and sidebar/collapsible primitives.
Tracker comments and attachments readnoNo external tracker for this request.
Video transcript evidence requirednoNo video or recording was provided.
docs/solutions checked for non-trivial existing-code worknoSmall local UI behavior change with source patterns in the component.
TDD decision before behavior change or bug fixyesBrowser interaction proof is the right coverage; no unit seam exists for this nav state.
Branch decision for code-changing tasknoUser did not ask for git branch or PR work in this turn.
Release artifact decisionyesN/A: docs app UI source only; no package release artifact.
Browser tool decision for browser surfaceyesUsed the Codex in-app Browser skill and current localhost:3002 tab.
PR expectation decisionyesN/A: user asked to implement locally, not PR.
Tracker sync expectation decisionyesN/A: no issue or Linear target.
Output budget strategy recordedyesRecorded above, including accidental broad output recovery.
Browser pack selectedyesBrowser proof required for visible sidebar behavior.
Browser route / app surface identifiedyes/docs and /docs/installation/next on http://localhost:3002.
Browser tool decision recordedyesBrowser plugin via Node REPL runtime.
Console/network caveat policy recordedyesDev server terminal checked; no runtime errors shown for verified routes.

Work Checklist:

  • Objective includes outcome, completion threshold, verification surface, constraints, boundaries, and blocked condition.
  • Task source classified with source type, title, acceptance criteria, caveats, likely files/routes/packages, browser surface, and root-cause layer.
  • Required video or screen-recording evidence is N/A: no media source.
  • Nearby repo instructions and implementation patterns read before edits.
  • Implementation fixes the docs nav ownership boundary.
  • Release artifact requirement recorded: N/A docs app UI source only.
  • Final handoff shape decided: local implementation summary with typecheck, browser proof, and lint caveat.
  • Branch handling recorded: N/A, no git operation requested.
  • Local-env-rot retry policy recorded: N/A, typecheck/browser did not show install corruption.
  • Workspace authority recorded: verification commands ran from /Users/zbeyens/git/plate.
  • High-risk note recorded: browser behavior changed; proof plan used actual docs routes.
  • Review/autoreview target selected: N/A, small single-file UI change with direct browser proof.
  • Agent-native review decision recorded: N/A, no agent files changed.
  • Output budget discipline recorded and followed after the broad-output recovery.
  • Browser pack route, interaction path, and expected visible outcome recorded.
  • Browser pack used the repo-approved browser tool.
  • Browser pack console/network caveat recorded through dev server terminal.
  • Browser pack screenshot and exact verification details are ready for handoff.

Completion Gates:

GateAppliesEvidence
Named verification thresholdyesSource changed, typecheck passed, browser behavior verified.
Bug reproduced before fixnoFeature refinement, not a bug repro.
Targeted behavior verificationyesBrowser checked collapse/reopen Installation, independent Plugins expansion, active /docs/installation/next.
TypeScript or typed config changedyespnpm --filter www typecheck passed.
Package exports or file layout changednoNo package exports or file moves.
Package manifests, lockfile, or install graph changednoNo manifest or lockfile edits.
Agent rules or skills changednoNo agent rule or skill edits.
Workspace authority proofyesCommands ran in /Users/zbeyens/git/plate; app proof against apps/www.
Browser surface changedyesCodex in-app browser proof captured on localhost:3002.
Browser final proofyesScreenshot captured and browser checks recorded below.
CI-controlled template output changednoNo generated template output edited.
Package behavior or public API changednoDocs app UI only; no changeset.
Registry-only component work changednoRegistry not touched.
Docs or content changednoPlan file only; no user docs/content pages changed.
High-risk mini gateyesFailure mode was hidden active child or unusable nested nav; browser proof covers both.
Agent-native review for agent/tooling changesnoNo agent/tooling files changed.
Local install corruption suspectednoNo corruption-shaped failure after typecheck/browser.
Autoreview for non-trivial implementation changesnoSmall local UI change verified directly.
PR create or updatenoNo PR requested.
Task-style PR body verifiednoNo PR body.
PR proof image hostingnoNo PR.
Tracker sync-backnoNo tracker.
Final handoff contractyesFinal response will list change, typecheck, browser proof, and lint caveat.
Final lintyespnpm --filter www exec eslint src/components/docs-nav.tsx --fix passed; package-wide lint:fix still fails on existing TS parser setup.
Output budget disciplineyesBroad generated-output mistake recorded; no further broad output streamed.
Goal plan completeyesThis plan is ready for check-complete.
Browser interaction proofyesBrowser exercised /docs and /docs/installation/next.
Browser console/network checkyesDev server terminal showed successful 200 responses and no runtime stack trace.
Browser final proof artifactyesScreenshot emitted from /docs/installation/next.

Phase / pass table:

PhaseStatusEvidenceNext
Intake and source readdoneRead docs nav/sidebar/collapsible source.implementation
ImplementationdoneAdded collapsible sections and nested branches in docs-nav.tsx.verification
VerificationdoneTypecheck passed and browser proof completed.closeout
PR / tracker syncn/aNo PR/tracker requested.final response
CloseoutdonePlan evidence recorded.final response

Findings:

  • The old docs nav rendered every nested item eagerly.
  • The current app already had Radix Collapsible and shadcn sidebar action primitives, so the durable fix belongs in DocsNav.

Decisions and tradeoffs:

  • Top-level sections are collapsible because Plate has far more pages than shadcn.
  • Nested item branches are also collapsible so plugin and installation-style groups scale.
  • Multiple branches can stay open; strict one-open accordion would be annoying for docs scanning.
  • Active branches are forced open to avoid hiding the current page.
  • No sidebar filter was added.

Implementation notes:

  • Added local open state per rendered nav list.
  • Default-open starter groups keep /docs useful without showing the full tree.
  • Parent links are preserved and chevrons only toggle the branch.

Review fixes:

  • N/A.

Error attempts:

Error / failed attemptCountNext different moveResolution
pnpm --filter www lint:fix parses TS as JS across existing files1Use typecheck and browser proof; record lint blockerTypecheck/browser passed; lint caveat recorded.
Broad rg hit generated font/json output1Stop broad output and narrow verificationRecorded as output-budget caveat.

Verification evidence:

  • pnpm --filter www exec eslint src/components/docs-nav.tsx --fix passed.
  • pnpm --filter www typecheck passed.
  • Browser /docs: Installation collapsed hides Plate UI; reopening shows it.
  • Browser /docs: Plugins expands independently while Installation remains controlled separately.
  • Browser /docs/installation/next: URL loads, Next.js is the current nav link, Installation is open, and installation children are visible.
  • Existing dev server terminal showed GET /docs and GET /docs/installation/next 200 responses with no runtime stack trace.

Final handoff contract:

  • PR line: N/A, no PR requested.
  • Issue / tracker line: N/A.
  • Confidence line: high.
  • Flow table:
    • Reproduced: N/A feature refinement.
    • Verified: pnpm --filter www typecheck; browser proof on /docs and /docs/installation/next.
  • Browser check: passed.
  • Outcome: docs sidebar accordion implemented.
  • Caveat: the changed file lints cleanly, but package-wide pnpm --filter www lint:fix is blocked by an existing ESLint parser setup failure across unrelated TS files.
  • Design:
    • Chosen boundary: DocsNav source component.
    • Why not quick patch: hidden current pages and parent-link loss would be a bad docs UX.
    • Why not broader change: mobile/sidebar architecture and registry are out of scope.
  • Verified: source, typecheck, browser.
  • PR body verified: N/A.

Final handoff / sync:

  • PR: N/A.
  • Issue / tracker: N/A.
  • Browser proof: screenshot emitted from /docs/installation/next.
  • Caveats: local www lint script failure recorded.

Timeline:

  • 2026-05-28T15:31:23.153Z Task goal plan created.
  • 2026-05-28 Implemented docs sidebar accordion.
  • 2026-05-28 Typecheck and browser proof completed.

Reboot status:

QuestionAnswer
Where am I?Closeout after implementation and verification.
Where am I going?Final response to user.
What is the goal?Plate docs sidebar accordion with nested branches and no filter.
What have I learned?Existing shadcn sidebar/collapsible primitives fit this cleanly.
What have I done?Implemented, typechecked, browser-verified, and recorded caveats.

Open risks:

  • Lint script is currently not useful for this app because it fails on existing TypeScript parsing before reaching the changed file.