Chat U I - Copy this React, Tailwind Component to your project

Общий макет и структура страницы: Сайт представляет собой трехколоночный макет: Левая панель (боковая панель навигации) — отображает список серверов и основных опций. Центральная часть (окно чата) — основной раздел, где происходит общение пользователей. Правая панель (список участников) — отображает активных пользователей на сервере. Интерфейс минималистичный, с большими отступами между элементами для удобства. Основные элементы в дизайне — это карточки, аватары, кнопки, текстовые поля и значки (иконки). Важным элементом является поддержка двух тем: светлой и темной: Светлая тема: использует белый и светло серый цвет с легкими тенями для разделения областей. Темная тема: базируется на черных и темно серых тонах, для контраста используются белые и светлые надписи. 2. Левая боковая панель (навигация по серверам и каналам): Эта панель занимает приблизительно 15 20% ширины экрана. Верхняя часть: В верхней части располагается поле для поиска серверов, представленное в виде строки поиска с иконкой лупы. Рядом — кнопка с иконкой “плюс” для создания или подключения к новому серверу. Список серверов: Серверы отображаются в виде вертикального ряда иконок с текстовой подсказкой при наведении. Иконки серверов могут быть круглыми и кастомизируемыми. Название раздела изменено на “Сервера” вместо “Your Servers”. При выборе сервера он подсвечивается, выделяется границей или изменением цвета. Категории каналов: При выборе сервера ниже его иконки появляется список текстовых и голосовых каналов, разделенных на категории. Текстовые каналы отображаются с иконкой чата, а голосовые каналы — с иконкой микрофона. У каждого голосового канала должно быть показано количество активных участников, если они есть. 3. Центральная часть (окно чата): Основная область, занимающая примерно 60% ширины экрана, где пользователи могут общаться в режиме реального времени. Верхняя панель чата: Включает название канала (например, "Общий"), рядом с ним кнопки для закрепленных сообщений и уведомлений. Справа от названия канала находятся кнопки упоминаний (для отображения всех сообщений с упоминанием пользователя) и настройки чата. Основное пространство для сообщений: Сообщения должны быть представлены в чистом и структурированном виде, с четким разделением между текстами. Каждое сообщение включает: Аватар пользователя слева от текста. Имя пользователя вверху сообщения. Время отправки (рядом с именем или внизу сообщения). Само сообщение в текстовом поле с возможностью реагировать (например, добавлять эмодзи). Визуальные различия сообщений: Сообщения могут быть разными по цвету фона для удобства чтения. Сообщения от одного и того же пользователя могут группироваться визуально (без повторения аватара и имени). Поле ввода сообщений: Расположено внизу чата, включает стандартное текстовое поле для ввода сообщений. Справа от поля ввода: кнопки для отправки файлов, эмодзи и быстрого упоминания. Возможно добавление кнопки голосового ввода для отправки голосовых сообщений. 4. Правая панель (список участников): Эта панель занимает 15 20% ширины экрана и отображает список участников сервера. Участники разделяются на две категории: В сети — пользователи, которые активны и онлайн. Не в сети — пользователи, которые отключены или недоступны. Аватары участников отображаются слева от их имен, с иконкой статуса (например, "онлайн", "занят", "не беспокоить"). При наведении на участника можно увидеть дополнительную информацию (например, статус, роль на сервере). Пользователи с особыми правами (администраторы, модераторы) должны иметь значок роли рядом с именем. 5. Создание и управление каналами: При нажатии на сервер в боковой панели появляется возможность создания новых текстовых или голосовых каналов. Каналы должны быть разделены на категории, которые могут быть расширены или свернуты. При создании канала пользователю предлагается выбрать тип канала (текстовый, голосовой), его название и права доступа (кто может писать или говорить). 6. Настройки и управление сервером: Администраторы сервера должны иметь возможность через кнопку настроек управлять сервером: Добавление или удаление каналов. Назначение ролей и прав доступа участникам. Изменение иконки сервера, названия и других основных параметров. 7. Темная и светлая тема: В настройках должна быть возможность выбора темы: светлой или темной. В светлой теме фон должен быть белым или светло серым, текст черным, а выделенные элементы — голубыми или синими. В темной теме фон черный или темно серый, текст белый или светло серый, выделенные элементы — синеватые или фиолетовые. 8. Дополнительные функции: Закрепленные сообщения — администраторы или модераторы могут закреплять важные сообщения, чтобы они отображались в верхней части чата. Упоминания — при упоминании (@username) пользователь получает уведомление и может перейти к этому сообщению через панель уведомлений. Уведомления — всплывающие уведомления о новых сообщениях или важных событиях. Реакции на сообщения — возможность добавлять к сообщениям реакции в виде эмодзи. 9. Функции модерации: Администраторы и модераторы должны иметь возможность редактировать и удалять сообщения других пользователей. Возможность управлять участниками: кикать или банить их с сервера при нарушении правил. Логи активности: журнал действий модераторов, где отображаются баны, удаления сообщений и другие важные действия.