Skip to content

Commit 632b86c

Browse files
mrubensroomote-v0[bot]roomote
authored
Basic settings search (#10619)
* Prototype of a simpler searchable settings * Fix tests * UI improvements * Input tweaks * Update webview-ui/src/components/settings/SettingsSearch.tsx Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> * fix: remove duplicate Escape key handler dead code * Cleanup * Fix tests --------- Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> Co-authored-by: Roo Code <roomote@roocode.com>
1 parent 611bb70 commit 632b86c

40 files changed

Lines changed: 1508 additions & 503 deletions

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

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { Button } from "@/components/ui"
2424

2525
import { SectionHeader } from "./SectionHeader"
2626
import { Section } from "./Section"
27+
import { SearchableSetting } from "./SearchableSetting"
2728

2829
type AboutProps = HTMLAttributes<HTMLDivElement> & {
2930
telemetrySetting: TelemetrySetting
@@ -50,7 +51,10 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
5051
</SectionHeader>
5152

5253
<Section>
53-
<div>
54+
<SearchableSetting
55+
settingId="about-telemetry"
56+
section="about"
57+
label={t("settings:footer.telemetry.label")}>
5458
<VSCodeCheckbox
5559
checked={telemetrySetting !== "disabled"}
5660
onChange={(e: any) => {
@@ -67,7 +71,7 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
6771
}}
6872
/>
6973
</p>
70-
</div>
74+
</SearchableSetting>
7175
</Section>
7276

7377
<Section className="space-y-0">
@@ -120,7 +124,11 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
120124
</span>
121125
</div>
122126
{setDebug && (
123-
<div className="flex flex-col gap-2 mt-4 pt-4 border-t border-vscode-settings-headerBorder">
127+
<SearchableSetting
128+
settingId="about-debug-mode"
129+
section="about"
130+
label={t("settings:about.debugMode.label")}
131+
className="mt-4 pt-4 border-t border-vscode-settings-headerBorder">
124132
<VSCodeCheckbox
125133
checked={debug ?? false}
126134
onChange={(e: any) => {
@@ -132,30 +140,35 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
132140
<p className="text-vscode-descriptionForeground text-sm mt-0">
133141
{t("settings:about.debugMode.description")}
134142
</p>
135-
</div>
143+
</SearchableSetting>
136144
)}
137145
</div>
138146
</Section>
139147

140148
<Section className="space-y-0">
141-
<h3>{t("settings:about.manageSettings")}</h3>
142-
<div className="flex flex-wrap items-center gap-2">
143-
<Button onClick={() => vscode.postMessage({ type: "exportSettings" })} className="w-28">
144-
<Upload className="p-0.5" />
145-
{t("settings:footer.settings.export")}
146-
</Button>
147-
<Button onClick={() => vscode.postMessage({ type: "importSettings" })} className="w-28">
148-
<Download className="p-0.5" />
149-
{t("settings:footer.settings.import")}
150-
</Button>
151-
<Button
152-
variant="destructive"
153-
onClick={() => vscode.postMessage({ type: "resetState" })}
154-
className="w-28">
155-
<TriangleAlert className="p-0.5" />
156-
{t("settings:footer.settings.reset")}
157-
</Button>
158-
</div>
149+
<SearchableSetting
150+
settingId="about-manage-settings"
151+
section="about"
152+
label={t("settings:about.manageSettings")}>
153+
<h3>{t("settings:about.manageSettings")}</h3>
154+
<div className="flex flex-wrap items-center gap-2">
155+
<Button onClick={() => vscode.postMessage({ type: "exportSettings" })} className="w-28">
156+
<Upload className="p-0.5" />
157+
{t("settings:footer.settings.export")}
158+
</Button>
159+
<Button onClick={() => vscode.postMessage({ type: "importSettings" })} className="w-28">
160+
<Download className="p-0.5" />
161+
{t("settings:footer.settings.import")}
162+
</Button>
163+
<Button
164+
variant="destructive"
165+
onClick={() => vscode.postMessage({ type: "resetState" })}
166+
className="w-28">
167+
<TriangleAlert className="p-0.5" />
168+
{t("settings:footer.settings.reset")}
169+
</Button>
170+
</div>
171+
</SearchableSetting>
159172
</Section>
160173
</div>
161174
)

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

Lines changed: 71 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Button, Input, Slider } from "@/components/ui"
1111
import { SetCachedStateField } from "./types"
1212
import { SectionHeader } from "./SectionHeader"
1313
import { Section } from "./Section"
14+
import { SearchableSetting } from "./SearchableSetting"
1415
import { AutoApproveToggle } from "./AutoApproveToggle"
1516
import { MaxLimitInputs } from "./MaxLimitInputs"
1617
import { useExtensionState } from "@/context/ExtensionStateContext"
@@ -116,40 +117,45 @@ export const AutoApproveSettings = ({
116117

117118
<Section>
118119
<div className="space-y-4">
119-
<VSCodeCheckbox
120-
checked={effectiveAutoApprovalEnabled}
121-
aria-label={t("settings:autoApprove.toggleAriaLabel")}
122-
onChange={() => {
123-
const newValue = !(autoApprovalEnabled ?? false)
124-
setAutoApprovalEnabled(newValue)
125-
vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
126-
}}>
127-
<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
128-
</VSCodeCheckbox>
129-
<div className="text-vscode-descriptionForeground text-sm mt-1">
130-
<p>{t("settings:autoApprove.description")}</p>
131-
<p>
132-
<Trans
133-
i18nKey="settings:autoApprove.toggleShortcut"
134-
components={{
135-
SettingsLink: (
136-
<a
137-
href="#"
138-
className="text-vscode-textLink-foreground hover:underline cursor-pointer"
139-
onClick={(e) => {
140-
e.preventDefault()
141-
// Send message to open keyboard shortcuts with search for toggle command
142-
vscode.postMessage({
143-
type: "openKeyboardShortcuts",
144-
text: `${Package.name}.toggleAutoApprove`,
145-
})
146-
}}
147-
/>
148-
),
149-
}}
150-
/>
151-
</p>
152-
</div>
120+
<SearchableSetting
121+
settingId="auto-approve-enabled"
122+
section="autoApprove"
123+
label={t("settings:autoApprove.enabled")}>
124+
<VSCodeCheckbox
125+
checked={effectiveAutoApprovalEnabled}
126+
aria-label={t("settings:autoApprove.toggleAriaLabel")}
127+
onChange={() => {
128+
const newValue = !(autoApprovalEnabled ?? false)
129+
setAutoApprovalEnabled(newValue)
130+
vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
131+
}}>
132+
<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
133+
</VSCodeCheckbox>
134+
<div className="text-vscode-descriptionForeground text-sm mt-1">
135+
<p>{t("settings:autoApprove.description")}</p>
136+
<p>
137+
<Trans
138+
i18nKey="settings:autoApprove.toggleShortcut"
139+
components={{
140+
SettingsLink: (
141+
<a
142+
href="#"
143+
className="text-vscode-textLink-foreground hover:underline cursor-pointer"
144+
onClick={(e) => {
145+
e.preventDefault()
146+
// Send message to open keyboard shortcuts with search for toggle command
147+
vscode.postMessage({
148+
type: "openKeyboardShortcuts",
149+
text: `${Package.name}.toggleAutoApprove`,
150+
})
151+
}}
152+
/>
153+
),
154+
}}
155+
/>
156+
</p>
157+
</div>
158+
</SearchableSetting>
153159

154160
<AutoApproveToggle
155161
alwaysAllowReadOnly={alwaysAllowReadOnly}
@@ -179,7 +185,10 @@ export const AutoApproveSettings = ({
179185
<span className="codicon codicon-eye" />
180186
<div>{t("settings:autoApprove.readOnly.label")}</div>
181187
</div>
182-
<div>
188+
<SearchableSetting
189+
settingId="auto-approve-readonly-outside-workspace"
190+
section="autoApprove"
191+
label={t("settings:autoApprove.readOnly.outsideWorkspace.label")}>
183192
<VSCodeCheckbox
184193
checked={alwaysAllowReadOnlyOutsideWorkspace}
185194
onChange={(e: any) =>
@@ -193,7 +202,7 @@ export const AutoApproveSettings = ({
193202
<div className="text-vscode-descriptionForeground text-sm mt-1">
194203
{t("settings:autoApprove.readOnly.outsideWorkspace.description")}
195204
</div>
196-
</div>
205+
</SearchableSetting>
197206
</div>
198207
)}
199208

@@ -203,7 +212,10 @@ export const AutoApproveSettings = ({
203212
<span className="codicon codicon-edit" />
204213
<div>{t("settings:autoApprove.write.label")}</div>
205214
</div>
206-
<div>
215+
<SearchableSetting
216+
settingId="auto-approve-write-outside-workspace"
217+
section="autoApprove"
218+
label={t("settings:autoApprove.write.outsideWorkspace.label")}>
207219
<VSCodeCheckbox
208220
checked={alwaysAllowWriteOutsideWorkspace}
209221
onChange={(e: any) =>
@@ -217,8 +229,11 @@ export const AutoApproveSettings = ({
217229
<div className="text-vscode-descriptionForeground text-sm mt-1">
218230
{t("settings:autoApprove.write.outsideWorkspace.description")}
219231
</div>
220-
</div>
221-
<div>
232+
</SearchableSetting>
233+
<SearchableSetting
234+
settingId="auto-approve-write-protected"
235+
section="autoApprove"
236+
label={t("settings:autoApprove.write.protected.label")}>
222237
<VSCodeCheckbox
223238
checked={alwaysAllowWriteProtected}
224239
onChange={(e: any) =>
@@ -230,7 +245,7 @@ export const AutoApproveSettings = ({
230245
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
231246
{t("settings:autoApprove.write.protected.description")}
232247
</div>
233-
</div>
248+
</SearchableSetting>
234249
</div>
235250
)}
236251

@@ -240,7 +255,10 @@ export const AutoApproveSettings = ({
240255
<span className="codicon codicon-question" />
241256
<div>{t("settings:autoApprove.followupQuestions.label")}</div>
242257
</div>
243-
<div>
258+
<SearchableSetting
259+
settingId="auto-approve-followup-timeout"
260+
section="autoApprove"
261+
label={t("settings:autoApprove.followupQuestions.timeoutLabel")}>
244262
<div className="flex items-center gap-2">
245263
<Slider
246264
min={1000}
@@ -257,7 +275,7 @@ export const AutoApproveSettings = ({
257275
<div className="text-vscode-descriptionForeground text-sm mt-1">
258276
{t("settings:autoApprove.followupQuestions.timeoutLabel")}
259277
</div>
260-
</div>
278+
</SearchableSetting>
261279
</div>
262280
)}
263281

@@ -268,14 +286,17 @@ export const AutoApproveSettings = ({
268286
<div>{t("settings:autoApprove.execute.label")}</div>
269287
</div>
270288

271-
<div>
289+
<SearchableSetting
290+
settingId="auto-approve-allowed-commands"
291+
section="autoApprove"
292+
label={t("settings:autoApprove.execute.allowedCommands")}>
272293
<label className="block font-medium mb-1" data-testid="allowed-commands-heading">
273294
{t("settings:autoApprove.execute.allowedCommands")}
274295
</label>
275296
<div className="text-vscode-descriptionForeground text-sm mt-1">
276297
{t("settings:autoApprove.execute.allowedCommandsDescription")}
277298
</div>
278-
</div>
299+
</SearchableSetting>
279300

280301
<div className="flex gap-2">
281302
<Input
@@ -320,14 +341,18 @@ export const AutoApproveSettings = ({
320341
</div>
321342

322343
{/* Denied Commands Section */}
323-
<div className="mt-6">
344+
<SearchableSetting
345+
settingId="auto-approve-denied-commands"
346+
section="autoApprove"
347+
label={t("settings:autoApprove.execute.deniedCommands")}
348+
className="mt-6">
324349
<label className="block font-medium mb-1" data-testid="denied-commands-heading">
325350
{t("settings:autoApprove.execute.deniedCommands")}
326351
</label>
327352
<div className="text-vscode-descriptionForeground text-sm mt-1">
328353
{t("settings:autoApprove.execute.deniedCommandsDescription")}
329354
</div>
330-
</div>
355+
</SearchableSetting>
331356

332357
<div className="flex gap-2">
333358
<Input

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

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
1717
import { vscode } from "@/utils/vscode"
1818
import { buildDocLink } from "@src/utils/docLinks"
1919

20+
import { SearchableSetting } from "./SearchableSetting"
2021
import { Section } from "./Section"
2122
import { SectionHeader } from "./SectionHeader"
2223
import { SetCachedStateField } from "./types"
@@ -116,7 +117,10 @@ export const BrowserSettings = ({
116117
</SectionHeader>
117118

118119
<Section>
119-
<div>
120+
<SearchableSetting
121+
settingId="browser-enable"
122+
section="browser"
123+
label={t("settings:browser.enable.label")}>
120124
<VSCodeCheckbox
121125
checked={browserToolEnabled}
122126
onChange={(e: any) => setCachedStateField("browserToolEnabled", e.target.checked)}>
@@ -131,11 +135,14 @@ export const BrowserSettings = ({
131135
</VSCodeLink>
132136
</Trans>
133137
</div>
134-
</div>
138+
</SearchableSetting>
135139

136140
{browserToolEnabled && (
137141
<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
138-
<div>
142+
<SearchableSetting
143+
settingId="browser-viewport"
144+
section="browser"
145+
label={t("settings:browser.viewport.label")}>
139146
<label className="block font-medium mb-1">{t("settings:browser.viewport.label")}</label>
140147
<Select
141148
value={browserViewportSize}
@@ -156,9 +163,12 @@ export const BrowserSettings = ({
156163
<div className="text-vscode-descriptionForeground text-sm mt-1">
157164
{t("settings:browser.viewport.description")}
158165
</div>
159-
</div>
166+
</SearchableSetting>
160167

161-
<div>
168+
<SearchableSetting
169+
settingId="browser-screenshot-quality"
170+
section="browser"
171+
label={t("settings:browser.screenshotQuality.label")}>
162172
<label className="block font-medium mb-1">
163173
{t("settings:browser.screenshotQuality.label")}
164174
</label>
@@ -175,9 +185,12 @@ export const BrowserSettings = ({
175185
<div className="text-vscode-descriptionForeground text-sm mt-1">
176186
{t("settings:browser.screenshotQuality.description")}
177187
</div>
178-
</div>
188+
</SearchableSetting>
179189

180-
<div>
190+
<SearchableSetting
191+
settingId="browser-remote"
192+
section="browser"
193+
label={t("settings:browser.remote.label")}>
181194
<VSCodeCheckbox
182195
checked={remoteBrowserEnabled}
183196
onChange={(e: any) => {
@@ -194,7 +207,7 @@ export const BrowserSettings = ({
194207
<div className="text-vscode-descriptionForeground text-sm mt-1">
195208
{t("settings:browser.remote.description")}
196209
</div>
197-
</div>
210+
</SearchableSetting>
198211

199212
{remoteBrowserEnabled && (
200213
<>

0 commit comments

Comments
 (0)