From c33366a194adfa454ca2243ba0aaca20044ca834 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Nov 2025 15:54:02 +0000
Subject: [PATCH 1/2] Initial plan


From bdb8192d57868ff08fac6af1663cb30663edc6e0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Nov 2025 16:01:22 +0000
Subject: [PATCH 2/2] Add search functionality to filter prompts by title

Co-authored-by: BitoviAI <226138784+BitoviAI@users.noreply.github.com>
---
 .../src/components/prompts/PromptsList.tsx    | 53 +++++++++++++------
 1 file changed, 37 insertions(+), 16 deletions(-)

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 (
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           📋 Your Prompts
           <span className="text-sm font-normal text-muted-foreground">
-            ({promptList.length})
+            ({filteredPrompts.length}{searchQuery ? ` of ${promptList.length}` : ''})
           </span>
         </CardTitle>
       </CardHeader>
       <CardContent>
-        {promptList.length === 0 ? (
-          <div className="text-center py-8 text-muted-foreground">
-            <p>No prompts available</p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {promptList.map((prompt) => (
-              <PromptCard
-                key={prompt.name}
-                prompt={prompt}
-                connectionStatuses={connections}
-              />
-            ))}
+        <div className="space-y-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder="Search prompts by title..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10"
+            />
           </div>
-        )}
+          
+          {filteredPrompts.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              <p>{searchQuery ? 'No prompts found matching your search' : 'No prompts available'}</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredPrompts.map((prompt) => (
+                <PromptCard
+                  key={prompt.name}
+                  prompt={prompt}
+                  connectionStatuses={connections}
+                />
+              ))}
+            </div>
+          )}
+        </div>
       </CardContent>
     </Card>
   );