Initial commit: MVP structure + Cursor documentation + Onboarding components
This commit is contained in:
Apple
278
docs/cursor/04_ui_ux_onboarding_chat.md
Normal file
278
docs/cursor/04_ui_ux_onboarding_chat.md
Normal file
@@ -0,0 +1,278 @@
|
||||
# 04 — UI/UX Specification: Onboarding, Chat & Public Channel (MVP)
|
||||
|
||||
Цей документ описує екрани, компоненти та UX-флоу, необхідні для реалізації MVP MicroDAO. Без зайвих деталей — тільки те, що потрібне для роботи Cursor і фронтенду.
|
||||
|
||||
Джерела: UI/UX Specification — microdao (web), Test Plan, API Snapshot.
|
||||
|
||||
## 1. Загальні принципи UX
|
||||
|
||||
- Мінімалістичний інтерфейс: світла тема, чисті лінії, помірні інтервали.
|
||||
- Мова інтерфейсу: українська (тексти вказані нижче).
|
||||
- Основний фокус MVP:
|
||||
**простота**, **читабельність**, **мінімум кліків**, **логічні флоу**.
|
||||
- Усі критичні дії мають підтвердження (модалки).
|
||||
- Повідомлення про помилки — короткі та зрозумілі.
|
||||
|
||||
## 2. Онбординг (`/onboarding`)
|
||||
|
||||
Онбординг реалізується як stepper (5 кроків).
|
||||
Стан зберігається у локальному React state.
|
||||
|
||||
### Step 1 — Welcome
|
||||
|
||||
**UX-цілі:**
|
||||
Пояснити, що таке MicroDAO та що буде далі.
|
||||
|
||||
**UI:**
|
||||
- Заголовок: **"Створимо твою MicroDAO"**
|
||||
- Підзаголовок: **"5 кроків — і твоя спільнота буде готова до роботи."**
|
||||
- Кнопка: **"Почати"**
|
||||
|
||||
### Step 2 — Назва спільноти
|
||||
|
||||
**UI поля:**
|
||||
- `Назва спільноти` (input, required)
|
||||
- `Опис (необов'язково)` (textarea)
|
||||
|
||||
**UX-підказка:**
|
||||
> Спільнота — це мікро-DAO. Вона матиме свій чат, агента та приватний простір.
|
||||
|
||||
**Кнопка:**
|
||||
- **"Продовжити"**
|
||||
|
||||
**API:** `POST /teams`
|
||||
|
||||
### Step 3 — Приватність (Public / Confidential)
|
||||
|
||||
**UI:**
|
||||
Два великі карточки-режими:
|
||||
|
||||
#### Карточка "Public"
|
||||
- Заголовок: **Відкрита**
|
||||
- Пояснення:
|
||||
> Є публічний канал. Гості можуть читати та приєднатися через email.
|
||||
|
||||
#### Карточка "Confidential"
|
||||
- Заголовок: **Приватна**
|
||||
- Пояснення:
|
||||
> Тільки запрошені учасники. Чати зашифровані між клієнтами.
|
||||
|
||||
**Кнопка:**
|
||||
- **"Вибрати режим"**
|
||||
|
||||
**API:** `PATCH /teams/{id}`
|
||||
|
||||
### Step 4 — Перший канал
|
||||
|
||||
**UI поля:**
|
||||
- Назва каналу (input, наприклад "general")
|
||||
- Тип:
|
||||
- `Публічний канал`
|
||||
- `Приватна кімната`
|
||||
|
||||
**Кнопка:**
|
||||
- **"Створити канал"**
|
||||
|
||||
**API:** `POST /channels`
|
||||
|
||||
### Step 5 — Агенти та пам'ять
|
||||
|
||||
**UI:**
|
||||
|
||||
Перемикачі:
|
||||
|
||||
- **Увімкнути приватного агента** (toggle)
|
||||
- Випадаючий список мов: **Українська / English**
|
||||
- Профіль агента:
|
||||
- `Загальний`
|
||||
- `Бізнес`
|
||||
- `Технічний`
|
||||
- `Креатив`
|
||||
|
||||
Блок пам'яті (дуже простий):
|
||||
|
||||
- **Що агент може памʼятати?**
|
||||
- Радіо-кнопки:
|
||||
- `Лише цей канал`
|
||||
- `Всі канали спільноти`
|
||||
- `Увесь мій MicroDAO` (опція на майбутнє, можна заблокувати)
|
||||
|
||||
**Кнопка:**
|
||||
- **"Готово" → Перехід до чату**
|
||||
|
||||
## 3. Публічний канал (`/c/:slug`)
|
||||
|
||||
Це дуже важливий елемент MVP — публічна сторінка для залучення нових користувачів.
|
||||
|
||||
### 3.1. Для гостей
|
||||
|
||||
**UI структура:**
|
||||
|
||||
```
|
||||
---
|
||||
| Назва спільноти |
|
||||
| Опис |
|
||||
-----------------------------------------
|
||||
|
||||
## | Стрічка повідомлень (read-only) |
|
||||
|
||||
| Форма приєднання |
|
||||
| - Імʼя |
|
||||
| - Email |
|
||||
| - Кнопка "Приєднатися" |
|
||||
-----------------------------------------
|
||||
```
|
||||
|
||||
**Тексти:**
|
||||
- Заголовок: **Публічний канал спільноти**
|
||||
- Поля:
|
||||
- "Ваше ім'я"
|
||||
- "Email"
|
||||
- Кнопка: **"Приєднатися до спільноти"**
|
||||
|
||||
**API:**
|
||||
- GET `/channels/{id}/messages` (публічні, без авторизації)
|
||||
- POST `/auth/login-email` → exchange → auto-join public channel (viewer-type)
|
||||
|
||||
### 3.2. Для зареєстрованих учасників
|
||||
|
||||
- Показуємо повноцінний чат.
|
||||
- Можливість написати повідомлення.
|
||||
- У стрічці доступні треди та follow-up.
|
||||
|
||||
## 4. Основний Chat UI (`/t/:teamId/c/:channelId`)
|
||||
|
||||
Структура:
|
||||
|
||||
```
|
||||
---
|
||||
## | Sidebar (список каналів) |
|
||||
|
||||
## | Chat Header |
|
||||
|
||||
## | Messages Stream |
|
||||
|
||||
## | Composer (ввести повідомлення) |
|
||||
---
|
||||
```
|
||||
|
||||
### 4.1. Sidebar
|
||||
|
||||
**Елементи:**
|
||||
- Назва спільноти
|
||||
- Список каналів:
|
||||
- Публічний канал
|
||||
- Приватні групи
|
||||
- Кнопка "+ Новий канал"
|
||||
|
||||
**Active state:** підсвітка поточного каналу.
|
||||
|
||||
### 4.2. Chat Header
|
||||
|
||||
- Назва каналу
|
||||
- Тип (публічний / приватний)
|
||||
- Кнопка меню (3 крапки):
|
||||
- "Параметри каналу" (можна stub)
|
||||
|
||||
### 4.3. Messages Stream
|
||||
|
||||
#### Повідомлення містить:
|
||||
- Аватар автора
|
||||
- Ім'я
|
||||
- Час
|
||||
- Текст (markdown support)
|
||||
- Меню дій:
|
||||
- "Зробити follow-up"
|
||||
- "Скопіювати посилання"
|
||||
- "Видалити" (тільки автор)
|
||||
|
||||
#### Треди — опціонально
|
||||
Для MVP можна зробити collapsible replies або приховати.
|
||||
|
||||
### 4.4. Follow-up creation
|
||||
|
||||
Модалка:
|
||||
|
||||
Поля:
|
||||
- Назва (автоматично з фрагменту повідомлення)
|
||||
- Відповідальний
|
||||
- Дедлайн (optional)
|
||||
|
||||
Кнопки:
|
||||
- **"Створити"**
|
||||
- "Скасувати"
|
||||
|
||||
API:
|
||||
- `POST /followups`
|
||||
|
||||
### 4.5. Composer
|
||||
|
||||
Простий інпут:
|
||||
|
||||
```
|
||||
[Написати повідомлення… ] (Кнопка Надіслати)
|
||||
```
|
||||
|
||||
- Підтримка Enter для відправки.
|
||||
- Shift+Enter → новий рядок.
|
||||
- Drag&drop файлів — out of scope.
|
||||
|
||||
API:
|
||||
- `POST /channels/{id}/messages`
|
||||
|
||||
## 5. Вкладка "Follow-ups"
|
||||
|
||||
URL: `/t/:teamId/followups`
|
||||
|
||||
**UI:**
|
||||
- Фільтри:
|
||||
- "Assigned to me",
|
||||
- "All",
|
||||
- "Open / In progress / Done"
|
||||
- Список:
|
||||
- Назва
|
||||
- Статус
|
||||
- Дедлайн
|
||||
- Коротке посилання на оригінальне повідомлення
|
||||
|
||||
API:
|
||||
- `GET /followups`
|
||||
|
||||
## 6. Межі MVP
|
||||
|
||||
Що **не робимо** у цій версії:
|
||||
|
||||
- Немає вкладених тредів 2 рівня.
|
||||
- Немає реакцій (emoji).
|
||||
- Немає пересилання повідомлень.
|
||||
- Немає Co-Memory (файли, документи).
|
||||
- Немає складного редактора повідомлень.
|
||||
- Немає налаштувань ролей (тільки Member / Viewer).
|
||||
|
||||
## 7. Стандарти UI
|
||||
|
||||
- Шрифти: System fonts.
|
||||
- Primary color: #3F51F5
|
||||
- Error: #E53935
|
||||
- Success: #43A047
|
||||
- Border radius: 8px
|
||||
- Spacing: 8 / 12 / 16 / 24
|
||||
|
||||
## 8. Адаптивність
|
||||
|
||||
Minimum viable mobile support:
|
||||
|
||||
- Sidebar → Drawer
|
||||
- Messages → 100% ширина
|
||||
- Composer зафіксований знизу
|
||||
- Onboarding — одна колонка
|
||||
|
||||
## 9. Для Cursor
|
||||
|
||||
При розробці:
|
||||
|
||||
- Всі тексти беріть з цього документа.
|
||||
- Усі екрани повинні відповідати маршрутам, зазначеним у файлі.
|
||||
- Важливо: onboarding flow має один глобальний state + виклики API на кожному кроці.
|
||||
- Чат повинен бути повністю інтерактивним.
|
||||
- Messages Stream має працювати з cursor-based pagination.
|
||||
Reference in New Issue
Block a user