feat(settings): add item search (#1592)
Adds item-level search inside Settings so users can find concrete settings like provider auth, agent mode, terminal font size, tunnel options, notification events, and similar controls instead of only filtering top-level pages. Groups search results by Settings page and shows localized labels plus optional descriptions where useful. Supports keyboard navigation with Arrow Up/Down, Enter, and Escape, matching the existing autocomplete interaction style. Opens the correct Settings page or split-page draft state before scrolling to the matching control. Highlights the matched setting with a subtle token-based background so users can see where they landed without an aggressive outline. Adds explicit data-settings-item anchors across Settings pages and a centralized search registry with runtime/mobile availability guards. Updates Settings UI skill guidance so future Settings changes keep search registry entries, anchors, localization, and availability guards in sync.
This commit is contained in:
committed by
GitHub
parent
eff6f46ad9
commit
079e3a9bd6
@@ -157,7 +157,7 @@ export const AddPluginDialog: React.FC<AddPluginDialogProps> = ({
|
||||
<div className="flex flex-col gap-4">
|
||||
{(tab === 'npm' || tab === 'path') && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div data-settings-item="plugins.spec" className="flex flex-col gap-1.5">
|
||||
<label htmlFor="plugin-spec" className="typography-ui-label text-foreground">
|
||||
{t('settings.plugins.page.field.spec')}
|
||||
</label>
|
||||
@@ -176,7 +176,7 @@ export const AddPluginDialog: React.FC<AddPluginDialogProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div data-settings-item="plugins.options" className="flex flex-col gap-1.5">
|
||||
<label htmlFor="plugin-options" className="typography-ui-label text-foreground">
|
||||
{t('settings.plugins.page.field.options')}
|
||||
</label>
|
||||
@@ -200,7 +200,7 @@ export const AddPluginDialog: React.FC<AddPluginDialogProps> = ({
|
||||
|
||||
{tab === 'file' && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div data-settings-item="plugins.content" className="flex flex-col gap-1.5">
|
||||
<label htmlFor="plugin-filename" className="typography-ui-label text-foreground">
|
||||
{t('settings.plugins.page.field.fileName')}
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user