Unify tree and explorer navigation components across docs, mail, and files #230

New Issue

zemion · 2026-07-09T18:42:17+02:00

zemion commented

2026-07-09 18:42:17 +02:00

Context

ExplorerTree exists in core and is used in files/mail, but there are still bespoke tree/list implementations for docs navigation and connector browsing. The next step is not to force every hierarchy into one component blindly, but to make ExplorerTree configurable enough for the cases that are actually the same.

Current call sites found by scan

govoplan-core/webui/src/components/ExplorerTree.tsx
- Existing generic recursive tree.
- Current props include node id/label/children accessors, active/expanded state, open/toggle handlers, disabled state, render hooks, class/style hooks, drag/drop, and context menu hooks.
govoplan-files/webui/src/features/files/components/FileManagerComponents.tsx
- Uses ExplorerTree for file/folder tree behavior with file-tree classes and drag/drop hooks.
govoplan-mail/webui/src/features/mail/MailboxPage.tsx
- Uses ExplorerTree for mailbox folders, with mailbox folder tree built in mailboxFolders.ts.
- Needs folder counts/unseen counts and selected-folder persistence.
govoplan-docs/webui/src/features/docs/DocsPage.tsx
- Has local TreeNodeView plus docs-tree-* CSS for documentation outline.
- Needs placeholder spacing when a node has no children, selected-page handling, empty topic nodes, and doc-specific indentation.
govoplan-files/webui/src/features/files/FilesPage.tsx
- Connector browsing dialogs use bespoke connector-browser-row lists for remote file/folder/library navigation.
- This may be a separate ExplorerList/browser list rather than recursive ExplorerTree because the connector browser is path-based and page-like.

Proposed core API additions

Export ExplorerTreeProps in addition to ExplorerTreeNodeContext so modules can compose wrappers safely.
Add configuration props where needed:
- indentStep, maxIndent, startDepth.
- showTogglePlaceholder for docs-style alignment.
- toggleIconMode or render hook defaults for chevrons vs folder icons.
- rootClassName, childrenClassName, rowClassName, toggleClassName, buttonClassName or a class map to avoid stacking file-tree classes everywhere.
- emptyNodeContent / renderEmptyNode for category nodes with no children.
- ariaLabel, role, and keyboard navigation support if we want tree semantics.
Consider a separate ExplorerBrowserList for flat path browsing:
- Props: items, selectedId, onOpen, renderIcon, renderPrimary, renderMeta, emptyText, loading, error.
- Candidate for file connector remote browser rows, not necessarily docs/mail tree.

Acceptance criteria

Decide whether docs outline should migrate to ExplorerTree; if yes, replace local TreeNodeView without losing active state or default-expanded behavior.
Preserve existing files tree and mailbox folder behavior.
Evaluate connector browser as either a separate shared browser-list component or explicitly leave it bespoke with rationale.
Core exports any new prop types needed by modules.
Build and module permutation tests pass.

## Context `ExplorerTree` exists in core and is used in files/mail, but there are still bespoke tree/list implementations for docs navigation and connector browsing. The next step is not to force every hierarchy into one component blindly, but to make `ExplorerTree` configurable enough for the cases that are actually the same. ## Current call sites found by scan - `govoplan-core/webui/src/components/ExplorerTree.tsx` - Existing generic recursive tree. - Current props include node id/label/children accessors, active/expanded state, open/toggle handlers, disabled state, render hooks, class/style hooks, drag/drop, and context menu hooks. - `govoplan-files/webui/src/features/files/components/FileManagerComponents.tsx` - Uses `ExplorerTree` for file/folder tree behavior with file-tree classes and drag/drop hooks. - `govoplan-mail/webui/src/features/mail/MailboxPage.tsx` - Uses `ExplorerTree` for mailbox folders, with mailbox folder tree built in `mailboxFolders.ts`. - Needs folder counts/unseen counts and selected-folder persistence. - `govoplan-docs/webui/src/features/docs/DocsPage.tsx` - Has local `TreeNodeView` plus `docs-tree-*` CSS for documentation outline. - Needs placeholder spacing when a node has no children, selected-page handling, empty topic nodes, and doc-specific indentation. - `govoplan-files/webui/src/features/files/FilesPage.tsx` - Connector browsing dialogs use bespoke `connector-browser-row` lists for remote file/folder/library navigation. - This may be a separate `ExplorerList`/browser list rather than recursive `ExplorerTree` because the connector browser is path-based and page-like. ## Proposed core API additions - Export `ExplorerTreeProps` in addition to `ExplorerTreeNodeContext` so modules can compose wrappers safely. - Add configuration props where needed: - `indentStep`, `maxIndent`, `startDepth`. - `showTogglePlaceholder` for docs-style alignment. - `toggleIconMode` or render hook defaults for chevrons vs folder icons. - `rootClassName`, `childrenClassName`, `rowClassName`, `toggleClassName`, `buttonClassName` or a class map to avoid stacking file-tree classes everywhere. - `emptyNodeContent` / `renderEmptyNode` for category nodes with no children. - `ariaLabel`, `role`, and keyboard navigation support if we want tree semantics. - Consider a separate `ExplorerBrowserList` for flat path browsing: - Props: `items`, `selectedId`, `onOpen`, `renderIcon`, `renderPrimary`, `renderMeta`, `emptyText`, `loading`, `error`. - Candidate for file connector remote browser rows, not necessarily docs/mail tree. ## Acceptance criteria - Decide whether docs outline should migrate to `ExplorerTree`; if yes, replace local `TreeNodeView` without losing active state or default-expanded behavior. - Preserve existing files tree and mailbox folder behavior. - Evaluate connector browser as either a separate shared browser-list component or explicitly leave it bespoke with rationale. - Core exports any new prop types needed by modules. - Build and module permutation tests pass.

zemion added the

labels 2026-07-09 18:42:17 +02:00

zemion commented

2026-07-10 10:33:47 +02:00

Codex State: done

Summary

Extended core ExplorerTree with exported props and class-slot overrides so modules can reuse tree behavior without inheriting file-tree styling accidentally.
Replaced the docs module's local recursive tree renderer with core ExplorerTree.

Changed Files

webui/src/components/ExplorerTree.tsx
webui/src/index.ts
/mnt/DATA/git/govoplan-docs/webui/src/features/docs/DocsPage.tsx

Verification

npm run build passed in govoplan-core/webui
bash scripts/check-focused.sh passed

## Codex State: done ### Summary - Extended core ExplorerTree with exported props and class-slot overrides so modules can reuse tree behavior without inheriting file-tree styling accidentally. - Replaced the docs module's local recursive tree renderer with core ExplorerTree. ### Changed Files - `webui/src/components/ExplorerTree.tsx` - `webui/src/index.ts` - `/mnt/DATA/git/govoplan-docs/webui/src/features/docs/DocsPage.tsx` ### Verification - `npm run build passed in govoplan-core/webui` - `bash scripts/check-focused.sh passed`

zemion closed this issue

2026-07-10 10:33:52 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: add-ideas/govoplan-core#230