Mk
/
supersam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
supersam/docs/superpowers/plans/2026-03-15-mobile-wave-1.md

5.7 KiB
Raw Blame History

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