feat: add File Explorer for context folder in admin settings#491
Draft
feat: add File Explorer for context folder in admin settings#491
Conversation
- Add backend service (context-explorer.service.ts) with recursive file tree listing and file content reading, respecting .naoignore patterns - Add tRPC routes (context-explorer.routes.ts) with getFileTree and readFile endpoints, both admin-protected - Add frontend FileTree component with expandable directory nodes - Add frontend FileViewer component using Monaco editor (read-only) with language detection by file extension - Add context-explorer route page with tree sidebar and file viewer - Add 'File Explorer' entry to admin settings sidebar navigation - Update routeTree.gen.ts with new route registration
Contributor
🚀 Preview Deployment
Preview will be automatically removed when this PR is closed. |
- Add cursor pointer on tree item hover - Use colored file icons based on extension (FileCode, FileJson, etc.) - Color folder icons amber for better visual distinction - Respect light/dark theme in Monaco editor via useEditorTheme hook - Fix tree hover padding (separate pr/pl for proper indent) - Make tree sidebar resizable using ResizablePanelGroup - Add file search input at the top of the file tree with filtering
Use defaultLayout on PanelGroup with fractional sizes (1:3 ratio) and pixel-based minSize on panels instead of the old percentage-based defaultSize/minSize/maxSize API which caused the sidebar to be stuck at ~49px.
Define custom nao-light and nao-dark Monaco themes that use a soft background tint for the current line highlight instead of the default harsh border, similar to Cursor's style.
Replace exact substring matching with fuzzy character-sequence matching. Also include folder names in search results — when a folder name matches, all its children are shown.
The ResizableSeparator already renders a 1px border line. Remove the extra border-r on the tree panel that was doubling it up.
Monaco intercepts all keyboard shortcuts when focused. Override the Cmd/Ctrl+K binding to dispatch the event to window so the global command menu listener picks it up.
Match the query against entry.path instead of entry.name so queries like 'orderscolumn' match paths like '/databases/orders/columns.md'.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a read-only File Explorer page in the Admin settings that lets admins browse and view files from the project's context folder, similar to an editor's file explorer.
Changes
Backend
context-explorer.service.ts— New service with two functions:getFileTree()— Recursively reads the context folder and returns a tree structure, respecting.naoignorepatterns and excluded directoriesreadFileContent()— Reads a file's content (with 1 MB size limit and path validation)context-explorer.routes.ts— Two admin-protected tRPC endpoints:contextExplorer.getFileTree— Returns the full file treecontextExplorer.readFile— Returns a single file's contentrouter.ts— Registered the newcontextExplorerroutesFrontend
file-tree.tsx— Tree view component with:.ts/.js/.py/.sql, FileJson for.json, FileText for.md/.txt, FileSpreadsheet for.csv, etc.)file-viewer.tsx— Monaco editor wrapper in read-only mode with:useEditorThemehooknao-light/nao-darkMonaco themes with subtle line highlight background (no border), similar to Cursor's styleuse-editor-theme.ts— Hook that resolves the Monaco theme (vs/vs-dark) from the app's light/dark/system theme setting, including reacting to system preference changes_sidebar-layout.settings.context-explorer.tsx— Route page with:sidebar-settings-nav.tsx— Added "File Explorer" entry (admin-only) to settings navigationrouteTree.gen.ts— Updated with the new route registrationHow it works