Skip to content

# 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.