feat(settings): add search functionality to settings modal (P2)

Implement Phase 2 search bar feature for settings modal:

- Add search input to settings modal header with icon and clear button
- Implement real-time filtering with 150ms debounce for performance
- Add visual highlighting for matched search terms using accent color
- Implement empty search results state with user-friendly message
- Add keyboard shortcuts (Escape to clear search)
- Auto-expand sections containing matching content during search
- Fix header layout to prevent overlap with close button
- Update progress tracker documenting P2 completion
- Add translation keys for search feature (placeholder, clear, no results)
- Sync translations across all language files

Files changed:
- templates/components/modals/settings_modal.html
- static/css/components/modal/settings-modal.css
- static/js/managers/SettingsManager.js
- locales/*.json (10 language files)
- docs/ui-ux-optimization/progress-tracker.md
This commit is contained in:
Will Miao
2026-02-24 06:36:49 +08:00
parent 528225ffbd
commit 3f0227ba9d
14 changed files with 1403 additions and 788 deletions

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "Portabler Modus",
"locationHelp": "Aktiviere, um settings.json im Repository zu belassen; deaktiviere, um es im Benutzerkonfigurationsordner zu speichern."

View File

@@ -275,6 +275,11 @@
"download": "Download",
"advanced": "Advanced"
},
"search": {
"placeholder": "Search settings...",
"clear": "Clear search",
"noResults": "No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "Portable mode",
"locationHelp": "Enable to keep settings.json inside the repository; disable to store it in your user config directory."

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "Modo portátil",
"locationHelp": "Activa para mantener settings.json dentro del repositorio; desactívalo para guardarlo en tu directorio de configuración de usuario."

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "Mode portable",
"locationHelp": "Activez pour garder settings.json dans le dépôt ; désactivez pour le placer dans votre dossier de configuration utilisateur."

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "מצב נייד",
"locationHelp": "הפעל כדי לשמור את settings.json בתוך המאגר; בטל כדי לשמור אותו בתיקיית ההגדרות של המשתמש."

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "ポータブルモード",
"locationHelp": "有効にすると settings.json をリポジトリ内に保持し、無効にするとユーザー設定ディレクトリに格納します。"

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "휴대용 모드",
"locationHelp": "활성화하면 settings.json을 리포지토리에 유지하고, 비활성화하면 사용자 구성 디렉터리에 저장합니다."

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "Портативный режим",
"locationHelp": "Включите, чтобы хранить settings.json в репозитории; выключите, чтобы сохранить его в папке конфигурации пользователя."

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "便携模式",
"locationHelp": "开启可将 settings.json 保存在仓库中;关闭则保存在用户配置目录。"

View File

@@ -275,6 +275,11 @@
"download": "[TODO: Translate] Download",
"advanced": "[TODO: Translate] Advanced"
},
"search": {
"placeholder": "[TODO: Translate] Search settings...",
"clear": "[TODO: Translate] Clear search",
"noResults": "[TODO: Translate] No settings found matching \"{query}\""
},
"storage": {
"locationLabel": "可攜式模式",
"locationHelp": "啟用可將 settings.json 保存在儲存庫中;停用則保存在使用者設定目錄。"