# Modals

**Русский** | [English](./README.md)

Централизованная система управления модальными окнами для Timeline Studio.

## Архитектура

Функция modals предоставляет единый способ управления всеми модальными диалогами в приложении с использованием XState state machine.

### Основные компоненты

#### `ModalContainer`
Основной контейнер, который отображает текущее активное модальное окно.
- Централизованный рендеринг модальных окон
- Плавные переходы между модальными окнами
- Поддержка навигации с возвратом
- Настраиваемые размеры диалогов

#### `ModalMachine`
XState машина состояний для управления состоянием модальных окон.
- Только одно активное модальное окно
- Отслеживание истории модальных окон
- Поддержка возврата к предыдущему окну
- Типобезопасные данные модальных окон

#### `ModalProvider`
React Context провайдер для функциональности модальных окон.
- Глобальный доступ к модальным окнам
- Методы открытия/закрытия
- Синхронизация состояния

## Доступные модальные окна

### Медиа и запись
- `camera-capture` - Захват с камеры и экрана
- `voice-recording` - Интерфейс записи аудио
- `audio-effects` - Редактор аудио эффектов

### Управление проектом
- `export` - Экспорт проекта в различных форматах
- `project-settings` - Настройки проекта
- `missing-files` - Восстановление отсутствующих медиафайлов

### Пользовательский интерфейс
- `user-settings` - Настройки пользователя и API ключи
- `keyboard-shortcuts` - Настройка горячих клавиш
- `effect-detail` - Редактирование параметров эффектов
- `color-grading` - Интерфейс цветокоррекции

### Редактирование контента
- `subtitle-editor` - Интерфейс редактирования субтитров
- `subtitle-ai-tools` - AI-инструменты для субтитров
- `person-form` - Форма идентификации персон
- `ai-marker-settings` - Настройки AI маркеров

### Система и производительность
- `cache-settings` - Настройки кеша
- `cache-statistics` - Статистика использования кеша

### MIDI интеграция
- `midi-learn` - Обучение MIDI управлению
- `midi-mapping` - Редактор MIDI маппинга
- `midi-configuration` - Настройка MIDI устройств

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

```typescript
import { useModals } from '@/features/modals'

function MyComponent() {
  const { openModal, closeModal } = useModals()
  
  // Открытие модального окна с данными
  const handleExport = () => {
    openModal('export', {
      format: 'mp4',
      quality: 'high'
    })
  }
  
  // Открытие окна с навигацией возврата
  const handleSettings = () => {
    openModal('cache-settings', {
      returnTo: 'user-settings'
    })
  }
}
```

## Конфигурация модальных окон

### Размеры диалога
```typescript
openModal('modal-type', {
  dialogClass: 'max-w-4xl' // Tailwind классы для размеров
})
```

### Навигация с возвратом
```typescript
// Открывает настройки, затем настройки кеша
openModal('user-settings')
// Внутри настроек пользователя:
openModal('cache-settings', { returnTo: 'user-settings' })
// Закрытие cache-settings возвращает к user-settings
```

## Лучшие практики

1. **Правило одного окна** - Только одно модальное окно может быть активно
2. **Валидация данных** - Проверяйте данные перед открытием окна
3. **Очистка** - Обрабатывайте очистку при размонтировании
4. **Доступность** - Все окна поддерживают навигацию клавиатурой
5. **Обработка ошибок** - Предоставляйте состояния ошибок внутри окон