Support infinite navigation levels with Radix Tree primitive

[Copilot]

Navigation was hardcoded to 2 levels (category/page). Now supports arbitrary nesting depth using a Radix Tree primitive.

Changes

Dependencies:

• @abernier/radix-tree@1.0.2 - Published npm package for Radix Tree primitive with full functionality

Nav component (src/components/Nav/Nav.tsx)

• Replaced Record<string, Record<string, Doc>> with recursive tree builder
• Builds tree from flat docs array by slug hierarchy
• Auto-expands ancestor nodes for active paths
• Toggle properly collapses/expands at any depth
• Uses Tree.Factory from @abernier/radix-tree with virtualized mode for optimal performance
• Uses flatten() function to create flat list from nested structure
• Applies depth-based styling (indentation and font sizes) directly to flat items
• Manages expansion state with openKeys and onOpenKeysChange

Example structure now supported:

docs/
├── authoring/
│   ├── introduction.mdx
│   ├── components/
│   │   ├── introduction.mdx
│   │   ├── buttons.mdx      ← 3 levels deep
│   │   └── cards.mdx
│   └── code.mdx

Performance:

• Virtualized rendering with flat list approach avoids recursively rendering nested components
• Only expanded nodes are included in the rendered flat list
• More efficient tree traversal and state management

Test documentation:

• Created nested folder structure at /docs/authoring/components/ to demonstrate 3-level nesting

Original prompt

je veux que ma Nav supporte une infinité de niveaux - je veux egalement integrer cette primitive radix que j'ai developpee: https://github.com/abernier/encube-frontend/tree/abernier/src/frontend/packages/ui/src/components/primitives/Tree - propose une implementation minimale

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[abernier]

i've now made a package of Tree: https://www.npmjs.com/package/@abernier/radix-tree

@copilot use it instead

[Copilot]

i've now made a package of Tree: https://www.npmjs.com/package/@abernier/radix-tree

@copilot use it instead

Done! Switched to using @abernier/radix-tree@1.0.2 from npm. Removed the local Tree implementation and updated Nav.tsx to import from the package instead. (commit 8bd7634)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www.npmjs.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[abernier]

@copilot Tree.Factory support virtualized prop https://github.com/abernier/radix-primitives/blob/main/packages/radix-tree/src/Tree.tsx#L354 with flatItems: cant we use this instead of rebuilding a nested tree?

[Copilot]

Good catch! Switched to using virtualized mode with flatten() function. This is more efficient since we:

• Use Tree.Factory with virtualized={true} prop
• Pass flatItems created by flatten(items, new Set(openKeys))
• Render with VItem instead of Item/Group
• Apply depth-based styling directly (indentation via marginLeft, font sizes)

The flatten function handles the tree traversal and only expands nodes in the openKeys set, which is more performant than rebuilding nested components. (commit 9d129f5)