d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2025-12-10 14:59:46 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
02a296739d6d8f0bdda0254c2b4f2ee030acc4c2
claudecodeui/file-metadata-issue.md
Valics Lehel 02a296739d fix: Address project sorting feedback 
- 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
2025-07-12 14:17:56 +03:00

3.1 KiB
Raw Blame History

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

# 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

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

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