Skip to content

Basic settings search #10619

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrubens merged 8 commits into from
Jan 11, 2026
Merged

Basic settings search #10619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
57260e2
Prototype of a simpler searchable settings
mrubens Jan 11, 2026
4310f20
Fix tests
mrubens Jan 11, 2026
4d8765e
UI improvements
mrubens Jan 11, 2026
fedd253
Input tweaks
mrubens Jan 11, 2026
7df88d4
Update webview-ui/src/components/settings/SettingsSearch.tsx
mrubens Jan 11, 2026
65a40c7
fix: remove duplicate Escape key handler dead code
roomote Jan 11, 2026
f84b8a8
Cleanup
mrubens Jan 11, 2026
0e012f7
Fix tests
mrubens Jan 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 35 additions & 22 deletions webview-ui/src/components/settings/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { Button } from "@/components/ui"

import { SectionHeader } from "./SectionHeader"
import { Section } from "./Section"
import { SearchableSetting } from "./SearchableSetting"

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

<Section>
<div>
<SearchableSetting
settingId="about-telemetry"
section="about"
label={t("settings:footer.telemetry.label")}>
<VSCodeCheckbox
checked={telemetrySetting !== "disabled"}
onChange={(e: any) => {
Expand All @@ -67,7 +71,7 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
}}
/>
</p>
</div>
</SearchableSetting>
</Section>

