feat: implement scroll-to-setting functionality with UI improvements

- Add scroll-to-setting feature for settings search results
- Add data-setting-id attributes to all settings components
- Implement scrollToSetting utility with smooth scrolling and highlight animation
- Update SettingsView to handle scroll after tab navigation
- Add CSS highlight animation with fade-out effect
- Improve search dropdown UI with right margin spacing
- Add comprehensive test coverage for scroll functionality
- All tests passing (123 tests)

Author: SannidhyaSah

webview-ui/src/components/settings/About.tsx

@@ -38,7 +38,7 @@ export const About = ({ telemetrySetting, setTelemetrySetting, className, ...pro
 			</SectionHeader>
 
 			<Section>
-				<div>
+				<div data-setting-id="telemetrySetting">
 					<VSCodeCheckbox
 						checked={telemetrySetting === "enabled"}
 						onChange={(e: any) => {

webview-ui/src/components/settings/AutoApproveSettings.tsx

@@ -164,7 +164,7 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-eye" />
 							<div>{t("settings:autoApprove.readOnly.label")}</div>
 						</div>
-						<div>
+						<div data-setting-id="alwaysAllowReadOnlyOutsideWorkspace">
 							<VSCodeCheckbox
 								checked={alwaysAllowReadOnlyOutsideWorkspace}
 								onChange={(e: any) =>
@@ -188,7 +188,7 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-edit" />
 							<div>{t("settings:autoApprove.write.label")}</div>
 						</div>
-						<div>
+						<div data-setting-id="alwaysAllowWriteOutsideWorkspace">
 							<VSCodeCheckbox
 								checked={alwaysAllowWriteOutsideWorkspace}
 								onChange={(e: any) =>
@@ -203,7 +203,7 @@ export const AutoApproveSettings = ({
 								{t("settings:autoApprove.write.outsideWorkspace.description")}
 							</div>
 						</div>
-						<div>
+						<div data-setting-id="alwaysAllowWriteProtected">
 							<VSCodeCheckbox
 								checked={alwaysAllowWriteProtected}
 								onChange={(e: any) =>
@@ -216,7 +216,7 @@ export const AutoApproveSettings = ({
 								{t("settings:autoApprove.write.protected.description")}
 							</div>
 						</div>
-						<div>
+						<div data-setting-id="writeDelayMs">
 							<div className="flex items-center gap-2">
 								<Slider
 									min={0}
@@ -241,7 +241,7 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-refresh" />
 							<div>{t("settings:autoApprove.retry.label")}</div>
 						</div>
-						<div>
+						<div data-setting-id="requestDelaySeconds">
 							<div className="flex items-center gap-2">
 								<Slider
 									min={5}
@@ -266,7 +266,7 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-question" />
 							<div>{t("settings:autoApprove.followupQuestions.label")}</div>
 						</div>
-						<div>
+						<div data-setting-id="followupAutoApproveTimeoutMs">
 							<div className="flex items-center gap-2">
 								<Slider
 									min={1000}
@@ -294,7 +294,7 @@ export const AutoApproveSettings = ({
 							<div>{t("settings:autoApprove.execute.label")}</div>
 						</div>
 
-						<div>
+						<div data-setting-id="allowedCommands">
 							<label className="block font-medium mb-1" data-testid="allowed-commands-heading">
 								{t("settings:autoApprove.execute.allowedCommands")}
 							</label>
@@ -342,7 +342,7 @@ export const AutoApproveSettings = ({
 						</div>
 
 						{/* Denied Commands Section */}
-						<div className="mt-6">
+						<div className="mt-6" data-setting-id="deniedCommands">
 							<label className="block font-medium mb-1" data-testid="denied-commands-heading">
 								{t("settings:autoApprove.execute.deniedCommands")}
 							</label>

webview-ui/src/components/settings/AutoApproveToggle.tsx

@@ -124,6 +124,7 @@ export const AutoApproveToggle = ({ onToggle, ...props }: AutoApproveToggleProps
 						aria-label={t(labelKey)}
 						aria-pressed={!!props[key]}
 						data-testid={testId}
+						data-setting-id={key}
 						className={cn(" aspect-square h-[80px]", !props[key] && "opacity-50")}>
 						<span className={cn("flex flex-col items-center gap-1")}>
 							<span className={`codicon codicon-${icon}`} />

webview-ui/src/components/settings/BrowserSettings.tsx

@@ -107,7 +107,7 @@ export const BrowserSettings = ({
 			</SectionHeader>
 
 			<Section>
-				<div>
+				<div data-setting-id="browserToolEnabled">
 					<VSCodeCheckbox
 						checked={browserToolEnabled}
 						onChange={(e: any) => setCachedStateField("browserToolEnabled", e.target.checked)}>
@@ -126,7 +126,7 @@ export const BrowserSettings = ({
 
 				{browserToolEnabled && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						<div>
+						<div data-setting-id="browserViewportSize">
 							<label className="block font-medium mb-1">{t("settings:browser.viewport.label")}</label>
 							<Select
 								value={browserViewportSize}
@@ -149,7 +149,7 @@ export const BrowserSettings = ({
 							</div>
 						</div>
 
-						<div>
+						<div data-setting-id="screenshotQuality">
 							<label className="block font-medium mb-1">
 								{t("settings:browser.screenshotQuality.label")}
 							</label>
@@ -168,7 +168,7 @@ export const BrowserSettings = ({
 							</div>
 						</div>
 
-						<div>
+						<div data-setting-id="remoteBrowserEnabled">
 							<VSCodeCheckbox
 								checked={remoteBrowserEnabled}
 								onChange={(e: any) => {
@@ -189,7 +189,7 @@ export const BrowserSettings = ({
 
 						{remoteBrowserEnabled && (
 							<>
-								<div className="flex items-center gap-2">
+								<div className="flex items-center gap-2" data-setting-id="remoteBrowserHost">
 									<VSCodeTextField
 										value={remoteBrowserHost ?? ""}
 										onChange={(e: any) =>

webview-ui/src/components/settings/CheckpointSettings.tsx

@@ -26,7 +26,7 @@ export const CheckpointSettings = ({ enableCheckpoints, setCachedStateField, ...
 			</SectionHeader>
 
 			<Section>
-				<div>
+				<div data-setting-id="enableCheckpoints">
 					<VSCodeCheckbox
 						checked={enableCheckpoints}
 						onChange={(e: any) => {

webview-ui/src/components/settings/ContextManagementSettings.tsx

@@ -89,7 +89,7 @@ export const ContextManagementSettings = ({
 			</SectionHeader>
 
 			<Section>
-				<div>
+				<div data-setting-id="maxOpenTabsContext">
 					<span className="block font-medium mb-1">{t("settings:contextManagement.openTabs.label")}</span>
 					<div className="flex items-center gap-2">
 						<Slider
@@ -107,7 +107,7 @@ export const ContextManagementSettings = ({
 					</div>
 				</div>
 
-				<div>
+				<div data-setting-id="maxWorkspaceFiles">
 					<span className="block font-medium mb-1">
 						{t("settings:contextManagement.workspaceFiles.label")}
 					</span>
@@ -127,7 +127,7 @@ export const ContextManagementSettings = ({
 					</div>
 				</div>
 
-				<div>
+				<div data-setting-id="maxConcurrentFileReads">
 					<span className="block font-medium mb-1">
 						{t("settings:contextManagement.maxConcurrentFileReads.label")}
 					</span>
@@ -147,7 +147,7 @@ export const ContextManagementSettings = ({
 					</div>
 				</div>
 
-				<div>
+				<div data-setting-id="showRooIgnoredFiles">
 					<VSCodeCheckbox
 						checked={showRooIgnoredFiles}
 						onChange={(e: any) => setCachedStateField("showRooIgnoredFiles", e.target.checked)}
@@ -161,7 +161,7 @@ export const ContextManagementSettings = ({
 					</div>
 				</div>
 
-				<div>
+				<div data-setting-id="maxReadFileLine">
 					<div className="flex flex-col gap-2">
 						<span className="font-medium">{t("settings:contextManagement.maxReadFile.label")}</span>
 						<div className="flex items-center gap-4">
@@ -198,19 +198,21 @@ export const ContextManagementSettings = ({
 				</div>
 			</Section>
 			<Section className="pt-2">
-				<VSCodeCheckbox
-					checked={autoCondenseContext}
-					onChange={(e: any) => setCachedStateField("autoCondenseContext", e.target.checked)}
-					data-testid="auto-condense-context-checkbox">
-					<span className="font-medium">{t("settings:contextManagement.autoCondenseContext.name")}</span>
-				</VSCodeCheckbox>
+				<div data-setting-id="autoCondenseContext">
+					<VSCodeCheckbox
+						checked={autoCondenseContext}
+						onChange={(e: any) => setCachedStateField("autoCondenseContext", e.target.checked)}
+						data-testid="auto-condense-context-checkbox">
+						<span className="font-medium">{t("settings:contextManagement.autoCondenseContext.name")}</span>
+					</VSCodeCheckbox>
+				</div>
 				{autoCondenseContext && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
 						<div className="flex items-center gap-4 font-bold">
 							<FoldVertical size={16} />
 							<div>{t("settings:contextManagement.condensingThreshold.label")}</div>
 						</div>
-						<div>
+						<div data-setting-id="condensingApiConfigId">
 							<Select
 								value={selectedThresholdProfile || "default"}
 								onValueChange={(value) => {
@@ -255,7 +257,7 @@ export const ContextManagementSettings = ({
 						</div>
 
 						{/* Threshold Slider */}
-						<div>
+						<div data-setting-id="autoCondenseContextPercent">
 							<div className="flex items-center gap-2">
 								<Slider
 									min={10}

webview-ui/src/components/settings/LanguageSettings.tsx

@@ -31,21 +31,25 @@ export const LanguageSettings = ({ language, setCachedStateField, className, ...
 			</SectionHeader>
 
 			<Section>
-				<Select value={language} onValueChange={(value) => setCachedStateField("language", value as Language)}>
-					<SelectTrigger className="w-full">
-						<SelectValue placeholder={t("settings:common.select")} />
-					</SelectTrigger>
-					<SelectContent>
-						<SelectGroup>
-							{Object.entries(LANGUAGES).map(([code, name]) => (
-								<SelectItem key={code} value={code}>
-									{name}
-									<span className="text-muted-foreground">({code})</span>
-								</SelectItem>
-							))}
-						</SelectGroup>
-					</SelectContent>
-				</Select>
+				<div data-setting-id="language">
+					<Select
+						value={language}
+						onValueChange={(value) => setCachedStateField("language", value as Language)}>
+						<SelectTrigger className="w-full">
+							<SelectValue placeholder={t("settings:common.select")} />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectGroup>
+								{Object.entries(LANGUAGES).map(([code, name]) => (
+									<SelectItem key={code} value={code}>
+										{name}
+										<span className="text-muted-foreground">({code})</span>
+									</SelectItem>
+								))}
+							</SelectGroup>
+						</SelectContent>
+					</Select>
+				</div>
 			</Section>
 		</div>
 	)

webview-ui/src/components/settings/NotificationSettings.tsx

@@ -35,7 +35,7 @@ export const NotificationSettings = ({
 			</SectionHeader>
 
 			<Section>
-				<div>
+				<div data-setting-id="ttsEnabled">
 					<VSCodeCheckbox
 						checked={ttsEnabled}
 						onChange={(e: any) => setCachedStateField("ttsEnabled", e.target.checked)}
@@ -49,7 +49,7 @@ export const NotificationSettings = ({
 
 				{ttsEnabled && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						<div>
+						<div data-setting-id="ttsSpeed">
 							<label className="block font-medium mb-1">
 								{t("settings:notifications.tts.speedLabel")}
 							</label>
@@ -68,7 +68,7 @@ export const NotificationSettings = ({
 					</div>
 				)}
 
-				<div>
+				<div data-setting-id="soundEnabled">
 					<VSCodeCheckbox
 						checked={soundEnabled}
 						onChange={(e: any) => setCachedStateField("soundEnabled", e.target.checked)}
@@ -82,7 +82,7 @@ export const NotificationSettings = ({
 
 				{soundEnabled && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						<div>
+						<div data-setting-id="soundVolume">
 							<label className="block font-medium mb-1">
 								{t("settings:notifications.sound.volumeLabel")}
 							</label>

webview-ui/src/components/settings/SettingsSearchDropdown.tsx

@@ -195,7 +195,7 @@ export const SettingsSearchDropdown: React.FC<SettingsSearchDropdownProps> = ({
 					<PopoverContent
 						align="start"
 						sideOffset={4}
-						className="w-96 p-0 max-h-96 overflow-hidden"
+						className="w-96 p-0 max-h-96 overflow-hidden mr-2"
 						onOpenAutoFocus={(e) => e.preventDefault()}>
 						<div ref={dropdownRef} className="overflow-y-auto max-h-96">
 							{searchResults.length === 0 ? (

webview-ui/src/components/settings/SettingsView.tsx

@@ -67,6 +67,7 @@ import { Section } from "./Section"
 import PromptsSettings from "./PromptsSettings"
 import { cn } from "@/lib/utils"
 import { SettingsSearchDropdown } from "./SettingsSearchDropdown"
+import { scrollToSetting } from "./searchUtils"
 
 export const settingsTabsContainer = "flex flex-1 overflow-hidden [&.narrow_.tab-label]:hidden"
 export const settingsTabList =
@@ -459,9 +460,12 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	}, [scrollToActiveTab])
 
 	// Handle search selection
-	const handleSearchSelection = useCallback((sectionId: string, _settingId: string) => {
+	const handleSearchSelection = useCallback((sectionId: string, settingId: string) => {
 		setActiveTab(sectionId as SectionName)
-		// TODO: In the future, we could also highlight the specific setting
+		// Use setTimeout to ensure tab content is rendered before scrolling
+		setTimeout(() => {
+			scrollToSetting(settingId)
+		}, 100)
 	}, [])
 
 	return (