Header v2 — Product launch / All

Прототип нової шапки і сайдбара на захопленнях платформи. Перероблено смугу табів, рядок Header і лівий сайдбар. Контент фічі (грид, тулбари, модалки) не змінювався — тільки його підложка.

Варіанти

Що саме змінено

• Смуга табів — 35px, фон bg-surface, таби 30px з радіусом 8px зверху, роздільники між неактивними, активний таб на bg-page з рамкою і тінню Card; іконка 16px, підпис 13/16, хрестик 14px; кнопка «+» 16px.
• Рядок Header — 34px, фон bg-page, паддінг 10px. Зліва — назва документа 14/19 Medium + підзаголовок 12/16 через «/». Справа (gap 15px) — «Ваша роль» + пігулка ролі (h24, radius 16), прапор локалі 18×16, дзвінок 20px, перемикач теми 20px, юзер-блок: аватар 24px + ім’я + баланс + шеврон 16px.
• Сайдбар — 60px, розкривається до 240px при наведенні поверх контента (макет 4441:329025: Panel лежить над Workspace і не розсуває його). Рядок меню рівно 32px (іконка 16 + паддінг 8/8) — у захопленні рядки були вищі. Дочірні пункти теж 32px: внутрішня пігулка з паддінгом 6px та відступом 32px під приховані caret/eye. Активний пункт — bg-selected, підпис і іконка — action-primary. Бейджі 16px pill (action-primary / status-error), у згорнутому вигляді схлопуються в червону крапку 8px. Версія внизу — action-primary.
• Фони — смуга табів і сайдбар на bg-surface (білий), решта сторінки — bg-page, той самий, що й у рядка Header. Рядки таблиці — bg-surface (правимо змінні ag-grid, тому підсвітка / hover / selected рядків працюють як раніше).
• Іконки дзвінка і теми — action-primary. У прапора локалі рамку прибрано (у макеті вона є, але на прототипі давала подвійний кант — у самої svg вже є світлий край).
• Hover неактивного таба — Figma Tab-2 State=Hover (4457:342785): фон bg-hover, роздільник зникає. Тим самим токеном підсвічуються рядки сайдбара.
• Пресет-таби над таблицею приведені до висоти верхніх табів: смуга 35px, таб 30px.
• Скрол таблиці закінчується одразу після останнього рядка — порожньої зони під таблицею більше немає.
• Токени — light / dark знято з Figma (bg-page, bg-surface, bg-selected, border-default, action-primary, status-error, text-primary/secondary).
• Іконки — інлайн-svg, вивантажені з Figma, перефарбовані в currentColor під тему.

Що працює

• Сайдбар — розкривається при наведенні; клік по пункту з дітьми розкриває/згортає підменю; вибір пункту і підпункту.
• Локаль — клік по прапору перемикає мову (той самий екран, інша локаль).
• Тема — клік по місяцю/сонцю перемикає тему.
• Юзер-блок — клік по аватару/імені/балансу відкриває dropdown Profile / Logout (Figma 4472:343870); закривається кліком поза меню або Esc.

Дані

• Тексти шапки (назва, підзаголовок, роль, ім’я, баланс, прапор), логотип і номер версії беруться з самого захоплення — нічого не вигадано.
• Набір табів — з макета (6 табів). У самому захопленні відкрито 2 реальні таби, але за еталон беремо макет.
• Підписи меню сайдбара — з макета (UK); EN-переклад, дочірні пункти в EN узгоджені зі статусами самої капчі (On check, Supplier search…).
• 25 рядків у гриді зібрані з двох захоплень. ag-grid віртуалізує рядки, тому в один mhtml вся сторінка не потрапляє: в основному захопленні лежать рядки 1–12, у -lastGrid (знятому в кінці прокрутки) — 14–25. Збірка склеює їх в одну сторінку. Рядок 13 не потрапив у жодне захоплення — він добудований за зразком наявного (id 187, «Silicone Baking Mat Set, 2 pcs»); решта 24 рядки — справжні дані.

Джерела

• Макет: Figma «Sidebar - header» F3v5TdXxraGI9gL3FN19Yo, секція AppShell-v23 4441:329024 (Tabs 4457:343219 / 4468:343573, Header 4493:344969 / 4493:345071, Panel 60px 4503:347200 / 4503:347302, Panel 240px 4503:348196 / 4503:348394, UserMenu 4472:343870).
• Захоплення: sources/mhtml/ProductLaunch/v1/Client.ProductLaunch.All.*.mhtml
• Збірка: scripts/build-header-v2-demo.py