Техническое задание: Клон интерфейса чат-приложения

Основная цель

Разработать визуально точную, но функционально упрощенную версию интерфейса популярного мессенджера в виде одностраничного приложения (SPA) на Vue 3.

Ключевые требования

Технический стек

• Фреймворк: Vue 3 с использованием синтаксиса <script setup>.
• Стилизация: Стили компонентов должны быть написаны внутри самих компонентов (scoped или в теге <style>).
• Логика: Используется только JavaScript, без сторонних CSS-фреймворков и тяжелых библиотек.

Функциональность

• Приложение должно состоять из нескольких страниц (например, список чатов, страница чата, настройки), между которыми осуществляется навигация.
• Все интерактивные элементы (кнопки, пункты списков, переключатели) должны иметь заглушки. При клике должен срабатывать обработчик, который выводит в консоль браузера (console.log) название или идентификатор элемента (например, значение v-model).
• Кнопка "Избранное" не ведет на отдельную страницу, а лишь выполняет console.log.
• Все повторяющиеся элементы (списки чатов, сообщения, карточки) должны рендериться в цикле (v-for) на основе локальных массивов данных-заглушек, созданных внутри компонента.

Визуальная часть (UI/UX)

• Интерфейс должен максимально соответствовать предоставленному референсу по визуальному стилю, расположению блоков и элементов.
• Обязательна поддержка двух цветовых тем: светлой и темной. Переключение между темами должно быть реализовано.
• Верстка должна быть предельно простой, но аккуратной, без излишних анимаций и сложных эффектов.
• Для фоновых изображений в карточках на главной странице можно использовать любые placeholder-изображения или градиенты.
• Количество элементов (карточек, чатов, сообщений) - на усмотрение разработчика, но достаточно для демонстрации работы циклов.

Данные и контент

• Все текстовые данные, имена пользователей, аватары, сообщения - произвольные (заглушки).
• Все ссылки на внешние ресурсы, названия компаний, телефоны и прочие реальные данные из референса должны быть заменены на вымышленные.