clear log

docs/migration/footer/PAUSE_BUTTON.md

@@ -0,0 +1,28 @@
+# Документация по переносу кнопки "Пауза" в футере
+
+## Общая структура в 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).