Bicycle/.claude/memory/reference_dashboard_design_artifact.md

name	description	metadata
reference-dashboard-design-artifact	Визуальный дизайн проекта — палитра/токены Nocturne (2026-08-14, поверх старого макета room-card/dock-навбар) — сверяться при любой работе над UI	type reference

Актуальная версия (2026-08-14). Пользователь принёс новый hi-fi дизайн-хендофф — сгенерирован внешним дизайн-инструментом («clode design»), лежит в App/design_handoff_personal_finance/ (Личные финансы.dc.html, nocturne.css, README.md). Система называется Nocturne (тёмная, mono-accent, --color-accent:#9184d9, шрифт Inter в оригинале). Хендофф покрывает 4 экрана: Дашборд, План на год, Транзакции, Аналитика — из них в проекте на момент разговора реально существовали только первые два (Транзакции — есть только TransactionRepository, без контроллера/view; Аналитика — не существует вообще).

Решено с пользователем, что делаем сейчас (см. также budget-current-plan по фиче):

1. Только визуальная система — токены/палитра/радиусы/тени/шрифт поверх уже существующих экранов (Дашборд, Категории, План на год). Экраны Транзакции/Аналитика — не делаем сейчас, это отдельный заход (нужен новый бэкенд: контроллеры, агрегирующие запросы для графиков).
2. Категории остаются отдельной страницей /categories — в хендоффе CRUD статей открывается модалкой прямо со страницы «План на год» (кнопка «Статьи»), но пользователь явно попросил не переносить, оставить как есть.
3. Шрифт — не Inter из хендоффа, а SF Pro, который уже лежит в проекте (App/media/fonts/, App/media/css/fonts.css) — этот файл раньше нигде не подключался, подключён в layout.html этим же заходом.

Как перенесено технически — не копировали HTML хендоффа (там своя sc--шаблонизация чужого инструмента, не Bicycle), а перетащили только значения токенов Nocturne на уже существующие CSS-переменные проекта в App/media/css/dashboard.css, чтобы не трогать разметку/JS:

• --bg:#161826, --surface:#232532, --surface-2:#292b31, --surface-3:#3f424d, --ink:#e9e9ed, --ink-soft:#cfd3e5, --muted:#9397ab, --divider (16% ink) — вместо старой чёрно-серой палитры (--bg:#0b0b0f и т.д.).
• Новый --accent:#9184d9 (+ --accent-tint:#d2cefd для kicker-подписей типа «Доступно сейчас») — единый акцент интерфейса (активный пункт dock, фокус форм, .btn-primary). Раньше активный dock подсвечивался --teal — заменено на --accent.
• --radius-sm/md/lg (4/8/14px) и --shadow-card/--shadow-pop (hairline-обводка + мягкая тень — фирменная деталь Nocturne) — применены ко всем карточкам/панелям/дропдаунам.
• --sans/--font-heading — теперь "SF Pro Text"/"SF Pro Display" вместо системного sans; --font-heading навешан на заголовки/крупные суммы (.balance, .room-title, .budget-group-name, .section-label и т.п.).
• Bootstrap-компоненты форм/модалок (.btn-primary, .form-control, .form-select, .form-check-input, .modal-content) — довешаны CSS-переопределения под эту же палитру (раньше были дефолтные цвета Bootstrap, не тронутые прошлым заходом).
• Акцентные цвета per-тип счёта/категории (--teal/--green/--purple/--blue/--orange/--pink/ --red/--amber/--gray) — не трогали, оставлены как были: это уже прямые тёмные цвета вне системы токенов (та же логика, что и в самом хендоффе — см. README.md проекта, «разноцветные акценты... заданы прямыми oklch(), не входят в токены Nocturne»).
• App/view/Login/login.html — не тронут, у него свой независимый <style> со старой палитрой (--bg:#0b0b0f и т.п.), не завязан на dashboard.css. Не входил в согласованный объём этого захода — если понадобится единый вид, надо явно попросить.

Второй заход того же дня (2026-08-14, позже) — структурная переверстка дашборда. Первый заход (только токены) пользователь не увидел как изменение вообще — сравнивал с хендоффом напрямую и сказал «ничего не поменялось». Урок: перекраска CSS-переменных на тёмном фоне почти незаметна на глаз, пока сама структура карточек не похожа на макет — токены одни не считаются «применением дизайна» для пользователя. После явного «хочу узнаваемую картинку из хендоффа» добавлено в App/view/Index/index.html + App/Controller/IndexController.php (только с реальными данными, не фейковыми числами):

• Плашка-дата над шапкой (.dash-kicker, день недели + число + месяц) + ряд тегов .tag/ .tag-outline (месяц/год; «Бюджет N% потрачено» — реальный факт/план по expense-статьям месяца).
• «Всего по всем счетам» под «Доступно сейчас» ($total_all в контроллере — сумма всех не архивных RUB-счетов, без фильтра include_in_total).
• Подзаголовок типа счёта на карточке (.room-sub, «Наличные»/«Банковский счёт»/«Копилка»).
• «Копилки и цели» — кольцо прогресса (SVG stroke-dasharray) на основе GoalRepository::getForUser() (новый метод, JOIN с accounts) — рендерится только если у пользователя реально есть goals; создание/редактирование цели через UI не реализовано (нет полей цели в модалке счёта) — это просто витрина существующих данных, не полноценная фича.
• Списки «Доходы»/«Бюджет на …» — прогресс-бар план/факт на каждой статье (TransactionRepository::getMonthActualByCategory(), новый метод — сумма transactions за месяц по категории, summa * COALESCE(rate_to_rub,1)), перерасход по расходам красным. Проверено вживую (не только php -l) — залогинился curl'ом под mikrit/qwerty (2FA-код-заглушка 1234, см. LoginController::STUB_CODE) и вытащил реальный HTML / — рендерится без ошибок, новые блоки на месте. Один найденный и исправленный по ходу баг: GoalRepository::getForUser() обращался к $this->obj_class (он private в Repository, не protected — недоступен из наследника) → ErrorException; исправлено на прямой Model::class.

Не сделано (следующий заход, если попросят): экраны Транзакции/Аналитика (нужен новый бэкенд), единый вид логина, CRUD целей (создание/редактирование — сейчас только чтение), донат/полилиния/ бары в Аналитике, курс валюты и «дельта за месяц» в тегах шапки (нет источника данных — Services\CurrencyRate не реализован, история баланса не хранится).

How to apply: при следующей работе над UI — сверяться с актуальными значениями токенов прямо в App/media/css/dashboard.css (это единственный источник истины, не хардкодить цвета в шаблонах), и с App/design_handoff_personal_finance/ — если понадобится продолжить перенос (Транзакции/ Аналитика или точная вёрстка карточек).