File Explorer / Vault Navigation Frontend

[ElioNeto]

File Explorer / Vault Navigation Frontend

Build a file tree explorer component for the Angular frontend, enabling users to navigate their note vault like a file system.

Features

File Tree

• Hierarchical tree view of notes by path (folders as directories)
• Expand/collapse folders
• File icons by type (note, image, attachment, template)
• Sorting: folders first, then alphabetically
• Drag and drop to move notes between folders
• Right-click context menu (new note, new folder, rename, delete)
• Multi-select with Ctrl/Shift+click

Navigation

• Click to open note in editor
• Breadcrumb navigation at top
• Collapsible sidebar (toggle visibility)
• Pin/unpin frequently accessed notes
• Recent notes section at top
• Search-as-you-type filter within explorer

File Operations

• Create new note (with template selection)
• Create new folder
• Rename (with link index update)
• Delete (with confirmation)
• Move (drag-and-drop or cut/paste)
• Duplicate note
• Export note as .md file download

Additional Panels (Collapsible)

• Backlinks Panel — Shows all notes linking to current note
• Tags Panel — Shows all tags with note count, click to filter
• Outline Panel — Shows heading hierarchy of current note
• Properties Panel — Shows frontmatter fields

Layout

+------------------------------------------+
|  [Hamburger] ApexStore     [Search] [⚙] |
+----------+-------------------------------+
| Explorer |    Editor / Preview            |
| 📁 docs  |                                |
|  📄 intro|  # My Note                     |
|  📄 api  |  ...                           |
| 📁 daily |                                |
|  📄 05-25|                                |
| 📁 assets|                                |
|  🖼 logo |                                |
|          |                                |
| Tags     |                                |
| #rust(12)|                                |
| #web(5)  |                                |
+----------+-------------------------------+
| Backlinks for current note:   | Status bar |
+------------------------------------------+

Technical Implementation

• Angular 17 component with OnPush change detection
• CDK Tree (Angular Material CDK) for virtual scrolling tree
• RxJS BehaviorSubject for state management
• Drag and drop via Angular CDK DragDrop
• CSS custom properties for theming (dark/light mode)

Acceptance Criteria

• File tree displays all notes grouped by path
• Creating, renaming, and deleting notes works from the explorer
• Drag-and-drop moves notes between folders
• Explorer search filters visible files
• Backlinks panel shows correct incoming links
• Tags panel shows all tags with counts
• Outline panel shows heading structure
• Responsive layout (collapsible sidebar on mobile)

Parent Epic

#275

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321)