127 lines
5.7 KiB
Markdown
127 lines
5.7 KiB
Markdown
# Mobile Wave 1 Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Сделать первую волну полноценной мобильной адаптации для `shell + login + orders workspace`, чтобы с телефона можно было полноценно работать, а не только просматривать данные.
|
||
|
||
**Architecture:** Бизнес-логика и роуты сохраняются, а responsive-представление добавляется внутри существующих экранов. Для мобильных устройств делаем отдельные представления там, где desktop UX принципиально не работает: навигация shell, реестр заказов, канбан, календарь, карточка заказа, редактор заказа и компактные фильтры.
|
||
|
||
**Tech Stack:** React 18, existing UI kit, Vite, Vitest, responsive Tailwind utility classes, current orders hooks/services.
|
||
|
||
---
|
||
|
||
## Chunk 1: Mobile Shell And Login
|
||
|
||
### Task 1: Зафиксировать mobile shell/login в тестах
|
||
|
||
**Files:**
|
||
- Create: `src/layouts/AppShell.test.jsx`
|
||
- Modify or Create: auth/login test file if needed
|
||
|
||
- [ ] Написать падающие тесты на:
|
||
- мобильную шапку и нижнюю навигацию в shell
|
||
- отсутствие desktop sidebar controls в mobile branch
|
||
- компактную мобильную компоновку login
|
||
- [ ] Прогнать только новые тесты.
|
||
- Run: `npm test -- src/layouts/AppShell.test.jsx`
|
||
- Expected: FAIL
|
||
|
||
### Task 2: Реализовать mobile shell и login layout
|
||
|
||
**Files:**
|
||
- Modify: `src/layouts/AppShell.jsx`
|
||
- Modify: `src/pages/LoginPage.jsx`
|
||
- Modify: `src/components/auth/OtpLoginForm.jsx` if needed
|
||
|
||
- [ ] Добавить mobile header и bottom nav в `AppShell`.
|
||
- [ ] Сохранить desktop sidebar на больших экранах.
|
||
- [ ] Ужать mobile padding и ширину login flow.
|
||
- [ ] Прогнать таргетированные тесты shell/login.
|
||
|
||
## Chunk 2: Orders List, Filters, And Calendar
|
||
|
||
### Task 3: Зафиксировать mobile registry/filters/calendar в тестах
|
||
|
||
**Files:**
|
||
- Create: `src/components/orders/OrdersTable.test.jsx`
|
||
- Modify: `src/components/orders/OrderFilters.test.jsx`
|
||
- Create or Modify: `src/components/orders/OrdersCalendarView.test.jsx`
|
||
|
||
- [ ] Добавить падающие тесты на:
|
||
- mobile card list вместо таблицы в orders registry
|
||
- compact filter entrypoint and active chips
|
||
- mobile agenda/list view for calendar
|
||
- [ ] Прогнать только этот набор тестов.
|
||
- Run: `npm test -- src/components/orders/OrdersTable.test.jsx src/components/orders/OrderFilters.test.jsx src/components/orders/OrdersCalendarView.test.jsx`
|
||
- Expected: FAIL
|
||
|
||
### Task 4: Реализовать mobile registry/filters/calendar
|
||
|
||
**Files:**
|
||
- Modify: `src/components/orders/OrdersTable.jsx`
|
||
- Modify: `src/components/orders/OrderFilters.jsx`
|
||
- Modify: `src/components/orders/OrdersCalendarView.jsx`
|
||
- Modify: `src/components/UI/Modal.jsx` if it helps mobile filter overlay
|
||
|
||
- [ ] Добавить mobile card list for registry.
|
||
- [ ] Сделать compact mobile filters pattern.
|
||
- [ ] Показать active filter chips на мобильном.
|
||
- [ ] Добавить mobile agenda view to calendar.
|
||
- [ ] Прогнать таргетированные тесты.
|
||
|
||
## Chunk 3: Kanban, Detail, And Editor
|
||
|
||
### Task 5: Зафиксировать mobile detail/editor/kanban behavior в тестах
|
||
|
||
**Files:**
|
||
- Modify: `src/components/orders/OrdersKanbanBoard.test.jsx`
|
||
- Create: `src/components/orders/OrderDetailPanel.test.jsx`
|
||
- Create: `src/components/orders/OrderEditorPanel.test.jsx`
|
||
|
||
- [ ] Добавить падающие тесты на:
|
||
- stacked kanban toolbar and horizontal mobile board
|
||
- mobile single-column detail layout
|
||
- editor sticky action bar / single-column form
|
||
- [ ] Прогнать только этот набор тестов.
|
||
- Run: `npm test -- src/components/orders/OrdersKanbanBoard.test.jsx src/components/orders/OrderDetailPanel.test.jsx src/components/orders/OrderEditorPanel.test.jsx`
|
||
- Expected: FAIL
|
||
|
||
### Task 6: Реализовать mobile kanban/detail/editor
|
||
|
||
**Files:**
|
||
- Modify: `src/components/orders/OrdersKanbanBoard.jsx`
|
||
- Modify: `src/components/orders/OrderDetailPanel.jsx`
|
||
- Modify: `src/components/orders/OrderEditorPanel.jsx`
|
||
- Modify: `src/pages/DashboardPage.jsx`
|
||
|
||
- [ ] Завершить mobile kanban toolbar and board ergonomics.
|
||
- [ ] Сделать detail view mobile-friendly and single-column.
|
||
- [ ] Сделать editor mobile-friendly with sticky CTA.
|
||
- [ ] Обновить DashboardPage where mobile overlays/workspace behavior depends on breakpoint.
|
||
- [ ] Прогнать таргетированные тесты.
|
||
|
||
## Chunk 4: Verification
|
||
|
||
### Task 7: Полная проверка волны 1
|
||
|
||
**Files:**
|
||
- Reference: `docs/superpowers/specs/2026-03-15-mobile-wave-1-design.md`
|
||
|
||
- [ ] Прогнать полный тестовый набор.
|
||
- Run: `npm test`
|
||
- Expected: PASS
|
||
- [ ] Прогнать линтер.
|
||
- Run: `npm run lint`
|
||
- Expected: PASS
|
||
- [ ] Прогнать production build.
|
||
- Run: `npm run build`
|
||
- Expected: PASS
|
||
- [ ] Ручная проверка на narrow viewport:
|
||
- login
|
||
- mobile shell
|
||
- registry
|
||
- kanban
|
||
- calendar
|
||
- order detail
|
||
- order editor
|