feat: move to new workflow, create workflow and mvp plan

PROJECT_PLAN.md

@@ -0,0 +1,189 @@
+# Twitch Panels Creator - Project Plan
+
+## MVP (Minimum Viable Product)
+
+### Цель MVP
+Создать инструмент для быстрого создания нескольких Twitch панелей в едином стиле с разными текстами.
+
+### Функциональность MVP
+
+#### 1. Загрузка фонового изображения
+- Автоматическая загрузка фонового изображения по умолчанию при старте
+- Возможность загрузки собственного фонового изображения
+- Обрезка изображения до нужных пропорций
+
+#### 2. Создание панелей
+- Ввод текстов для создания отдельных панелей
+- Каждый текст создает отдельную панель
+- Все панели используют одно фоновое изображение
+- Настройки текста применяются ко всем панелям
+
+#### 3. Настройки текста
+- Размер шрифта (10-72px)
+- Выбор шрифта из списка (Arial, Verdana, Georgia и др.)
+- Цвет текста
+- Выравнивание (лево, центр, право)
+- Боковые отступы
+- Вертикальное смещение от центра
+
+#### 4. Управление текстами
+- Список всех созданных текстов
+- Редактирование текста прямо в списке
+- Удаление текста кнопкой "×"
+- Автоматическое обновление панелей при изменении текстов
+
+#### 5. Просмотр панелей
+- Превью всех созданных панелей в боковой панели
+- Отображение финального результата с текстом
+- Превью только для просмотра
+- Скачивание отдельной панели
+- Массовое скачивание всех панелей
+
+#### 6. Экспорт панелей
+- Скачивание панелей в формате PNG
+- Размер панелей: 320px ширина, настраиваемая высота (по умолчанию 100px)
+
+## Workflow работы программы (MVP)
+
+### Шаг 1: Запуск приложения
+1. Пользователь открывает приложение
+2. Автоматически загружается фоновое изображение по умолчанию
+3. Пользователь видит экран добавления текстов
+
+### Шаг 2: Настройка фона (опционально)
+1. Пользователь может загрузить собственное фоновое изображение
+2. При необходимости обрезает изображение
+3. Фон применяется ко всем создаваемым панелям
+
+### Шаг 3: Создание и редактирование текстов
+1. Пользователь вводит текст для первой панели (например: "links")
+2. Нажимает кнопку "Добавить"
+3. Текст добавляется в список текстов
+4. В боковой панели автоматически отображается превью созданной панели
+5. Пользователь повторяет процесс для других текстов ("about me", "projects", "memes")
+6. Все тексты отображаются в списке ниже поля ввода
+7. Каждый текст в списке можно редактировать прямо в поле ввода
+8. Любой текст можно удалить кнопкой "×"
+9. При редактировании или удалении текста автоматически обновляется соответствующая панель
+
+### Шаг 4: Настройка внешнего вида (опционально)
+1. Пользователь настраивает параметры текста:
+   - Размер шрифта
+   - Шрифт
+   - Цвет
+   - Выравнивание
+   - Отступы
+2. Настройки применяются ко всем создаваемым панелям
+3. Превью панелей в боковой панели обновляется в реальном времени
+
+### Шаг 5: Просмотр панелей
+1. В боковой панели отображаются превью всех созданных панелей
+2. Каждая панель показывает финальный результат с текстом
+3. Превью только для просмотра, редактирование происходит в списке текстов
+
+### Шаг 6: Экспорт панелей
+1. Пользователь скачивает отдельные панели или все сразу
+2. Панели сохраняются в формате PNG
+3. Готовые панели загружаются в Twitch
+
+## Технические требования MVP
+
+### Frontend
+- Svelte 5 с runes
+- TypeScript
+- SvelteKit
+- Tailwind CSS (опционально для стилей)
+
+### Основные компоненты
+- ImageUpload - загрузка изображений
+- ImageCropper - обрезка изображений
+- TextManager - добавление, редактирование и удаление текстов, настройки текста
+- PanelPreview - превью отдельной панели (только для просмотра)
+- PanelList - список превью всех созданных панелей
+
+### Хранилище данных
+- panelStore - хранение состояния панелей и функций для их создания
+- uiStore - хранение состояния UI (текущий шаг, загрузка и т.д.)
+- texts - массив текстов для создания панелей (хранится в компоненте страницы)
+
+### Сервисы
+- exportService - экспорт панелей в PNG
+
+## Будущее развитие (Future Roadmap)
+
+### Фаза 2: Расширение функциональности
+
+#### 1. Дополнительные настройки
+- Добавление иконок к панелям
+- Настройка тени текста
+- Градиентный текст
+- Несколько текстовых элементов на одной панели
+- Настройка прозрачности фона
+
+#### 2. Библиотека шаблонов
+- Предустановленные шаблоны панелей
+- Возможность сохранения собственных шаблонов
+- Категории шаблонов (игры, технологии, искусство и т.д.)
+
+#### 3. Пакетная обработка
+- Импорт списка текстов из файла
+- Автоматическое создание панелей из списка
+- Пакетное переименование панелей
+
+### Фаза 3: Социальные функции
+
+#### 1. Облачное хранилище
+- Сохранение проектов в облаке
+- Синхронизация между устройствами
+- История версий
+
+#### 2. Шаринг
+- Возможность делиться проектами
+- Публичная библиотека панелей
+- Рейтинг и отзывы
+
+#### 3. Интеграции
+- Интеграция с Twitch API
+- Автоматическая загрузка панелей в Twitch
+- Интеграция с другими платформами (YouTube, Discord)
+
+### Фаза 4: Монетизация
+
+#### 1. Premium функции
+- Дополнительные шаблоны
+- Расширенные настройки
+- Приоритетная поддержка
+
+#### 2. Маркетплейс
+- Продажа премиальных шаблонов
+- Комиссионные продажи
+
+## Метрики успеха MVP
+
+- Время создания одной панели: < 30 секунд
+- Время создания набора из 5 панелей: < 2 минут
+- Успешное скачивание панелей: 100%
+- Положительный фидбек от первых пользователей
+
+## Ограничения MVP
+
+- Один фоновый рисунок для всех панелей
+- Один текстовый элемент на панель
+- Фиксированная ширина панели (320px)
+- Только экспорт в PNG
+- Работа в браузере без сохранения на сервере
+- Редактирование текстов происходит в списке, превью только для просмотра
+
+## Следующие шаги
+
+1. ✅ Реализовать базовую структуру приложения
+2. ✅ Реализовать загрузку и обрезку изображений
+3. ✅ Реализовать создание панелей из текстов
+4. ✅ Реализовать настройки текста
+5. ✅ Реализовать управление текстами (редактирование, удаление)
+6. ✅ Реализовать превью панелей (только для просмотра)
+7. ✅ Реализовать экспорт панелей
+8. ✅ Разделить редактирование текстов и превью панелей
+9. 🔄 Тестирование и исправление багов
+10. ⏳ Сборка фидбека от пользователей
+11. ⏳ Планирование Фазы 2 на основе фидбека

