clear log

docs/migration/footer/BARKER_MUSIC_CONTROL.md

@@ -0,0 +1,29 @@
+# Документация по переносу компонента 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).