apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-29 02:46:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: implement search functionality in connector popup

Browse source 
- Added a search input in the ConnectorDialogHeader to filter active connectors based on user input.
- Enhanced the ActiveConnectorsTab to filter displayed connectors and document types according to the search query.
- Introduced a clear search button for improved user experience when managing connectors.
This commit is contained in:
Anish Sarkar 2026-01-02 01:23:04 +05:30
parent afe4254f74
commit aa96e08231
3 changed files with 35 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { Search } from "lucide-react";
import { Search, X } from "lucide-react";
import type { FC } from "react";
import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { TabsList, TabsTrigger } from "@/components/ui/tabs";
@ -67,10 +67,23 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
<input
type="text"
placeholder="Search"
className="w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
className={cn(
"w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50",
searchQuery ? "pr-9" : "pr-4"
)}
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
/>
{searchQuery && (
<button
type="button"
onClick={() => onSearchChange("")}
className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
aria-label="Clear search"
>
<X className="size-4" />
</button>
)}
</div>
</div>
</div>