Edit: /opt/canhelp/apps/mobile/UI_REDESIGN_PLAN.md (15778B)
# Mobile UI Redesign Plan — CanHelp
> Цель: привести мобильное приложение в соответствие с дизайном (зелёная тема, bottom nav, новые экраны)
---
## Статус: ✅ Выполнено (10/10)
---
## 1. Тема и цвета
**Файл:** `lib/theme/app_theme.dart`
- [x] Обновить `AppTheme` — сменить синюю палитру на зелёную
- [x] Проверить, что `ColorScheme` в `ThemeData.light` использует новые токены
- [x] Добавить категорийные цвета `categoryColor()` + `categoryIcon()` в AppTheme
- [x] Добавить amber-токены (`amber50`, `amber200`, `amber700`, `amber900`, `dangerBorder`)
- [x] Нет хардкодед цветов вне AppTheme
---
## 2. Bottom Navigation Bar
**Файл:** `lib/screens/home/main_shell.dart`
- [x] Добавить `BottomNavigationBar` в `MainShell`
- [x] 4 вкладки + центральный FAB "+"
- [x] Badge на Chat при непрочитанных сообщениях
- [x] Убрать `AppDrawer` / гамбургер-меню
---
## 3. Home Screen — полная переработка
**Файл:** `lib/screens/home/home_screen.dart`
- [x] Убрать AppBar с логотипом и гамбургером
- [x] Location header: иконка pin + название города (Athens ▼)
- [x] При тапе на город — bottomSheet с выбором города
- [x] Строка поиска (readonly, tap → /search)
- [x] Кнопка "＋ Post a request"
- [x] "Near you" — горизонтальный список задач
- [x] "Recent requests" — вертикальный список
- [x] Геолокация: автоопределение города по GPS (`geolocator`), GPS-иконка в хедере
- [x] Все строки локализованы (greeting, nearYou, seeAll, map, recentRequests)
- [x] Цвета категорий через `AppTheme.categoryColor()` / `AppTheme.categoryIcon()`
---
## 4. Search Screen
**Файл:** `lib/screens/search/search_screen.dart`
- [x] Search bar с лайв-поиском (debounce 400мс)
- [x] Popular searches — горизонтальные chips (категории из API)
- [x] Categories — grid 3×N
- [x] Тап на родительскую категорию → BottomSheet с подкатегориями
- [x] Тап на подкатегорию → фильтрованный список задач
- [x] Все строки локализованы
---
## 5. Map Screen
**Файл:** `lib/screens/map/map_screen.dart`
- [x] `flutter_map: ^7.0.0` + `latlong2` добавлены
- [x] MapScreen с пинами задач (OpenStreetMap)
- [x] Карточка-превью при тапе на пин
- [x] Кнопка фильтра (верхний правый угол)
- [x] Роут `/map` и кнопка на главном экране
---
## 6. Create Task — Multi-step Wizard
**Файл:** `lib/screens/tasks/create_task_screen.dart`
- [x] Step 1 — Details; Step 2 — Location; Step 3 — Budget; Step 4 — Review
- [x] Progress indicator, кнопки Continue / Back
---
## 7. Task Detail Screen
**Файл:** `lib/screens/tasks/task_detail_screen.dart`
- [x] Офферы: аватар + имя + rating + jobs + цена + "View profile"
- [x] "Posted X hours ago" — локализованная временная метка
- [x] Sticky "Choose an offer" кнопка
- [x] Бюджет как диапазон "€25 – €35"
- [x] Все строки локализованы (posted, jobs, viewProfile, timeAgo)
- [x] Amber-цвета через AppTheme-токены
---
## 8. Specialist Profile Screen
**Файл:** `lib/screens/specialists/specialist_profile_screen.dart`
- [x] Sticky "Send message" кнопка
- [x] Verified badge (зелёная галочка)
- [x] Stats: Rating · Completed jobs · Positive % · Years on CanHelp
- [x] Reviews с аватарами
---
## 9. Notifications Screen
**Файл:** `lib/screens/notifications/notifications_screen.dart`
- [x] Вкладка в bottom nav (bell в хедере HomeScreen)
- [x] "Mark all as read"
- [x] Иконки для разных типов уведомлений
- [x] Подсветка непрочитанных (зелёная точка)
---
## 10. Categories Screen
**Файл:** `lib/screens/search/categories_screen.dart`
- [x] Список категорий с иконкой + название + кол-во подкатегорий
- [x] Доступен из Search → "See all categories"
- [x] Роут `/categories`
---
## Зависимости (pubspec.yaml)
| Пакет | Статус | Назначение |
|---|---|---|
| `flutter_map: ^7.0.0` | ✅ Добавлен | Map Screen |
| `latlong2: ^0.9.1` | ✅ Добавлен | Координаты для flutter_map |
| `geolocator: ^13.0.0` | ✅ Добавлен | Геолокация (автоопределение города) |
| `shimmer` | ✅ Есть | Skeleton loading |
| `cached_network_image` | ✅ Есть | Аватары/фото |
---
## Чеклист готовности
- [x] Тема зелёная везде
- [x] Bottom nav работает (4 вкладки + FAB)
- [x] FAB "+" открывает create task wizard
- [x] Home: location (GPS), search bar, near you, recent
- [x] Search: поиск + популярные + категории + подкатегории
- [x] Map: пины задач, карточка при тапе
- [x] Create task: 4 шага, прогресс-бар
- [x] Task detail: офферы со специалистами, sticky button, диапазон бюджета
- [x] Specialist profile: sticky send message, stats (4 ячейки), reviews с аватарами
- [x] Notifications: доступны через bell в хедере
- [x] Все экраны используют зелёный primary
- [x] Нет хардкодед цветов вне AppTheme
- [x] Все пользовательские строки локализованы (el/en/ru/uk)
- [x] Новая иконка приложения применена (iOS + Android)
---
## 1. Тема и цвета
**Файл:** `lib/theme/app_theme.dart`
| Что менять | Текущее | Новое |
|---|---|---|
| `primary` | `Color(0xFF2563EB)` (синий) | `Color(0xFF22C55E)` (зелёный) |
| `primaryDark` | `Color(0xFF1D4ED8)` | `Color(0xFF16A34A)` |
| `primaryLight` | `Color(0xFFEFF6FF)` | `Color(0xFFF0FDF4)` |
| `primaryContainer` | `Color(0xFFDBEAFE)` | `Color(0xFFDCFCE7)` |
- [x] Обновить `AppTheme` — сменить синюю палитру на зелёную
- [x] Проверить, что `ColorScheme` в `ThemeData.light` использует новые токены
---
## 2. Bottom Navigation Bar
**Файл:** `lib/screens/home/main_shell.dart`
Текущее состояние: `MainShell` рендерит только `navigationShell` + `AdminPreviewOverlay` без нижней навигации.
Дизайн требует:
- 5 вкладок: **Home · Search · Chat · Notifications · Profile**
- **Центральная FAB-кнопка "+"** (Post a request) между Chat и Notifications
- [x] Добавить `BottomNavigationBar` (или `NavigationBar`) в `MainShell`
- [x] Иконки: home_rounded, search_rounded, chat_bubble_rounded, notifications_rounded, person_rounded
- [x] Центральный "+" — FAB-кнопка в центре bottom nav
- [x] Badge на Notifications при наличии непрочитанных
- [x] Badge на Chat при наличии непрочитанных сообщений
- [x] Убрать `AppDrawer` / гамбургер-меню с главного экрана (оставить только в Profile)
**Изменение роутинга** (`lib/main.dart`):
- Ветка 2: `/tasks` → `/search` (SearchScreen — унифицированный поиск)
- Ветка 3: `/specialists` → убрать из nav или объединить с Search
- Добавить `/notifications` как отдельную ветку (таб 4)
- Итоговые ветки: `/` · `/search` · `/chat` · `/notifications` · `/profile`
---
## 3. Home Screen — полная переработка
**Файл:** `lib/screens/home/home_screen.dart`
### 3.1 Header
- [x] Убрать AppBar с логотипом и гамбургером
- [x] Добавить location header: иконка pin + название города (Athens, Greece ▼)
- [x] При тапе на город — bottomSheet с выбором города
### 3.2 Search bar
- [x] Строка поиска "What do you need help with?" (readonly, tap → переходит на /search)
### 3.3 "Post a request" button
- [x] Большая зелёная кнопка "＋ Post a request" → `/tasks/new`
### 3.4 "Near you" секция
- [x] Горизонтальный список с карточками задач
- [x] Карточка: category icon (цветной фон) + название + цена €
- [x] "See all" → `/search`
- [ ] Сортировка по расстоянию (требует геолокацию — отложено)
### 3.5 "Recent requests" секция
- [x] Вертикальный список последних задач
- [x] "See all" → `/search`
---
## 4. Search Screen — новый экран
**Файл:** `lib/screens/search/search_screen.dart` *(новый файл)*
- [x] Создать `SearchScreen` в ветке nav (branch 1: /search)
- [x] Search bar с лайв-поиском / показ результатов при вводе (debounce 400мс)
- [x] "Popular searches" — горизонтальные chips (Moving, Cleaning, Electrician, Assembly…)
- [x] "Categories" — grid 3×N с иконкой и названием
- [x] При вводе текста — показывать результаты (задачи + специалисты)
- [x] Тап на категорию → фильтрованный список задач
---
## 5. Map Screen — новый экран
**Файл:** `lib/screens/map/map_screen.dart` *(новый файл)*
**Зависимость отсутствует** в `pubspec.yaml`:
- [x] Добавить `flutter_map: ^7.0.0` + `latlong2` (OpenStreetMap, без API key) **или** `google_maps_flutter` (требует Google Maps API key)
- [x] Создать `MapScreen` с пинами задач
- [x] Карточка-превью задачи при тапе на пин (название, расстояние, цена)
- [x] Кнопка фильтра (верхний правый угол)
- [x] Добавить роут `/map` и кнопку на главном экране
---
## 6. Create Task — Multi-step Wizard
**Файл:** `lib/screens/tasks/create_task_screen.dart`
Текущее: одна длинная форма. Дизайн требует 4 шага с progress stepper.
- [x] Step 1 — **Details**: Title + Category + Description
- [x] Step 2 — **Location**: город / адрес
- [x] Step 3 — **Budget**: поле бюджета (необязательно) + negotiable toggle + deadline + photos
- [x] Step 4 — **Review**: превью + кнопка Submit
- [x] Progress indicator вверху (4 линии)
- [x] Кнопки "Continue" / "Back"
- [x] Сохранить всю бизнес-логику (upload фото, categories, locations API)
---
## 7. Task Detail Screen
**Файл:** `lib/screens/tasks/task_detail_screen.dart`
- [x] Редизайн секции офферов: карточка специалиста — аватар + имя + rating stars + jobs + цена + кнопка "View profile"
- [x] Статусная метка задачи (Posted X hours ago · X km away)
- [x] Кнопка "Choose an offer" внизу экрана (sticky)
- [x] Бюджет отображать как диапазон "€25 – €35"
---
## 8. Specialist Profile Screen
**Файл:** `lib/screens/specialists/specialist_profile_screen.dart`
- [x] Prominent кнопка "Send message" внизу (sticky BottomBar)
- [x] Verified badge (зелёная галочка рядом с именем)
- [ ] Stats: Completed jobs · Positive reviews % · Years on CanHelp
- [ ] Reviews секция с аватарами
---
## 9. Notifications Screen
**Файл:** `lib/screens/notifications/notifications_screen.dart`
- [x] Стать вкладкой в bottom nav (убрать back arrow из AppBar когда открыт как таб)
- [x] "Mark all as read" кнопка (есть)
- [x] Иконки для разных типов уведомлений
- [x] Подсветка непрочитанных (зелёная точка справа)
---
## 10. Categories Screen
**Файл:** `lib/screens/search/categories_screen.dart` *(новый файл)*
- [x] Список категорий с иконкой + название + кол-во подкатегорий
- [x] Достижимо из Search → тап "See all categories"
- [x] Роут `/categories` в GoRouter
---
## Зависимости (pubspec.yaml)
| Пакет | Статус | Назначение |
|---|---|---|
| `flutter_map: ^7.0.0` | ❌ Отсутствует | Map Screen |
| `latlong2: ^0.9.1` | ❌ Отсутствует | Координаты для flutter_map |
| `geolocator: ^13.0.0` | ❌ Отсутствует | Геолокация пользователя ("Near you") |
| `permission_handler: ^11.0.0` | ❌ Отсутствует | Запрос разрешения на геолокацию |
| `shimmer` | ✅ Есть | Skeleton loading |
| `cached_network_image` | ✅ Есть | Аватары/фото |
| `google_maps_flutter` | ❌ Опционально | Альтернатива flutter_map (требует API key) |
---
## Порядок выполнения
```
1. [THEME] AppTheme — сменить цвета ~30 мин
2. [NAV] MainShell — добавить BottomNavigationBar + FAB ~1.5 ч
3. [HOME] Home Screen — полный редизайн ~3 ч
4. [SEARCH] SearchScreen — новый экран ~2 ч
5. [WIZARD] CreateTask — multi-step wizard ~3 ч
6. [DETAIL] TaskDetail — офферы + sticky button ~1.5 ч
7. [MAP] MapScreen + зависимости ~2 ч
8. [SPEC] SpecialistProfile — send message sticky ~1 ч
9. [NOTIF] Notifications — tab mode + визуал ~1 ч
10. [CATS] CategoriesScreen — новый экран ~1 ч
```
**Итого:** ~16 часов разработки
---
## Чеклист готовности
- [ ] Тема зелёная везде
- [ ] Bottom nav работает на всех 5 табах
- [ ] FAB "+" открывает create task wizard
- [ ] Home: location, search bar, near you, recent
- [ ] Search: поиск + популярные + категории
- [ ] Map: пины задач, карточка при тапе
- [x] Create task: 4 шага, прогресс-бар
- [ ] Task detail: офферы со специалистами (дизайн)
- [ ] Specialist profile: sticky send message
- [ ] Notifications: таб + badge в nav
- [ ] Все экраны используют зелёный primary
- [ ] Нет хардкодед цветов вне AppTheme