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

## Общая структура в React
- **Расположение**: В BottomPanel.tsx, центр, два экземпляра (barkerOnly, musicOnly).
- **Тип**: Компонент для управления музыкой/баркером, button with onClick toggle, icon (Volume2/VolumeX).
- **Зависимости**: Tailwind CSS, useWebSocket for sendMessage, icons (Volume2, VolumeX).
- **Props**: barkerOnly (bool), musicOnly (bool).
- **JSX**: button class "bg-gray-600 hover:bg-gray-700 rounded p-2", icon Volume2/X, onClick send 'toggleBarker' or 'toggleMusic'.

## Элементы
- Button: bg-gray-600 hover:bg-gray-700 rounded p-2, icon Volume2 (on) or VolumeX (off).
- Title: "Баркер" or "Музыка".
- Dynamic: icon based on barker/music state from WebSocket.

## Стили (Tailwind примеры)
- Button: bg-gray-600 hover:bg-gray-700 rounded p-2 flex items-center justify-center.
- Icon: w-5 h-5 text-white.
- Responsive: min-height 44px touch.

## Взаимодействие
- Click: send 'toggleBarker' or 'toggleMusic' via WebSocket, update icon.
- In BottomPanel: <BarkerMusicControl barkerOnly /> left of pause, <BarkerMusicControl musicOnly /> right.

## Vue маппинг
- <template>: <button @click="toggleBarker" class="bg-gray-600 hover:bg-gray-700 rounded p-2" title="Баркер">
  <component :is="isBarkerOn ? Volume2 : VolumeX" class="w-5 h-5" />
</button>.
- Props: barkerOnly, musicOnly.
- Composables: useWebSocket (sendMessage, isBarkerOn/isMusicOn).