План: герой-поиск v2 — иконки, популярность, карточки

Статус: план к выполнению.

1. Что получается

Выдача поиска на главной превращается из списка строк в сетку карточек: слева иконка инструмента, справа название и описание. Инструменты получают два новых поля реестра — popularity (приоритет в выдаче) и icon (идентификатор иконки). Иконки переиспользуются в каталоге /list-tools и в легендах шагов цепочки. Поиск работает по-прежнему: нечёткий скоринг, клавиатура ↑↓ Enter Esc.

2. Данные реестра

popularity?: number (0–100, по умолчанию 50) — приоритет внутри равного скоринга запроса. Значения проставляются вручную осознанно: базовые операции (обрезка, размер, удаление фона, конвертации JPG/PNG) — 80–95; цветовые и геометрия — 40–70; узкие и генераторы — 10–30.
icon?: string — имя иконки из набора Lucide. Явный словарь-маппинг для всех инструментов в одном месте; отсутствие записи даёт нейтральную заглушку (Wrench).
Тест целостности расширяется: популярность в диапазоне, иконка — непустая строка из разрешённого набора.

3. Иконки

Зависимость lucide-svelte (MIT) — один пакет, иконки рендерятся компонентами, дерево не раздувается за счёт выборочного импорта.

Маппинг ведётся одним объектом tool-icons.ts рядом с реестром: 51 запись вида 'crop-png': Crop. Подбор по смыслу: обрезка — Crop, размер — Scaling, поворот — RotateCw, отражение — FlipHorizontal2, оттенок — Palette, размытие — Droplets, резкость — Focus, удаление фона — Scissors, анализ — Info и так далее; для семейств конвертаций — FileInput/FileOutput варианты.

Иконка появляется в трёх местах: карточка выдачи, карточка каталога /list-tools, легенда шага цепочки («Шаг N: [icon] Название»).

4. Карточки выдачи

Сетка: одна колонка на узком экране, две — начиная со среднего героя.
Композиция карточки: квадрат иконки слева, справа название (полужирное) и однострочное описание с обрезкой.
Состояния hover и активной с клавиатуры — тот же акцент подсветки, что сейчас.
Сортировка выдачи: скоринг запроса ↓, затем популярность ↓, затем название.

5. Этапы и проверки

A. Реестр — поля popularity и icon, словарь иконок на все 51, расширение тестов целостности. Проверка: pnpm test/check.
B. Карточки поиска — сетка выдачи с иконками и учётом популярности, клавиатура без изменений. Проверка: визуально, check/build.
C. Распространение — иконки в каталоге /list-tools и легендах звеньев. Проверка: визуально, build.
D. Итог — полный прогон и смоук §8.

6. Смоук-чеклист

Пустой запрос на герое показывает популярные первыми после первого символа.
Запрос «обрез» поднимает карточку обрезки выше прочих совпадений.
У каждой карточки есть иконка; у большинства — разные, соответствующие смыслу.
Наведение и стрелки подсвечивают карточку; Enter открывает инструмент.
Открытый инструмент работает как раньше: параметры в колонках, результат, скачивание.
Цепочка: легенда каждого шага показывает иконку выбранного инструмента.
/list-tools: карточки категорий с иконками, ссылки работают.
Регресс: старые сценарии (загрузка файла, цепочка, скачивание) не изменились.

7. Критерии готовности

Все инструменты имеют иконку и ненулевую популярность; тесты это гарантируют.
Выдача поиска — сетка карточек с корректной сортировкой и живой клавиатурой.
Иконки присутствуют в поиске, каталоге и легендах шагов.
test/check/build зелёные, смоук §6 пройден.

8. Что сознательно не делаем

Автоматический расчёт популярности из статистики использования — значения ручные.
Собственный набор SVG-иконок — берём готовый открытый.
Переводы названий и поиск на других языках — отдельная i18n-волна.
Изображения-превью в карточках поиска — только иконка и текст.

6.3 KiB Raw Blame History