# Plan: `/preview/list-tools` → design2 (catalog)

> **СТАТУС: ВЫПОЛНЕН (2026-09-07) — устарел.** Каталог
> `/preview/list-tools` переписан на `CatalogHeader` / `CatalogToolbar` /
> `CatalogGroup` / `ToolCard` (kit), поиск и фильтры функциональны.
> Доводка верности против рефа остаётся в рамках `plan-design-fix.md`.

Ветка `feat/redesign`. Цель — привести каталог инструментов к рефу
`refs-html/list-tools.html`. Сейчас страница вообще не на design2: по
мульти-аудиту `onlyOurs=257, onlyRef=54` (демо-страница — `18/11`).

## Текущее состояние

- `src/routes/preview/list-tools/+page.svelte` использует собственную вёрстку
  (`.catalog` / `.cat-head` / `.cat-grid`) + `Panel` / `PanelHeading` /
  `ToolCard` (kit). Нет поиска, фильтров, счётчика, навигация по категориям
  сделана через `Panel`-блоки, а не через `.catalog-groups`.
- Реф (`list-tools.html`) строит:
  - `.catalog-page` → `.catalog-head` (`.eyebrow`, `h1` «Tool catalog»,
    `p` lede, `.catalog-total` «NN TOOLS AVAILABLE» с большим числом),
  - `.catalog-toolbar` (`.catalog-search` + `.catalog-filters` с кнопками),
  - `.catalog-groups` (grid `repeat(2,minmax(0,1fr))`, gap `56px 28px`) →
    `.catalog-group` (`.group-title` «CAT · NN TOOLS») → `.tool-cards` →
    `.tool-card`.
- `.tool-card` (реф) — `display:grid`, колонки `42px minmax(0,1fr) 24px 18px`,
  `min-height:106px`, `gap:14px`, `padding:16px`: `.tool-icon` (42×42
  синий размытый квадрат), `.tool-copy` (`strong` 13px mono + `span` 12px mono
  muted), `.tool-index` (10px mono, сверху), `.tool-arrow` (появляется при hover).
- Токены `design2.css` уже совпадают с рефом (`--background #eef1f4`,
  `--panel #f8fafb`, `--foreground #17212b`, `--muted #6d7883`, `--line #cbd3da`,
  `--blue #1769d2`, `--radius 4px`) — править токены не нужно.

## Шаги

1. **Restyle `kit/ToolCard.svelte`** под реф (меняется «на месте» — используется
   ещё в `preview/+page` и `preview/kit`, стиль унифицируется, ок):
   - grid-колонки `42px minmax(0,1fr) 24px 18px`, `align-items:center`,
     `gap:14px`, `min-height:106px`, `padding:16px`, `border:1px solid line`,
     `background:panel`, `border-radius:radius`.
   - `.tool-icon`: 42×42 `place-items:center`, `background:color-mix(in srgb,
     var(--blue) 12%, transparent)`, `color:var(--blue)` (реф использует
     `--panel-strong`; вместо нового токена берём этот `color-mix`).
   - `.tool-copy strong`: `600 13px var(--font-mono)`; `span`: `12px/1.5 mono`
     `muted`.
   - `.tool-index`: `10px mono muted`, `align-self:start`.
   - `.tool-arrow`: `color:var(--blue)`, `opacity:0` → `1` + `translate(2px,-2px)`
     на `.tool-card:hover`.
   - DOM-порядок как в рефе: `icon, copy, index, arrow`.
   - `href` через `resolve` из `$app/paths` (убрать `svelte-ignore`).

2. **`kit/CatalogHeader.svelte`**: `.eyebrow` «EASY-PNG-TOOLS / CATALOG»,
   `h1` «Tool catalog», lede; `.catalog-total` с динамическим `TOOLS.length`
   (реф показывает `32`).

3. **`kit/CatalogToolbar.svelte`**: `.catalog-search` (иконка + `<input>`) и
   `.catalog-filters` (кнопки по категориям). Состояние `query` / `category`
   поднимается наружу через `bind:` (или callback-пропы), чтобы страница
   фильтровала список. Фильтры функциональные (клиентский фильтр по названию +
   категории), не декоративные.

4. **`kit/CatalogGroup.svelte`**: `.group-title` (uppercase label категории +
   «NN TOOLS») + слот со списком карточек; сетка `.tool-cards` — `gap:10px`
   (реф), на мобиле (`@media max-width:800px`) всё схлопывается в 1 колонку.

5. **Переписать `preview/list-tools/+page.svelte`** как тонкую композицию:
   - обёртка `.catalog-page` (`padding:60px clamp(24px,4vw,72px) 72px`);
   - `<CatalogHeader />`;
   - `<CatalogToolbar bind:query bind:category />`;
   - `.catalog-groups` из отфильтрованных групп (по `CATEGORIES`, пересчитав
     `tools` с учётом `query`/`category`);
   - внутри `<CatalogGroup>` — `<ToolCard>` на каждый tool (`href=
     "/preview/tools/{id}"`, `icon` из `tool-icons`, `index` по порядку,
     `title`/`description` из registry);
   - убрать `Panel`/`PanelHeading` из этого маршрута.

6. **Категории/локализация**: labels привести к рефу (реф: ALL / CONVERT /
   TRANSPARENCY / COLOR / GEOMETRY / FILTERS / ANALYZE). Наши `CATEGORIES`
   (`convert/alpha/color/geometry/filters/text/analyze/generate`) — сопоставить
   (`alpha`→TRANSPARENCY и т.п.); точное сопоставление уточнить по рефу и
   `i18n/ru.ts`. Фильтры = ALL + те же label'ы. Тексты заголовков/lede — по
   рефу (англ. «Tool catalog» / «Focused utilities for working with PNG…»),
   либо оставить RU-вариант, если это сознательное отклонение (зафиксировать).

7. **Адаптив**: перенести правила рефа (`@media max-width:800px`) —
   `.catalog-groups` → 1fr, `.tool-card` → `38px minmax(0,1fr) 18px`, скрыть
   `.tool-index`/показать `.tool-arrow`, `.catalog-head` в колонку и т.д.

## Верификация

- `pnpm lint`, `pnpm exec svelte-check --tsconfig ./tsconfig.json`,
  `pnpm build` — без ошибок.
- `pnpm refs-audit` (теперь мульти-маршрутный) → глянуть секцию
  `/preview/list-tools`: `onlyOurs`/`onlyRef` должны упасть с `257/54`
  примерно до уровня demo (`18/11`). Остаточный diff (если будет) зафиксировать
  в этом файле.

## Примечания

- `ToolCard` правится на месте — влияет на `preview/+page` и `preview/kit`
  (там тоже карточки каталога, унификация уместна).
- Старый дизайн (`routes/(old)/**`, `components/search/**`) не трогать.
- Коммиты делает автор (агент не коммитит).