From d264aec57d58ff65dc294969ebffbac4de6a7d33 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 8 Apr 2026 04:48:16 +0530
Subject: [PATCH] refactor: update button styling for better user experience in
 ConnectToolsBanner and enhance document type icon visibility in DocumentNode

---
 surfsense_web/components/assistant-ui/thread.tsx    |  2 +-
 surfsense_web/components/documents/DocumentNode.tsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 597fcce39..edf1ef84a 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -268,7 +268,7 @@ const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) =
 			<div className="flex w-full items-center gap-2.5 px-4 py-2.5">
 				<button
 					type="button"
-					className="flex flex-1 items-center gap-2.5 text-left cursor-pointer"
+					className="flex flex-1 items-center gap-2.5 text-left cursor-pointer select-none"
 					onClick={() => setConnectorDialogOpen(true)}
 				>
 					<Unplug className="size-4 text-muted-foreground shrink-0" />
diff --git a/surfsense_web/components/documents/DocumentNode.tsx b/surfsense_web/components/documents/DocumentNode.tsx
index 83fcac814..898d0c8df 100644
--- a/surfsense_web/components/documents/DocumentNode.tsx
+++ b/surfsense_web/components/documents/DocumentNode.tsx
@@ -222,11 +222,17 @@ export const DocumentNode = React.memo(function DocumentNode({
 						</TooltipContent>
 					</Tooltip>
 
+				<span className="relative shrink-0 flex items-center justify-center h-6 w-6">
 					{getDocumentTypeIcon(
 						doc.document_type as DocumentTypeEnum,
 						"h-3.5 w-3.5 text-muted-foreground"
 					) && (
-						<span className="shrink-0">
+						<span
+							className={cn(
+								"absolute inset-0 flex items-center justify-center transition-opacity pointer-events-none",
+								dropdownOpen ? "opacity-0" : "group-hover:opacity-0"
+							)}
+						>
 							{getDocumentTypeIcon(
 								doc.document_type as DocumentTypeEnum,
 								"h-3.5 w-3.5 text-muted-foreground"
@@ -247,7 +253,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 								)}
 								onClick={(e) => e.stopPropagation()}
 							>
-								<MoreHorizontal className="h-3.5 w-3.5" />
+								<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
 							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent align="end" className="w-40" onClick={(e) => e.stopPropagation()}>
@@ -288,6 +294,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 							</DropdownMenuItem>
 						</DropdownMenuContent>
 					</DropdownMenu>
+				</span>
 				</div>
 			</ContextMenuTrigger>