clear log

docs/migration/header/ESP_DIAGNOSTIC_BUTTON.md

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