food-market/docs/pos-ui-progress.md

Новый внешний вид кассы — прогресс

Задача владельца (08.10.2026): «визуально выглядит ужасно, фон мрачный — сделай интерфейс более стильным, светлым, удобным». Светлая тема по умолчанию, ориентиры Square/Loyverse/Poster. Скорость не ухудшать.

Замеры скорости (до/после)

Метрика	До (dark)	После (light)
Холодный старт (процесс→логика), Linux	146 мс	149 мс (в пределах шума)
Поиск по штрихкоду	13,9 мс	11,2 мс
Поиск по имени на 30 000	41,9 мс	33,2 мс

Скорость не ухудшилась (светлая тема — только ресурсы/стили, логика та же).

План

1. Токены светлой темы в Styles/Tokens.axaml (ThemeDictionaries Light/Dark) + docs/pos-design.md.
2. Светлая тема по умолчанию (RequestedThemeVariant=Light); тёмная — те же токены (вариант Dark).
3. Экран продажи: белая верхняя полоса (лого/точка/кассир/чипы смены+связи), поиск со скан-иконкой, корзина-карточки со степпером [−]N[+] и удалением, белая карточка чека с крупным зелёным ИТОГО и «Оплатить · F12», вторичные кнопки-контуры, пустая корзина-заглушка, капсулы горячих клавиш.
4. Оплата (светлое модальное 880px): сегменты Нал/Карта/Смешанная с векторными иконками (активный зелёный, иконка белая), быстрые суммы 3×2 (без сдачи/4000/5000/10000/20000/своя сумма), клавиатура 3×4 по 72px, крупная «Сдача».
5. Остальные экраны в стиле: вход (логин + PIN-пад), регистрация/выбор точки, смена/Z-отчёт (разница цветом), возврат (степперы). Нет связи — чип в шапке.
6. Избранные товары: сервер Product.IsFavorite/FavoriteOrder (миграция Phase37), POS-синк + карточка товара (ProductInput); PosStore.GetFavorites + плитки (сворачиваемая сетка 3 колонки) на экране продажи. Unit-тест.
7. Удобство: кнопки ≥48px, клавиши крупные (72px); фокус в поле скана; адаптив 1366/1920.
8. Скриншоты «Было/Стало» 1920×1080 + 1366×768 (галерея с разделами «Стало»/«Было» + «Windows 11»); реальное окно Windows 11 (светлая тема, software-рендер на VM).
9. --uitest OK; unit 82 зелёные; скорость не хуже (старт 74мс, скан 13.7мс, поиск 1.1мс). Smoke Linux OK, Windows OK. Сверка с макетом --compare → расхождений > 4px нет.
10. Коммиты тематические в main; push origin. global.json не коммитил.

Эталон-макет Mac-Claude (1:1) — выполнено

Владелец: «вёрстка кривая». Перенёс макет docs/pos-design/pos-mockup.html в Avalonia по размерам (не на глаз):

• Сетка: верх 64 / 1fr / низ 40; main cols 1fr/440, gap 16, padding 16/24.
• Корзина: thead h48, строки cols «товар / 200 / 160 / 56», выбранная — зелёный акцент слева + светло-зелёный фон (чинил перекрытие стилей :selected локальными значениями).
• Степпер слитный 44/1fr/44; правая панель — 2-кол. сетка, «Очистить чек» во всю ширину.
• Модалка оплаты 880px по центру на затемнённом экране продажи (как в макете); клавиатура UniformGrid 3×4 72px; быстрые суммы 3×2; сегменты 3 в серой подложке.
• Иконки везде векторные (Path, stroke), эмодзи убраны.
• Бейдж «Отложенные · N» как в макете.
• Сверка: --compare (CompareRunner, SkiaSharp) → docs/pos-design/compare-sale.png, compare-payment.png («макет | касса» рядом, данные те же: 4 позиции, 3 362 ₸, 5 000 → сдача 1 638 ₸). Расхождений выравнивания > 4px нет.
• Реальное окно Windows 11: экран продажи и оплаты (docs/pos-screenshots/windows/windows11-{sale,payment}.png).

