# 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 структура:**

```text
---
| Назва спільноти                       |
| Опис                                  |
-----------------------------------------

## |   Стрічка повідомлень (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`)

Структура:

```text
---
## | 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

Простий інпут:

```text
[Написати повідомлення…                 ]  (Кнопка Надіслати)
```

- Підтримка 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.