ソースを参照

ux: UI improvements to search settings (#10633)

* UI changs

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

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

* i18n

---------

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>
Bruno Bergher 1 週間 前
コミット
e23e1ecc94
38 ファイル変更100 行追加166 行削除
  1. 1 1
      webview-ui/src/components/chat/Announcement.tsx
  2. 27 20
      webview-ui/src/components/history/HistoryView.tsx
  3. 12 10
      webview-ui/src/components/marketplace/MarketplaceView.tsx
  4. 1 1
      webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
  5. 1 7
      webview-ui/src/components/mcp/McpView.tsx
  6. 4 10
      webview-ui/src/components/modes/ModesView.tsx
  7. 7 22
      webview-ui/src/components/settings/About.tsx
  8. 2 7
      webview-ui/src/components/settings/AutoApproveSettings.tsx
  9. 1 7
      webview-ui/src/components/settings/BrowserSettings.tsx
  10. 1 7
      webview-ui/src/components/settings/CheckpointSettings.tsx
  11. 2 5
      webview-ui/src/components/settings/ContextManagementSettings.tsx
  12. 1 7
      webview-ui/src/components/settings/ExperimentalSettings.tsx
  13. 1 7
      webview-ui/src/components/settings/LanguageSettings.tsx
  14. 1 7
      webview-ui/src/components/settings/NotificationSettings.tsx
  15. 1 5
      webview-ui/src/components/settings/PromptsSettings.tsx
  16. 2 7
      webview-ui/src/components/settings/SectionHeader.tsx
  17. 12 14
      webview-ui/src/components/settings/SettingsView.tsx
  18. 2 7
      webview-ui/src/components/settings/SlashCommandsSettings.tsx
  19. 1 7
      webview-ui/src/components/settings/TerminalSettings.tsx
  20. 1 7
      webview-ui/src/components/settings/UISettings.tsx
  21. 1 0
      webview-ui/src/i18n/locales/ca/settings.json
  22. 1 0
      webview-ui/src/i18n/locales/de/settings.json
  23. 2 1
      webview-ui/src/i18n/locales/en/settings.json
  24. 1 0
      webview-ui/src/i18n/locales/es/settings.json
  25. 1 0
      webview-ui/src/i18n/locales/fr/settings.json
  26. 1 0
      webview-ui/src/i18n/locales/hi/settings.json
  27. 1 0
      webview-ui/src/i18n/locales/id/settings.json
  28. 1 0
      webview-ui/src/i18n/locales/it/settings.json
  29. 1 0
      webview-ui/src/i18n/locales/ja/settings.json
  30. 1 0
      webview-ui/src/i18n/locales/ko/settings.json
  31. 1 0
      webview-ui/src/i18n/locales/nl/settings.json
  32. 1 0
      webview-ui/src/i18n/locales/pl/settings.json
  33. 1 0
      webview-ui/src/i18n/locales/pt-BR/settings.json
  34. 1 0
      webview-ui/src/i18n/locales/ru/settings.json
  35. 1 0
      webview-ui/src/i18n/locales/tr/settings.json
  36. 1 0
      webview-ui/src/i18n/locales/vi/settings.json
  37. 1 0
      webview-ui/src/i18n/locales/zh-CN/settings.json
  38. 1 0
      webview-ui/src/i18n/locales/zh-TW/settings.json

+ 1 - 1
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>

+ 27 - 20
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

+ 12 - 10
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("settings:back")}</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" } })
 								}>

+ 1 - 1
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>

+ 1 - 7
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 type { McpServer } from "@roo-code/types"
 
