mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-13 21:59:37 +00:00
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
This commit is contained in:
Valics Lehel
85
file-metadata-issue.md
Normal file
85
file-metadata-issue.md
Normal file
@@ -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
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -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 }) {
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Project Sorting - Moved under Appearance */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-foreground">
|
||||
Project Sorting
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
How projects are ordered in the sidebar
|
||||
</div>
|
||||
</div>
|
||||
<select
|
||||
value={projectSortOrder}
|
||||
onChange={(e) => setProjectSortOrder(e.target.value)}
|
||||
className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2"
|
||||
>
|
||||
<option value="name">Alphabetical</option>
|
||||
<option value="date">Recent Activity</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -217,56 +239,6 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Sorting */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<FolderOpen className="w-5 h-5 text-purple-500" />
|
||||
<h3 className="text-lg font-medium text-foreground">
|
||||
Project Sorting
|
||||
</h3>
|
||||
</div>
|
||||
<div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-muted-foreground mb-3">
|
||||
Choose how projects are sorted in the sidebar
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setProjectSortOrder('name')}
|
||||
className={`flex-1 px-4 py-2 rounded-lg border transition-colors ${
|
||||
projectSortOrder === 'name'
|
||||
? 'bg-purple-600 text-white border-purple-600'
|
||||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<SortAsc className="w-4 h-4" />
|
||||
<span>Sort by Name</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setProjectSortOrder('date')}
|
||||
className={`flex-1 px-4 py-2 rounded-lg border transition-colors ${
|
||||
projectSortOrder === 'date'
|
||||
? 'bg-purple-600 text-white border-purple-600'
|
||||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<SortAsc className="w-4 h-4 rotate-180" />
|
||||
<span>Sort by Date</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-xs text-purple-700 dark:text-purple-300 mt-2">
|
||||
{projectSortOrder === 'name'
|
||||
? 'Projects are sorted alphabetically by name'
|
||||
: 'Projects are sorted by most recent session activity'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Allowed Tools */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
|
||||
Reference in New Issue
Block a user