Skip to content

Commit e23e1ec

Browse files
brunobergherroomote-v0[bot]
brunobergher
and
roomote-v0[bot]
authored
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>
1 parent 632b86c commit e23e1ec

38 files changed

Lines changed: 100 additions & 166 deletions

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
3535
hideAnnouncement()
3636
}
3737
}}>
38-
<DialogContent className="max-w-96">
38+
<DialogContent>
3939
<DialogHeader>
4040
<DialogTitle>{t("chat:announcement.title", { version: Package.version })}</DialogTitle>
4141
</DialogHeader>

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

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { memo, useState } from "react"
2+
import { ArrowLeft } from "lucide-react"
23
import { DeleteTaskDialog } from "./DeleteTaskDialog"
34
import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
45
import { Virtuoso } from "react-virtuoso"
@@ -81,27 +82,33 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
8182
return (
8283
<Tab>
8384
<TabHeader className="flex flex-col gap-2">
84-
<div className="flex justify-between items-center">
85-
<h3 className="text-vscode-foreground m-0">{t("history:history")}</h3>
86-
<div className="flex gap-2">
87-
<StandardTooltip
88-
content={
89-
isSelectionMode
90-
? `${t("history:exitSelectionMode")}`
91-
: `${t("history:enterSelectionMode")}`
92-
}>
93-
<Button
94-
variant={isSelectionMode ? "primary" : "secondary"}
95-
onClick={toggleSelectionMode}
96-
data-testid="toggle-selection-mode-button">
97-
<span
98-
className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
99-
/>
100-
{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
101-
</Button>
102-
</StandardTooltip>
103-
<Button onClick={onDone}>{t("history:done")}</Button>
85+
<div className="flex items-center justify-between gap-2">
86+
<div className="flex items-center gap-2">
87+
<Button
88+
variant="ghost"
89+
className="px-1.5 -ml-2"
90+
onClick={onDone}
91+
aria-label={t("history:done")}
92+
data-testid="history-done-button">
93+
<ArrowLeft />
94+
<span className="sr-only">{t("history:done")}</span>
95+
</Button>
96+
<h3 className="text-vscode-foreground m-0">{t("history:history")}</h3>
10497
</div>
98+
<StandardTooltip
99+
content={
100+
isSelectionMode ? `${t("history:exitSelectionMode")}` : `${t("history:enterSelectionMode")}`
101+
}>
102+
<Button
103+
variant={isSelectionMode ? "primary" : "secondary"}
104+
onClick={toggleSelectionMode}
105+
data-testid="toggle-selection-mode-button">
106+
<span
107+
className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
108+
/>
109+
{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
110+
</Button>
111+
</StandardTooltip>
105112
</div>
106113
<div className="flex flex-col gap-2">
107114
<VSCodeTextField

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState, useEffect, useMemo, useContext } from "react"
22
import { Button } from "@/components/ui/button"
3+
import { ArrowLeft } from "lucide-react"
34
import { Tab, TabContent, TabHeader } from "../common/Tab"
45
import { MarketplaceViewStateManager } from "./MarketplaceViewStateManager"
56
import { useStateManager } from "./useStateManager"
@@ -99,16 +100,17 @@ export function MarketplaceView({ stateManager, onDone, targetTab }: Marketplace
99100
<TooltipProvider delayDuration={300}>
100101
<Tab>
101102
<TabHeader className="flex flex-col sticky top-0 z-10 px-3 py-2">
102-
<div className="flex justify-between items-center px-2">
103-
<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
104-
<div className="flex gap-2 items-center">
103+
<div className="flex items-center justify-between gap-2 px-2">
104+
<div className="flex items-center gap-2">
105105
<Button
106-
variant="primary"
107-
onClick={() => {
108-
onDone?.()
109-
}}>
110-
{t("marketplace:done")}
106+
variant="ghost"
107+
className="px-1.5 -ml-2"
108+
onClick={() => onDone?.()}
109+
aria-label={t("settings:back")}>
110+
<ArrowLeft />
111+
<span className="sr-only">{t("settings:back")}</span>
111112
</Button>
113+
<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
112114
</div>
113115
</div>
114116

@@ -126,12 +128,12 @@ export function MarketplaceView({ stateManager, onDone, targetTab }: Marketplace
126128
/>
127129
</div>
128130
<button
129-
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"
131+
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"
130132
onClick={() => manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "mcp" } })}>
131133
MCP
132134
</button>
133135
<button
134-
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"
136+
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"
135137
onClick={() =>
136138
manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "mode" } })
137139
}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({ item,
9191

9292
return (
9393
<>
94-
<div className="border border-vscode-panel-border rounded-sm p-3 bg-vscode-editor-background">
94+
<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">
9595
<div className="flex gap-2 items-start justify-between">
9696
<div className="flex gap-2 items-start">
9797
<div>

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
VSCodePanelTab,
88
VSCodePanelView,
99
} from "@vscode/webview-ui-toolkit/react"
10-
import { Webhook } from "lucide-react"
1110

1211
import type { McpServer } from "@roo-code/types"
1312

@@ -47,12 +46,7 @@ const McpView = () => {
4746

4847
return (
4948
<div>
50-
<SectionHeader>
51-
<div className="flex items-center gap-2">
52-
<Webhook className="w-4" />
53-
<div>{t("mcp:title")}</div>
54-
</div>
55-
</SectionHeader>
49+
<SectionHeader>{t("mcp:title")}</SectionHeader>
5650

5751
<Section>
5852
<div

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
VSCodeTextField,
99
} from "@vscode/webview-ui-toolkit/react"
1010
import { Trans } from "react-i18next"
11-
import { ChevronDown, X, Upload, Download, MessageSquare } from "lucide-react"
11+
import { ChevronDown, X, Upload, Download } from "lucide-react"
1212

1313
import { ModeConfig, GroupEntry, PromptComponent, ToolGroup, modeConfigSchema } from "@roo-code/types"
1414

@@ -29,7 +29,6 @@ import { buildDocLink } from "@src/utils/docLinks"
2929
import { useAppTranslation } from "@src/i18n/TranslationContext"
3030
import { useExtensionState } from "@src/context/ExtensionStateContext"
3131
import { Section } from "@src/components/settings/Section"
32-
import { SectionHeader } from "@src/components/settings/SectionHeader"
3332
import {
3433
Button,
3534
Select,
@@ -593,17 +592,12 @@ const ModesView = () => {
593592

594593
return (
595594
<div>
596-
<SectionHeader>
597-
<div className="flex items-center gap-2">
598-
<MessageSquare className="w-4" />
599-
<div>{t("prompts:title")}</div>
600-
</div>
601-
</SectionHeader>
602-
603595
<Section>
604596
<div>
605597
<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
606-
<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
598+
<h3 className="text-[1.25em] font-semibold text-vscode-foreground mt-4 mb-2">
599+
{t("prompts:modes.title")}
600+
</h3>
607601
<div className="flex gap-2">
608602
<div className="relative inline-block">
609603
<StandardTooltip content={t("prompts:modes.editModesConfig")}>

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

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,7 @@
11
import { HTMLAttributes } from "react"
22
import { useAppTranslation } from "@/i18n/TranslationContext"
33
import { Trans } from "react-i18next"
4-
import {
5-
Info,
6-
Download,
7-
Upload,
8-
TriangleAlert,
9-
Bug,
10-
Lightbulb,
11-
Shield,
12-
MessageCircle,
13-
MessagesSquare,
14-
} from "lucide-react"
4+
import { Download, Upload, TriangleAlert, Bug, Lightbulb, Shield, MessageCircle, MessagesSquare } from "lucide-react"
155
import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
166

177
import type { TelemetrySetting } from "@roo-code/types"
@@ -38,19 +28,14 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
3828

3929
return (
4030
<div className={cn("flex flex-col gap-2", className)} {...props}>
41-
<SectionHeader
42-
description={
43-
Package.sha
44-
? `Version: ${Package.version} (${Package.sha.slice(0, 8)})`
45-
: `Version: ${Package.version}`
46-
}>
47-
<div className="flex items-center gap-2">
48-
<Info className="w-4" />
49-
<div>{t("settings:sections.about")}</div>
50-
</div>
51-
</SectionHeader>
31+
<SectionHeader>{t("settings:sections.about")}</SectionHeader>
5232

5333
<Section>
34+
<p>
35+
{Package.sha
36+
? `Version: ${Package.version} (${Package.sha.slice(0, 8)})`
37+
: `Version: ${Package.version}`}
38+
</p>
5439
<SearchableSetting
5540
settingId="about-telemetry"
5641
section="about"

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { HTMLAttributes, useState } from "react"
2-
import { X, CheckCheck } from "lucide-react"
2+
import { X } from "lucide-react"
33
import { Trans } from "react-i18next"
44
import { Package } from "@roo/package"
55

@@ -108,12 +108,7 @@ export const AutoApproveSettings = ({
108108

109109
return (
110110
<div {...props}>
111-
<SectionHeader>
112-
<div className="flex items-center gap-2">
113-
<CheckCheck className="w-4 h-4" />
114-
<div>{t("settings:sections.autoApprove")}</div>
115-
</div>
116-
</SectionHeader>
111+
<SectionHeader>{t("settings:sections.autoApprove")}</SectionHeader>
117112

118113
<Section>
119114
<div className="space-y-4">

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { VSCodeCheckbox, VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
2-
import { SquareMousePointer } from "lucide-react"
32
import { HTMLAttributes, useEffect, useMemo, useState } from "react"
43
import { Trans } from "react-i18next"
54

@@ -109,12 +108,7 @@ export const BrowserSettings = ({
109108

110109
return (
111110
<div {...props}>
112-
<SectionHeader>
113-
<div className="flex items-center gap-2">
114-
<SquareMousePointer className="w-4" />
115-
<div>{t("settings:sections.browser")}</div>
116-
</div>
117-
</SectionHeader>
111+
<SectionHeader>{t("settings:sections.browser")}</SectionHeader>
118112

119113
<Section>
120114
<SearchableSetting

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { HTMLAttributes } from "react"
22
import { useAppTranslation } from "@/i18n/TranslationContext"
33
import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
4-
import { GitBranch } from "lucide-react"
54
import { Trans } from "react-i18next"
65
import { buildDocLink } from "@src/utils/docLinks"
76
import { Slider } from "@/components/ui"
@@ -31,12 +30,7 @@ export const CheckpointSettings = ({
3130
const { t } = useAppTranslation()
3231
return (
3332
<div {...props}>
34-
<SectionHeader>
35-
<div className="flex items-center gap-2">
36-
<GitBranch className="w-4" />
37-
<div>{t("settings:sections.checkpoints")}</div>
38-
</div>
39-
</SectionHeader>
33+
<SectionHeader>{t("settings:sections.checkpoints")}</SectionHeader>
4034

4135
<Section>
4236
<SearchableSetting

0 commit comments

Comments
 (0)