@@ -47,12 +46,7 @@ const McpView = () => {
 
 	return (
 		<div>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<Webhook className="w-4" />
-					<div>{t("mcp:title")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("mcp:title")}</SectionHeader>
 
 			<Section>
 				<div

+ 4 - 10
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,17 +592,12 @@ 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">
-						<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
+						<h3 className="text-[1.25em] font-semibold text-vscode-foreground mt-4 mb-2">
+							{t("prompts:modes.title")}
+						</h3>
 						<div className="flex gap-2">
 							<div className="relative inline-block">
 								<StandardTooltip content={t("prompts:modes.editModesConfig")}>

+ 7 - 22
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"
@@ -38,19 +28,14 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
 
 	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>
 				<SearchableSetting
 					settingId="about-telemetry"
 					section="about"

+ 2 - 7
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"
 
@@ -108,12 +108,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">

+ 1 - 7
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"
 
@@ -109,12 +108,7 @@ 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>
 				<SearchableSetting

+ 1 - 7
webview-ui/src/components/settings/CheckpointSettings.tsx

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { GitBranch } from "lucide-react"
 import { Trans } from "react-i18next"
 import { buildDocLink } from "@src/utils/docLinks"
 import { Slider } from "@/components/ui"
@@ -31,12 +30,7 @@ export const CheckpointSettings = ({
 	const { t } = useAppTranslation()
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<GitBranch className="w-4" />
-					<div>{t("settings:sections.checkpoints")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.checkpoints")}</SectionHeader>
 
 			<Section>
 				<SearchableSetting

+ 2 - 5
webview-ui/src/components/settings/ContextManagementSettings.tsx

@@ -2,7 +2,7 @@ import { HTMLAttributes } from "react"
 import React from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { Database, FoldVertical } from "lucide-react"
+import { FoldVertical } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Button } from "@/components/ui"
@@ -108,10 +108,7 @@ export const ContextManagementSettings = ({
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
 			<SectionHeader description={t("settings:contextManagement.description")}>
-				<div className="flex items-center gap-2">
-					<Database className="w-4" />
-					<div>{t("settings:sections.contextManagement")}</div>
-				</div>
+				{t("settings:sections.contextManagement")}
 			</SectionHeader>
 
 			<Section>

+ 1 - 7
webview-ui/src/components/settings/ExperimentalSettings.tsx

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react"
-import { FlaskConical } from "lucide-react"
 
 import type { Experiments, ImageGenerationProvider } from "@roo-code/types"
 
@@ -47,12 +46,7 @@ export const ExperimentalSettings = ({
 
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<FlaskConical className="w-4" />
-					<div>{t("settings:sections.experimental")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.experimental")}</SectionHeader>
 
 			<Section>
 				{Object.entries(experimentConfigsMap)

+ 1 - 7
webview-ui/src/components/settings/LanguageSettings.tsx

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { Globe } from "lucide-react"
 
 import type { Language } from "@roo-code/types"
 
@@ -24,12 +23,7 @@ export const LanguageSettings = ({ language, setCachedStateField, className, ...
 
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<Globe className="w-4" />
-					<div>{t("settings:sections.language")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.language")}</SectionHeader>
 
 			<Section>
 				<SearchableSetting

+ 1 - 7
webview-ui/src/components/settings/NotificationSettings.tsx

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { Bell } from "lucide-react"
 
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
@@ -28,12 +27,7 @@ export const NotificationSettings = ({
 	const { t } = useAppTranslation()
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<Bell className="w-4" />
-					<div>{t("settings:sections.notifications")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.notifications")}</SectionHeader>
 
 			<Section>
 				<SearchableSetting

+ 1 - 5
webview-ui/src/components/settings/PromptsSettings.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, FormEvent } from "react"
 import { VSCodeTextArea, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { MessageSquare } from "lucide-react"
 
 import { supportPrompt, SupportPromptType } from "@roo/support-prompt"
 
@@ -139,10 +138,7 @@ const PromptsSettings = ({
 	return (
 		<div>
 			<SectionHeader description={t("settings:prompts.description")}>
-				<div className="flex items-center gap-2">
-					<MessageSquare className="w-4" />
-					<div>{t("settings:sections.prompts")}</div>
-				</div>
+				{t("settings:sections.prompts")}
 			</SectionHeader>
 
 			<Section>

+ 2 - 7
webview-ui/src/components/settings/SectionHeader.tsx

@@ -9,13 +9,8 @@ type SectionHeaderProps = HTMLAttributes<HTMLDivElement> & {
 
 export const SectionHeader = ({ description, children, className, ...props }: SectionHeaderProps) => {
 	return (
-		<div
-			className={cn(
-				"sticky top-0 z-10 text-vscode-sideBar-foreground bg-vscode-sideBar-background brightness-90 px-5 py-4",
-				className,
-			)}
-			{...props}>
-			<h4 className="m-0">{children}</h4>
+		<div className={cn("sticky top-0 z-10 text-vscode-sideBar-foreground px-5 pt-6 pb-4", className)} {...props}>
+			<h3 className="text-[1.25em] font-semibold text-vscode-foreground m-0">{children}</h3>
 			{description && <p className="text-vscode-descriptionForeground text-sm mt-2 mb-0">{description}</p>}
 		</div>
 	)

+ 12 - 14
webview-ui/src/components/settings/SettingsView.tsx

@@ -12,7 +12,6 @@ import React, {
 import {
 	CheckCheck,
 	SquareMousePointer,
-	Webhook,
 	GitBranch,
 	Bell,
 	Database,
@@ -28,6 +27,7 @@ import {
 	Plug,
 	Server,
 	Users2,
+	ArrowLeft,
 } from "lucide-react"
 
 import {
@@ -632,8 +632,16 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	return (
 		<Tab>
 			<TabHeader className="flex justify-between items-center gap-2">
-				<h3 className="text-vscode-foreground m-0 flex-shrink-0">{t("settings:header.title")}</h3>
-				<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 />
+							<span className="sr-only">{t("settings:common.done")}</span>
+						</Button>
+					</StandardTooltip>
+					<h3 className="text-vscode-foreground m-0 flex-shrink-0">{t("settings:header.title")}</h3>
+				</div>
+				<div className="flex items-center gap-2 shrink-0">
 					{isIndexingComplete && (
 						<SettingsSearch index={searchIndex} onNavigate={handleSearchNavigate} sections={sections} />
 					)}
@@ -654,11 +662,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>
 
@@ -729,12 +732,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						{/* Providers Section */}
 						{renderTab === "providers" && (
 							<div>
-								<SectionHeader>
-									<div className="flex items-center gap-2">
-										<Webhook className="w-4" />
-										<div>{t("settings:sections.providers")}</div>
-									</div>
-								</SectionHeader>
+								<SectionHeader>{t("settings:sections.providers")}</SectionHeader>
 
 								<Section>
 									<ApiConfigManager

+ 2 - 7
webview-ui/src/components/settings/SlashCommandsSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import { Plus, Globe, Folder, Settings, SquareSlash } from "lucide-react"
+import { Plus, Globe, Folder, Settings } from "lucide-react"
 import { Trans } from "react-i18next"
 
 import type { Command } from "@roo-code/types"
@@ -103,12 +103,7 @@ export const SlashCommandsSettings: React.FC = () => {
 
 	return (
 		<div>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<SquareSlash className="w-4" />
-					<div>{t("settings:sections.slashCommands")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.slashCommands")}</SectionHeader>
 
 			<Section>
 				{/* Description section */}

+ 1 - 7
webview-ui/src/components/settings/TerminalSettings.tsx

@@ -1,7 +1,6 @@
 import { HTMLAttributes, useState, useCallback } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { vscode } from "@/utils/vscode"
-import { SquareTerminal } from "lucide-react"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { Trans } from "react-i18next"
 import { buildDocLink } from "@src/utils/docLinks"
@@ -88,12 +87,7 @@ export const TerminalSettings = ({
 
 	return (
 		<div className={cn("flex flex-col", className)} {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<SquareTerminal className="w-4" />
-					<div>{t("settings:sections.terminal")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.terminal")}</SectionHeader>
 
 			<Section>
 				{/* Basic Settings */}

+ 1 - 7
webview-ui/src/components/settings/UISettings.tsx

@@ -1,7 +1,6 @@
 import { HTMLAttributes, useMemo } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { Glasses } from "lucide-react"
 import { telemetryClient } from "@/utils/TelemetryClient"
 
 import { SetCachedStateField } from "./types"
@@ -51,12 +50,7 @@ export const UISettings = ({
 
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<Glasses className="w-4" />
-					<div>{t("settings:sections.ui")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.ui")}</SectionHeader>
 
 			<Section>
 				<div className="space-y-6">

+ 1 - 0
webview-ui/src/i18n/locales/ca/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Torna a la vista de tasques",
 	"common": {
 		"save": "Desar",
 		"done": "Fet",

+ 1 - 0
webview-ui/src/i18n/locales/de/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Zurück zur Aufgabenansicht",
 	"common": {
 		"save": "Speichern",
 		"done": "Fertig",

+ 2 - 1
webview-ui/src/i18n/locales/en/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Back to tasks view",
 	"common": {
 		"save": "Save",
 		"done": "Done",
@@ -12,7 +13,7 @@
 		"title": "Settings",
 		"saveButtonTooltip": "Save changes",
 		"nothingChangedTooltip": "Nothing changed",
-		"doneButtonTooltip": "Discard unsaved changes and close settings panel"
+		"doneButtonTooltip": "Discard unsaved changes and go back to tasks view"
 	},
 	"search": {
 		"placeholder": "Search settings...",

+ 1 - 0
webview-ui/src/i18n/locales/es/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Volver a la vista de tareas",
 	"common": {
 		"save": "Guardar",
 		"done": "Hecho",

+ 1 - 0
webview-ui/src/i18n/locales/fr/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Retour à la vue des tâches",
 	"common": {
 		"save": "Enregistrer",
 		"done": "Terminé",

+ 1 - 0
webview-ui/src/i18n/locales/hi/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "टास्क व्यू पर वापस जाओ",
 	"common": {
 		"save": "सहेजें",
 		"done": "पूर्ण",

+ 1 - 0
webview-ui/src/i18n/locales/id/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Kembali ke tampilan tugas",
 	"common": {
 		"save": "Simpan",
 		"done": "Selesai",

+ 1 - 0
webview-ui/src/i18n/locales/it/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Torna alla vista attività",
 	"common": {
 		"save": "Salva",
 		"done": "Fatto",

+ 1 - 0
webview-ui/src/i18n/locales/ja/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "タスク ビューに戻る",
 	"common": {
 		"save": "保存",
 		"done": "完了",

+ 1 - 0
webview-ui/src/i18n/locales/ko/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "작업 보기로 돌아가기",
 	"common": {
 		"save": "저장",
 		"done": "완료",

+ 1 - 0
webview-ui/src/i18n/locales/nl/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Terug naar takenoverzicht",
 	"common": {
 		"save": "Opslaan",
 		"done": "Gereed",

+ 1 - 0
webview-ui/src/i18n/locales/pl/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Wróć do widoku zadań",
 	"common": {
 		"save": "Zapisz",
 		"done": "Gotowe",

+ 1 - 0
webview-ui/src/i18n/locales/pt-BR/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Voltar para a visão de tarefas",
 	"common": {
 		"save": "Salvar",
 		"done": "Concluído",

+ 1 - 0
webview-ui/src/i18n/locales/ru/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Назад к списку задач",
 	"common": {
 		"save": "Сохранить",
 		"done": "Готово",

+ 1 - 0
webview-ui/src/i18n/locales/tr/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Görev görünümüne dön",
 	"common": {
 		"save": "Kaydet",
 		"done": "Tamamlandı",

+ 1 - 0
webview-ui/src/i18n/locales/vi/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Quay lại chế độ xem tác vụ",
 	"common": {
 		"save": "Lưu",
 		"done": "Hoàn thành",

+ 1 - 0
webview-ui/src/i18n/locales/zh-CN/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "返回任务视图",
 	"common": {
 		"save": "保存",
 		"done": "完成",

+ 1 - 0
webview-ui/src/i18n/locales/zh-TW/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "返回工作檢視",
 	"common": {
 		"save": "儲存",
 		"done": "完成",