From 02323e7b55da78c3de0ec71dd20904f6bed49c16 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 6 Apr 2026 12:56:29 +0530
Subject: [PATCH] refactor: enhance DocumentsFilters component with ToggleGroup
 for folder creation and improve search functionality

---
 .../(manage)/components/DocumentsFilters.tsx  | 232 +++++++++---------
 .../components/new-chat/model-selector.tsx    |   7 +-
 .../components/shared/image-config-dialog.tsx |   2 +-
 .../components/shared/model-config-dialog.tsx |   2 +-
 4 files changed, 124 insertions(+), 119 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
index b85af13b7..b043c61e9 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { DocumentTypeEnum } from "@/contracts/types/document.types";
 import { getDocumentTypeIcon, getDocumentTypeLabel } from "./DocumentTypeIcon";
@@ -63,109 +64,129 @@ export function DocumentsFilters({
 	return (
 		<div className="flex select-none">
 			<div className="flex items-center gap-2 w-full">
-				{/* Type Filter */}
-				<Popover>
-					<PopoverTrigger asChild>
-						<Button
-							variant="outline"
-							size="icon"
-							className="h-9 w-9 shrink-0 border-dashed border-sidebar-border text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border bg-sidebar"
-						>
-							<ListFilter size={14} />
-							{activeTypes.length > 0 && (
-								<span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[9px] font-medium text-primary-foreground">
-									{activeTypes.length}
-								</span>
-							)}
-						</Button>
-					</PopoverTrigger>
-					<PopoverContent className="w-56 md:w-52 !p-0 overflow-hidden" align="end">
-						<div>
-							{/* Search input */}
-							<div className="p-2">
-								<div className="relative">
-									<Search className="absolute left-0.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-									<Input
-										placeholder="Search types"
-										value={typeSearchQuery}
-										onChange={(e) => setTypeSearchQuery(e.target.value)}
-										className="h-6 pl-6 text-sm bg-transparent border-0 shadow-none"
-									/>
-								</div>
-							</div>
+				{/* Filter + New Folder Toggle Group */}
+				<ToggleGroup type="multiple" variant="outline" value={[]}>
+					{onCreateFolder && (
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<ToggleGroupItem
+									value="folder"
+									className="h-9 w-9 shrink-0 border-sidebar-border text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border bg-sidebar"
+									onClick={(e) => {
+										e.preventDefault();
+										onCreateFolder();
+									}}
+								>
+									<FolderPlus size={14} />
+								</ToggleGroupItem>
+							</TooltipTrigger>
+							<TooltipContent>New folder</TooltipContent>
+						</Tooltip>
+					)}
 
-							<div
-								className="max-h-[300px] overflow-y-auto overflow-x-hidden py-1.5 px-1.5"
-								onScroll={handleScroll}
-								style={{
-									maskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
-									WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
-								}}
-							>
-								{filteredTypes.length === 0 ? (
-									<div className="py-6 text-center text-sm text-muted-foreground">
-										No types found
+					<Popover>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<PopoverTrigger asChild>
+									<ToggleGroupItem
+										value="filter"
+										className="relative h-9 w-9 shrink-0 border-sidebar-border text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border bg-sidebar"
+									>
+										<ListFilter size={14} />
+										{activeTypes.length > 0 && (
+											<span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[9px] font-medium text-primary-foreground">
+												{activeTypes.length}
+											</span>
+										)}
+									</ToggleGroupItem>
+								</PopoverTrigger>
+							</TooltipTrigger>
+							<TooltipContent>Filter by type</TooltipContent>
+						</Tooltip>
+						<PopoverContent className="w-56 md:w-52 !p-0 overflow-hidden" align="start">
+							<div>
+								<div className="p-2">
+									<div className="relative">
+										<Search className="absolute left-0.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+										<Input
+											placeholder="Search types"
+											value={typeSearchQuery}
+											onChange={(e) => setTypeSearchQuery(e.target.value)}
+											className="h-6 pl-6 text-sm bg-transparent border-0 shadow-none"
+										/>
 									</div>
-								) : (
-									filteredTypes.map((value: DocumentTypeEnum, i) => (
-										<div
-											role="option"
-											aria-selected={activeTypes.includes(value)}
-											tabIndex={0}
-											key={value}
-											className="flex w-full items-center gap-2.5 py-2 px-3 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors cursor-pointer text-left"
-											onClick={() => onToggleType(value, !activeTypes.includes(value))}
-											onKeyDown={(e) => {
-												if (e.key === "Enter" || e.key === " ") {
-													e.preventDefault();
-													onToggleType(value, !activeTypes.includes(value));
-												}
+								</div>
+
+								<div
+									className="max-h-[300px] overflow-y-auto overflow-x-hidden py-1.5 px-1.5"
+									onScroll={handleScroll}
+									style={{
+										maskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+										WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+									}}
+								>
+									{filteredTypes.length === 0 ? (
+										<div className="py-6 text-center text-sm text-muted-foreground">
+											No types found
+										</div>
+									) : (
+										filteredTypes.map((value: DocumentTypeEnum, i) => (
+											<div
+												role="option"
+												aria-selected={activeTypes.includes(value)}
+												tabIndex={0}
+												key={value}
+												className="flex w-full items-center gap-2.5 py-2 px-3 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors cursor-pointer text-left"
+												onClick={() => onToggleType(value, !activeTypes.includes(value))}
+												onKeyDown={(e) => {
+													if (e.key === "Enter" || e.key === " ") {
+														e.preventDefault();
+														onToggleType(value, !activeTypes.includes(value));
+													}
+												}}
+											>
+												<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted/50 text-foreground/80">
+													{getDocumentTypeIcon(value, "h-4 w-4")}
+												</div>
+												<div className="flex flex-col min-w-0 flex-1 gap-0.5">
+													<span className="text-[13px] font-medium text-foreground truncate leading-tight">
+														{getDocumentTypeLabel(value)}
+													</span>
+													<span className="text-[11px] text-muted-foreground leading-tight">
+														{typeCounts.get(value)} document
+														{(typeCounts.get(value) ?? 0) !== 1 ? "s" : ""}
+													</span>
+												</div>
+												<Checkbox
+													id={`${id}-${i}`}
+													checked={activeTypes.includes(value)}
+													onCheckedChange={(checked: boolean) => onToggleType(value, !!checked)}
+													className="h-4 w-4 shrink-0 rounded border-muted-foreground/30 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+												/>
+											</div>
+										))
+									)}
+								</div>
+								{activeTypes.length > 0 && (
+									<div className="px-3 pt-1.5 pb-1.5 border-t border-border dark:border-neutral-700">
+										<Button
+											variant="ghost"
+											size="sm"
+											className="w-full h-7 text-[11px] text-muted-foreground hover:text-foreground hover:bg-neutral-200 dark:hover:bg-neutral-700"
+											onClick={() => {
+												activeTypes.forEach((t) => {
+													onToggleType(t, false);
+												});
 											}}
 										>
-											{/* Icon */}
-											<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted/50 text-foreground/80">
-												{getDocumentTypeIcon(value, "h-4 w-4")}
-											</div>
-											{/* Text content */}
-											<div className="flex flex-col min-w-0 flex-1 gap-0.5">
-												<span className="text-[13px] font-medium text-foreground truncate leading-tight">
-													{getDocumentTypeLabel(value)}
-												</span>
-												<span className="text-[11px] text-muted-foreground leading-tight">
-													{typeCounts.get(value)} document
-													{(typeCounts.get(value) ?? 0) !== 1 ? "s" : ""}
-												</span>
-											</div>
-											{/* Checkbox */}
-											<Checkbox
-												id={`${id}-${i}`}
-												checked={activeTypes.includes(value)}
-												onCheckedChange={(checked: boolean) => onToggleType(value, !!checked)}
-												className="h-4 w-4 shrink-0 rounded border-muted-foreground/30 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
-											/>
-										</div>
-									))
+											Clear filters
+										</Button>
+									</div>
 								)}
 							</div>
-							{activeTypes.length > 0 && (
-								<div className="px-3 pt-1.5 pb-1.5 border-t border-border dark:border-neutral-700">
-									<Button
-										variant="ghost"
-										size="sm"
-										className="w-full h-7 text-[11px] text-muted-foreground hover:text-foreground hover:bg-neutral-200 dark:hover:bg-neutral-700"
-										onClick={() => {
-											activeTypes.forEach((t) => {
-												onToggleType(t, false);
-											});
-										}}
-									>
-										Clear filters
-									</Button>
-								</div>
-							)}
-						</div>
-					</PopoverContent>
-				</Popover>
+						</PopoverContent>
+					</Popover>
+				</ToggleGroup>
 
 				{/* Search Input */}
 				<div className="relative flex-1 min-w-0">
@@ -197,23 +218,6 @@ export function DocumentsFilters({
 					)}
 				</div>
 
-				{/* New Folder Button */}
-				{onCreateFolder && (
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant="outline"
-								size="icon"
-								className="h-9 w-9 shrink-0 border-dashed border-sidebar-border text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border bg-sidebar"
-								onClick={onCreateFolder}
-							>
-								<FolderPlus size={14} />
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent>New folder</TooltipContent>
-					</Tooltip>
-				)}
-
 				{/* Upload Button */}
 				<Button
 					data-joyride="upload-button"
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index b207d82b4..39f88f794 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { Bot, Check, ChevronDown, Edit3, ImageIcon, Plus, Zap } from "lucide-react";
+import { Bot, Check, ChevronDown, Edit3, ImageIcon, Plus, Search, Zap } from "lucide-react";
 import { type UIEvent, useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -344,7 +344,7 @@ export function ModelSelector({
 							>
 								<CommandEmpty className="py-8 text-center">
 									<div className="flex flex-col items-center gap-2">
-										<Bot className="size-8 text-muted-foreground" />
+										<Search className="size-8 text-muted-foreground" />
 										<p className="text-sm text-muted-foreground">No models found</p>
 										<p className="text-xs text-muted-foreground/60">Try a different search term</p>
 									</div>
@@ -531,8 +531,9 @@ export function ModelSelector({
 							>
 								<CommandEmpty className="py-8 text-center">
 									<div className="flex flex-col items-center gap-2">
-										<ImageIcon className="size-8 text-muted-foreground" />
+										<Search className="size-8 text-muted-foreground" />
 										<p className="text-sm text-muted-foreground">No image models found</p>
+										<p className="text-xs text-muted-foreground/60">Try a different search term</p>
 									</div>
 								</CommandEmpty>
 
diff --git a/surfsense_web/components/shared/image-config-dialog.tsx b/surfsense_web/components/shared/image-config-dialog.tsx
index 1cfbf8842..2ae53ccca 100644
--- a/surfsense_web/components/shared/image-config-dialog.tsx
+++ b/surfsense_web/components/shared/image-config-dialog.tsx
@@ -433,7 +433,7 @@ export function ImageConfigDialog({
 							className="relative text-sm h-9 min-w-[120px]"
 						>
 							<span className={isSubmitting ? "opacity-0" : ""}>
-								{mode === "edit" ? "Save Changes" : "Create & Use"}
+								{mode === "edit" ? "Save Changes" : "Add Model"}
 							</span>
 							{isSubmitting && <Spinner size="sm" className="absolute" />}
 						</Button>
diff --git a/surfsense_web/components/shared/model-config-dialog.tsx b/surfsense_web/components/shared/model-config-dialog.tsx
index 84ba821fc..4d2373b49 100644
--- a/surfsense_web/components/shared/model-config-dialog.tsx
+++ b/surfsense_web/components/shared/model-config-dialog.tsx
@@ -312,7 +312,7 @@ export function ModelConfigDialog({
 							className="relative text-sm h-9 min-w-[120px]"
 						>
 							<span className={isSubmitting ? "opacity-0" : ""}>
-								{mode === "edit" ? "Save Changes" : "Create & Use"}
+								{mode === "edit" ? "Save Changes" : "Add Model"}
 							</span>
 							{isSubmitting && <Spinner size="sm" className="absolute" />}
 						</Button>