microdao-daarion/docs/cursor/04_ui_ux_onboarding_chat.md

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.