src/components/PanelPreview.svelte

@@ -7,40 +7,17 @@
   let {
     panel,
     onDownload,
-    onUpdate,
-    onDelete,
   }: {
     panel: Panel;
     onDownload?: () => void;
-    onUpdate?: (text: string) => void;
-    onDelete?: () => void;
   } = $props();
 
   let backgroundImage: HTMLImageElement | undefined = $state(undefined);
-  let editingText = $state(false);
-  let editText = $state("");
 
   function handleUploadNewImage() {
     setCurrentStep("upload");
   }
 
-  function handleEdit() {
-    editText = panel.texts[0]?.text || "";
-    editingText = true;
-  }
-
-  function handleSaveEdit() {
-    if (onUpdate && editText.trim()) {
-      onUpdate(editText.trim());
-    }
-    editingText = false;
-  }
-
-  function handleCancelEdit() {
-    editingText = false;
-    editText = "";
-  }
-
   $effect(() => {
     if (panel?.backgroundImage && panel.backgroundImage !== backgroundImage?.src) {
       loadImage(panel.backgroundImage);
@@ -81,27 +58,8 @@
 
 <div class="panel-preview">
   <div class="preview-header">
-    {#if editingText}
-      <div class="edit-controls">
-        <input
-          type="text"
-          bind:value={editText}
-          class="edit-input"
-          onkeypress={(e) => e.key === "Enter" && handleSaveEdit()}
-        />
-        <Button variant="primary" size="sm" onclick={handleSaveEdit}>✓</Button>
-        <Button variant="secondary" size="sm" onclick={handleCancelEdit}>✕</Button>
-      </div>
-    {:else}
     <div class="panel-title">{panel.texts[0]?.text || "Без названия"}</div>
-      <div class="panel-actions">
-        <IconButton variant="secondary" onclick={handleEdit} ariaLabel="Редактировать">✎</IconButton>
     <Button variant="primary" size="sm" onclick={onDownload}>Скачать</Button>
-        {#if onDelete}
-          <IconButton variant="danger" onclick={onDelete} ariaLabel="Удалить">🗑</IconButton>
-        {/if}
-      </div>
-    {/if}
   </div>
     <div class="preview-sections">
       <!-- Превью чистой картинки -->

src/components/TextManager.svelte

@@ -2,8 +2,11 @@
 <script lang="ts">
   import { Button } from "../lib/components/ui";
 
-  let { onTextAdd }: {
+  let { onTextAdd, onTextUpdate, onTextDelete, texts }: {
     onTextAdd: (text: string) => void;
+    onTextUpdate: (id: string, text: string) => void;
+    onTextDelete: (id: string) => void;
+    texts: Array<{ id: string; text: string }>;
   } = $props();
 
   let newText = $state("");
@@ -56,6 +59,18 @@
       handleAddText();
     }
   }
+
+  function handleUpdateText(id: string, newText: string) {
+    if (onTextUpdate && newText.trim()) {
+      onTextUpdate(id, newText.trim());
+    }
+  }
+
+  function handleDeleteText(id: string) {
+    if (onTextDelete) {
+      onTextDelete(id);
+    }
+  }
 </script>
 
 <div class="text-manager">
@@ -78,6 +93,34 @@
     {/if}
   </div>
 
+  <!-- Список текстов -->
+  {#if texts.length > 0}
+    <div class="texts-list">
+      <h3>Созданные тексты ({texts.length})</h3>
+      <div class="texts-container">
+        {#each texts as textItem (textItem.id)}
+          <div class="text-item">
+            <input
+              type="text"
+              value={textItem.text}
+              oninput={(e) => handleUpdateText(textItem.id, e.target.value)}
+              class="text-edit-input"
+              maxlength="100"
+            />
+            <Button
+              variant="danger"
+              size="sm"
+              onclick={() => handleDeleteText(textItem.id)}
+              aria-label="Удалить текст"
+            >
+              ×
+            </Button>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
   <!-- Общие настройки текста -->
   <div class="common-settings-section">
     <h3>Общие настройки текста</h3>
@@ -272,6 +315,45 @@
     margin-bottom: 1rem;
   }
 
+  .texts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .texts-list h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .texts-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .text-item {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .text-edit-input {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.95rem;
+  }
+
+  .text-edit-input:focus {
+    outline: none;
+    border-color: #007bff;
+  }
+
   .input-group {
     display: flex;
     gap: 0.5rem;

src/routes/+page.svelte

@@ -14,6 +14,7 @@
 
   let uploadedImage = $state<string | null>(null);
   let panels = $state<Panel[]>([]);
+  let texts = $state<Array<{ id: string; text: string }>>([]);
   let errorMessage = $state<string | null>(null);
   let backgroundImage = $state<string | null>(null);
 
@@ -62,20 +63,32 @@
   }
 
   function handleAddText(text: string) {
+    texts = [...texts, { id: crypto.randomUUID(), text }];
+    updatePanelsFromTexts();
+  }
+
+  function handleUpdateText(id: string, newText: string) {
+    texts = texts.map(t => t.id === id ? { ...t, text: newText } : t);
+    updatePanelsFromTexts();
+  }
+
+  function handleDeleteText(id: string) {
+    texts = texts.filter(t => t.id !== id);
+    updatePanelsFromTexts();
+  }
+
+  function updatePanelsFromTexts() {
     if (!backgroundImage) return;
-    const newPanel = createPanelFromText(backgroundImage, text);
+    panels = texts.map(textItem => {
-    panels = [...panels, newPanel];
+      const existingPanel = panels.find(p => p.texts[0]?.text === textItem.text);
+      if (existingPanel) {
+        return updatePanelText(existingPanel, textItem.text);
+      }
+      return createPanelFromText(backgroundImage, textItem.text);
+    });
   }
 
-  function handleUpdateText(panelId: string, text: string) {
-    panels = panels.map(panel => 
-      panel.id === panelId ? updatePanelText(panel, text) : panel
-    );
-  }
 
-  function handleDeletePanel(panelId: string) {
-    panels = panels.filter(panel => panel.id !== panelId);
-  }
 
   async function handleDownload(panel: Panel) {
     try {
@@ -128,7 +141,12 @@
       {:else if $uiStore.currentStep === "text"}
         <div class="text-section">
           <h2>Добавьте тексты для панелей</h2>
-          <TextManager onTextAdd={handleAddText} />
+          <TextManager 
+            onTextAdd={handleAddText}
+            onTextUpdate={handleUpdateText}
+            onTextDelete={handleDeleteText}
+            texts={texts}
+          />
         </div>
       {/if}
     </div>
@@ -146,8 +164,6 @@
                 <PanelPreview 
                   panel={panel} 
                   onDownload={() => handleDownload(panel)}
-                  onUpdate={(text) => handleUpdateText(panel.id, text)}
-                  onDelete={() => handleDeletePanel(panel.id)}
                 />
               </div>
             {/each}