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

@@ -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

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)
+      // Sort by display name (user-defined) or fallback to name (ascending)
-      return a.name.localeCompare(b.name);
+      const nameA = a.displayName || a.name;
+      const nameB = b.displayName || b.name;
+      return nameA.localeCompare(nameB);
     }
   });
 

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 }) {
                     </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">