d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2025-12-13 21:59:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add project sorting by date option

Browse Source 
- Added ability to sort projects by name or most recent session activity
- Added projectSortOrder state and localStorage persistence
- Added UI controls in ToolsSettings to switch between sort modes
- Projects with no sessions sort last when sorting by date
- Real-time updates when sort preference changes
This commit is contained in:
Valics Lehel
2025-07-11 22:42:22 +03:00
parent 4762a2d719
commit 122b757fa2
2 changed files with 124 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/ToolsSettings.jsx
View File

@@ -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 } from 'lucide-react';
import { X, Plus, Settings, Shield, AlertTriangle, Moon, Sun, FolderOpen, SortAsc } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
function ToolsSettings({ isOpen, onClose }) {
@@ -15,6 +15,7 @@ function ToolsSettings({ isOpen, onClose }) {
const [skipPermissions, setSkipPermissions] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [saveStatus, setSaveStatus] = useState(null);
const [projectSortOrder, setProjectSortOrder] = useState('name');
// Common tool patterns
const commonTools = [
@@ -51,11 +52,13 @@ function ToolsSettings({ isOpen, onClose }) {
setAllowedTools(settings.allowedTools || []);
setDisallowedTools(settings.disallowedTools || []);
setSkipPermissions(settings.skipPermissions || false);
setProjectSortOrder(settings.projectSortOrder || 'name');
} else {
// Set defaults
setAllowedTools([]);
setDisallowedTools([]);
setSkipPermissions(false);
setProjectSortOrder('name');
}
} catch (error) {
console.error('Error loading tool settings:', error);
@@ -63,6 +66,7 @@ function ToolsSettings({ isOpen, onClose }) {
setAllowedTools([]);
setDisallowedTools([]);
setSkipPermissions(false);
setProjectSortOrder('name');
}
};
@@ -75,6 +79,7 @@ function ToolsSettings({ isOpen, onClose }) {
allowedTools,
disallowedTools,
skipPermissions,
projectSortOrder,
lastUpdated: new Date().toISOString()
};
@@ -212,6 +217,56 @@ 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">