diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 5e9c566..7a2439a 100755 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -3,7 +3,8 @@ import { ScrollArea } from './ui/scroll-area'; import { Button } from './ui/button'; import { Badge } from './ui/badge'; import { Input } from './ui/input'; -import { FolderOpen, Folder, Plus, MessageSquare, Clock, ChevronDown, ChevronRight, Edit3, Check, X, Trash2, Settings, FolderPlus, RefreshCw, Sparkles, Edit2, Star } from 'lucide-react'; + +import { FolderOpen, Folder, Plus, MessageSquare, Clock, ChevronDown, ChevronRight, Edit3, Check, X, Trash2, Settings, FolderPlus, RefreshCw, Sparkles, Edit2, Star, Search } from 'lucide-react'; import { cn } from '../lib/utils'; import ClaudeLogo from './ClaudeLogo'; import { api } from '../utils/api'; @@ -66,6 +67,8 @@ function Sidebar({ const [editingSession, setEditingSession] = useState(null); const [editingSessionName, setEditingSessionName] = useState(''); const [generatingSummary, setGeneratingSummary] = useState({}); + const [searchFilter, setSearchFilter] = useState(''); + // Starred projects state - persisted in localStorage const [starredProjects, setStarredProjects] = useState(() => { @@ -402,6 +405,18 @@ function Sidebar({ } }); + // Filter projects based on search input + const filteredProjects = sortedProjects.filter(project => { + if (!searchFilter.trim()) return true; + + const searchLower = searchFilter.toLowerCase(); + const displayName = (project.displayName || project.name).toLowerCase(); + const projectName = project.name.toLowerCase(); + + // Search in both display name and actual project name/path + return displayName.includes(searchLower) || projectName.includes(searchLower); + }); + return (
{/* Header */} @@ -586,6 +601,30 @@ function Sidebar({
)} + {/* Search Filter */} + {projects.length > 0 && !isLoading && ( +
+
+ + setSearchFilter(e.target.value)} + className="pl-9 h-9 text-sm bg-muted/50 border-0 focus:bg-background focus:ring-1 focus:ring-primary/20" + /> + {searchFilter && ( + + )} +
+
+ )} + {/* Projects List */}
@@ -609,8 +648,18 @@ function Sidebar({ Run Claude CLI in a project directory to get started

+ ) : filteredProjects.length === 0 ? ( +
+
+ +
+

No matching projects

+

+ Try adjusting your search term +

+
) : ( - sortedProjects.map((project) => { + filteredProjects.map((project) => { const isExpanded = expandedProjects.has(project.name); const isSelected = selectedProject?.name === project.name; const isStarred = isProjectStarred(project.name);