From 461494a3cc05972688477c800c032c65e8be79ad Mon Sep 17 00:00:00 2001
From: Bruno Bergher <bruno@roocode.com>
Date: Sat, 10 Jan 2026 09:19:01 +0000
Subject: [PATCH] Settings header restyling

---
 .../settings/SettingsSearchInput.tsx          | 13 +++--
 .../settings/SettingsSearchResults.tsx        |  2 +-
 .../src/components/settings/SettingsView.tsx  | 49 ++++++++++---------
 webview-ui/src/components/ui/input.tsx        |  2 +-
 webview-ui/src/i18n/locales/en/settings.json  |  2 +-
 5 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/webview-ui/src/components/settings/SettingsSearchInput.tsx b/webview-ui/src/components/settings/SettingsSearchInput.tsx
index c53366961f..c2b1906069 100644
--- a/webview-ui/src/components/settings/SettingsSearchInput.tsx
+++ b/webview-ui/src/components/settings/SettingsSearchInput.tsx
@@ -15,8 +15,8 @@ export function SettingsSearchInput({ value, onChange, onFocus, onBlur }: Settin
 	const { t } = useAppTranslation()
 
 	return (
-		<div className="relative flex-1 max-w-xs">
-			<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-vscode-descriptionForeground pointer-events-none" />
+		<div className="relative flex justify-end ml-2">
+			<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-vscode-descriptionForeground pointer-events-none" />
 			<Input
 				data-testid="settings-search-input"
 				type="text"
@@ -25,15 +25,18 @@ export function SettingsSearchInput({ value, onChange, onFocus, onBlur }: Settin
 				onFocus={onFocus}
 				onBlur={onBlur}
 				placeholder={t("settings:search.placeholder")}
-				className={cn("pl-8", value && "pr-8")}
+				className={cn(
+					"pl-6 w-[0px] focus:pl-8 focus:min-w-[130px] focus:w-full active:w-full",
+					value && "pr-8",
+				)}
 			/>
 			{value && (
 				<button
 					type="button"
 					onClick={() => onChange("")}
-					className="absolute right-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-vscode-descriptionForeground hover:text-vscode-foreground focus:outline-none"
+					className="absolute cursor-pointer right-2.5 top-1/2 -translate-y-1/2 size-4 text-vscode-descriptionForeground hover:text-vscode-foreground focus:outline-none"
 					aria-label="Clear search">
-					<X className="h-4 w-4" />
+					<X className="size-4" />
 				</button>
 			)}
 		</div>
diff --git a/webview-ui/src/components/settings/SettingsSearchResults.tsx b/webview-ui/src/components/settings/SettingsSearchResults.tsx
index f1764319e7..c287335b55 100644
--- a/webview-ui/src/components/settings/SettingsSearchResults.tsx
+++ b/webview-ui/src/components/settings/SettingsSearchResults.tsx
@@ -33,7 +33,7 @@ function HighlightMatch({ text, query }: HighlightMatchProps) {
 		<>
 			{parts.map((part, index) =>
 				regex.test(part) ? (
-					<mark key={index} className="bg-vscode-editor-findMatchHighlightBackground text-inherit">
+					<mark key={index} className="bg-vscode-input-foreground/20 rounded-xs text-inherit">
 						{part}
 					</mark>
 				) : (
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index 5c5584c7de..c7f9e7ad7a 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -28,6 +28,7 @@ import {
 	Plug,
 	Server,
 	Users2,
+	ArrowLeft,
 } from "lucide-react"
 
 import {
@@ -599,26 +600,31 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	return (
 		<Tab>
 			<TabHeader className="flex justify-between items-center gap-2">
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-2 grow">
+					<StandardTooltip content={t("settings:header.doneButtonTooltip")}>
+						<Button variant="ghost" className="px-1.5 -ml-2" onClick={() => checkUnsaveChanges(onDone)}>
+							<ArrowLeft />
+						</Button>
+					</StandardTooltip>
 					<h3 className="text-vscode-foreground m-0 flex-shrink-0">{t("settings:header.title")}</h3>
-					<div className="relative flex-1 max-w-xs">
-						<SettingsSearchInput
-							value={searchQuery}
-							onChange={setSearchQuery}
-							onFocus={() => setIsSearchFocused(true)}
-							onBlur={() => setTimeout(() => setIsSearchFocused(false), 200)}
-						/>
-						{searchQuery && isSearchFocused && (
-							<div className="absolute top-full left-0 right-0 mt-1 bg-vscode-dropdown-background border border-vscode-dropdown-border rounded shadow-lg z-50">
-								<SettingsSearchResults
-									results={searchResults}
-									query={searchQuery}
-									onSelectResult={handleSelectResult}
-									sections={sections}
-								/>
-							</div>
-						)}
-					</div>
+				</div>
+				<div className="relative justify-end">
+					<SettingsSearchInput
+						value={searchQuery}
+						onChange={setSearchQuery}
+						onFocus={() => setIsSearchFocused(true)}
+						onBlur={() => setTimeout(() => setIsSearchFocused(false), 200)}
+					/>
+					{searchQuery && isSearchFocused && (
+						<div className="absolute top-full left-0 right-0 mt-1 bg-vscode-dropdown-background border border-vscode-dropdown-border rounded shadow-lg z-50">
+							<SettingsSearchResults
+								results={searchResults}
+								query={searchQuery}
+								onSelectResult={handleSelectResult}
+								sections={sections}
+							/>
+						</div>
+					)}
 				</div>
 				<div className="flex gap-2 flex-shrink-0">
 					<StandardTooltip
@@ -638,11 +644,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 							{t("settings:common.save")}
 						</Button>
 					</StandardTooltip>
-					<StandardTooltip content={t("settings:header.doneButtonTooltip")}>
-						<Button variant="secondary" onClick={() => checkUnsaveChanges(onDone)}>
-							{t("settings:common.done")}
-						</Button>
-					</StandardTooltip>
 				</div>
 			</TabHeader>
 
diff --git a/webview-ui/src/components/ui/input.tsx b/webview-ui/src/components/ui/input.tsx
index 77bea85dad..169871dfa5 100644
--- a/webview-ui/src/components/ui/input.tsx
+++ b/webview-ui/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 			<input
 				type={type}
 				className={cn(
-					"flex w-full text-vscode-input-foreground border border-vscode-dropdown-border  bg-vscode-input-background rounded-xs px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50",
+					"flex w-full text-vscode-input-foreground border border-vscode-dropdown-border  bg-vscode-input-background rounded-full px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50",
 					className,
 				)}
 				ref={ref}
diff --git a/webview-ui/src/i18n/locales/en/settings.json b/webview-ui/src/i18n/locales/en/settings.json
index d136475e8a..947123b1c4 100644
--- a/webview-ui/src/i18n/locales/en/settings.json
+++ b/webview-ui/src/i18n/locales/en/settings.json
@@ -1,6 +1,6 @@
 {
 	"search": {
-		"placeholder": "Search settings...",
+		"placeholder": "Find setting...",
 		"noResults": "No results found for \"{{query}}\""
 	},
 	"common": {