# Исправления выделения сообщений

## Исправленные проблемы

### 1. ✅ Чекбоксы теперь внутри окна чата

**Было:** Чекбоксы рисовались за пределами окна (`left: -35px`)

**Стало:** 
- Чекбоксы внутри сообщений (`left: 8px`, `right: 8px`)
- Добавлены отступы для сообщений в режиме выделения:
  - Левые сообщения: `padding-left: 40px`
  - Правые сообщения: `padding-right: 40px`
- Адаптивные размеры для мобильных

### 2. ✅ Убрано долгое нажатие мышью на десктопе

**Было:** Долгое нажатие (500мс) активировало режим выделения

**Стало:** 
- Только для мобильных устройств (touchstart/touchend)
- На десктопе работает только через контекстное меню

### 3. ✅ Вход в режим через контекстное меню

**Механизм:**
1. Правый клик по сообщению → открывается контекстное меню
2. Клик на "Выбрать" → активируется режим выделения
3. Это сообщение автоматически выделяется
4. Остальные сообщения можно выделять левым кликом

**Реализация:**
- Добавлен обработчик `handleSelectAction()` в `messageContextMenu.js`
- Отправка события `message-context-menu` с action='select'
- Прием события в `messageSelection.js` и вызов `enterSelectionMode()`

## Изменённые файлы

### 1. `backend/static/css/message-selection.css`

```css
/* Основные изменения */
.selection-mode .msg {
  padding-left: 40px !important; /* Место для чекбокса */
}

.msg-select-checkbox {
  left: 8px; /* Внутри сообщения, было -35px */
}

.msg.justify-content-end .msg-select-checkbox {
  right: 8px; /* Внутри сообщения, было -35px */
}
```

### 2. `backend/static/js/components/messageSelection.js`

**Удалено:**
- Обработчики `mousedown`, `mouseup`, `mousemove` для десктопа
- Таймер долгого нажатия мышью

**Оставлено:**
- Touch события для мобильных
- Обработчик события `message-context-menu`
- Метод `enterSelectionMode()` как публичный API

### 3. `backend/static/js/components/messageContextMenu.js`

**Добавлено:**
```javascript
case 'select':
    this.handleSelectAction(messageId);
    break;

handleSelectAction(messageId) {
    const messageElement = document.querySelector(`[data-id="${messageId}"]`);
    window.dispatchEvent(new CustomEvent('message-context-menu', {
        detail: {
            action: 'select',
            messageId: messageId,
            messageElement: messageElement
        }
    }));
}
```

## Как использовать

### На компьютере:
1. **Правый клик** по любому сообщению
2. В меню выбрать **"Выбрать"**
3. Сообщение выделится автоматически
4. **Левый клик** по другим сообщениям для выделения
5. Кнопки действий внизу экрана

### На телефоне:
1. **Долгое нажатие** (500мс) на сообщение
2. Или правый клик → "Выбрать"
3. Тап по другим сообщениям для выделения
4. Кнопки действий внизу экрана

## Визуальные улучшения

### Чекбоксы:
- ✅ Находятся внутри границ окна чата
- ✅ Не перекрывают содержимое сообщений
- ✅ Адаптивный размер (24px → 20px на мобильных)
- ✅ Правильное позиционирование для своих/чужих сообщений

### Режим выделения:
- ✅ Hover эффект на сообщениях
- ✅ Подсветка выделенных сообщений
- ✅ Синие чекбоксы с галочкой
- ✅ Счетчик выделенных сообщений

### Панель действий:
- ✅ Фиксированная позиция внизу
- ✅ Анимация появления
- ✅ Кнопки: Отмена, Удалить, Переслать
- ✅ Адаптивный дизайн

## Проверка

Обновите страницу и проверьте:

1. **Чекбоксы видны полностью**
   - Не выходят за границы чата
   - Не перекрывают текст сообщений

2. **Десктоп работает правильно**
   - Нет реакции на долгое нажатие ЛКМ
   - ПКМ → "Выбрать" → режим активируется
   - ЛКМ выделяет/снимает выделение

3. **Мобильный работает правильно**
   - Долгое нажатие активирует режим
   - Вибрация при активации
   - Тап выделяет/снимает выделение

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

- ✅ Chrome/Edge/Opera
- ✅ Firefox
- ✅ Safari (desktop/mobile)
- ✅ Chrome Mobile
- ✅ Планшеты

## Производительность

- Минимальное использование DOM манипуляций
- Делегирование событий
- Оптимизированные CSS transitions
- Отсутствие утечек памяти (cleanup при выходе)