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 (
+ Try adjusting your search term +
+