From 26ca751a9d17ccfd35a9c886ef564eb7ee4873d8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 20 Jan 2026 18:28:50 +0530
Subject: [PATCH] refactor: update UI component styles and interactions

- Increased gap between action items in Header for improved layout.
- Added onCloseAutoFocus to ChatShareButton for better focus management.
- Enhanced ChevronDown icon in ModelSelector with rotation effect for better visual feedback.
- Adjusted padding in ModelSelector to maintain consistent spacing.
---
 surfsense_web/components/layout/ui/header/Header.tsx    | 2 +-
 surfsense_web/components/new-chat/chat-share-button.tsx | 1 +
 surfsense_web/components/new-chat/model-selector.tsx    | 9 ++++++---
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/layout/ui/header/Header.tsx b/surfsense_web/components/layout/ui/header/Header.tsx
index f4d324cfb..4ede62075 100644
--- a/surfsense_web/components/layout/ui/header/Header.tsx
+++ b/surfsense_web/components/layout/ui/header/Header.tsx
@@ -57,7 +57,7 @@ export function Header({
 			</div>
 
 			{/* Right side - Actions */}
-			<div className="flex items-center gap-2">
+			<div className="flex items-center gap-4">
 				{/* Notifications */}
 				<NotificationButton />
 				{/* Share button - only show on chat pages when thread exists */}
diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx
index bcb1f324c..05a8a7306 100644
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@@ -125,6 +125,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 				className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg border-border/60"
 				align="end"
 				sideOffset={8}
+				onCloseAutoFocus={(e) => e.preventDefault()}
 			>
 				<div className="p-1.5 space-y-1">
 					{/* Updating overlay */}
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index dba29dfcd..dfe28d570 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -202,7 +202,10 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 							<span className="text-muted-foreground hidden md:inline">Select Model</span>
 						</>
 					)}
-					<ChevronDown className="h-3.5 w-3.5 text-muted-foreground ml-1 shrink-0" />
+					<ChevronDown className={cn(
+						"h-3.5 w-3.5 text-muted-foreground ml-1 shrink-0 transition-transform duration-200",
+						open && "rotate-180"
+					)} />
 				</Button>
 			</PopoverTrigger>
 
@@ -225,7 +228,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 						</div>
 					)}
 
-					<div className="flex items-center gap-1 md:gap-2 border-b border-border/30 px-2 md:px-3 py-1.5 md:py-2">
+					<div className="flex items-center gap-1 md:gap-2 px-2 md:px-3 py-1.5 md:py-2">
 						<CommandInput
 							placeholder="Search models"
 							value={searchQuery}
@@ -238,7 +241,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 					<CommandList className="max-h-[300px] md:max-h-[400px] overflow-y-auto">
 						<CommandEmpty className="py-8 text-center">
 							<div className="flex flex-col items-center gap-2">
-								<Bot className="size-8 text-muted-foreground/40" />
+								<Bot className="size-8 text-muted-foreground" />
 								<p className="text-sm text-muted-foreground">No models found</p>
 								<p className="text-xs text-muted-foreground/60">Try a different search term</p>
 							</div>