From 5b964a1b462f4ae93439420903053ab5edee21c8 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Mon, 19 Oct 2026 01:47:23 +0700
Subject: [PATCH] fix

---
 src/components/ConnectionPanel.vue       | 46 +++++++++++++-----------
 src/components/ControlPage.vue           | 45 ++++++++++++-----------
 src/components/GameControlPanel.vue      | 19 +++++-----
 src/components/MusicPlanPanel.vue        |  8 +++--
 src/components/ScreenConnectionPanel.vue |  6 ----
 src/components/ScreenPlanPanel.vue       |  2 +-
 src/utils/game-status.ts                 |  2 +-
 7 files changed, 68 insertions(+), 60 deletions(-)

diff --git a/src/components/ConnectionPanel.vue b/src/components/ConnectionPanel.vue
index 9651d11..3fef2e3 100644
--- a/src/components/ConnectionPanel.vue
+++ b/src/components/ConnectionPanel.vue
@@ -254,18 +254,20 @@ const gameOptions = computed(() => {
   </n-card>
   <n-card v-if="bridge && isReady" title="Материалы" data-testid="game-materials">
       <template #header-extra>
-        <n-tag
-          role="status"
-          data-testid="game-selection-status"
-          :type="selectedKey ? 'success' : 'error'"
-        >
-          {{ selectedKey ? 'Игра выбрана' : 'Игра не выбрана' }}
-        </n-tag>
+        <div class="server-actions">
+          <n-tag
+            role="status"
+            data-testid="game-selection-status"
+            :type="selectedKey ? 'success' : 'error'"
+          >
+            {{ selectedKey ? 'Игра выбрана' : 'Игра не выбрана' }}
+          </n-tag>
+          <n-button v-if="selectedKey" size="small" :disabled="isBusy || state.busy || outputOpen" @click="emit('resetGame')">Сменить игру</n-button>
+        </div>
       </template>
       <div class="connection-content">
         <div v-if="selectedKey" class="current-game">
           <span data-testid="control-game">Текущая игра: {{ selectedName }}</span>
-          <n-button :disabled="isBusy || state.busy || outputOpen" @click="emit('resetGame')">Сменить игру</n-button>
         </div>
         <template v-if="!selectedKey">
           <span>Скачанные игры</span>
@@ -481,15 +483,21 @@ const gameOptions = computed(() => {
       </div>
   </n-card>
   <GameControlPanel v-if="bridge && isReady" :state="state" :is-busy="isBusy" :selected-key="selectedKey" :selected-name="selectedName" @action="run">
-    <ScreenConnectionPanel :state="state" :is-busy="isBusy" @action="run">
-      <template v-if="state.authenticated">
-        <n-button
-          v-if="state.connection !== 'connected'"
-          :disabled="!canConnectCurrent || isBusy || state.busy"
-          @click="run({ action: 'connect' })"
-          >Подключиться</n-button>
-      </template>
-    </ScreenConnectionPanel>
+    <template #connection-actions>
+      <n-button
+        v-if="state.authenticated && state.connection !== 'connected'"
+        size="small"
+        :disabled="!canConnectCurrent || isBusy || state.busy"
+        @click="run({ action: 'connect' })"
+      >Подключиться</n-button>
+      <n-button
+        v-if="state.screenId"
+        size="small"
+        :disabled="isBusy || state.busy"
+        @click="run({ action: 'disconnect' })"
+      >Отключиться</n-button>
+    </template>
+    <ScreenConnectionPanel :state="state" :is-busy="isBusy" @action="run" />
   </GameControlPanel>
 </template>
 
@@ -561,10 +569,6 @@ const gameOptions = computed(() => {
   overflow-wrap: anywhere;
 }
 
-.current-game > button {
-  flex-shrink: 0;
-}
-
 .game-selection {
   align-items: center;
   display: flex;
diff --git a/src/components/ControlPage.vue b/src/components/ControlPage.vue
index 06f74f6..640354d 100644
--- a/src/components/ControlPage.vue
+++ b/src/components/ControlPage.vue
@@ -279,13 +279,23 @@ onUnmounted(() => {
     />
     <n-card v-if="bridge" title="Экран">
       <template #header-extra>
-        <n-tag
-          role="status"
-          data-testid="display-connection-status"
-          :type="host.displays.length ? 'success' : 'error'"
-        >
-          {{ host.displays.length ? 'Подключён' : 'Не подключён' }}
-        </n-tag>
+        <n-space align="center" :size="8">
+          <n-tag
+            role="status"
+            data-testid="display-connection-status"
+            :type="host.displays.length ? 'success' : 'error'"
+          >
+            {{ host.displays.length ? 'Подключён' : 'Не подключён' }}
+          </n-tag>
+          <n-button
+            v-if="!state?.outputOpen"
+            size="small"
+            :disabled="display === null || isBusy"
+            @click="run(() => bridge!.show(display!))"
+          >Открыть показ</n-button>
+          <n-button v-else size="small" :disabled="isBusy" @click="run(() => bridge!.closeOutput())"
+          >Закрыть показ</n-button>
+        </n-space>
       </template>
       <div class="screen-grid">
         <div v-if="state" class="screen-preview">
@@ -354,15 +364,6 @@ onUnmounted(() => {
                 </svg>
               </n-button>
             </n-space>
-            <div class="output-toggle">
-              <n-button
-                v-if="!state?.outputOpen"
-                :disabled="display === null || isBusy"
-                @click="run(() => bridge!.show(display!))"
-              >Открыть показ</n-button>
-              <n-button v-else :disabled="isBusy" @click="run(() => bridge!.closeOutput())"
-              >Закрыть показ</n-button>
-            </div>
           </div>
         </n-space>
       </div>
@@ -373,10 +374,16 @@ onUnmounted(() => {
           <template #header-extra>
             <n-button
               v-if="!isPlanEditing"
+              :square="!!state.catalog.steps.length"
+              :aria-label="state.catalog.steps.length ? 'Редактировать' : 'Создать план'"
+              :title="state.catalog.steps.length ? 'Редактировать' : 'Создать план'"
               :disabled="isBusy || isPlanSaving || planStatus.key !== state.catalog.key || !planStatus.editable"
               @click="editPlan"
             >
-              {{ state.catalog.steps.length ? 'Редактировать' : 'Создать план' }}
+              <svg v-if="state.catalog.steps.length" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <path d="m16 3 5 5M3 21l5-1L21 7a2.8 2.8 0 0 0-4-4L4 16z" />
+              </svg>
+              <span v-else>Создать план</span>
             </n-button>
             <n-space v-else>
               <n-button
@@ -523,10 +530,6 @@ onUnmounted(() => {
   gap: 12px;
 }
 
-.output-toggle {
-  margin-left: auto;
-}
-
 .preview {
   background: var(--brand-background);
   display: block;
diff --git a/src/components/GameControlPanel.vue b/src/components/GameControlPanel.vue
index f084b14..4bd388b 100644
--- a/src/components/GameControlPanel.vue
+++ b/src/components/GameControlPanel.vue
@@ -49,19 +49,22 @@ function run(command: GameCommand) {
     <template #header>
       <div class="game-heading">
         <span>Игра</span>
-        <n-tag role="status" data-testid="game-state" :type="state.gameError ? 'warning' : status?.type ?? 'default'">
+        <n-tag role="status" data-testid="game-state" :type="state.gameError ? 'warning' : status?.type ?? 'info'">
           {{ !selectedKey ? 'Игра не выбрана' : status?.label ?? (!state.authenticated ? 'Требуется вход' : state.gameError ? 'Нет данных' : 'Загрузка…') }}
         </n-tag>
       </div>
     </template>
     <template #header-extra>
-      <n-tag
-        role="status"
-        data-testid="game-connection-status"
-        :type="state.connection === 'connected' ? 'success' : 'error'"
-      >
-        {{ state.connection === 'connected' ? 'Подключено' : 'Не подключено' }}
-      </n-tag>
+      <n-space align="center" :size="8">
+        <n-tag
+          role="status"
+          data-testid="game-connection-status"
+          :type="state.connection === 'connected' ? 'success' : 'error'"
+        >
+          {{ state.connection === 'connected' ? 'Подключено' : 'Не подключено' }}
+        </n-tag>
+        <slot name="connection-actions" />
+      </n-space>
     </template>
     <div class="game-grid">
       <n-space vertical>
diff --git a/src/components/MusicPlanPanel.vue b/src/components/MusicPlanPanel.vue
index ed33652..ff33b5d 100644
--- a/src/components/MusicPlanPanel.vue
+++ b/src/components/MusicPlanPanel.vue
@@ -133,7 +133,11 @@ function remove(trackId?: number) {
 <template>
   <n-card title="План музыки" data-testid="music-plan">
     <template #header-extra>
-      <n-button v-if="!isEditing" :disabled="isDisabled" @click="edit">Редактировать</n-button>
+      <n-button v-if="!isEditing" square aria-label="Редактировать" title="Редактировать" :disabled="isDisabled" @click="edit">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <path d="m16 3 5 5M3 21l5-1L21 7a2.8 2.8 0 0 0-4-4L4 16z" />
+        </svg>
+      </n-button>
       <n-space v-else>
         <template v-if="isDirty || hasConflict">
           <n-button
@@ -380,7 +384,7 @@ function remove(trackId?: number) {
               <span>{{ track.name || `Трек ${index + 1}` }}</span>
               <n-button
                 data-testid="select-track"
-                :type="isCurrent(index) ? 'primary' : 'default'"
+                size="small"
                 :disabled="isBusy || isCurrent(index)"
                 @click="emit('command', { action: 'track', channel: 'music', trackIndex: index })"
                 >{{ isCurrent(index) ? 'Выбран' : 'Выбрать' }}</n-button
diff --git a/src/components/ScreenConnectionPanel.vue b/src/components/ScreenConnectionPanel.vue
index d2cf7e9..868188d 100644
--- a/src/components/ScreenConnectionPanel.vue
+++ b/src/components/ScreenConnectionPanel.vue
@@ -10,7 +10,6 @@ function run(intent: OnlineIntent) {
 <template>
   <section class="screen-connection" aria-label="Экран игры">
     <span>Экран игры</span>
-    <slot />
     <n-space v-if="state.screenId" align="center">
       <span>Экран №{{ state.screenId }}</span>
       <span role="status" data-testid="sound-assignment">
@@ -25,11 +24,6 @@ function run(intent: OnlineIntent) {
           · Последнее состояние
         </template>
       </span>
-      <n-button
-        :disabled="isBusy || state.busy"
-        @click="run({ action: 'disconnect' })"
-        >Отключиться</n-button
-      >
     </n-space>
     <n-space v-if="state.screenId">
       <n-button
diff --git a/src/components/ScreenPlanPanel.vue b/src/components/ScreenPlanPanel.vue
index cdf1506..2be6ea8 100644
--- a/src/components/ScreenPlanPanel.vue
+++ b/src/components/ScreenPlanPanel.vue
@@ -147,7 +147,7 @@ function timerLabel(index: number) {
               >
               <n-button
                 data-testid="show-step"
-                :type="currentIndex === index ? 'primary' : 'default'"
+                size="small"
                 :disabled="isBusy || currentIndex === index"
                 @click="emit('command', { action: 'step', index })"
                 >{{ currentIndex === index ? 'Показан' : 'Показать' }}</n-button
diff --git a/src/utils/game-status.ts b/src/utils/game-status.ts
index 13e89ca..de675dd 100644
--- a/src/utils/game-status.ts
+++ b/src/utils/game-status.ts
@@ -1,7 +1,7 @@
 import type { GameCommand, GameStatus } from '../types/online.js'
 
 export const gameStatuses = {
-  draft: { label: 'Черновик', type: 'default' },
+  draft: { label: 'Черновик', type: 'info' },
   run: { label: 'Идёт', type: 'success' },
   pause: { label: 'Пауза', type: 'warning' },
   finish: { label: 'Завершена', type: 'info' },