From 74c95ee61f903989cf99081c80c4cc2c7d566de4 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 10 Mar 2026 11:49:06 +0530
Subject: [PATCH] feat: update ChatListItem UI for improved styling and
 accessibility; increase initial page size in use-documents hook

---
 .../layout/ui/sidebar/ChatListItem.tsx         | 18 +++++++++++-------
 surfsense_web/hooks/use-documents.ts           |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
index 078cea34e..82ba29ac9 100644
--- a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
@@ -2,7 +2,6 @@
 
 import {
 	ArchiveIcon,
-	MessageSquare,
 	MoreHorizontal,
 	PenLine,
 	RotateCcwIcon,
@@ -64,21 +63,26 @@ export function ChatListItem({
 				{...(isMobile ? longPressHandlers : {})}
 				className={cn(
 					"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left transition-colors",
-					"[&>span:last-child]:truncate",
-					"hover:bg-accent hover:text-accent-foreground",
+					"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
 					"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
 					isActive && "bg-accent text-accent-foreground"
 				)}
 			>
-				<MessageSquare className="h-4 w-4 shrink-0 text-muted-foreground" />
-				<span className="w-[calc(100%-3rem)] ">{animatedName}</span>
+				<span className="truncate">{animatedName}</span>
 			</button>
 
 			{/* Actions dropdown - trigger hidden on mobile, long-press opens it instead */}
 			<div
 				className={cn(
-					"absolute right-1 top-1/2 -translate-y-1/2 transition-opacity",
-					isMobile ? "opacity-0 pointer-events-none" : "opacity-0 group-hover/item:opacity-100"
+					"absolute right-0 top-0 bottom-0 flex items-center pr-1 pl-6 rounded-r-md",
+					isActive
+						? "bg-gradient-to-l from-accent from-60% to-transparent"
+						: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
+					isMobile
+						? "opacity-0 pointer-events-none"
+						: isActive
+							? "opacity-100"
+							: "opacity-0 group-hover/item:opacity-100"
 				)}
 			>
 				<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
diff --git a/surfsense_web/hooks/use-documents.ts b/surfsense_web/hooks/use-documents.ts
index a972e1865..3d6ee9be4 100644
--- a/surfsense_web/hooks/use-documents.ts
+++ b/surfsense_web/hooks/use-documents.ts
@@ -61,7 +61,7 @@ export function toDisplayDoc(item: ApiDocumentInput): DocumentDisplay {
 }
 
 const EMPTY_TYPE_FILTER: DocumentTypeEnum[] = [];
-const INITIAL_PAGE_SIZE = 20;
+const INITIAL_PAGE_SIZE = 50;
 const SCROLL_PAGE_SIZE = 5;
 
 function isValidDocument(doc: DocumentElectric): boolean {