<Section className="space-y-0">
Expand Down Expand Up @@ -120,7 +124,11 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
</span>
</div>
{setDebug && (
<div className="flex flex-col gap-2 mt-4 pt-4 border-t border-vscode-settings-headerBorder">
<SearchableSetting
settingId="about-debug-mode"
section="about"
label={t("settings:about.debugMode.label")}
className="mt-4 pt-4 border-t border-vscode-settings-headerBorder">
<VSCodeCheckbox
checked={debug ?? false}
onChange={(e: any) => {
Expand All @@ -132,30 +140,35 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
<p className="text-vscode-descriptionForeground text-sm mt-0">
{t("settings:about.debugMode.description")}
</p>
</div>
</SearchableSetting>
)}
</div>
</Section>

<Section className="space-y-0">
<h3>{t("settings:about.manageSettings")}</h3>
<div className="flex flex-wrap items-center gap-2">
<Button onClick={() => vscode.postMessage({ type: "exportSettings" })} className="w-28">
<Upload className="p-0.5" />
{t("settings:footer.settings.export")}
</Button>
<Button onClick={() => vscode.postMessage({ type: "importSettings" })} className="w-28">
<Download className="p-0.5" />
{t("settings:footer.settings.import")}
</Button>
<Button
variant="destructive"
onClick={() => vscode.postMessage({ type: "resetState" })}
className="w-28">
<TriangleAlert className="p-0.5" />
{t("settings:footer.settings.reset")}
</Button>
</div>
<SearchableSetting
settingId="about-manage-settings"
section="about"
label={t("settings:about.manageSettings")}>
<h3>{t("settings:about.manageSettings")}</h3>
<div className="flex flex-wrap items-center gap-2">
<Button onClick={() => vscode.postMessage({ type: "exportSettings" })} className="w-28">
<Upload className="p-0.5" />
{t("settings:footer.settings.export")}
</Button>
<Button onClick={() => vscode.postMessage({ type: "importSettings" })} className="w-28">
<Download className="p-0.5" />
{t("settings:footer.settings.import")}
</Button>
<Button
variant="destructive"
onClick={() => vscode.postMessage({ type: "resetState" })}
className="w-28">
<TriangleAlert className="p-0.5" />
{t("settings:footer.settings.reset")}
</Button>
</div>
</SearchableSetting>
</Section>
</div>
)
Expand Down
117 changes: 71 additions & 46 deletions webview-ui/src/components/settings/AutoApproveSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Button, Input, Slider } from "@/components/ui"
import { SetCachedStateField } from "./types"
import { SectionHeader } from "./SectionHeader"
import { Section } from "./Section"
import { SearchableSetting } from "./SearchableSetting"
import { AutoApproveToggle } from "./AutoApproveToggle"
import { MaxLimitInputs } from "./MaxLimitInputs"
import { useExtensionState } from "@/context/ExtensionStateContext"
Expand Down Expand Up @@ -116,40 +117,45 @@ export const AutoApproveSettings = ({

<Section>
<div className="space-y-4">
<VSCodeCheckbox
checked={effectiveAutoApprovalEnabled}
aria-label={t("settings:autoApprove.toggleAriaLabel")}
onChange={() => {
const newValue = !(autoApprovalEnabled ?? false)
setAutoApprovalEnabled(newValue)
vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
}}>
<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
</VSCodeCheckbox>
<div className="text-vscode-descriptionForeground text-sm mt-1">
<p>{t("settings:autoApprove.description")}</p>
<p>
<Trans
i18nKey="settings:autoApprove.toggleShortcut"
components={{
SettingsLink: (
<a
href="#"
className="text-vscode-textLink-foreground hover:underline cursor-pointer"
onClick={(e) => {
e.preventDefault()
// Send message to open keyboard shortcuts with search for toggle command
vscode.postMessage({
type: "openKeyboardShortcuts",
text: `${Package.name}.toggleAutoApprove`,
})
}}
/>
),
}}
/>
</p>
</div>
<SearchableSetting
settingId="auto-approve-enabled"
section="autoApprove"
label={t("settings:autoApprove.enabled")}>
<VSCodeCheckbox
checked={effectiveAutoApprovalEnabled}
aria-label={t("settings:autoApprove.toggleAriaLabel")}
onChange={() => {
const newValue = !(autoApprovalEnabled ?? false)
setAutoApprovalEnabled(newValue)
vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
}}>
<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
</VSCodeCheckbox>
<div className="text-vscode-descriptionForeground text-sm mt-1">
<p>{t("settings:autoApprove.description")}</p>
<p>
<Trans
i18nKey="settings:autoApprove.toggleShortcut"
components={{
SettingsLink: (
<a
href="#"
className="text-vscode-textLink-foreground hover:underline cursor-pointer"
onClick={(e) => {
e.preventDefault()
// Send message to open keyboard shortcuts with search for toggle command
vscode.postMessage({
type: "openKeyboardShortcuts",
text: `${Package.name}.toggleAutoApprove`,
})
}}
/>
),
}}
/>
</p>
</div>
</SearchableSetting>

<AutoApproveToggle
alwaysAllowReadOnly={alwaysAllowReadOnly}
Expand Down Expand Up @@ -179,7 +185,10 @@ export const AutoApproveSettings = ({
<span className="codicon codicon-eye" />
<div>{t("settings:autoApprove.readOnly.label")}</div>
</div>
<div>
<SearchableSetting
settingId="auto-approve-readonly-outside-workspace"
section="autoApprove"
label={t("settings:autoApprove.readOnly.outsideWorkspace.label")}>
<VSCodeCheckbox
checked={alwaysAllowReadOnlyOutsideWorkspace}
onChange={(e: any) =>
Expand All @@ -193,7 +202,7 @@ export const AutoApproveSettings = ({
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:autoApprove.readOnly.outsideWorkspace.description")}
</div>
</div>
</SearchableSetting>
</div>
)}

Expand All @@ -203,7 +212,10 @@ export const AutoApproveSettings = ({
<span className="codicon codicon-edit" />
<div>{t("settings:autoApprove.write.label")}</div>
</div>
<div>
<SearchableSetting
settingId="auto-approve-write-outside-workspace"
section="autoApprove"
label={t("settings:autoApprove.write.outsideWorkspace.label")}>
<VSCodeCheckbox
checked={alwaysAllowWriteOutsideWorkspace}
onChange={(e: any) =>
Expand All @@ -217,8 +229,11 @@ export const AutoApproveSettings = ({
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:autoApprove.write.outsideWorkspace.description")}
</div>
</div>
<div>
</SearchableSetting>
<SearchableSetting
settingId="auto-approve-write-protected"
section="autoApprove"
label={t("settings:autoApprove.write.protected.label")}>
<VSCodeCheckbox
checked={alwaysAllowWriteProtected}
onChange={(e: any) =>
Expand All @@ -230,7 +245,7 @@ export const AutoApproveSettings = ({
<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
{t("settings:autoApprove.write.protected.description")}
</div>
</div>
</SearchableSetting>
</div>
)}

Expand All @@ -240,7 +255,10 @@ export const AutoApproveSettings = ({
<span className="codicon codicon-question" />
<div>{t("settings:autoApprove.followupQuestions.label")}</div>
</div>
<div>
<SearchableSetting
settingId="auto-approve-followup-timeout"
section="autoApprove"
label={t("settings:autoApprove.followupQuestions.timeoutLabel")}>
<div className="flex items-center gap-2">
<Slider
min={1000}
Expand All @@ -257,7 +275,7 @@ export const AutoApproveSettings = ({
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:autoApprove.followupQuestions.timeoutLabel")}
</div>
</div>
</SearchableSetting>
</div>
)}

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

<div>
<SearchableSetting
settingId="auto-approve-allowed-commands"
section="autoApprove"
label={t("settings:autoApprove.execute.allowedCommands")}>
<label className="block font-medium mb-1" data-testid="allowed-commands-heading">
{t("settings:autoApprove.execute.allowedCommands")}
</label>
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:autoApprove.execute.allowedCommandsDescription")}
</div>
</div>
</SearchableSetting>

<div className="flex gap-2">
<Input
Expand Down Expand Up @@ -320,14 +341,18 @@ export const AutoApproveSettings = ({
</div>

{/* Denied Commands Section */}
<div className="mt-6">
<SearchableSetting
settingId="auto-approve-denied-commands"
section="autoApprove"
label={t("settings:autoApprove.execute.deniedCommands")}
className="mt-6">
<label className="block font-medium mb-1" data-testid="denied-commands-heading">
{t("settings:autoApprove.execute.deniedCommands")}
</label>
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:autoApprove.execute.deniedCommandsDescription")}
</div>
</div>
</SearchableSetting>

<div className="flex gap-2">
<Input
Expand Down
29 changes: 21 additions & 8 deletions webview-ui/src/components/settings/BrowserSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
import { vscode } from "@/utils/vscode"
import { buildDocLink } from "@src/utils/docLinks"

import { SearchableSetting } from "./SearchableSetting"
import { Section } from "./Section"
import { SectionHeader } from "./SectionHeader"
import { SetCachedStateField } from "./types"
Expand Down Expand Up @@ -116,7 +117,10 @@ export const BrowserSettings = ({
</SectionHeader>

<Section>
<div>
<SearchableSetting
settingId="browser-enable"
section="browser"
label={t("settings:browser.enable.label")}>
<VSCodeCheckbox
checked={browserToolEnabled}
onChange={(e: any) => setCachedStateField("browserToolEnabled", e.target.checked)}>
Expand All @@ -131,11 +135,14 @@ export const BrowserSettings = ({
</VSCodeLink>
</Trans>
</div>
</div>
</SearchableSetting>

{browserToolEnabled && (
<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
<div>
<SearchableSetting
settingId="browser-viewport"
section="browser"
label={t("settings:browser.viewport.label")}>
<label className="block font-medium mb-1">{t("settings:browser.viewport.label")}</label>
<Select
value={browserViewportSize}
Expand All @@ -156,9 +163,12 @@ export const BrowserSettings = ({
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:browser.viewport.description")}
</div>
</div>
</SearchableSetting>

<div>
<SearchableSetting
settingId="browser-screenshot-quality"
section="browser"
label={t("settings:browser.screenshotQuality.label")}>
<label className="block font-medium mb-1">
{t("settings:browser.screenshotQuality.label")}
</label>
Expand All @@ -175,9 +185,12 @@ export const BrowserSettings = ({
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:browser.screenshotQuality.description")}
</div>
</div>
</SearchableSetting>

<div>
<SearchableSetting
settingId="browser-remote"
section="browser"
label={t("settings:browser.remote.label")}>
<VSCodeCheckbox
checked={remoteBrowserEnabled}
onChange={(e: any) => {
Expand All @@ -194,7 +207,7 @@ export const BrowserSettings = ({
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:browser.remote.description")}
</div>
</div>
</SearchableSetting>

{remoteBrowserEnabled && (
<>
Expand Down
Loading
Loading