# Документация по переносу кнопки "Пауза" в футере

## Общая структура в React
- **Расположение**: В BottomPanel.tsx, центр группы элементов.
- **Тип**: PauseButton компонент, button with onClick={togglePause}, title "Пауза/Возобновить".
- **Зависимости**: Tailwind CSS, lucide-react (Pause/Play icon), usePauseSystem for isPaused.
- **JSX**: <PauseButton /> — button class "w-16 h-16 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center shadow-lg transition-all" title="Пауза" onClick={handlePauseToggle}.
  - Icon: Pause (w-6 h-6, white) or Play if paused.

## Элементы
- Icon: Pause or Play (w-6 h-6, white).
- Title: "Пауза" or "Возобновить".
- Dynamic: icon/color based on isPaused from hook.

## Стили (Tailwind примеры)
- Button: w-16 h-16 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center shadow-lg transition-all.
- Hover: hover:bg-red-600.
- Responsive: w-12 h-12 mobile, min-height 44px touch.

## Взаимодействие
- Click: toggle isPaused via usePauseSystem, send 'pause'/'resume' via WebSocket.
- In BottomPanel: <PauseButton /> in center.

## Vue маппинг
- <template>: <button @click="togglePause" class="w-16 h-16 rounded-full bg-red-500 ..." title="Пауза">
  <component :is="isPaused ? Play : Pause" class="w-6 h-6" />
</button>.
- Composables: usePauseSystem (isPaused, togglePause).