clear log

docs/migration/header/SHUTDOWN_BUTTON.md

@@ -0,0 +1,33 @@
+# Документация по переносу кнопки "Выкл." в хедере
+
+## Общая структура в React
+- **Расположение**: В AppHeader.tsx, правая часть flex, последняя кнопка.
+- **Тип**: Button элемент с @click={onShutdown}, title="Выключить пульт".
+- **Зависимости**: Tailwind CSS, lucide-react (Power icon).
+- **JSX**: <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded text-sm transition-colors" title="Выключить пульт">
+  <Power class="w-4 h-4" />
+  Выкл.
+</button>.
+
+## Элементы
+- Иконка: Power (w-4 h-4, белая).
+- Текст: "Выкл." (text-sm).
+- Title: "Выключить пульт" (tooltip).
+- Handler: onShutdown — отправляет команду 'shutdown' via WebSocket, подтверждает window.confirm.
+
+## Стили (Tailwind примеры)
+- Основной: bg-red-600 text-white px-3 py-1.5 rounded text-sm transition-colors.
+- Hover: hover:bg-red-700.
+- Responsive: text-xs на mobile, min-height 44px touch.
+
+## Взаимодействие
+- Клик: Вызывает props.onShutdown, показывает confirm, отправляет 'shutdown' via WebSocket, уведомление.
+- В Dashboard: <AppHeader onShutdown={handleShutdown} />.
+
+## Vue маппинг
+- <template>: <button @click="onShutdown" class="bg-red-600 hover:bg-red-700 ..." title="Выключить пульт">
+  <Power class="w-4 h-4" />
+  Выкл.
+</button>.
+- defineProps: { onShutdown: Function }.
+- Импорт: import { Power } from 'lucide-vue-next'.