Add keyword-based search to admin settings page

[Copilot]

Settings page lacks discoverability as it grows. Users need efficient search to locate specific settings.

Implementation

Search Component (SearchBox.js)

• Real-time filtering with debounced state propagation
• Clear button with accessible labels

Menu Filtering (Menu.js)

• Filters tabs and subtabs via useMemo
• Empty state handling

Settings Panel Search (GeneralSettings.js, AiSettings.js)

• Keyword-based matching per setting (label + search terms)
• Visual highlighting (#fef3c7 background) for matches
• Set-based visibility checks for O(1) lookup instead of repeated find() calls
• Extracted getHighlightStyle() helper to reduce duplication

Keywords Example:

{
  id: 'email',
  label: __('Email Feedback on Article', 'wedocs'),
  keywords: 'email feedback article invite readers thoughts form contact',
}

Performance:

• Module-level constant for AI searchable terms (avoid recreation on render)
• useMemo for filtered results and visibility Set
• Single compute pass for highlight styles

Search state flows: SearchBox → SettingsPage → Menu/GeneralSettings/AiSettings

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Adding a Search Feature in the weDocs Admin Settings Page</issue_title>
<issue_description>As the Settings will element grows, it will become vast and user may find it difficult to locate certain settings.

We can add a search feature just like Dokan so that user can find a setting just using the keywords. </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Adding a Search Feature in the weDocs Admin Settings Page #261

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.