# 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