mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-13 13:49:43 +00:00
02a296739d
- Sort by user-defined displayName instead of path/folder name - Move project sorting under Appearance section - Replace large toggle buttons with compact dropdown - Use clearer labels: "Alphabetical" and "Recent Activity" - Projects now sort by custom names when available
85 lines
3.1 KiB
Markdown
85 lines
3.1 KiB
Markdown
# Issue: Add File Metadata Display with Multiple View Modes
|
|
|
|
## Feature Description
|
|
|
|
This feature enhances the file tree display by adding file metadata and multiple view modes for better file browsing experience.
|
|
|
|
### What's New:
|
|
- **File metadata display**: Size, permissions (rwx format), and last modified date
|
|
- **Three view modes**:
|
|
- **Simple**: Original tree view (file names only)
|
|
- **Compact**: Inline metadata display
|
|
- **Detailed**: Table-like layout with column headers
|
|
- **Persistent preferences**: View mode selection saved in localStorage
|
|
- **Server-side enhancements**: File stats collection in the API
|
|
|
|
## Screenshots/Demo
|
|
|
|
### Detailed View
|
|
Shows files in a table format with columns:
|
|
- Name | Size | Modified | Permissions
|
|
|
|
### Compact View
|
|
Shows files with inline metadata:
|
|
- filename.js 2.5 KB rw-r--r--
|
|
|
|
### Simple View
|
|
Original tree structure with just file names and icons
|
|
|
|
## How to Test
|
|
|
|
### Option 1: Test from my feature branch
|
|
```bash
|
|
# Clone and checkout the feature branch
|
|
git clone https://github.com/lvalics/claudecodeui.git
|
|
cd claudecodeui
|
|
git checkout feature/file-permissions
|
|
|
|
# Install and run
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
### Option 2: View the implementation
|
|
- **Client changes**: [src/components/FileTree.jsx](https://github.com/lvalics/claudecodeui/blob/feature/file-permissions/src/components/FileTree.jsx)
|
|
- **Server changes**: [server/index.js](https://github.com/lvalics/claudecodeui/blob/feature/file-permissions/server/index.js) (see `getFileTree` function)
|
|
|
|
### Option 3: Try the live demo (if deployed)
|
|
[If you have a deployment URL, add it here]
|
|
|
|
## Implementation Details
|
|
|
|
### Client-side changes (FileTree.jsx):
|
|
- Added view mode state and localStorage persistence
|
|
- Created three render functions: `renderFileTree`, `renderCompactView`, `renderDetailedView`
|
|
- Added helper functions: `formatFileSize`, `formatRelativeTime`
|
|
- Added view mode toggle buttons in the header
|
|
|
|
### Server-side changes (server/index.js):
|
|
- Enhanced `getFileTree` function to collect file stats
|
|
- Added `permToRwx` helper function for permission formatting
|
|
- Returns additional fields: `size`, `modified`, `permissions`, `permissionsRwx`
|
|
|
|
## Benefits
|
|
1. **Better file overview**: See file sizes and permissions at a glance
|
|
2. **Flexible viewing**: Switch between simple and detailed views based on needs
|
|
3. **Permission visibility**: Quickly identify file access rights
|
|
4. **Recent activity**: See when files were last modified
|
|
|
|
## Compatibility
|
|
- No breaking changes to existing functionality
|
|
- Gracefully handles missing metadata with fallback values
|
|
- Works on all platforms (permissions display adapted for Windows)
|
|
|
|
## Related PRs
|
|
- Feature branch PR: #[PR_NUMBER] (when created)
|
|
- Individual feature PR: https://github.com/lvalics/claudecodeui/pull/new/feature/file-permissions
|
|
|
|
## Testing Checklist
|
|
- [ ] File tree loads correctly in all three view modes
|
|
- [ ] View mode preference persists after page reload
|
|
- [ ] File sizes display correctly (B, KB, MB, GB)
|
|
- [ ] Permissions show in rwx format (e.g., rw-r--r--)
|
|
- [ ] Modified dates show as relative time
|
|
- [ ] Clicking files opens them correctly in all view modes
|
|
- [ ] Directory expansion works in all view modes |