From 9f37ef0ca933ff88f4781ff6e497b92b88cf2139 Mon Sep 17 00:00:00 2001
From: shawnxiao105-afk <shawnxiao105@gmail.com>
Date: Sat, 23 May 2026 15:26:41 +0800
Subject: [PATCH] feat: add sidebar conversation filter

  Closes #35
---
 frontend/src/components/Sidebar/Sidebar.tsx | 52 ++++++++++++++++-----
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index 622e21f..f23ae88 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -1,4 +1,5 @@
-import { Plus } from "lucide-react";
+import { useState } from "react";
+import { Plus, Search } from "lucide-react";
 import { useConversationsStore } from "@/store/conversations";
 import { createConversation, deleteConversation } from "@/api/conversations";
 import { ConversationItem } from "./ConversationItem";
@@ -16,12 +17,15 @@ export function Sidebar() {
     removeConversation,
   } = useConversationsStore();
 
+  const [filter, setFilter] = useState("");
+
   const defaultEngine = engines[0]?.name ?? "";
 
   const handleNew = async () => {
     const conv = await createConversation(defaultEngine);
     addConversation(conv);
     setActiveId(conv.id);
+    setFilter("");
   };
 
   const handleDelete = async (id: string) => {
@@ -29,6 +33,13 @@ export function Sidebar() {
     removeConversation(id);
   };
 
+  const normalizedFilter = filter.trim().toLowerCase();
+  const visibleConversations = normalizedFilter
+    ? conversations.filter((c) =>
+        c.title.toLowerCase().includes(normalizedFilter)
+      )
+    : conversations;
+
   return (
     <aside className="w-64 flex flex-col border-r border-border h-full bg-muted/40">
       {/* Brand header */}
@@ -49,22 +60,41 @@ export function Sidebar() {
         </button>
       </div>
 
+      {/* Filter */}
+      <div className="px-3 py-2 border-b border-border">
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Filter conversations…"
+            className="w-full pl-7 pr-2 py-1.5 text-xs bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary/50 placeholder:text-muted-foreground/40"
+          />
+        </div>
+      </div>
+
       {/* Conversations */}
       <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
-        {conversations.length === 0 && (
+        {conversations.length === 0 ? (
           <p className="text-xs text-muted-foreground px-2 py-4 text-center">
             No conversations yet
           </p>
+        ) : visibleConversations.length === 0 ? (
+          <p className="text-xs text-muted-foreground px-2 py-4 text-center">
+            No matching conversations
+          </p>
+        ) : (
+          visibleConversations.map((conv) => (
+            <ConversationItem
+              key={conv.id}
+              conversation={conv}
+              isActive={conv.id === activeId}
+              onSelect={() => setActiveId(conv.id)}
+              onDelete={() => handleDelete(conv.id)}
+            />
+          ))
         )}
-        {conversations.map((conv) => (
-          <ConversationItem
-            key={conv.id}
-            conversation={conv}
-            isActive={conv.id === activeId}
-            onSelect={() => setActiveId(conv.id)}
-            onDelete={() => handleDelete(conv.id)}
-          />
-        ))}
       </div>
 
       {/* Footer: theme switcher + DataHub badge */}