# Nakama Moderation Panel

Панель модерации для Nakama - полнофункциональный веб-интерфейс для модераторов.

## Возможности

- 📱 **Адаптивный дизайн** - работает на мобильных устройствах и десктопах
- 🌐 **Веб-версия** - доступна как в Telegram WebApp, так и в обычном браузере
- 👥 **Управление пользователями** - просмотр, фильтрация, блокировка пользователей
- 📝 **Управление постами** - редактирование, удаление, пометка артом
- 🚨 **Обработка репортов** - модерация жалоб пользователей
- 💬 **Чат модераторов** - real-time чат для общения между модераторами
- 📢 **Публикация в канал** - публикация контента в Telegram канал
- 👑 **Управление админами** - назначение и снятие администраторов

## Требования

- Node.js 18+
- MongoDB (используется та же БД что и основной проект)
- Доступ к `.env` файлу в корне проекта

## Установка

1. Установите зависимости в корне проекта:
```bash
npm install
```

2. Установите зависимости фронтенда модерации:
```bash
cd moderation/frontend
npm install
```

3. Убедитесь, что в корневом `.env` файле настроены:
   - `MONGODB_URI` - URI для подключения к MongoDB
   - `MODERATION_BOT_TOKEN` - токен бота для модерации
   - `MODERATION_OWNER_USERNAMES` - список владельцев (через запятую)
   - `MODERATION_PORT` - порт для бэкенда модерации (по умолчанию 3001)

## Запуск

### Development режим

Запустить бэкенд и фронтенд модерации одновременно:
```bash
npm run mod-dev
```

Или отдельно:
```bash
# Бэкенд (порт 3001)
npm run mod-server

# Фронтенд (порт 5174)
npm run mod-client
```

### Production режим

1. Соберите фронтенд:
```bash
npm run mod-build
```

2. Запустите бэкенд:
```bash
npm run mod-start
```

## Доступ

### В Telegram
Откройте бота модерации и перейдите в меню веб-приложения.

### В браузере
1. Откройте `http://localhost:5174` (development) или ваш production URL
2. Войдите используя initData из Telegram WebApp или токен доступа

## Структура проекта

```
moderation/
├── backend/
│   └── server.js          # Бэкенд сервер модерации
├── frontend/
│   ├── src/
│   │   ├── App.jsx        # Главный компонент
│   │   ├── utils/
│   │   │   └── api.js     # API клиент
│   │   └── styles.css     # Стили с адаптивным дизайном
│   └── vite.config.js     # Конфигурация Vite
└── README.md
```

## Технологии

- **Backend**: Express.js, использует общие middleware и модели из основного бэкенда
- **Frontend**: React, Vite
- **WebSocket**: Socket.io для real-time чата модераторов
- **Стили**: CSS с адаптивными media queries

## Переменные окружения

Модераторский бэкенд использует переменные из корневого `.env`:

- `MONGODB_URI` - подключение к MongoDB
- `MODERATION_BOT_TOKEN` - токен бота
- `MODERATION_OWNER_USERNAMES` - владельцы системы
- `MODERATION_PORT` - порт бэкенда (по умолчанию 3001)
- `MODERATION_CORS_ORIGIN` - CORS origin (опционально)
- Все остальные переменные из основного `.env`

## Адаптивный дизайн

Приложение автоматически адаптируется под разные размеры экранов:

- **Desktop (>1024px)**: Многоколоночный layout, расширенные элементы управления
- **Tablet (768px-1023px)**: Одноколоночный layout с оптимизированными элементами
- **Mobile (<768px)**: Компактный layout, вертикальное меню, сенсорные элементы

## Безопасность

- Все запросы требуют авторизации через Telegram initData
- Используются те же middleware безопасности что и в основном бэкенде
- Rate limiting для защиты от DDoS
- Валидация и санитизация всех входных данных

## Поддержка

При возникновении проблем обращайтесь к владельцу системы.