up

src/components/ScreenPlanPanel.vue

@@ -23,9 +23,6 @@ const props = defineProps<{
   notice: string
 }>()
 const emit = defineEmits<{
-  edit: []
-  cancel: []
-  save: []
   add: []
   remove: [index: number]
   move: [index: number, offset: number]
@@ -49,22 +46,6 @@ function timerLabel(index: number) {
 
 <template>
   <n-space vertical data-testid="screen-plan">
-    <n-space>
-      <n-button v-if="!isEditing" :disabled="isBusy || !canEdit" @click="emit('edit')">
-        {{ steps.length ? 'Редактировать' : 'Создать план' }}
-      </n-button>
-      <template v-else>
-        <n-button :disabled="isBusy" @click="emit('cancel')">Отменить</n-button>
-        <n-button
-          type="primary"
-          :disabled="isBusy || !canEdit"
-          :loading="isBusy"
-          @click="emit('save')"
-        >
-          Сохранить план
-        </n-button>
-      </template>
-    </n-space>
     <n-alert v-if="notice" type="warning" role="status" class="plan-notice">{{ notice }}</n-alert>
     <p v-if="!canEdit">Для редактирования войдите на сервер игры.</p>
     <template v-if="isEditing">
@@ -156,13 +137,22 @@ function timerLabel(index: number) {
             />
           </div>
           <div class="plan-step-content">
-            <span
-              >{{ modeLabels[step.mode]
-              }}<template v-if="step.mode === 8">: {{ step.text }}</template
-              ><template v-if="step.mode === 7"
-                >: {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)</template
-              ></span
-            >
+            <div class="plan-step-title">
+              <span
+                >{{ modeLabels[step.mode]
+                }}<template v-if="step.mode === 8">: {{ step.text }}</template
+                ><template v-if="step.mode === 7"
+                  >: {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)</template
+                ></span
+              >
+              <n-button
+                data-testid="show-step"
+                :type="currentIndex === index ? 'primary' : 'default'"
+                :disabled="isBusy || currentIndex === index"
+                @click="emit('command', { action: 'step', index })"
+                >{{ currentIndex === index ? 'Показан' : 'Показать' }}</n-button
+              >
+            </div>
             <div class="plan-step-actions">
               <n-space v-if="[2, 4, 7].includes(step.mode)" align="center" :wrap="false">
                 <template v-if="step.mode === 7">
@@ -236,13 +226,6 @@ function timerLabel(index: number) {
                   <slot name="main-volume" :index="index" :active="currentIndex === index" />
                 </template>
               </n-space>
-              <n-button
-                data-testid="show-step"
-                :type="currentIndex === index ? 'primary' : 'default'"
-                :disabled="isBusy || currentIndex === index"
-                @click="emit('command', { action: 'step', index })"
-                >{{ currentIndex === index ? 'Показан' : 'Показать' }}</n-button
-              >
             </div>
             <slot
               v-if="step.mode === 2 || step.mode === 4"
@@ -296,8 +279,11 @@ function timerLabel(index: number) {
 }
 
 
-.plan-step-actions > [data-testid="show-step"] {
-  margin-left: auto;
+.plan-step-title {
+  align-items: start;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 .plan-step-preview {