feat: backgorund image shown only once

plans/PROJECT_PLAN.md

@@ -33,8 +33,8 @@
 - Автоматическое обновление панелей при изменении текстов
 
 #### 5. Просмотр панелей
-- Превью всех созданных панелей в боковой панели
+- Единое фоновое изображение в боковой панели (один раз вверху)
-- Отображение финального результата с текстом
+- Превью всех созданных панелей с текстом на прозрачном фоне
 - Превью только для просмотра
 - Скачивание отдельной панели
 - Массовое скачивание всех панелей
@@ -53,7 +53,9 @@
 ### Шаг 2: Настройка фона (опционально)
 1. Пользователь может загрузить собственное фоновое изображение
 2. При необходимости обрезает изображение
-3. Фон применяется ко всем создаваемым панелям
+3. Фон отображается один раз в боковой панели
+4. Фон применяется ко всем создаваемым панелям
+5. Превью панелей показывают только текст на прозрачном фоне
 
 ### Шаг 3: Создание и редактирование текстов
 1. Пользователь вводит текст для первой панели (например: "links")
@@ -77,9 +79,10 @@
 3. Превью панелей в боковой панели обновляется в реальном времени
 
 ### Шаг 5: Просмотр панелей
-1. В боковой панели отображаются превью всех созданных панелей
+1. В боковой панели отображается фоновое изображение (один раз вверху)
-2. Каждая панель показывает финальный результат с текстом
+2. Ниже отображаются превью всех созданных панелей
-3. Превью только для просмотра, редактирование происходит в списке текстов
+3. Превью панелей показывают только текст на прозрачном фоне
+4. Превью только для просмотра, редактирование происходит в списке текстов
 
 ### Шаг 6: Экспорт панелей
 1. Пользователь скачивает отдельные панели или все сразу
@@ -168,6 +171,8 @@
 ## Ограничения MVP
 
 - Один фоновый рисунок для всех панелей
+- Фон отображается один раз в боковой панели
+- Превью панелей показывают только текст на прозрачном фоне
 - Один текстовый элемент на панель
 - Фиксированная ширина панели (320px)
 - Только экспорт в PNG

src/components/PanelPreview.svelte

@@ -64,29 +64,11 @@
     <Button variant="primary" size="sm" onclick={onDownload}>Скачать</Button>
   </div>
     <div class="preview-sections">
-      <!-- Превью чистой картинки -->
-      <div class="preview-section">
-        <h3>Фон</h3>
-        <div class="canvas-container">
-          <Stage width={320} height={panel.height}>
-            <Layer>
-              {#if backgroundImage}
-                <Image image={backgroundImage} width={320} height={panel.height} />
-              {/if}
-            </Layer>
-          </Stage>
-        </div>
-      </div>
-
       <!-- Превью с текстом -->
       <div class="preview-section">
-        <h3>Финальный результат</h3>
         <div class="canvas-container">
           <Stage width={320} height={panel.height}>
             <Layer>
-              {#if backgroundImage}
-                <Image image={backgroundImage} width={320} height={panel.height} />
-              {/if}
               {#each panel.texts || [] as textItem (textItem.id)}
                 {@const textPosition = getTextPosition(textItem)}
                 <Text

src/routes/+page.svelte

@@ -152,6 +152,12 @@
     </div>
 
     <div class="sidebar">
+      {#if $uiStore.currentStep === "text" && backgroundImage}
+        <div class="background-preview">
+          <h3>Фоновое изображение</h3>
+          <img src={backgroundImage} alt="Фон" />
+        </div>
+      {/if}
       {#if $uiStore.currentStep === "text" && panels.length > 0}
         <div class="panels-container">
           <div class="panels-header">
@@ -232,6 +238,28 @@
     gap: 1.5rem;
   }
 
+  .background-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .background-preview h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .background-preview img {
+    width: 100%;
+    border-radius: 4px;
+  }
+
   .panels-container {
     display: flex;
     flex-direction: column;