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 (ввести повідомлення)        |
---

Елементи: - Назва спільноти - Список каналів: - Публічний канал - Приватні групи - Кнопка "+ Новий канал"

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.