From 02a296739d6d8f0bdda0254c2b4f2ee030acc4c2 Mon Sep 17 00:00:00 2001 From: Valics Lehel Date: Sat, 12 Jul 2025 14:17:56 +0300 Subject: [PATCH] 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 --- file-metadata-issue.md | 85 ++++++++++++++++++++++++++++++++ src/components/Sidebar.jsx | 6 ++- src/components/ToolsSettings.jsx | 74 +++++++++------------------ 3 files changed, 112 insertions(+), 53 deletions(-) create mode 100644 file-metadata-issue.md diff --git a/file-metadata-issue.md b/file-metadata-issue.md new file mode 100644 index 0000000..bf479c3 --- /dev/null +++ b/file-metadata-issue.md @@ -0,0 +1,85 @@ +# 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 \ No newline at end of file diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 598b093..9528919 100755 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -353,8 +353,10 @@ function Sidebar({ // Sort by most recent activity (descending) return getProjectLastActivity(b) - getProjectLastActivity(a); } else { - // Sort by name (ascending) - return a.name.localeCompare(b.name); + // Sort by display name (user-defined) or fallback to name (ascending) + const nameA = a.displayName || a.name; + const nameB = b.displayName || b.name; + return nameA.localeCompare(nameB); } }); diff --git a/src/components/ToolsSettings.jsx b/src/components/ToolsSettings.jsx index 7e5295a..109979e 100755 --- a/src/components/ToolsSettings.jsx +++ b/src/components/ToolsSettings.jsx @@ -3,7 +3,7 @@ import { Button } from './ui/button'; import { Input } from './ui/input'; import { ScrollArea } from './ui/scroll-area'; import { Badge } from './ui/badge'; -import { X, Plus, Settings, Shield, AlertTriangle, Moon, Sun, FolderOpen, SortAsc } from 'lucide-react'; +import { X, Plus, Settings, Shield, AlertTriangle, Moon, Sun } from 'lucide-react'; import { useTheme } from '../contexts/ThemeContext'; function ToolsSettings({ isOpen, onClose }) { @@ -186,6 +186,28 @@ function ToolsSettings({ isOpen, onClose }) { + + {/* Project Sorting - Moved under Appearance */} +
+
+
+
+ Project Sorting +
+
+ How projects are ordered in the sidebar +
+
+ +
+
@@ -217,56 +239,6 @@ function ToolsSettings({ isOpen, onClose }) { - {/* Project Sorting */} -
-
- -

- Project Sorting -

-
-
-
-
- Choose how projects are sorted in the sidebar -
-
- - -
-
- {projectSortOrder === 'name' - ? 'Projects are sorted alphabetically by name' - : 'Projects are sorted by most recent session activity'} -
-
-
-
- {/* Allowed Tools */}