Необходимо написать клиентскую часть мессенджера.

Чтобы представить примерное расположение элементов, был сделан макет на Figma.

Для данного приложения не требуется писать серверную часть. Все данные должны создаваться и храниться исключительно на клиенте.

Пример генератора случайных сообщений можно запустить командой node index.js.

На главном и единственном экране пользователя должны отображаться следующие элементы:

1. Список переписок, отсортированных по убыванию времени последнего сообщения, в каждой из которых:
   1. Имя комнаты.
   2. Тело последнего сообщения.
2. Переписка в выбранной комнате:
   1. Имя выбранной комнаты.
   2. Список сообщений
   3. Форма отправки сообщения:
      1. Текстовое поле.
      2. Кнопка отправки.

Необходимый функционал:

1. Реактивный интерфейс: меняется как только меняются данные.
2. Анимация сортировки переписок: как только новое сообщение поступает в переписку, она должна "всплыть" наверх.
3. Выбор текущей переписки (комнаты).
4. Отправка сообщения в выбранную комнату.
5. По определенному таймауту (на ваш выбор) в систему должны приходить новые сообщения и распределяться по нужным комнатам
6. В плашке чата слева, должен быть счетчик непрочитанных сообщений

Функционал "на пять с плюсом":

1. Синхронизация прокрутки: прокрутка переписок в выбранном канале и во всех каналах должна всегда находиться в таком положении, чтобы просматриваемые сообщения (то есть время и канал) в обоих списках совпадали.

Стек технологий:

1. Инструмент создания приложения: Create React App, либо Razzle, либо Next.js. В идеале последнее.
2. Библиотека пользовательских интерфейсов: обязательно React.
3. Набор пользовательских компонентов: обязательно Material UI.
4. Библиотека управления состоянием: обязательно MobX.

Другие требования:

1. Стандартные компоненты Material UI нужно кастомизировать так, чтобы они соответствовали макетам.

Результатом работы должен быть публичный репозиторий git с кодом приложения, которое запускается командой yarn start.