From cbfbf59c4694ece7ed371d3c729ef5be6fa117ef Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 14 May 2026 02:07:53 +0530
Subject: [PATCH] refactor: enhance UI components with improved hover effects
 and color consistency

---
 .../components/connectors/drive-folder-tree.tsx        |  4 ++--
 .../components/connectors/google-drive-folder-tree.tsx |  4 ++--
 surfsense_web/components/documents/DocumentNode.tsx    |  2 +-
 surfsense_web/components/free-chat/free-composer.tsx   |  5 ++---
 .../components/free-chat/free-model-selector.tsx       |  8 ++++----
 surfsense_web/components/layout/ui/tabs/TabBar.tsx     |  6 ++----
 .../components/new-chat/chat-share-button.tsx          | 10 +++++-----
 .../components/new-chat/document-mention-picker.tsx    |  6 +++---
 surfsense_web/components/new-chat/model-selector.tsx   |  7 ++++---
 surfsense_web/components/new-chat/prompt-picker.tsx    |  4 ++--
 surfsense_web/components/ui/context-menu.tsx           |  4 ++--
 surfsense_web/components/ui/dropdown-menu.tsx          |  8 ++++----
 12 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/surfsense_web/components/connectors/drive-folder-tree.tsx b/surfsense_web/components/connectors/drive-folder-tree.tsx
