Боковая панель вместо верхней, доска без чередования дорожек, просрочка на карточке (#69) #71

Merged
aep merged 6 commits from feat/69-sidebar into main 2026-10-22 09:00:59 +03:00
Owner

Issue: #69

Два замечания владельца после #65: чередование дорожек на доске прятало просроченные задачи; верхняя панель уезжала при прокрутке («закрепить хэдер, а лучше сделать сайдбаром»). Спека — openspec/changes/sidebar/, план — docs/superpowers/plans/2026-10-22-sidebar.md.

Что изменилось

  • Доска без чередования дорожек. Фон чётных дорожек был непрозрачным и лежал поверх колонок «по датам», поэтому подсветка прошедших дат пропадала на каждой второй дорожке. Правило и токен --lane-alt удалены, дорожки разделены линией.
  • Просрочка на карточке доски. У незакрытой задачи с прошедшим сроком дата «до …» показана красным, в подсказке и для экранного чтения — «просрочено». Срок «сегодня» просрочкой не считается.
  • Боковая панель вместо верхней. Панель закреплена у левого края. Сверху: «Хаб Jira», проект и разделы со значками. Внизу: агент, время данных, «Обновить из Jira», тема и «Ещё».
    • Панель сворачивается в полосу 64 px, выбор хранится под ключом jira-hub-sidebar.
    • На экранах уже 640 px вместо неё закреплённая строка: «Меню», название и «Обновить из Jira». «Меню» открывает панель поверх страницы, событие пакета показывается строкой под ней.
  • Раскладка страниц считается от ширины страницы, а не окна. .page стал контейнером, пороги фильтров, прокрутки таблицы и ящика «Проблемы» переведены на запросы к контейнеру.

Проверки (HEAD d3db887)

  • make check: pytest 571 passed, vitest 405 passed.
  • npm run e2e: 35 passed. Новый e2e/layout.spec.ts проверяет:
    • панель остаётся на месте при прокрутке;
    • свёртка сохраняется после перезагрузки;
    • на 390 px работает «Меню»;
    • на 1280 и 1000 px нет горизонтальной прокрутки.
  • SCREENS=1 … screens.spec.ts: 40 passed, добавлены снимки board-collapsed и menu.

Rulings I made

Все решения записаны в openspec/changes/sidebar/design.md, раздел «Decisions made without discussion». Решения #1–6 приняты на этапе спеки.

  • R-1 (design #7). У панели нет overflow-y:auto, вопреки решению 1: прокрутка обрезала бы меню «Ещё» свёрнутой панели. Цена ошибки: на окне ниже ~470 px низ панели обрезан (M-5).
  • R-2 (design #8). В выезжающей панели вместо «Свернуть панель» стоит «Закрыть меню». Цены ошибки нет.
  • R-3 (design #9). e2e M-3 переходит по разделам обычным щелчком вместо dispatchEvent, поскольку панель закреплена. Цены ошибки нет.
  • R-4 (design #10). C-1 исправлен шире, чем предлагало ревью. Одного width:100% не хватило: пороги прокрутки таблицы считались от окна. Поэтому пороги переведены на container queries: прежний порог окна минус 48 px. Цена ошибки низкая, это числа в CSS.
  • R-5 (design #11). На узком экране событие пакета выводится строкой под закреплённой строкой. Строка aria-hidden: событие уже озвучивает role=status кнопки. Цена ошибки низкая.

Находки

Финальное ревью (opus): Critical 1, Important 1 — оба исправлены в d3db887.

  • C-1: страница была шире окна на средних ширинах.
  • I-1: на телефоне не было видно результата «Обновить из Jira».

Deferred (уйдут в follow-up issue при закрытии)

  • M-1: Escape во вложенном меню или окне закрывает заодно и выезжающую панель.
  • M-2: выезжающая панель не модальна для клавиатуры: нет ловушки фокуса и role=dialog.
  • M-3: на узком экране при открытой панели две кнопки «Обновить из Jira» и два role=status.
  • M-4: метка проекта в свёрнутой панели обрезается до «AWP…».
  • M-5: панель не прокручивается при низком окне (ниже ~470 px).
  • M-6: --topbar-h у .drawer нигде не используется.
  • M-7: в projects.test.tsx:113 устаревший комментарий «верхняя панель».

После merge

make web и перезапуск хаба — владелец.

Скриншоты

Снимки сделаны на тестовом хабе (фикстура e2e).

«По датам»: подсветка прошедших дат на всех дорожках, просрочка красным

light-1920-board-bydate

Свёрнутая панель, тёмная

dark-1920-board-collapsed

Доска с боковой панелью

light-1920-board

Доска с «Проблемами», тёмная

dark-1920-board-problems

Задачи

light-1920-issues-filters

390 px: выезжающая панель

light-390-menu

390 px: строка с событием пакета

light-390-refresh

🤖 Generated with Claude Code

Issue: #69 Два замечания владельца после #65: чередование дорожек на доске прятало просроченные задачи; верхняя панель уезжала при прокрутке («закрепить хэдер, а лучше сделать сайдбаром»). Спека — `openspec/changes/sidebar/`, план — `docs/superpowers/plans/2026-10-22-sidebar.md`. ## Что изменилось - **Доска без чередования дорожек.** Фон чётных дорожек был непрозрачным и лежал поверх колонок «по датам», поэтому подсветка прошедших дат пропадала на каждой второй дорожке. Правило и токен `--lane-alt` удалены, дорожки разделены линией. - **Просрочка на карточке доски.** У незакрытой задачи с прошедшим сроком дата «до …» показана красным, в подсказке и для экранного чтения — «просрочено». Срок «сегодня» просрочкой не считается. - **Боковая панель вместо верхней.** Панель закреплена у левого края. Сверху: «Хаб Jira», проект и разделы со значками. Внизу: агент, время данных, «Обновить из Jira», тема и «Ещё». - Панель сворачивается в полосу 64 px, выбор хранится под ключом `jira-hub-sidebar`. - На экранах уже 640 px вместо неё закреплённая строка: «Меню», название и «Обновить из Jira». «Меню» открывает панель поверх страницы, событие пакета показывается строкой под ней. - **Раскладка страниц считается от ширины страницы, а не окна.** `.page` стал контейнером, пороги фильтров, прокрутки таблицы и ящика «Проблемы» переведены на запросы к контейнеру. ## Проверки (HEAD d3db887) - `make check`: pytest 571 passed, vitest 405 passed. - `npm run e2e`: 35 passed. Новый `e2e/layout.spec.ts` проверяет: - панель остаётся на месте при прокрутке; - свёртка сохраняется после перезагрузки; - на 390 px работает «Меню»; - на 1280 и 1000 px нет горизонтальной прокрутки. - `SCREENS=1 … screens.spec.ts`: 40 passed, добавлены снимки `board-collapsed` и `menu`. ## Rulings I made Все решения записаны в `openspec/changes/sidebar/design.md`, раздел «Decisions made without discussion». Решения #1–6 приняты на этапе спеки. - **R-1 (design #7).** У панели нет `overflow-y:auto`, вопреки решению 1: прокрутка обрезала бы меню «Ещё» свёрнутой панели. Цена ошибки: на окне ниже ~470 px низ панели обрезан (M-5). - **R-2 (design #8).** В выезжающей панели вместо «Свернуть панель» стоит «Закрыть меню». Цены ошибки нет. - **R-3 (design #9).** e2e M-3 переходит по разделам обычным щелчком вместо `dispatchEvent`, поскольку панель закреплена. Цены ошибки нет. - **R-4 (design #10).** C-1 исправлен шире, чем предлагало ревью. Одного `width:100%` не хватило: пороги прокрутки таблицы считались от окна. Поэтому пороги переведены на container queries: прежний порог окна минус 48 px. Цена ошибки низкая, это числа в CSS. - **R-5 (design #11).** На узком экране событие пакета выводится строкой под закреплённой строкой. Строка `aria-hidden`: событие уже озвучивает `role=status` кнопки. Цена ошибки низкая. ## Находки Финальное ревью (opus): Critical 1, Important 1 — оба исправлены в d3db887. - **C-1:** страница была шире окна на средних ширинах. - **I-1:** на телефоне не было видно результата «Обновить из Jira». ### Deferred (уйдут в follow-up issue при закрытии) - **M-1:** Escape во вложенном меню или окне закрывает заодно и выезжающую панель. - **M-2:** выезжающая панель не модальна для клавиатуры: нет ловушки фокуса и `role=dialog`. - **M-3:** на узком экране при открытой панели две кнопки «Обновить из Jira» и два `role=status`. - **M-4:** метка проекта в свёрнутой панели обрезается до «AWP…». - **M-5:** панель не прокручивается при низком окне (ниже ~470 px). - **M-6:** `--topbar-h` у `.drawer` нигде не используется. - **M-7:** в `projects.test.tsx:113` устаревший комментарий «верхняя панель». ## После merge `make web` и перезапуск хаба — владелец. ## Скриншоты Снимки сделаны на тестовом хабе (фикстура e2e). **«По датам»: подсветка прошедших дат на всех дорожках, просрочка красным** ![light-1920-board-bydate](https://git.aepif.ru/attachments/8434f104-667c-4ff4-9a72-56213a2d9794) **Свёрнутая панель, тёмная** ![dark-1920-board-collapsed](https://git.aepif.ru/attachments/d3a2b101-fcfd-40fb-b3e5-3e806cb49d5c) **Доска с боковой панелью** ![light-1920-board](https://git.aepif.ru/attachments/1c6e430c-9ec0-4f12-8445-7a870b3009a0) **Доска с «Проблемами», тёмная** ![dark-1920-board-problems](https://git.aepif.ru/attachments/b97a8ca7-34eb-43dd-94ff-1dc05d368ecb) **Задачи** ![light-1920-issues-filters](https://git.aepif.ru/attachments/17f096cd-500a-4abc-847c-3d08a8699b08) **390 px: выезжающая панель** ![light-390-menu](https://git.aepif.ru/attachments/14f67d1e-1340-4365-95da-d422aef0c1ad) **390 px: строка с событием пакета** ![light-390-refresh](https://git.aepif.ru/attachments/1380e2e8-ff91-4c82-9424-de61180de4d3) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
aep added 6 commits 2026-10-22 08:14:15 +03:00
aep merged commit 73ec28267e into main 2026-10-22 09:00:59 +03:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: aep/sdlc-hub#71
No description provided.