Add IconSelect for filter types, audio modes, engine descriptions; fix scroll flash

- Filter type picker: IconSelect with 3-column grid, auto-add on select, removed redundant + button
- Audio mode picker: IconSelect with SVG visualizations for RMS/Peak/Beat
- Capture engine grid: added per-engine icons and localized descriptions
- Fixed scroll flash during icon grid open animation (settled class after transitionend)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-09 01:01:49 +03:00
parent be91e74c6e
commit 0984a3b639
11 changed files with 80 additions and 15 deletions

View File

@@ -303,7 +303,7 @@ async function loadAvailableEngines() {
// Update icon-grid selector with dynamic engine list
const items = availableEngines
.filter(e => e.available)
.map(e => ({ value: e.type, icon: getEngineIcon(e.type), label: e.name, desc: '' }));
.map(e => ({ value: e.type, icon: getEngineIcon(e.type), label: e.name, desc: t(`templates.engine.${e.type}.desc`) }));
if (_engineIconSelect) { _engineIconSelect.updateItems(items); }
else { _engineIconSelect = new IconSelect({ target: select, items, columns: 2 }); }
_engineIconSelect.setValue(select.value);
@@ -2026,9 +2026,7 @@ const _FILTER_ICONS = {
function _populateFilterSelect() {
const select = document.getElementById('pp-add-filter-select');
select.innerHTML = `<option value="">${t('filters.select_type')}</option>`;
const items = [
{ value: '', icon: `<svg class="icon" viewBox="0 0 24 24">${P.wrench}</svg>`, label: t('filters.select_type') },
];
const items = [];
for (const f of _availableFilters) {
const name = _getFilterName(f.filter_id);
select.innerHTML += `<option value="${f.filter_id}">${name}</option>`;
@@ -2046,7 +2044,8 @@ function _populateFilterSelect() {
_filterIconSelect = new IconSelect({
target: select,
items,
columns: 2,
columns: 3,
placeholder: t('filters.select_type'),
onChange: () => addFilterFromSelect(),
});
}