Add settings search and dialog refinements

src/i18n/locales/en/marketplace.json

@@ -46,7 +46,6 @@
 		},
 		"title": "Marketplace"
 	},
-	"done": "Done",
 	"tabs": {
 		"installed": "Installed",
 		"browse": "Browse",

webview-ui/src/components/chat/Announcement.tsx

@@ -35,7 +35,7 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 					hideAnnouncement()
 				}
 			}}>
-			<DialogContent className="max-w-96">
+			<DialogContent>
 				<DialogHeader>
 					<DialogTitle>{t("chat:announcement.title", { version: Package.version })}</DialogTitle>
 				</DialogHeader>

webview-ui/src/components/history/HistoryView.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useState } from "react"
+import { ArrowLeft } from "lucide-react"
 import { DeleteTaskDialog } from "./DeleteTaskDialog"
 import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
 import { Virtuoso } from "react-virtuoso"
@@ -81,27 +82,33 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 	return (
 		<Tab>
 			<TabHeader className="flex flex-col gap-2">
-				<div className="flex justify-between items-center">
-					<h3 className="text-vscode-foreground m-0">{t("history:history")}</h3>
-					<div className="flex gap-2">
-						<StandardTooltip
-							content={
-								isSelectionMode
-									? `${t("history:exitSelectionMode")}`
-									: `${t("history:enterSelectionMode")}`
-							}>
-							<Button
-								variant={isSelectionMode ? "primary" : "secondary"}
-								onClick={toggleSelectionMode}
-								data-testid="toggle-selection-mode-button">
-								<span
-									className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
-								/>
-								{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
-							</Button>
-						</StandardTooltip>
-						<Button onClick={onDone}>{t("history:done")}</Button>
+				<div className="flex items-center justify-between gap-2">
+					<div className="flex items-center gap-2">
+						<Button
+							variant="ghost"
+							className="px-1.5 -ml-2"
+							onClick={onDone}
+							aria-label={t("history:done")}
+							data-testid="history-done-button">
+							<ArrowLeft />
+							<span className="sr-only">{t("history:done")}</span>
+						</Button>
+						<h3 className="text-vscode-foreground m-0">{t("history:history")}</h3>
 					</div>
+					<StandardTooltip
+						content={
+							isSelectionMode ? `${t("history:exitSelectionMode")}` : `${t("history:enterSelectionMode")}`
+						}>
+						<Button
+							variant={isSelectionMode ? "primary" : "secondary"}
+							onClick={toggleSelectionMode}
+							data-testid="toggle-selection-mode-button">
+							<span
+								className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
+							/>
+							{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
+						</Button>
+					</StandardTooltip>
 				</div>
 				<div className="flex flex-col gap-2">
 					<VSCodeTextField

webview-ui/src/components/history/__tests__/HistoryView.spec.tsx

@@ -49,15 +49,15 @@ describe("HistoryView", () => {
 
 		// Check for main UI elements
 		expect(screen.getByText("history:history")).toBeInTheDocument()
-		expect(screen.getByText("history:done")).toBeInTheDocument()
+		expect(screen.getByRole("button", { name: "history:done" })).toBeInTheDocument()
 		expect(screen.getByPlaceholderText("history:searchPlaceholder")).toBeInTheDocument()
 	})
 
-	it("calls onDone when done button is clicked", () => {
+	it("calls onDone when back button is clicked", () => {
 		const onDone = vi.fn()
 		render(<HistoryView onDone={onDone} />)
 
-		const doneButton = screen.getByText("history:done")
+		const doneButton = screen.getByRole("button", { name: "history:done" })
 		fireEvent.click(doneButton)
 
 		expect(onDone).toHaveBeenCalled()

webview-ui/src/components/marketplace/MarketplaceView.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo, useContext } from "react"
 import { Button } from "@/components/ui/button"
+import { ArrowLeft } from "lucide-react"
 import { Tab, TabContent, TabHeader } from "../common/Tab"
 import { MarketplaceViewStateManager } from "./MarketplaceViewStateManager"
 import { useStateManager } from "./useStateManager"
@@ -99,16 +100,17 @@ export function MarketplaceView({ stateManager, onDone, targetTab }: Marketplace
 		<TooltipProvider delayDuration={300}>
 			<Tab>
 				<TabHeader className="flex flex-col sticky top-0 z-10 px-3 py-2">
-					<div className="flex justify-between items-center px-2">
-						<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
-						<div className="flex gap-2 items-center">
+					<div className="flex items-center justify-between gap-2 px-2">
+						<div className="flex items-center gap-2">
 							<Button
-								variant="primary"
-								onClick={() => {
-									onDone?.()
-								}}>
-								{t("marketplace:done")}
+								variant="ghost"
+								className="px-1.5 -ml-2"
+								onClick={() => onDone?.()}
+								aria-label={t("settings:back")}>
+								<ArrowLeft />
+								<span className="sr-only">{t("marketplace:done")}</span>
 							</Button>
+							<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
 						</div>
 					</div>
 
@@ -126,12 +128,12 @@ export function MarketplaceView({ stateManager, onDone, targetTab }: Marketplace
 								/>
 							</div>
 							<button
-								className="flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
+								className="cursor-pointer flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
 								onClick={() => manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "mcp" } })}>
 								MCP
 							</button>
 							<button
-								className="flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
+								className="cursor-pointer flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
 								onClick={() =>
 									manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "mode" } })
 								}>

webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx

@@ -91,7 +91,7 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({ item,
 
 	return (
 		<>
-			<div className="border border-vscode-panel-border rounded-sm p-3 bg-vscode-editor-background">
+			<div className="border border-vscode-panel-border rounded-xl cursor-default p-3 transition-colors bg-vscode-editor-background hover:bg-vscode-editor-foreground/5">
 				<div className="flex gap-2 items-start justify-between">
 					<div className="flex gap-2 items-start">
 						<div>

webview-ui/src/components/mcp/McpView.tsx

@@ -7,7 +7,6 @@ import {
 	VSCodePanelTab,
 	VSCodePanelView,
 } from "@vscode/webview-ui-toolkit/react"
-import { Webhook } from "lucide-react"
 
 import { McpServer } from "@roo/mcp"
 
@@ -49,7 +48,6 @@ const McpView = () => {
 		<div>
 			<SectionHeader>
 				<div className="flex items-center gap-2">
-					<Webhook className="w-4" />
 					<div>{t("mcp:title")}</div>
 				</div>
 			</SectionHeader>

webview-ui/src/components/modes/ModesView.tsx

@@ -8,7 +8,7 @@ import {
 	VSCodeTextField,
 } from "@vscode/webview-ui-toolkit/react"
 import { Trans } from "react-i18next"
-import { ChevronDown, X, Upload, Download, MessageSquare } from "lucide-react"
+import { ChevronDown, X, Upload, Download } from "lucide-react"
 
 import { ModeConfig, GroupEntry, PromptComponent, ToolGroup, modeConfigSchema } from "@roo-code/types"
 
@@ -29,7 +29,6 @@ import { buildDocLink } from "@src/utils/docLinks"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { Section } from "@src/components/settings/Section"
-import { SectionHeader } from "@src/components/settings/SectionHeader"
 import {
 	Button,
 	Select,
@@ -593,16 +592,9 @@ const ModesView = () => {
 
 	return (
 		<div>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<MessageSquare className="w-4" />
-					<div>{t("prompts:title")}</div>
-				</div>
-			</SectionHeader>
-
 			<Section>
 				<div>
-					<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
+					<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mt-1 mb-3">
 						<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
 						<div className="flex gap-2">
 							<div className="relative inline-block">

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

@@ -1,17 +1,7 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Trans } from "react-i18next"
-import {
-	Info,
-	Download,
-	Upload,
-	TriangleAlert,
-	Bug,
-	Lightbulb,
-	Shield,
-	MessageCircle,
-	MessagesSquare,
-} from "lucide-react"
+import { Download, Upload, TriangleAlert, Bug, Lightbulb, Shield, MessageCircle, MessagesSquare } from "lucide-react"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
 import type { TelemetrySetting } from "@roo-code/types"
@@ -35,19 +25,14 @@ export const About = ({ telemetrySetting, setTelemetrySetting, className, ...pro
 
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
-			<SectionHeader
-				description={
-					Package.sha
-						? `Version: ${Package.version} (${Package.sha.slice(0, 8)})`
-						: `Version: ${Package.version}`
-				}>
-				<div className="flex items-center gap-2">
-					<Info className="w-4" />
-					<div>{t("settings:sections.about")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.about")}</SectionHeader>
 
 			<Section>
+				<p>
+					{Package.sha
+						? `Version: ${Package.version} (${Package.sha.slice(0, 8)})`
+						: `Version: ${Package.version}`}
+				</p>
 				<div>
 					<VSCodeCheckbox
 						checked={telemetrySetting !== "disabled"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, useState } from "react"
-import { X, CheckCheck } from "lucide-react"
+import { X } from "lucide-react"
 import { Trans } from "react-i18next"
 import { Package } from "@roo/package"
 
@@ -107,12 +107,7 @@ export const AutoApproveSettings = ({
 
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<CheckCheck className="w-4 h-4" />
-					<div>{t("settings:sections.autoApprove")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.autoApprove")}</SectionHeader>
 
 			<Section>
 				<div className="space-y-4">
@@ -179,7 +174,7 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-eye" />
 							<div>{t("settings:autoApprove.readOnly.label")}</div>
 						</div>
-						<div>
+						<div data-setting-id="autoApprove.readOnly.outsideWorkspace">
 							<VSCodeCheckbox
 								checked={alwaysAllowReadOnlyOutsideWorkspace}
 								onChange={(e: any) =>
@@ -203,7 +198,7 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-edit" />
 							<div>{t("settings:autoApprove.write.label")}</div>
 						</div>
-						<div>
+						<div data-setting-id="autoApprove.write.outsideWorkspace">
 							<VSCodeCheckbox
 								checked={alwaysAllowWriteOutsideWorkspace}
 								onChange={(e: any) =>
@@ -218,7 +213,7 @@ export const AutoApproveSettings = ({
 								{t("settings:autoApprove.write.outsideWorkspace.description")}
 							</div>
 						</div>
-						<div>
+						<div data-setting-id="autoApprove.write.protected">
 							<VSCodeCheckbox
 								checked={alwaysAllowWriteProtected}
 								onChange={(e: any) =>
@@ -240,7 +235,7 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-question" />
 							<div>{t("settings:autoApprove.followupQuestions.label")}</div>
 						</div>
-						<div>
+						<div data-setting-id="autoApprove.followupQuestions.timeout">
 							<div className="flex items-center gap-2">
 								<Slider
 									min={1000}
@@ -268,7 +263,7 @@ export const AutoApproveSettings = ({
 							<div>{t("settings:autoApprove.execute.label")}</div>
 						</div>
 
-						<div>
+						<div data-setting-id="autoApprove.execute.allowedCommands">
 							<label className="block font-medium mb-1" data-testid="allowed-commands-heading">
 								{t("settings:autoApprove.execute.allowedCommands")}
 							</label>
@@ -320,7 +315,7 @@ export const AutoApproveSettings = ({
 						</div>
 
 						{/* Denied Commands Section */}
-						<div className="mt-6">
+						<div className="mt-6" data-setting-id="autoApprove.execute.deniedCommands">
 							<label className="block font-medium mb-1" data-testid="denied-commands-heading">
 								{t("settings:autoApprove.execute.deniedCommands")}
 							</label>

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

@@ -1,5 +1,4 @@
 import { VSCodeCheckbox, VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { SquareMousePointer } from "lucide-react"
 import { HTMLAttributes, useEffect, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
 
@@ -108,15 +107,10 @@ export const BrowserSettings = ({
 
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<SquareMousePointer className="w-4" />
-					<div>{t("settings:sections.browser")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.browser")}</SectionHeader>
 
 			<Section>
-				<div>
+				<div data-setting-id="browser.enable">
 					<VSCodeCheckbox
 						checked={browserToolEnabled}
 						onChange={(e: any) => setCachedStateField("browserToolEnabled", e.target.checked)}>
@@ -135,7 +129,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="browser.viewport">
 							<label className="block font-medium mb-1">{t("settings:browser.viewport.label")}</label>
 							<Select
 								value={browserViewportSize}
@@ -158,7 +152,7 @@ export const BrowserSettings = ({
 							</div>
 						</div>
 
-						<div>
+						<div data-setting-id="browser.screenshotQuality">
 							<label className="block font-medium mb-1">
 								{t("settings:browser.screenshotQuality.label")}
 							</label>
@@ -177,7 +171,7 @@ export const BrowserSettings = ({
 							</div>
 						</div>
 
-						<div>
+						<div data-setting-id="browser.remote">
 							<VSCodeCheckbox
 								checked={remoteBrowserEnabled}
 								onChange={(e: any) => {