From fbaf13294b9ad61a37360d861bcc6cd8950f4ac5 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 4 Feb 2026 01:38:52 +0500
Subject: [PATCH] feat: move preview to different place

---
 src/components/TextManager.svelte | 69 ++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/components/TextManager.svelte b/src/components/TextManager.svelte
index e4efff6..12f1429 100644
--- a/src/components/TextManager.svelte
+++ b/src/components/TextManager.svelte
@@ -266,22 +266,14 @@
     <div class="text-list">
       {#each currentPanel.texts as textItem (textItem.id)}
         <div class="text-item">
-          <div class="text-info">
-            <span class="text-content">{textItem.text}</span>
-            <button
-              class="btn-icon btn-delete"
-              onclick={() => handleRemoveText(textItem.id)}
-              aria-label="Удалить текст"
-            >
-              ×
-            </button>
-          </div>
-          {#if currentPanel?.backgroundImage}
-            <TextPreview
-              textItem={textItem}
-              height={currentPanel.height}
-            />
-          {/if}
+          <span class="text-content">{textItem.text}</span>
+          <button
+            class="btn-icon btn-delete"
+            onclick={() => handleRemoveText(textItem.id)}
+            aria-label="Удалить текст"
+          >
+            ×
+          </button>
         </div>
       {/each}
     </div>
@@ -290,6 +282,18 @@
       <p>Нет добавленного текста</p>
     </div>
   {/if}
+
+  {#if currentPanel && currentPanel.texts.length > 0 && currentPanel.backgroundImage}
+    <div class="preview-section">
+      <h3>Предпросмотр</h3>
+      {#each currentPanel.texts as textItem (textItem.id)}
+        <TextPreview
+          textItem={textItem}
+          height={currentPanel.height}
+        />
+      {/each}
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -414,18 +418,19 @@
   }
 
   .text-item {
-    border: 2px solid #ddd;
-    border-radius: 8px;
-    overflow: hidden;
-    transition: all 0.3s ease;
-  }
-
-  .text-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem;
-    background: #f9f9f9;
+    padding: 0.75rem 1rem;
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+    background: white;
+    transition: all 0.3s ease;
+  }
+
+  .text-item:hover {
+    border-color: #007bff;
+    background: #f0f8ff;
   }
 
   .text-content {
@@ -434,6 +439,20 @@
     flex: 1;
   }
 
+  .preview-section {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: #f8f9fa;
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+  }
+
+  .preview-section h3 {
+    margin: 0 0 1.5rem 0;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
   .btn-icon {
     background: none;
     border: none;