fix merge conflicts

frontend/components/knowledge-dropdown.tsx

@@ -7,7 +7,6 @@ import {
 	FolderOpen,
 	Loader2,
 	PlugZap,
-	Plus,
 	Upload,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -29,15 +28,7 @@ import { useTask } from "@/contexts/task-context";
 import { cn } from "@/lib/utils";
 import type { File as SearchFile } from "@/src/app/api/queries/useGetSearchQuery";
 
-interface KnowledgeDropdownProps {
+export function KnowledgeDropdown() {
-	active?: boolean;
-	variant?: "navigation" | "button";
-}
-
-export function KnowledgeDropdown({
-	active,
-	variant = "navigation",
-}: KnowledgeDropdownProps) {
 	const { addTask } = useTask();
 	const { refetch: refetchTasks } = useGetTasksQuery();
 	const queryClient = useQueryClient();
@@ -498,28 +489,16 @@ export function KnowledgeDropdown({
 	return (
 		<>
 			<div ref={dropdownRef} className="relative">
-				<button
+				<Button
 					type="button"
 					onClick={() => !isLoading && setIsOpen(!isOpen)}
 					disabled={isLoading}
-					className={cn(
-						variant === "button"
-							? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-							: "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
-						variant === "navigation" && active
-							? "bg-accent text-accent-foreground shadow-sm"
-							: variant === "navigation"
-								? "text-foreground hover:text-accent-foreground"
-								: "",
-					)}
 				>
-					{variant === "button" ? (
+			
 						<>
-							{isLoading ? (
+							{isLoading && 
 								<Loader2 className="h-4 w-4 animate-spin" />
-							) : (
+							}
-								<Plus className="h-4 w-4" />
-							)}
 							<span>
 								{isLoading
 									? fileUploading
@@ -542,34 +521,7 @@ export function KnowledgeDropdown({
 								/>
 							)}
 						</>
-					) : (
+				</Button>
-						<>
-							<div className="flex items-center flex-1">
-								{isLoading ? (
-									<Loader2 className="h-4 w-4 mr-3 shrink-0 animate-spin" />
-								) : (
-									<Upload
-										className={cn(
-											"h-4 w-4 mr-3 shrink-0",
-											active
-												? "text-accent-foreground"
-												: "text-muted-foreground group-hover:text-foreground",
-										)}
-									/>
-								)}
-								Knowledge
-							</div>
-							{!isLoading && (
-								<ChevronDown
-									className={cn(
-										"h-4 w-4 transition-transform",
-										isOpen && "rotate-180",
-									)}
-								/>
-							)}
-						</>
-					)}
-				</button>
 
 				{isOpen && !isLoading && (
 					<div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">

frontend/src/app/knowledge/page.tsx

@@ -2,7 +2,7 @@
 
 import type { ColDef, GetRowIdParams } from "ag-grid-community";
 import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
-import { Building2, Cloud, HardDrive, Search, Trash2, X } from "lucide-react";
+import { Cloud, FileIcon, Search, Trash2, X } from "lucide-react";
 import { useRouter } from "next/navigation";
 import {
   type ChangeEvent,
@@ -11,13 +11,10 @@ import {
   useRef,
   useState,
 } from "react";
-import { SiGoogledrive } from "react-icons/si";
-import { TbBrandOnedrive } from "react-icons/tb";
 import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
-import { useLayout } from "@/contexts/layout-context";
 import { useTask } from "@/contexts/task-context";
 import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
 import "@/components/AgGrid/registerAgGridModules";
@@ -28,25 +25,29 @@ import { filterAccentClasses } from "@/components/knowledge-filter-panel";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
 import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
+import GoogleDriveIcon from "../settings/icons/google-drive-icon";
+import OneDriveIcon from "../settings/icons/one-drive-icon";
+import SharePointIcon from "../settings/icons/share-point-icon";
+import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
   switch (connectorType) {
     case "google_drive":
       return (
-				<SiGoogledrive className="h-4 w-4 text-foreground flex-shrink-0" />
+        <GoogleDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />
       );
     case "onedrive":
-			return (
+      return <OneDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />;
-				<TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
-			);
     case "sharepoint":
-			return <Building2 className="h-4 w-4 text-foreground flex-shrink-0" />;
+      return (
+        <SharePointIcon className="h-4 w-4 text-foreground flex-shrink-0" />
+      );
     case "s3":
       return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />;
     default:
       return (
-				<HardDrive className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+        <FileIcon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
       );
   }
 }
@@ -54,9 +55,13 @@ function getSourceIcon(connectorType?: string) {
 function SearchPage() {
   const router = useRouter();
   const { isMenuOpen, files: taskFiles, refreshTasks } = useTask();
-  const { totalTopOffset } = useLayout();
+  const {
-	const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
+    selectedFilter,
-		useKnowledgeFilter();
+    setSelectedFilter,
+    parsedFilterData,
+    isPanelOpen,
+    queryOverride,
+  } = useKnowledgeFilter();
   const [selectedRows, setSelectedRows] = useState<File[]>([]);
   const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
 
@@ -67,8 +72,8 @@ function SearchPage() {
   }, [refreshTasks]);
 
   const { data: searchData = [], isFetching } = useGetSearchQuery(
-		parsedFilterData?.query || "*",
+    queryOverride,
-		parsedFilterData,
+    parsedFilterData
   );
   // Convert TaskFiles to File format and merge with backend results
   const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
@@ -84,7 +89,7 @@ function SearchPage() {
 
   // Create a map of task files by filename for quick lookup
   const taskFileMap = new Map(
-		taskFilesAsFiles.map((file) => [file.filename, file]),
+    taskFilesAsFiles.map((file) => [file.filename, file])
   );
 
   // Override backend files with task file status if they exist
@@ -107,7 +112,7 @@ function SearchPage() {
     return (
       taskFile.status !== "active" &&
       !backendFiles.some(
-				(backendFile) => backendFile.filename === taskFile.filename,
+        (backendFile) => backendFile.filename === taskFile.filename
       )
     );
   });
@@ -115,10 +120,6 @@ function SearchPage() {
   // Combine task files first, then backend files
   const fileResults = [...backendFiles, ...filteredTaskFiles];
 
-	const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
-		gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
-	};
-
   const gridRef = useRef<AgGridReact>(null);
 
   const columnDefs = [
@@ -138,7 +139,9 @@ function SearchPage() {
         return (
           <div className="flex items-center overflow-hidden w-full">
             <div
-							className={`transition-opacity duration-200 ${isActive ? "w-0" : "w-7"}`}
+              className={`transition-opacity duration-200 ${
+                isActive ? "w-0" : "w-7"
+              }`}
             ></div>
             <button
               type="button"
@@ -149,8 +152,8 @@ function SearchPage() {
                 }
                 router.push(
                   `/knowledge/chunks?filename=${encodeURIComponent(
-										data?.filename ?? "",
+                    data?.filename ?? ""
-									)}`,
+                  )}`
                 );
               }}
             >
@@ -182,12 +185,12 @@ function SearchPage() {
     {
       field: "chunkCount",
       headerName: "Chunks",
-			valueFormatter: (params: CustomCellRendererProps<File>) => params.data?.chunkCount?.toString() || "-",
+      valueFormatter: (params: CustomCellRendererProps<File>) =>
+        params.data?.chunkCount?.toString() || "-",
     },
     {
       field: "avgScore",
       headerName: "Avg score",
-			initialFlex: 0.5,
       cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
         return (
           <span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
@@ -250,7 +253,7 @@ function SearchPage() {
     try {
       // Delete each file individually since the API expects one filename at a time
       const deletePromises = selectedRows.map((row) =>
-				deleteDocumentMutation.mutateAsync({ filename: row.filename }),
+        deleteDocumentMutation.mutateAsync({ filename: row.filename })
       );
 
       await Promise.all(deletePromises);
@@ -258,7 +261,7 @@ function SearchPage() {
       toast.success(
         `Successfully deleted ${selectedRows.length} document${
           selectedRows.length > 1 ? "s" : ""
-				}`,
+        }`
       );
       setSelectedRows([]);
       setShowBulkDeleteDialog(false);
@@ -271,74 +274,21 @@ function SearchPage() {
       toast.error(
         error instanceof Error
           ? error.message
-					: "Failed to delete some documents",
+          : "Failed to delete some documents"
       );
     }
   };
 
   return (
-    <div
+    <>
-      className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
+      <div className="flex flex-col h-full">
-        isMenuOpen && isPanelOpen
-          ? "md:right-[704px]"
-          : // Both open: 384px (menu) + 320px (KF panel)
-          isMenuOpen
-          ? "md:right-96"
-          : // Only menu open: 384px
-          isPanelOpen
-          ? "md:right-80"
-          : // Only KF panel open: 320px
-            "md:right-6" // Neither open: 24px
-      }`}
-      style={{ top: `${totalTopOffset}px` }}
-    >
-      <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
         <div className="flex items-center justify-between mb-6">
           <h2 className="text-lg font-semibold">Project Knowledge</h2>
-          <KnowledgeDropdown variant="button" />
         </div>
 
         {/* Search Input Area */}
-				<div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
+        <div className="flex-1 flex items-center flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
-					<form className="flex gap-3">
+          <KnowledgeSearchInput />
-						<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
-							{selectedFilter?.name && (
-								<div
-									className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
-										filterAccentClasses[parsedFilterData?.color || "zinc"]
-									}`}
-								>
-									<span className="truncate">{selectedFilter?.name}</span>
-									<X
-										aria-label="Remove filter"
-										className="h-4 w-4 flex-shrink-0 cursor-pointer"
-										onClick={() => setSelectedFilter(null)}
-									/>
-								</div>
-							)}
-							<Search
-								className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
-							/>
-							<input
-								className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
-								name="search-query"
-								id="search-query"
-								type="text"
-								placeholder="Enter your search query..."
-								onChange={handleTableSearch}
-							/>
-						</div>
-						{/* <Button
-              type="submit"
-              variant="outline"
-              className="rounded-lg p-0 flex-shrink-0"
-            >
-              {isFetching ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Search className="h-4 w-4" />
-              )}
-            </Button> */}
           {/* //TODO: Implement sync button */}
           {/* <Button
               type="button"
@@ -355,10 +305,12 @@ function SearchPage() {
               className="rounded-lg flex-shrink-0"
               onClick={() => setShowBulkDeleteDialog(true)}
             >
-								<Trash2 className="h-4 w-4" /> Delete
+              Delete
             </Button>
           )}
-					</form>
+          <div className="ml-auto">
+            <KnowledgeDropdown />
+          </div>
         </div>
         <AgGridReact
           className="w-full overflow-auto"
@@ -403,7 +355,7 @@ ${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
         onConfirm={handleBulkDelete}
         isLoading={deleteDocumentMutation.isPending}
       />
-		</div>
+    </>
   );
 }