From aaa8840e1df45ff78033177042539e134be48474 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Fri, 6 Mar 2026 22:22:28 +0530
Subject: [PATCH] feat: enhance DocumentsFilters and ModelSelector components
 with scroll position tracking and improved styling, improving user experience
 and visual consistency across the application

---
 .../(manage)/components/DocumentsFilters.tsx  | 52 ++++++++++++-------
 .../components/DocumentsTableShell.tsx        |  2 +-
 .../layout/ui/sidebar/DocumentsSidebar.tsx    |  3 +-
 .../layout/ui/sidebar/InboxSidebar.tsx        |  4 +-
 .../ui/sidebar/SidebarSlideOutPanel.tsx       |  2 +-
 .../components/new-chat/model-selector.tsx    | 31 +++++++++--
 6 files changed, 67 insertions(+), 27 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 fabbaee39..e24621074 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
@@ -2,7 +2,7 @@
 
 import { ListFilter, Search, Upload, X } from "lucide-react";
 import { useTranslations } from "next-intl";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -31,6 +31,13 @@ export function DocumentsFilters({
 	const { openDialog: openUploadDialog } = useDocumentUploadDialog();
 
 	const [typeSearchQuery, setTypeSearchQuery] = useState("");
+	const [scrollPos, setScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atTop = el.scrollTop <= 2;
+		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+		setScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+	}, []);
 
 	const uniqueTypes = useMemo(() => {
 		return Object.keys(typeCountsRecord).sort() as DocumentTypeEnum[];
@@ -61,7 +68,7 @@ export function DocumentsFilters({
 						<Button
 							variant="outline"
 							size="icon"
-							className="h-9 w-9 shrink-0 border-dashed border-border/60 text-muted-foreground hover:text-foreground hover:border-border"
+							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 && (
@@ -71,22 +78,29 @@ export function DocumentsFilters({
 							)}
 						</Button>
 					</PopoverTrigger>
-					<PopoverContent className="w-64 !p-0 overflow-hidden" align="end">
+					<PopoverContent className="w-64 !p-0 overflow-hidden bg-muted dark:border dark:border-neutral-700" align="end">
 						<div>
 							{/* Search input */}
-							<div className="p-2 border-b border-border/50">
-								<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 focus-visible:ring-0"
-									/>
+						<div className="p-2 border-b border-neutral-700">
+							<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 focus-visible:ring-0"
+								/>
 								</div>
 							</div>
 
-							<div className="max-h-[300px] overflow-y-auto overflow-x-hidden py-1.5 px-1.5">
+							<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
@@ -125,11 +139,11 @@ export function DocumentsFilters({
 								)}
 							</div>
 							{activeTypes.length > 0 && (
-								<div className="px-3 pt-1.5 pb-1.5 border-t border-border/50">
-									<Button
-										variant="ghost"
-										size="sm"
-										className="w-full h-7 text-[11px] text-muted-foreground hover:text-foreground"
+							<div className="px-3 pt-1.5 pb-1.5 border-t border-neutral-700">
+								<Button
+									variant="ghost"
+									size="sm"
+									className="w-full h-7 text-[11px] text-muted-foreground hover:text-foreground hover:bg-neutral-700"
 										onClick={() => {
 											activeTypes.forEach((t) => {
 												onToggleType(t, false);
@@ -152,7 +166,7 @@ export function DocumentsFilters({
 					<Input
 						id={`${id}-input`}
 						ref={inputRef}
-						className="peer h-9 w-full pl-9 pr-9 text-sm bg-background border-border/60 focus-visible:ring-1 focus-visible:ring-ring/30 select-none focus:select-text"
+						className="peer h-9 w-full pl-9 pr-9 text-sm bg-sidebar border-border/60 focus-visible:ring-1 focus-visible:ring-ring/30 select-none focus:select-text"
 						value={searchValue}
 						onChange={(e) => onSearch(e.target.value)}
 						placeholder="Search"
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
index 08bb7bb21..352be37d8 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
@@ -428,7 +428,7 @@ export function DocumentsTableShell({
 
 	return (
 		<div
-			className="bg-background overflow-hidden select-none border-t border-border/50 flex-1 flex flex-col min-h-0"
+			className="bg-sidebar overflow-hidden select-none border-t border-border/50 flex-1 flex flex-col min-h-0"
 		>
 			{/* Desktop Table View */}
 			<div className="hidden md:flex md:flex-col flex-1 min-h-0">
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index aa66ff424..2e1158a64 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -103,6 +103,7 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
 			try {
 				await deleteDocumentMutation({ id });
 				toast.success(t("delete_success") || "Document deleted");
+				setSidebarDocs((prev) => prev.filter((d) => d.id !== id));
 				if (isSearchMode) {
 					searchRemoveItems([id]);
 				}
@@ -112,7 +113,7 @@ export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps)
 				return false;
 			}
 		},
-		[deleteDocumentMutation, isSearchMode, t, searchRemoveItems]
+		[deleteDocumentMutation, isSearchMode, t, searchRemoveItems, setSidebarDocs]
 	);
 
 	const sortKeyRef = useRef(sortKey);
diff --git a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
index abb6f4daa..369b5920c 100644
--- a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
@@ -712,7 +712,7 @@ export function InboxSidebar({
 								</Tooltip>
 								<DropdownMenuContent
 									align="end"
-									className={cn("z-80 select-none max-h-[60vh] overflow-hidden flex flex-col", activeTab === "status" ? "w-52" : "w-44")}
+									className={cn("z-80 select-none max-h-[60vh] overflow-hidden flex flex-col bg-muted dark:border dark:border-neutral-700", activeTab === "status" ? "w-52" : "w-44")}
 								>
 									<DropdownMenuLabel className="text-xs text-muted-foreground/80 font-normal">
 										{t("filter") || "Filter"}
@@ -1097,7 +1097,7 @@ export function InboxSidebar({
 	if (isDocked && open && !isMobile) {
 		return (
 			<aside
-				className="h-full w-[360px] shrink-0 bg-background flex flex-col border-r"
+				className="h-full w-[360px] shrink-0 bg-sidebar text-sidebar-foreground flex flex-col border-r"
 				aria-label={t("inbox") || "Inbox"}
 			>
 				{inboxContent}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
index 805911f88..5edb6df2c 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
@@ -65,7 +65,7 @@ export function SidebarSlideOutPanel({
 							exit={{ x: "-100%" }}
 							transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
 							className={cn(
-								"h-full w-full bg-background flex flex-col pointer-events-auto select-none",
+								"h-full w-full bg-sidebar text-sidebar-foreground flex flex-col pointer-events-auto select-none",
 								"sm:border-r sm:shadow-xl"
 							)}
 							role="dialog"
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index ab8248dd9..785c86c4a 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -2,7 +2,7 @@
 
 import { useAtomValue } from "jotai";
 import { Bot, Check, ChevronDown, Edit3, ImageIcon, Plus, Zap } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, type UIEvent } from "react";
 import { toast } from "sonner";
 import {
 	globalImageGenConfigsAtom,
@@ -57,6 +57,17 @@ export function ModelSelector({
 	const [activeTab, setActiveTab] = useState<"llm" | "image">("llm");
 	const [llmSearchQuery, setLlmSearchQuery] = useState("");
 	const [imageSearchQuery, setImageSearchQuery] = useState("");
+	const [llmScrollPos, setLlmScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const [imageScrollPos, setImageScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const handleListScroll = useCallback(
+		(setter: typeof setLlmScrollPos) => (e: UIEvent<HTMLDivElement>) => {
+			const el = e.currentTarget;
+			const atTop = el.scrollTop <= 2;
+			const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+			setter(atTop ? "top" : atBottom ? "bottom" : "middle");
+		},
+		[]
+	);
 
 	// LLM data
 	const { data: llmUserConfigs, isLoading: llmUserLoading } = useAtomValue(newLLMConfigsAtom);
@@ -325,7 +336,14 @@ export function ModelSelector({
 								</div>
 							)}
 
-							<CommandList className="max-h-[300px] md:max-h-[400px] overflow-y-auto">
+							<CommandList
+								className="max-h-[300px] md:max-h-[400px] overflow-y-auto"
+								onScroll={handleListScroll(setLlmScrollPos)}
+								style={{
+									maskImage: `linear-gradient(to bottom, ${llmScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${llmScrollPos === "bottom" ? "black" : "transparent"})`,
+									WebkitMaskImage: `linear-gradient(to bottom, ${llmScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${llmScrollPos === "bottom" ? "black" : "transparent"})`,
+								}}
+							>
 								<CommandEmpty className="py-8 text-center">
 									<div className="flex flex-col items-center gap-2">
 										<Bot className="size-8 text-muted-foreground" />
@@ -505,7 +523,14 @@ export function ModelSelector({
 									/>
 								</div>
 							)}
-							<CommandList className="max-h-[300px] md:max-h-[400px] overflow-y-auto">
+							<CommandList
+								className="max-h-[300px] md:max-h-[400px] overflow-y-auto"
+								onScroll={handleListScroll(setImageScrollPos)}
+								style={{
+									maskImage: `linear-gradient(to bottom, ${imageScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${imageScrollPos === "bottom" ? "black" : "transparent"})`,
+									WebkitMaskImage: `linear-gradient(to bottom, ${imageScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${imageScrollPos === "bottom" ? "black" : "transparent"})`,
+								}}
+							>
 								<CommandEmpty className="py-8 text-center">
 									<div className="flex flex-col items-center gap-2">
 										<ImageIcon className="size-8 text-muted-foreground" />