apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-31 19:45:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: Refactor connector popup to include new components for active and all connectors, enhance indexing configuration view, and improve date range selection functionality.

Browse source
This commit is contained in:
Anish Sarkar 2025-12-30 20:07:15 +05:30
parent 2898192ac4
commit 32b4a09c0e
11 changed files with 1298 additions and 930 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,89 @@
"use client";
import { Search } from "lucide-react";
import { type FC } from "react";
import {
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import {
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
import { cn } from "@/lib/utils";
interface ConnectorDialogHeaderProps {
activeTab: string;
totalSourceCount: number;
searchQuery: string;
onTabChange: (value: string) => void;
onSearchChange: (query: string) => void;
isScrolled: boolean;
}
export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
activeTab,
totalSourceCount,
searchQuery,
onTabChange,
onSearchChange,
isScrolled,
}) => {
return (
<div
className={cn(
"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
)}
>
<DialogHeader>
<DialogTitle className="text-2xl sm:text-3xl font-semibold tracking-tight">
Connectors
</DialogTitle>
<DialogDescription className="text-sm sm:text-base text-muted-foreground/80 mt-1 sm:mt-1.5">
Search across all your apps and data in one place.
</DialogDescription>
</DialogHeader>
<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
<TabsTrigger
value="all"
className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
>
All Connectors
</TabsTrigger>
<TabsTrigger
value="active"
className="group px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground relative"
>
<span className="relative">
Active
<span className="absolute bottom-[-13.5px] left-1/2 -translate-x-1/2 w-12 h-[1.5px] bg-foreground dark:bg-white opacity-0 group-data-[state=active]:opacity-100 transition-all duration-200" />
</span>
{totalSourceCount > 0 && (
<span className="px-1.5 py-0.5 rounded-full bg-muted-foreground/15 text-[10px] font-bold">
{totalSourceCount}
</span>
)}
</TabsTrigger>
</TabsList>
<div className="w-full sm:w-72 sm:pb-1">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
<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"
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
/>
</div>
</div>
</div>
</div>
);
};