index 905d2b7ca..5f11222f0 100644
--- a/surfsense_web/components/connectors/drive-folder-tree.tsx
+++ b/surfsense_web/components/connectors/drive-folder-tree.tsx
@@ -261,9 +261,9 @@ export function DriveFolderTree({
 				<div
 					className={cn(
 						"flex items-center group gap-1 sm:gap-2 h-auto py-1 sm:py-2 px-1 sm:px-2 rounded-md",
-						isFolder && "hover:bg-accent cursor-pointer",
+						isFolder && "hover:bg-accent hover:text-accent-foreground cursor-pointer",
 						!isFolder && "cursor-default opacity-60",
-						isSelected && "bg-accent/50"
+						isSelected && "bg-accent text-accent-foreground"
 					)}
 				>
 					{isFolder ? (
diff --git a/surfsense_web/components/connectors/google-drive-folder-tree.tsx b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
index 1584d05d0..8146a4bf8 100644
--- a/surfsense_web/components/connectors/google-drive-folder-tree.tsx
+++ b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
@@ -237,9 +237,9 @@ export function GoogleDriveFolderTree({
 				<div
 					className={cn(
 						"flex items-center group gap-1 sm:gap-2 h-auto py-1 sm:py-2 px-1 sm:px-2 rounded-md",
-						isFolder && "hover:bg-accent cursor-pointer",
+						isFolder && "hover:bg-accent hover:text-accent-foreground cursor-pointer",
 						!isFolder && "cursor-default opacity-60",
-						isSelected && "bg-accent/50"
+						isSelected && "bg-accent text-accent-foreground"
 					)}
 				>
 					{isFolder ? (
diff --git a/surfsense_web/components/documents/DocumentNode.tsx b/surfsense_web/components/documents/DocumentNode.tsx
index f6da88e55..826feb51d 100644
--- a/surfsense_web/components/documents/DocumentNode.tsx
+++ b/surfsense_web/components/documents/DocumentNode.tsx
@@ -145,7 +145,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 					ref={attachRef}
 					className={cn(
 						"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer select-none text-left",
-						isMentioned && "bg-accent/30",
+						isMentioned && "bg-accent text-accent-foreground",
 						isDragging && "opacity-40"
 					)}
 					style={{ paddingLeft: `${depth * 16 + 4}px` }}
diff --git a/surfsense_web/components/free-chat/free-composer.tsx b/surfsense_web/components/free-chat/free-composer.tsx
index a22d2b205..2ece3dcca 100644
--- a/surfsense_web/components/free-chat/free-composer.tsx
+++ b/surfsense_web/components/free-chat/free-composer.tsx
@@ -67,7 +67,6 @@ const ACCEPT_EXTENSIONS = Array.from(ANON_ALLOWED_EXTENSIONS).join(",");
 export const FreeComposer: FC = () => {
 	const aui = useAui();
 	const isRunning = useAuiState(({ thread }) => thread.isRunning);
-	const isEmpty = useAuiState(({ thread }) => thread.isEmpty);
 	const { gate } = useLoginGate();
 	const anonMode = useAnonymousMode();
 	const [text, setText] = useState("");
@@ -191,7 +190,7 @@ export const FreeComposer: FC = () => {
 								onClick={handleUploadClick}
 								className={cn(
 									"flex items-center gap-1.5 rounded-md px-2 py-1 text-xs transition-colors",
-									"text-muted-foreground hover:text-foreground hover:bg-accent/50",
+									"text-muted-foreground hover:text-accent-foreground hover:bg-accent",
 									hasUploadedDoc && "text-primary"
 								)}
 							>
@@ -212,7 +211,7 @@ export const FreeComposer: FC = () => {
 						<TooltipTrigger asChild>
 							<label
 								htmlFor="free-web-search-toggle"
-								className="flex items-center gap-1.5 cursor-pointer select-none rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+								className="flex items-center gap-1.5 cursor-pointer select-none rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-accent-foreground hover:bg-accent transition-colors"
 							>
 								<Globe className="size-3.5" />
 								<span className="hidden sm:inline">Web</span>
diff --git a/surfsense_web/components/free-chat/free-model-selector.tsx b/surfsense_web/components/free-chat/free-model-selector.tsx
index b32bd0a9a..b7ae60bd3 100644
--- a/surfsense_web/components/free-chat/free-model-selector.tsx
+++ b/surfsense_web/components/free-chat/free-model-selector.tsx
@@ -164,10 +164,10 @@ export function FreeModelSelector({ className }: { className?: string }) {
 									onMouseEnter={() => setFocusedIndex(index)}
 									className={cn(
 										"group flex items-center gap-2.5 px-3 py-2 rounded-xl cursor-pointer",
-										"transition-all duration-150 mx-2",
-										"hover:bg-accent/40",
-										isSelected && "bg-primary/6 dark:bg-primary/8",
-										isFocused && "bg-accent/50"
+										"transition-colors duration-150 mx-2",
+										"hover:bg-accent hover:text-accent-foreground",
+										isFocused && "bg-accent text-accent-foreground",
+										isSelected && "bg-accent text-accent-foreground"
 									)}
 								>
 									<div className="shrink-0">
diff --git a/surfsense_web/components/layout/ui/tabs/TabBar.tsx b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
index e74cd0919..6d170409f 100644
--- a/surfsense_web/components/layout/ui/tabs/TabBar.tsx
+++ b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
@@ -198,7 +198,7 @@ export function TabBar({
 								className={cn(
 									"group relative flex h-full items-center px-3 w-[180px] min-h-0 overflow-hidden text-[13px] font-medium rounded-md transition-colors duration-150 shrink-0",
 									isActive
-										? "bg-muted text-foreground"
+										? "bg-accent text-accent-foreground"
 										: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
 								)}
 							>
@@ -210,9 +210,7 @@ export function TabBar({
 									className={cn(
 										"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-8 pr-2 opacity-0 transition-opacity duration-150",
 										"group-hover:opacity-100 group-focus-within:opacity-100",
-										isActive
-											? "bg-gradient-to-l from-muted from-60% to-transparent"
-											: "bg-gradient-to-l from-accent from-60% to-transparent"
+										"bg-gradient-to-l from-accent from-60% to-transparent"
 									)}
 								>
 									{/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */}
diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx
index f5264e386..ce0c5dbcc 100644
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@@ -190,10 +190,10 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 									key={option.value}
 									onClick={() => handleVisibilityChange(option.value)}
 									className={cn(
-										"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
-										"hover:bg-accent/40 cursor-pointer",
+										"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-colors",
+										"hover:bg-accent hover:text-accent-foreground cursor-pointer",
 										"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-										isSelected && "bg-primary/6 dark:bg-primary/8"
+										isSelected && "bg-accent text-accent-foreground"
 									)}
 								>
 									<div
@@ -239,8 +239,8 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 									onClick={handleCreatePublicLink}
 									disabled={isCreatingSnapshot}
 									className={cn(
-										"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
-										"hover:bg-accent/40 cursor-pointer",
+										"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-colors",
+										"hover:bg-accent hover:text-accent-foreground cursor-pointer",
 										"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 										"disabled:opacity-50 disabled:cursor-not-allowed"
 									)}
diff --git a/surfsense_web/components/new-chat/document-mention-picker.tsx b/surfsense_web/components/new-chat/document-mention-picker.tsx
index 003b604dd..3a5621604 100644
--- a/surfsense_web/components/new-chat/document-mention-picker.tsx
+++ b/surfsense_web/components/new-chat/document-mention-picker.tsx
@@ -502,7 +502,7 @@ export const DocumentMentionPicker = forwardRef<
 											className={cn(
 												"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
 												isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-												isHighlighted && "bg-accent"
+												isHighlighted && "bg-accent text-accent-foreground"
 											)}
 										>
 											<span className="shrink-0 text-muted-foreground text-sm">
@@ -559,7 +559,7 @@ export const DocumentMentionPicker = forwardRef<
 											className={cn(
 												"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
 												isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-												isHighlighted && "bg-accent"
+												isHighlighted && "bg-accent text-accent-foreground"
 											)}
 										>
 											<span className="shrink-0 text-muted-foreground text-sm">
@@ -613,7 +613,7 @@ export const DocumentMentionPicker = forwardRef<
 											className={cn(
 												"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
 												isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-												isHighlighted && "bg-accent"
+												isHighlighted && "bg-accent text-accent-foreground"
 											)}
 										>
 											<span className="shrink-0 text-muted-foreground text-sm">
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 3af98a50a..669b3d21a 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -1041,9 +1041,10 @@ export function ModelSelector({
 				onMouseEnter={() => setFocusedIndex(index)}
 				className={cn(
 					"group flex items-center gap-2.5 px-3 py-2 rounded-xl",
-					"transition-all duration-150 mx-2 cursor-pointer hover:bg-accent/40",
-					isSelected && "bg-primary/6 dark:bg-primary/8",
-					isFocused && "bg-accent/50"
+					"transition-colors duration-150 mx-2 cursor-pointer",
+					"hover:bg-accent hover:text-accent-foreground",
+					isFocused && "bg-accent text-accent-foreground",
+					isSelected && "bg-accent text-accent-foreground"
 				)}
 			>
 				{/* Provider icon */}
diff --git a/surfsense_web/components/new-chat/prompt-picker.tsx b/surfsense_web/components/new-chat/prompt-picker.tsx
index 46f0d9562..cd149ef2d 100644
--- a/surfsense_web/components/new-chat/prompt-picker.tsx
+++ b/surfsense_web/components/new-chat/prompt-picker.tsx
@@ -161,7 +161,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 								onMouseEnter={() => setHighlightedIndex(index)}
 								className={cn(
 									"w-full flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors rounded-md cursor-pointer",
-									index === highlightedIndex && "bg-accent"
+									index === highlightedIndex && "bg-accent text-accent-foreground"
 								)}
 							>
 								<span className="shrink-0 text-muted-foreground">
@@ -183,7 +183,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 							className={cn(
 								"w-full flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors rounded-md cursor-pointer text-muted-foreground",
 								highlightedIndex === createPromptIndex
-									? "bg-accent text-foreground"
+									? "bg-accent text-accent-foreground"
 									: "hover:text-accent-foreground hover:bg-accent"
 							)}
 						>
diff --git a/surfsense_web/components/ui/context-menu.tsx b/surfsense_web/components/ui/context-menu.tsx
index f48828acb..c15f8e17a 100644
--- a/surfsense_web/components/ui/context-menu.tsx
+++ b/surfsense_web/components/ui/context-menu.tsx
@@ -107,7 +107,7 @@ function ContextMenuItem({
 			data-inset={inset}
 			data-variant={variant}
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground dark:focus:bg-neutral-700 relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 				className
 			)}
 			{...props}
@@ -189,7 +189,7 @@ function ContextMenuSeparator({
 	return (
 		<ContextMenuPrimitive.Separator
 			data-slot="context-menu-separator"
-			className={cn("bg-border dark:bg-neutral-700 -mx-1 my-1 h-px", className)}
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
 			{...props}
 		/>
 	);
diff --git a/surfsense_web/components/ui/dropdown-menu.tsx b/surfsense_web/components/ui/dropdown-menu.tsx
index 7fe3da76b..5ada20d03 100644
--- a/surfsense_web/components/ui/dropdown-menu.tsx
+++ b/surfsense_web/components/ui/dropdown-menu.tsx
@@ -61,7 +61,7 @@ function DropdownMenuItem({
 			data-inset={inset}
 			data-variant={variant}
 			className={cn(
-				"focus:bg-neutral-200 focus:text-accent-foreground dark:focus:bg-neutral-700 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className
 			)}
 			{...props}
@@ -79,7 +79,7 @@ function DropdownMenuCheckboxItem({
 		<DropdownMenuPrimitive.CheckboxItem
 			data-slot="dropdown-menu-checkbox-item"
 			className={cn(
-				"focus:bg-neutral-200 focus:text-accent-foreground dark:focus:bg-neutral-700 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className
 			)}
 			checked={checked}
@@ -110,7 +110,7 @@ function DropdownMenuRadioItem({
 		<DropdownMenuPrimitive.RadioItem
 			data-slot="dropdown-menu-radio-item"
 			className={cn(
-				"focus:bg-neutral-200 focus:text-accent-foreground dark:focus:bg-neutral-700 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className
 			)}
 			{...props}
@@ -182,7 +182,7 @@ function DropdownMenuSubTrigger({
 			data-slot="dropdown-menu-sub-trigger"
 			data-inset={inset}
 			className={cn(
-				"focus:bg-neutral-200 focus:text-accent-foreground dark:focus:bg-neutral-700 data-[state=open]:bg-neutral-200 data-[state=open]:text-accent-foreground dark:data-[state=open]:bg-neutral-700 [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className
 			)}
 			{...props}