diff --git a/frontend/src/components/prompts/PromptsList.tsx b/frontend/src/components/prompts/PromptsList.tsx index 2897699..3c17f81 100644 --- a/frontend/src/components/prompts/PromptsList.tsx +++ b/frontend/src/components/prompts/PromptsList.tsx @@ -1,10 +1,13 @@ +import { useState } from 'react'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; import { PromptCard } from './PromptCard'; import { usePrompts, useConnectionStatuses } from '@/hooks/api'; -import { Loader2, AlertCircle } from 'lucide-react'; +import { Loader2, AlertCircle, Search } from 'lucide-react'; import { Alert, AlertDescription } from '@/components/ui/alert'; export function PromptsList() { + const [searchQuery, setSearchQuery] = useState(''); const { data: prompts, isLoading: promptsLoading, error: promptsError } = usePrompts(); const { data: connectionStatuses, isLoading: connectionsLoading } = useConnectionStatuses(); @@ -48,32 +51,50 @@ export function PromptsList() { const promptList = prompts || []; const connections = connectionStatuses || []; + // Filter prompts based on search query + const filteredPrompts = promptList.filter((prompt) => + prompt.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); + return ( 📋 Your Prompts - ({promptList.length}) + ({filteredPrompts.length}{searchQuery ? ` of ${promptList.length}` : ''}) - {promptList.length === 0 ? ( -
-

No prompts available

-
- ) : ( -
- {promptList.map((prompt) => ( - - ))} +
+
+ + setSearchQuery(e.target.value)} + className="pl-10" + />
- )} + + {filteredPrompts.length === 0 ? ( +
+

{searchQuery ? 'No prompts found matching your search' : 'No prompts available'}

+
+ ) : ( +
+ {filteredPrompts.map((prompt) => ( + + ))} +
+ )} +
);