feat: made agent file sytem optimized

surfsense_web/components/documents/CreateFolderDialog.tsx

@@ -69,7 +69,9 @@ export function CreateFolderDialog({
 
 				<form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:gap-4">
 					<div className="flex flex-col gap-2">
-						<Label htmlFor="folder-name" className="text-sm">Folder name</Label>
+						<Label htmlFor="folder-name" className="text-sm">
+							Folder name
+						</Label>
 						<Input
 							ref={inputRef}
 							id="folder-name"
@@ -91,11 +93,7 @@ export function CreateFolderDialog({
 						>
 							Cancel
 						</Button>
-						<Button
-							type="submit"
-							disabled={!name.trim()}
-							className="h-8 sm:h-9 text-xs sm:text-sm"
-						>
+						<Button type="submit" disabled={!name.trim()} className="h-8 sm:h-9 text-xs sm:text-sm">
 							Create
 						</Button>
 					</DialogFooter>

surfsense_web/components/documents/DocumentNode.tsx

@@ -1,6 +1,15 @@
 "use client";
 
-import { AlertCircle, Clock, Download, Eye, MoreHorizontal, Move, PenLine, Trash2 } from "lucide-react";
+import {
+	AlertCircle,
+	Clock,
+	Download,
+	Eye,
+	MoreHorizontal,
+	Move,
+	PenLine,
+	Trash2,
+} from "lucide-react";
 import React, { useCallback, useRef, useState } from "react";
 import { useDrag } from "react-dnd";
 import { getDocumentTypeIcon } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
@@ -112,14 +121,15 @@ export const DocumentNode = React.memo(function DocumentNode({
 	return (
 		<ContextMenu onOpenChange={onContextMenuOpenChange}>
 			<ContextMenuTrigger asChild>
+				{/* biome-ignore lint/a11y/useSemanticElements: contains nested interactive children (Checkbox) that render as <button>, making a semantic <button> wrapper invalid */}
 				<div
 					role="button"
 					tabIndex={0}
 					ref={attachRef}
 					className={cn(
-					"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none text-left",
-					isMentioned && "bg-accent/30",
-					isDragging && "opacity-40"
+						"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none text-left",
+						isMentioned && "bg-accent/30",
+						isDragging && "opacity-40"
 					)}
 					style={{ paddingLeft: `${depth * 16 + 4}px` }}
 					onClick={handleCheckChange}
@@ -130,54 +140,54 @@ export const DocumentNode = React.memo(function DocumentNode({
 						}
 					}}
 				>
-				{(() => {
-					if (statusState === "pending") {
+					{(() => {
+						if (statusState === "pending") {
+							return (
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+											<Clock className="h-3.5 w-3.5 text-muted-foreground/60" />
+										</span>
+									</TooltipTrigger>
+									<TooltipContent side="top">Pending - waiting to be synced</TooltipContent>
+								</Tooltip>
+							);
+						}
+						if (statusState === "processing") {
+							return (
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+											<Spinner size="xs" className="text-primary" />
+										</span>
+									</TooltipTrigger>
+									<TooltipContent side="top">Syncing</TooltipContent>
+								</Tooltip>
+							);
+						}
+						if (statusState === "failed") {
+							return (
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+											<AlertCircle className="h-3.5 w-3.5 text-destructive" />
+										</span>
+									</TooltipTrigger>
+									<TooltipContent side="top" className="max-w-xs">
+										{doc.status?.reason || "Processing failed"}
+									</TooltipContent>
+								</Tooltip>
+							);
+						}
 						return (
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
-										<Clock className="h-3.5 w-3.5 text-muted-foreground/60" />
-									</span>
-								</TooltipTrigger>
-								<TooltipContent side="top">Pending - waiting to be synced</TooltipContent>
-							</Tooltip>
+							<Checkbox
+								checked={isMentioned}
+								onCheckedChange={handleCheckChange}
+								onClick={(e) => e.stopPropagation()}
+								className="h-3.5 w-3.5 shrink-0"
+							/>
 						);
-					}
-					if (statusState === "processing") {
-						return (
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
-										<Spinner size="xs" className="text-primary" />
-									</span>
-								</TooltipTrigger>
-								<TooltipContent side="top">Syncing</TooltipContent>
-							</Tooltip>
-						);
-					}
-					if (statusState === "failed") {
-						return (
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
-										<AlertCircle className="h-3.5 w-3.5 text-destructive" />
-									</span>
-								</TooltipTrigger>
-								<TooltipContent side="top" className="max-w-xs">
-									{doc.status?.reason || "Processing failed"}
-								</TooltipContent>
-							</Tooltip>
-						);
-					}
-					return (
-						<Checkbox
-							checked={isMentioned}
-							onCheckedChange={handleCheckChange}
-							onClick={(e) => e.stopPropagation()}
-							className="h-3.5 w-3.5 shrink-0"
-						/>
-					);
-				})()}
+					})()}
 
 					<span className="flex-1 min-w-0 truncate">{doc.title}</span>
 
@@ -188,17 +198,19 @@ export const DocumentNode = React.memo(function DocumentNode({
 						)}
 					</span>
 
-				<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
-					<DropdownMenuTrigger asChild>
-						<Button
-							variant="ghost"
-							size="icon"
-							className={cn(
-								"hidden sm:inline-flex h-6 w-6 shrink-0 hover:bg-transparent",
-								dropdownOpen ? "opacity-100 bg-accent hover:bg-accent" : "opacity-0 group-hover:opacity-100"
-							)}
-							onClick={(e) => e.stopPropagation()}
-						>
+					<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+						<DropdownMenuTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								className={cn(
+									"hidden sm:inline-flex h-6 w-6 shrink-0 hover:bg-transparent",
+									dropdownOpen
+										? "opacity-100 bg-accent hover:bg-accent"
+										: "opacity-0 group-hover:opacity-100"
+								)}
+								onClick={(e) => e.stopPropagation()}
+							>
 								<MoreHorizontal className="h-3.5 w-3.5" />
 							</Button>
 						</DropdownMenuTrigger>

surfsense_web/components/documents/FolderNode.tsx

@@ -15,7 +15,6 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import type { FolderSelectionState } from "./FolderTreeView";
 import {
 	ContextMenu,
 	ContextMenuContent,
@@ -29,6 +28,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import type { FolderSelectionState } from "./FolderTreeView";
 
 export const DND_TYPES = {
 	FOLDER: "FOLDER",
@@ -263,7 +263,9 @@ export const FolderNode = React.memo(function FolderNode({
 					</span>
 
 					<Checkbox
-						checked={selectionState === "all" ? true : selectionState === "some" ? "indeterminate" : false}
+						checked={
+							selectionState === "all" ? true : selectionState === "some" ? "indeterminate" : false
+						}
 						onCheckedChange={handleCheckChange}
 						onClick={(e) => e.stopPropagation()}
 						className="h-3.5 w-3.5 shrink-0"

surfsense_web/components/documents/FolderTreeView.tsx

@@ -33,6 +33,7 @@ interface FolderTreeViewProps {
 	onMoveDocument: (doc: DocumentNodeDoc) => void;
 	onExportDocument?: (doc: DocumentNodeDoc, format: string) => void;
 	activeTypes: DocumentTypeEnum[];
+	searchQuery?: string;
 	onDropIntoFolder?: (
 		itemType: "folder" | "document",
 		itemId: number,
@@ -69,6 +70,7 @@ export function FolderTreeView({
 	onMoveDocument,
 	onExportDocument,
 	activeTypes,
+	searchQuery,
 	onDropIntoFolder,
 	onReorderFolder,
 }: FolderTreeViewProps) {
@@ -97,13 +99,13 @@ export function FolderTreeView({
 	const handleCancelRename = useCallback(() => setRenamingFolderId(null), [setRenamingFolderId]);
 
 	const hasDescendantMatch = useMemo(() => {
-		if (activeTypes.length === 0) return null;
+		if (activeTypes.length === 0 && !searchQuery) return null;
 		const match: Record<number, boolean> = {};
 
 		function check(folderId: number): boolean {
 			if (match[folderId] !== undefined) return match[folderId];
-			const childDocs = (docsByFolder[folderId] ?? []).some((d) =>
-				activeTypes.includes(d.document_type as DocumentTypeEnum)
+			const childDocs = (docsByFolder[folderId] ?? []).some(
+				(d) => activeTypes.length === 0 || activeTypes.includes(d.document_type as DocumentTypeEnum)
 			);
 			if (childDocs) {
 				match[folderId] = true;
@@ -124,7 +126,7 @@ export function FolderTreeView({
 			check(f.id);
 		}
 		return match;
-	}, [folders, docsByFolder, foldersByParent, activeTypes]);
+	}, [folders, docsByFolder, foldersByParent, activeTypes, searchQuery]);
 
 	const folderSelectionStates = useMemo(() => {
 		const states: Record<number, FolderSelectionState> = {};
@@ -177,12 +179,15 @@ export function FolderTreeView({
 				after: i < visibleFolders.length - 1 ? visibleFolders[i + 1].position : null,
 			};
 
+			const isAutoExpanded = !!searchQuery && !!hasDescendantMatch?.[f.id];
+			const isExpanded = expandedIds.has(f.id) || isAutoExpanded;
+
 			nodes.push(
 				<FolderNode
 					key={`folder-${f.id}`}
 					folder={f}
 					depth={depth}
-					isExpanded={expandedIds.has(f.id)}
+					isExpanded={isExpanded}
 					isRenaming={renamingFolderId === f.id}
 					childCount={folderChildCounts[f.id] ?? 0}
 					selectionState={folderSelectionStates[f.id] ?? "none"}
@@ -202,7 +207,7 @@ export function FolderTreeView({
 				/>
 			);
 
-			if (expandedIds.has(f.id)) {
+			if (isExpanded) {
 				nodes.push(...renderLevel(f.id, depth + 1));
 			}
 		}
@@ -240,7 +245,7 @@ export function FolderTreeView({
 		);
 	}
 
-	if (treeNodes.length === 0 && activeTypes.length > 0) {
+	if (treeNodes.length === 0 && (activeTypes.length > 0 || searchQuery)) {
 		return (
 			<div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-12 text-muted-foreground">
 				<CirclePlus className="h-10 w-10 rotate-45" />