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>
This commit is contained in:
Bruno Bergher 2026-01-12 11:59:49 +00:00 committed by GitHub
parent 632b86cfbe
commit e23e1ecc94
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
38 changed files with 100 additions and 166 deletions

View file

@ -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>

View file

@ -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

View file

@ -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" } })
}>

View file

@ -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>

View file

@ -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

View file

@ -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")}>

View file

@ -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"

View file

@ -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">

View file

@ -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

View file

@ -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

View file

@ -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>

View file

@ -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)

View file

@ -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

View file

@ -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

View file

@ -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>

View file

@ -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>
)

View file

@ -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

View file

@ -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 */}

View file

@ -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 */}

View file

@ -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">

View file

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

View file

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

View file

@ -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...",

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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