Замечания Mac-Claude по скриншотам — исправлены

1. Текст во всех кнопках по центру (Button.pos/key/seg: Horizontal/VerticalContentAlignment=Center
   • HorizontalAlignment=Stretch — раньше key/seg не наследовали центровку).
2. Клавиатура оплаты — ровная сетка 3×4 одинаковых крупных клавиш (72px).
3. Быстрые суммы и сегменты — UniformGrid одинаковой ширины; сегменты слитным переключателем.
4. Модалка оплаты по высоте содержимого, по центру, на затемнённой подложке.
5. Правая панель — ровная 2-кол. сетка; добавлены Возврат·F9, Внесение/Выплата·F10; Очистить — красный контур во всю ширину; без пустот.
6. Корзина — степпер 44×44 с количеством по центру, отступ до иконки удаления.
7. Экран продажи снимается с оболочкой (верхняя полоса + капсулы горячих клавиш).
8. «Избранное» — шеврон ▾/▸.

НЕ трогать: прод, shared-postgres, global.json, gateway nginx, sklad, другие VM.

Полировка по реальному окну Windows 11 (Mac-Claude, 08.10)

Замечания по windows/windows11-sale.png (VM 1280×800, maximized → высоты меньше, чем в headless):

1. Правая панель не влезала по высоте → адаптив по высоте в SaleView.axaml.cs (подписка на Bounds): уровни normal/compact/tiny — меньше отступы (margin 24→18→12, spacing 16→10→8), скрыт блок «Последний чек», ИТОГО 52→46→40, Оплатить 76→64→56, кнопки 52→46→42; ClipToBounds на панели. Проверено 1280×720/800, 1366×768, 1920×1080 (docs/pos-screenshots/density/) + реальное окно VM 1280×800 — «Очистить чек» виден, ничего не перекрывается. 125% = меньше логическое разрешение → уровень tiny (та же логика по высоте).
2. Шапка — Grid вместо StackPanel; чипы в отдельной колонке (никогда не обрезаются). Адаптив по ширине в MainWindow.axaml.cs: <1400 — короткие чипы («Смена открыта», «На связи» без очереди); <1100 — скрыт «Магазин …».
3. Иконка «Выплата» (одиночная горизонталь) схлопывалась при Stretch=Uniform → Stretch=None с координатами в 18-боксе; «Внесение» выровнял так же. Остальные Path — 2D, в порядке.
4. Hover строки — светлый #F7FBF8 (PosSelRow) вместо тёмного из темы; тема-hover на ContentPresenter погашен.
5. Плитки избранного — Grid *,Auto: название по центру сверху, цена прибита к низу — у всех плиток цена на одной линии; высота 84 едина.
6. Полоса горячих клавиш — HorizontalAlignment=Left (как в макете).
7. Реальное окно Windows 11 заново (продажа компактная 1280×800 + оплата) + compare + density; просмотрел каждый кадр — обрезок нет.

Журнал

• 08.10 — старт; сохранены «до»-скриншоты (22), замерен baseline; планы зафиксированы.
• 08.10 — светлая тема + избранное + правки выравнивания (коммиты 7a93c19, ac55da8, 29ef769, 85e486a).
• 08.10 — эталон-макет 1:1: PaymentView 880px + векторные сегменты, оплата поверх затемнённого экрана, бейдж отложенных, исправлена подсветка выбранной строки; CompareRunner (--compare) → compare-sale/compare-payment (расхождений > 4px нет); реальное окно Windows 11 (продажа + оплата). Проверено: --uitest OK, 82 unit зелёные, smoke OK, скорость не хуже (старт 74мс, скан 13.7мс).
• 08.10 — полировка по реальному окну Windows 11 (7 пунктов): адаптив правой панели по высоте (normal/compact/tiny) и шапки по ширине, fix иконки «Выплата», светлый hover, выравнивание плиток избранного, hotkey-полоса влево. --density рендерит продажу в 4 разрешениях. Реальное окно VM 1280×800 — ничего не перекрывается. --uitest OK, 82 unit, smoke OK (старт 147мс).