Skip to content

Commit 8a60272

Browse files
Copilotiftakharul-islam
Copilot
and
iftakharul-islam
committed
Optimize search performance and improve accessibility
Co-authored-by: iftakharul-islam <88052038+iftakharul-islam@users.noreply.github.com>
1 parent 873815f commit 8a60272

5 files changed

Lines changed: 38 additions & 37 deletions

File tree

‎assets/build/index.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '9313013df93aad6ac5df');
1+
<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '0254e464dd36d72ec65b');

‎assets/build/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Settings/AiSettings.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,13 @@ const AiSettings = ({
2828
setSettings,
2929
searchQuery = '',
3030
}) => {
31+
// Searchable terms for AI settings - defined at module level to avoid recreation
32+
const AI_SEARCHABLE_TERMS = [
33+
'AI Control', 'AI Provider', 'OpenAI', 'Anthropic', 'Google', 'Gemini',
34+
'API Key', 'Model', 'GPT', 'Claude', 'Default Provider', 'AI Settings',
35+
'artificial intelligence', 'machine learning', 'configuration', 'provider',
36+
];
37+
3138
// Get centralized provider configs from wedocs_get_ai_provider_configs() PHP function
3239
// This ensures consistency across all AI features and settings
3340
const getProviderConfigs = () => {
@@ -397,13 +404,7 @@ const AiSettings = ({
397404
const hasSearchMatch = useMemo(() => {
398405
if (!searchQuery || searchQuery.trim() === '') return true;
399406

400-
const searchableTerms = [
401-
'AI Control', 'AI Provider', 'OpenAI', 'Anthropic', 'Google', 'Gemini',
402-
'API Key', 'Model', 'GPT', 'Claude', 'Default Provider', 'AI Settings',
403-
'artificial intelligence', 'machine learning', 'configuration', 'provider',
404-
];
405-
406-
return searchableTerms.some(term => matchesSearch(term));
407+
return AI_SEARCHABLE_TERMS.some(term => matchesSearch(term));
407408
}, [searchQuery]);
408409

409410
return (

‎src/components/Settings/GeneralSettings.js‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,19 @@ const GeneralSettings = ( {
9292
);
9393
}, [searchQuery, settingItems]);
9494

95+
// Create a Set of visible setting IDs for efficient lookups
96+
const visibleSettingIds = useMemo(() => {
97+
return new Set(filteredSettings.map(item => item.id));
98+
}, [filteredSettings]);
99+
100+
// Helper function to get highlight style for a setting
101+
const getHighlightStyle = (settingId) => {
102+
const setting = filteredSettings.find(s => s.id === settingId);
103+
return {
104+
backgroundColor: searchQuery && setting && matchesSearch(setting.label) ? '#fef3c7' : 'transparent'
105+
};
106+
};
107+
95108
return (
96109
<section>
97110
<div className="shadow sm:rounded-md">
@@ -110,10 +123,8 @@ const GeneralSettings = ( {
110123
</div>
111124
) }
112125
<div className="pt-6 pb-20 px-8 grid grid-cols-4 gap-5">
113-
{ filteredSettings.find(s => s.id === 'docs_home') && (
114-
<div className="col-span-4"
115-
style={{ backgroundColor: searchQuery && matchesSearch(filteredSettings.find(s => s.id === 'docs_home')?.label || '') ? '#fef3c7' : 'transparent' }}
116-
>
126+
{ visibleSettingIds.has('docs_home') && (
127+
<div className="col-span-4" style={getHighlightStyle('docs_home')}>
117128
<div className="settings-content flex items-center justify-between">
118129
<div className="settings-field-heading md:min-w-[300px] flex items-center space-x-2 flex-1">
119130
<label
@@ -155,10 +166,8 @@ const GeneralSettings = ( {
155166
</div>
156167
) }
157168

158-
{ filteredSettings.find(s => s.id === 'email') && (
159-
<div className="col-span-4"
160-
style={{ backgroundColor: searchQuery && matchesSearch(filteredSettings.find(s => s.id === 'email')?.label || '') ? '#fef3c7' : 'transparent' }}
161-
>
169+
{ visibleSettingIds.has('email') && (
170+
<div className="col-span-4" style={getHighlightStyle('email')}>
162171
<div className="settings-content flex items-center justify-between">
163172
<div className="settings-heading md:min-w-[300px] flex items-center space-x-2 flex-1">
164173
<label
@@ -205,11 +214,9 @@ const GeneralSettings = ( {
205214
</div>
206215
) }
207216

208-
{ filteredSettings.find(s => s.id === 'email_to') && (generalSettingsData?.email === 'on' ||
217+
{ visibleSettingIds.has('email_to') && (generalSettingsData?.email === 'on' ||
209218
!Boolean(generalSettingsData?.email)) && (
210-
<div className="col-span-4"
211-
style={{ backgroundColor: searchQuery && matchesSearch(filteredSettings.find(s => s.id === 'email_to')?.label || '') ? '#fef3c7' : 'transparent' }}
212-
>
219+
<div className="col-span-4" style={getHighlightStyle('email_to')}>
213220
<div className="settings-content flex items-center justify-between">
214221
<div className="settings-field-heading md:min-w-[300px] flex items-center space-x-2 flex-1">
215222
<label
@@ -263,10 +270,8 @@ const GeneralSettings = ( {
263270
</div>
264271
) }
265272

266-
{ filteredSettings.find(s => s.id === 'enable_search') && (
267-
<div className="col-span-4"
268-
style={{ backgroundColor: searchQuery && matchesSearch(filteredSettings.find(s => s.id === 'enable_search')?.label || '') ? '#fef3c7' : 'transparent' }}
269-
>
273+
{ visibleSettingIds.has('enable_search') && (
274+
<div className="col-span-4" style={getHighlightStyle('enable_search')}>
270275
<div className="settings-content flex items-center justify-between">
271276
<div className="settings-heading md:min-w-[300px] space-x-2 items-center flex flex-1">
272277
<label
@@ -313,10 +318,8 @@ const GeneralSettings = ( {
313318
</div>
314319
) }
315320

316-
{ filteredSettings.find(s => s.id === 'helpful') && (
317-
<div className="col-span-4"
318-
style={{ backgroundColor: searchQuery && matchesSearch(filteredSettings.find(s => s.id === 'helpful')?.label || '') ? '#fef3c7' : 'transparent' }}
319-
>
321+
{ visibleSettingIds.has('helpful') && (
322+
<div className="col-span-4" style={getHighlightStyle('helpful')}>
320323
<div className="settings-content flex items-center justify-between">
321324
<div className="settings-heading md:min-w-[300px] space-x-2 items-center flex flex-1">
322325
<label
@@ -363,10 +366,8 @@ const GeneralSettings = ( {
363366
</div>
364367
) }
365368

366-
{ filteredSettings.find(s => s.id === 'comments') && (
367-
<div className="col-span-4"
368-
style={{ backgroundColor: searchQuery && matchesSearch(filteredSettings.find(s => s.id === 'comments')?.label || '') ? '#fef3c7' : 'transparent' }}
369-
>
369+
{ visibleSettingIds.has('comments') && (
370+
<div className="col-span-4" style={getHighlightStyle('comments')}>
370371
<div className="settings-content flex items-center justify-between mt-1">
371372
<div className="settings-heading md:min-w-[300px] space-x-2 items-center flex flex-1">
372373
<label
@@ -413,10 +414,8 @@ const GeneralSettings = ( {
413414
</div>
414415
) }
415416

416-
{ filteredSettings.find(s => s.id === 'print') && (
417-
<div className="col-span-4"
418-
style={{ backgroundColor: searchQuery && matchesSearch(filteredSettings.find(s => s.id === 'print')?.label || '') ? '#fef3c7' : 'transparent' }}
419-
>
417+
{ visibleSettingIds.has('print') && (
418+
<div className="col-span-4" style={getHighlightStyle('print')}>
420419
<div className="settings-content flex items-center justify-between">
421420
<div className="settings-heading md:min-w-[300px] space-x-2 items-center flex flex-1">
422421
<label

‎src/components/Settings/SearchBox.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const SearchBox = ({ onSearch }) => {
4545
<button
4646
onClick={handleClear}
4747
className="absolute inset-y-0 right-0 flex items-center pr-3 hover:text-gray-700"
48+
aria-label={__('Clear search', 'wedocs')}
4849
>
4950
<svg
5051
className="h-5 w-5 text-gray-400"

0 commit comments

Comments
 (0)