Corp/backend/CONTEXT_MENU_GUIDE.md

Контекстное меню сообщений

✅ Реализовано

Добавлено современное контекстное меню для сообщений (как в Telegram/WhatsApp/Viber).

---

🎯 Функционал

Открытие меню

На десктопе (ПК)

• Правый клик на сообщении → открывается контекстное меню

На мобильных устройствах

• Долгое нажатие (500ms) на сообщении → вибрация → открывается контекстное меню
• Если палец двигается при нажатии → долгое нажатие отменяется

Содержимое меню

1. Быстрые реакции (верхняя секция)

👍  ❤️  😂  😮  😢  🙏  👏  🔥

• Одним тапом можно поставить реакцию
• Круглые кнопки с анимацией увеличения при нажатии

2. Действия с сообщением (нижняя секция)

Для всех сообщений:

• 🔄 Ответить - цитировать сообщение
• 📋 Копировать - скопировать текст в буфер обмена
• ↗️ Переслать - переслать в другой чат

Только для своих сообщений:

• ✏️ Редактировать - изменить текст
• 🗑️ Удалить - удалить сообщение (красная кнопка)

Закрытие меню

• Клик вне меню
• Нажатие клавиши Escape
• Скролл страницы
• После выбора любого действия

---

📁 Файлы

JavaScript

backend/static/js/components/messageContextMenu.js (311 строк)

• Класс MessageContextMenu
• Обработка долгого нажатия
• Обработка правого клика
• Позиционирование меню
• Вибрация на мобильных

CSS

backend/static/css/message-context-menu.css (225 строк)

• Стили меню
• Анимации появления/исчезания
• Адаптивность для мобильных
• Тёмная тема
• Toast уведомления

Интеграция

backend/static/js/chat-detail-enhanced.js
backend/templates/communications/chat_detail.html

---

🎨 Дизайн

Десктоп

• Округлое меню с тенью
• Позиционируется рядом с курсором
• Минимальная ширина 280px

Мобильные

• Меню растягивается на всю ширину экрана (с отступами 16px)
• Закреплено внизу экрана
• Увеличенные кнопки (48x48px) для удобства тапов
• Анимация появления снизу вверх

Эффекты

• Подсветка выбранного сообщения
• Плавные анимации (transform + opacity)
• Вибрация при долгом нажатии (мобильные)
• Toast уведомление "Текст скопирован"

Тёмная тема

• Автоматическое определение через prefers-color-scheme
• Тёмный фон (#2b2d31)
• Светлый текст (#dbdee1)

---

🔧 API

Инициализация

const contextMenu = new MessageContextMenu({
    currentUserId: 123,
    emojis: ['👍', '❤️', '😂', ...],
    onReactionSelect: (messageId, emoji) => { ... },
    onEdit: (messageId) => { ... },
    onDelete: (messageId) => { ... },
    onReply: (messageId) => { ... },
    onForward: (messageId) => { ... }
});

Подключение к сообщению

const messageElement = document.querySelector('[data-message-id="123"]');
contextMenu.attachToMessage(messageElement);

Методы

• showMenu(element, messageId, isOwn, x, y) - показать меню
• closeMenu() - закрыть меню
• handleAction(action, messageId, emoji) - обработать действие
• showToast(message) - показать уведомление

---

📱 UX особенности

Предотвращение конфликтов

• Долгое нажатие отменяется если палец двигается (скролл)
• Клик по сообщению не открывает меню (только долгое нажатие)
• Меню автоматически закрывается при скролле

Позиционирование

• Меню не выходит за границы экрана
• Автоматическое смещение если не помещается
• На мобильных всегда внизу экрана

Тактильная обратная связь

• Вибрация 50ms при открытии меню (мобильные)
• Hover эффекты на кнопках (десктоп)
• Active состояния для тапов (мобильные)

---

🚀 Использование

Пользователь на ПК

1. Навести курсор на сообщение
2. Правый клик мыши
3. Выбрать действие из меню

Пользователь на телефоне

1. Нажать и держать палец на сообщении ~0.5 секунды
2. Почувствовать вибрацию
3. Увидеть меню внизу экрана
4. Тапнуть на нужное действие

---

✨ Фишки

1. Быстрые реакции - 8 самых популярных эмодзи в один клик
2. Умное позиционирование - меню всегда на экране
3. Подсветка - видно какое сообщение выбрано
4. Вибрация - тактильная обратная связь
5. Toast - уведомления о копировании
6. Адаптивность - разный UX для десктопа и мобилок
7. Темная тема - автоматическая поддержка
8. Анимации - плавное появление/исчезновение

---

🔄 Интеграция с существующим кодом

Реакции

При выборе эмодзи в меню вызывается:

await reactions.addReaction(messageId, emoji);

Действия

Используются существующие функции:

window.editMessage(messageId);
window.deleteMessage(messageId);
window.setReplyTo(messageId);
window.forwardMessage(messageId);

---

🎯 Совместимость

• ✅ Chrome/Edge (Desktop & Mobile)
• ✅ Firefox (Desktop & Mobile)
• ✅ Safari (Desktop & Mobile)
• ✅ Работает без JavaScript (graceful degradation)
• ✅ Поддержка touch событий
• ✅ Поддержка pointer events

---

📝 TODO (опционально)

• Добавить haptic feedback для iOS
• Добавить звук при открытии меню
• Кастомизация списка эмодзи
• Недавние эмодзи (история)
• Анимация выбора реакции
• Swipe для быстрого ответа
• Превью текста при пересылке

---

Дата: 2025-11-30
Версия: 1.0.0