From d302fbd272e864861edad643ef6faa29f950e62b Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 4 May 2026 04:03:14 +0530
Subject: [PATCH] refactor(styles): standardize input and button styles across
 various components; enhance hover effects and background management for
 improved UI consistency

---
 .../components/documents/DocumentsFilters.tsx       | 13 +++++++------
 .../layout/ui/sidebar/AllPrivateChatsSidebar.tsx    |  4 ++--
 .../layout/ui/sidebar/AllSharedChatsSidebar.tsx     |  4 ++--
 .../layout/ui/sidebar/DesktopLocalTabContent.tsx    |  4 ++--
 .../layout/ui/sidebar/DocumentsSidebar.tsx          |  4 ++--
 .../components/layout/ui/sidebar/InboxSidebar.tsx   |  4 ++--
 .../components/new-chat/chat-share-button.tsx       |  8 ++++----
 .../components/new-chat/model-selector.tsx          |  4 ++--
 8 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/surfsense_web/components/documents/DocumentsFilters.tsx b/surfsense_web/components/documents/DocumentsFilters.tsx
index 50df59955..1a1784b12 100644
--- a/surfsense_web/components/documents/DocumentsFilters.tsx
+++ b/surfsense_web/components/documents/DocumentsFilters.tsx
@@ -78,13 +78,13 @@ export function DocumentsFilters({
 		<div className="flex select-none">
 			<div className="flex items-center gap-2 w-full">
 				{/* New Folder + AI Sort + Filter Toggle Group */}
-				<ToggleGroup type="multiple" variant="outline" value={[]} className="overflow-visible">
+				<ToggleGroup type="multiple" value={[]} className="overflow-visible">
 					{onCreateFolder && (
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<ToggleGroupItem
 									value="folder"
-									className="h-8 w-8 shrink-0 border bg-muted/50 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
+									className="h-8 w-8 shrink-0 border-0 bg-muted text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
 									onClick={(e) => {
 										e.preventDefault();
 										onCreateFolder();
@@ -104,7 +104,8 @@ export function DocumentsFilters({
 									value="ai-sort"
 									disabled={aiSortBusy}
 									className={cn(
-										"h-8 w-8 shrink-0 border bg-muted/50 transition-colors",
+										"h-8 w-8 shrink-0 border-0 bg-muted transition-colors",
+										"relative before:absolute before:left-0 before:top-1/2 before:h-4 before:w-px before:-translate-y-1/2 before:bg-border/60 before:content-[''] dark:before:bg-white/10",
 										"disabled:pointer-events-none disabled:opacity-50",
 										aiSortEnabled
 											? "bg-accent text-accent-foreground hover:bg-accent"
@@ -142,7 +143,7 @@ export function DocumentsFilters({
 								<PopoverTrigger asChild>
 									<ToggleGroupItem
 										value="filter"
-										className="relative h-8 w-8 shrink-0 overflow-visible border bg-muted/50 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
+										className="relative h-8 w-8 shrink-0 overflow-visible border-0 bg-muted text-muted-foreground transition-colors before:absolute before:left-0 before:top-1/2 before:h-4 before:w-px before:-translate-y-1/2 before:bg-border/60 before:content-[''] hover:bg-muted/80 hover:text-foreground dark:before:bg-white/10"
 									>
 										<ListFilter size={13} />
 										{activeTypes.length > 0 && (
@@ -226,13 +227,13 @@ export function DocumentsFilters({
 
 				{/* Search Input */}
 				<div className="relative flex-1 min-w-0">
-					<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+					<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">
 						<Search size={13} aria-hidden="true" />
 					</div>
 					<Input
 						id={`${id}-input`}
 						ref={inputRef}
-						className="h-8 w-full select-none pl-8 pr-7 text-sm focus:select-text"
+						className="h-8 w-full select-none border-0 bg-muted pl-8 pr-7 text-sm shadow-none focus:select-text"
 						value={searchValue}
 						onChange={(e) => onSearch(e.target.value)}
 						placeholder="Search docs"
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index 717f38743..439c09017 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -275,13 +275,13 @@ export function AllPrivateChatsSidebarContent({
 						placeholder={t("search_chats") || "Search chats..."}
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
-						className="h-8 pl-8 pr-7 text-sm"
+						className="h-8 border-0 bg-muted pl-8 pr-7 text-sm shadow-none"
 					/>
 					{searchQuery && (
 						<Button
 							variant="ghost"
 							size="icon"
-							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
+							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
 							onClick={handleClearSearch}
 						>
 							<X className="h-3.5 w-3.5" />
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index 12a71d65d..ca28a421b 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -274,13 +274,13 @@ export function AllSharedChatsSidebarContent({
 						placeholder={t("search_chats") || "Search chats..."}
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
-						className="h-8 pl-8 pr-7 text-sm"
+						className="h-8 border-0 bg-muted pl-8 pr-7 text-sm shadow-none"
 					/>
 					{searchQuery && (
 						<Button
 							variant="ghost"
 							size="icon"
-							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
+							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
 							onClick={handleClearSearch}
 						>
 							<X className="h-3.5 w-3.5" />
diff --git a/surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx b/surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx
index cd8fca331..a66b7f216 100644
--- a/surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx
@@ -65,7 +65,7 @@ export function DesktopLocalTabContent({
 	return (
 		<div className="flex min-h-0 flex-1 flex-col select-none">
 			<div className="mx-4 mt-4 mb-3">
-				<div className="flex h-7 w-full items-stretch rounded-lg border bg-muted/50 text-[11px] text-muted-foreground">
+				<div className="flex h-7 w-full items-stretch rounded-lg border-0 bg-muted text-[11px] text-muted-foreground hover:bg-muted/80">
 					{localRootPaths.length > 0 ? (
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
@@ -134,7 +134,7 @@ export function DesktopLocalTabContent({
 					)}
 					<Separator
 						orientation="vertical"
-						className="data-[orientation=vertical]:h-3 self-center bg-border"
+						className="data-[orientation=vertical]:h-3 self-center bg-border/60 dark:bg-white/10"
 					/>
 					{electronAvailable ? (
 						<Tooltip>
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index 616f39102..bbf882ed6 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -1052,7 +1052,7 @@ function AuthenticatedDocumentsSidebarBase({
 	const cloudContent = (
 		<>
 			{/* Connected tools strip */}
-			<div className="shrink-0 mx-4 mt-6 mb-2.5 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80">
+			<div className="shrink-0 mx-4 mt-6 mb-2.5 flex select-none items-center gap-2 rounded-lg border-0 bg-muted transition-colors hover:bg-muted/80">
 				<button
 					type="button"
 					onClick={() => setConnectorDialogOpen(true)}
@@ -1123,7 +1123,7 @@ function AuthenticatedDocumentsSidebarBase({
 				<button
 					type="button"
 					onClick={handleWatchLocalFolder}
-					className="shrink-0 mx-4 mb-2.5 flex select-none items-center gap-2 rounded-lg border bg-muted/50 px-3 py-1.5 transition-colors hover:bg-muted/80"
+					className="shrink-0 mx-4 mb-2.5 flex select-none items-center gap-2 rounded-lg border-0 bg-muted px-3 py-1.5 transition-colors hover:bg-muted/80"
 				>
 					<FolderClock className="size-4 shrink-0 text-muted-foreground" />
 					<span className="truncate text-xs text-muted-foreground">Watch local folder</span>
diff --git a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
index b842bde22..c0e11da0b 100644
--- a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
@@ -817,13 +817,13 @@ export function InboxSidebarContent({
 						placeholder={t("search_inbox") || "Search inbox"}
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
-						className="h-8 pl-8 pr-7 text-sm"
+						className="h-8 border-0 bg-muted pl-8 pr-7 text-sm shadow-none"
 					/>
 					{searchQuery && (
 						<Button
 							variant="ghost"
 							size="icon"
-							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
+							className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
 							onClick={handleClearSearch}
 						>
 							<X className="h-3.5 w-3.5" />
diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx
index 239745745..bacde9c75 100644
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@@ -173,7 +173,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 				</PopoverTrigger>
 
 				<PopoverContent
-					className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg border-border/60 dark:bg-neutral-900 dark:border dark:border-white/5 select-none"
+					className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg bg-muted border-border/60 dark:border dark:border-neutral-700 select-none"
 					align="end"
 					sideOffset={8}
 					onCloseAutoFocus={(e) => e.preventDefault()}
@@ -191,9 +191,9 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 									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/50 dark:hover:bg-white/10 cursor-pointer",
+										"hover:bg-accent/40 cursor-pointer",
 										"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-										isSelected && "bg-accent/80 dark:bg-white/10"
+										isSelected && "bg-primary/6 dark:bg-primary/8"
 									)}
 								>
 									<div
@@ -240,7 +240,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 									disabled={isCreatingSnapshot}
 									className={cn(
 										"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
-										"hover:bg-accent/50 dark:hover:bg-white/10 cursor-pointer",
+										"hover:bg-accent/40 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/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 52fb18dcc..82c0fb9e9 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -1146,7 +1146,7 @@ export function ModelSelector({
 		return (
 			<div className="flex flex-col w-full overflow-hidden">
 				{/* Tab header */}
-				<div className="border-b border-border/80 dark:border-neutral-800">
+				<div className="border-b border-border/50">
 					<div className="w-full grid grid-cols-3 h-11">
 						{(
 							[
@@ -1425,7 +1425,7 @@ export function ModelSelector({
 		<Popover open={open} onOpenChange={handleOpenChange}>
 			<PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
 			<PopoverContent
-				className="w-[300px] md:w-[380px] p-0 rounded-lg shadow-lg overflow-hidden bg-white border-border/60 dark:bg-neutral-900 dark:border dark:border-white/5 select-none"
+				className="w-[300px] md:w-[380px] p-0 rounded-lg shadow-lg overflow-hidden bg-muted border-border/60 dark:border dark:border-neutral-700 select-none"
 				align="start"
 				sideOffset={8}
 				onCloseAutoFocus={(e) => e.preventDefault()}