61 lines
6.3 KiB
Markdown
61 lines
6.3 KiB
Markdown
# План: герой-поиск v2 — иконки, популярность, карточки
|
|
|
|
> **СТАТУС: ВЫПОЛНЕН 2026-08-23.**
|
|
|
|
## 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. Смоук-чеклист
|
|
|
|
1. Пустой запрос на герое показывает популярные первыми после первого символа.
|
|
2. Запрос «обрез» поднимает карточку обрезки выше прочих совпадений.
|
|
3. У каждой карточки есть иконка; у большинства — разные, соответствующие смыслу.
|
|
4. Наведение и стрелки подсвечивают карточку; Enter открывает инструмент.
|
|
5. Открытый инструмент работает как раньше: параметры в колонках, результат, скачивание.
|
|
6. Цепочка: легенда каждого шага показывает иконку выбранного инструмента.
|
|
7. `/list-tools`: карточки категорий с иконками, ссылки работают.
|
|
8. Регресс: старые сценарии (загрузка файла, цепочка, скачивание) не изменились.
|
|
|
|
## 7. Критерии готовности
|
|
|
|
- Все инструменты имеют иконку и ненулевую популярность; тесты это гарантируют.
|
|
- Выдача поиска — сетка карточек с корректной сортировкой и живой клавиатурой.
|
|
- Иконки присутствуют в поиске, каталоге и легендах шагов.
|
|
- `test/check/build` зелёные, смоук §6 пройден.
|
|
|
|
## 8. Что сознательно не делаем
|
|
|
|
- Автоматический расчёт популярности из статистики использования — значения ручные.
|
|
- Собственный набор SVG-иконок — берём готовый открытый.
|
|
- Переводы названий и поиск на других языках — отдельная i18n-волна.
|
|
- Изображения-превью в карточках поиска — только иконка и текст.
|