# HUB v4 Clean — UX-спецификация

## Цель

Создать улучшенную версию основной витрины HUB на базе `hub-v4.html`, сохранив её сильные стороны:

- высокая информативность;
- плотные карточки;
- технические индикаторы;
- фильтры;
- сравнение проектов;
- Project Passport.

`hub-v5.html` остаётся экспериментом, но не основной витриной.

## Главный принцип

```text
Каталог инструментов
Технический паспорт
Много данных на экран
Меньше декоративных пустот
```

## Что нужно исправить

### 1. Стабильная зона тегов

Проблема: при выборе тега появляются новые блоки, и облако тегов сдвигается вниз. Из-за этого тег уходит из-под мышки.

Решение:

- область фильтров должна иметь стабильную структуру;
- выбранные теги всегда отображаются в отдельной зоне;
- если тегов нет — показывается короткая пустая строка;
- связанные теги всегда имеют своё место;
- облако тегов не должно прыгать при клике.

Возможная структура:

```text
[Выбранные теги: нет / #zip #pdf]
[Связанные теги: нет / #metadata #exif]
[Облако тегов: постоянная зона]
```

### 2. Убрать повтор оценки

Проблема: оценка `A2 ✶✶` может визуально повторяться в бейдже и внутри карточки.

Решение:

- вверху карточки оставить только бейдж статуса;
- качество показывать один раз в блоке качества;
- HP-бар качества должен показывать только прогресс и `88/100`, без повторного `A2`.

### 3. Неработающие клики

Проблема: некоторые элементы выглядят как кнопки, но не имеют понятного результата.

Решение:

- бейдж статуса должен фильтровать по статусу;
- бейдж качества должен либо фильтровать по качеству, либо не быть кнопкой;
- `Project Storefront / Visual Index` должен быть обычной подписью, не ссылкой;
- логотип `SUNPOLE HUB` должен вести на `hub-current.html`, а не только на `#top`.

### 4. Все ссылки назад — только через актуальную точку входа

Основная ссылка назад должна быть:

```text
hub-current.html
```

Не использовать как основную ссылку:

```text
hub-v5.html
```

### 5. Project Passport V2

Passport должен стать технической мини-карточкой проекта:

- ID;
- статус;
- категория;
- качество;
- готовность;
- визуал;
- техника;
- документация;
- languages;
- теги;
- связанные проекты;
- кнопка Project View;
- кнопка открыть проект;
- кнопка сравнить.

### 6. Layout shift checklist

Проверить и устранить скачки:

- теги;
- выбранные теги;
- связанные теги;
- фильтры статуса;
- фильтры категории;
- карточки при hover;
- Project Passport;
- нижняя панель сравнения.

## Безопасный путь реализации

Не изменять `hub-v4.html` напрямую.

Создать:

```text
hub-v4-clean.html
```

Если версия окажется лучше, затем переключить:

```text
hub-current.html → hub-v4-clean.html
```

## Документация и версия

Любое изменение в:

- HUB;
- Admin;
- Builder;
- Overlay;
- Project View;
- Migration;
- документации

считается изменением системы и должно фиксироваться в истории проекта.