twitch-panels/plans/FUNCTIONAL_ROADMAP.md

Функциональный план (Product & UX Roadmap)

Twitch Panels Creator

Анализ версии: 0.0.1
Дата анализа: 2025-02-09
Технологии: Svelte 5, TypeScript, Konva.js, Cropper.js

---

1. Текущие возможности (глазами пользователя)

✅ Реализованный функционал

1.1 Управление текстами панелей

Файлы: src/states/texts.svelte.ts, src/components/text/TextManager.svelte, src/components/text/TextConfig.svelte

• Добавление текстовых панелей через инпут + кнопку/Enter
• Редактирование текста инлайн (двойной клик или прямое редактирование)
• Удаление отдельных текстов
• Глобальные настройки текста (размер, шрифт, цвет, выравнивание, отступы, смещение)
• Приоритет: High - это основной рабочий поток

1.2 Система превью панелей

Файлы: src/components/panel/PreviewManager.svelte, src/components/panel/Preview.svelte, src/components/panel/PreviewAll.svelte

• Просмотр превью текущей панели с настройками текста
• Навигация между панелями (стрелки + индикатор "N / M")
• Просмотр всех панелей одновременно (в скрытом контейнере для экспорта)
• Плавные переходы между панелями (fly transition)
• Приоритет: High - критично для UX

1.3 Экспорт панелей

Файлы: src/services/downloadService.ts

• Экспорт отдельной панели в PNG (320x100px)
• Массовый экспорт всех панелей в ZIP-архив
• Использование file-saver и JSZip
• Приоритет: High - финальная цель пользователя

1.4 Система фоновых изображений (частичная)

Файлы: src/states/imageConfig.svelte.ts, src/components/image/ImageManager.svelte, src/components/image/CropInline.svelte

• Загрузка изображения по URL (только UI кнопки)
• Визуальный интерфейс для обрезки (crop box с handles)
• Настройки яркости и контраста (только UI слайдеры)
• Автозагрузка дефолтного фона при старте
• Приоритет: Low - нерабочая система

1.5 Базовый UI/UX

Файлы: src/components/layout/Card.svelte, src/components/ui/Button.svelte, src/components/ui/RangeSlider.svelte, src/components/ui/ColorPicker.svelte, src/components/ui/SelectFont.svelte, src/components/ui/Alignment.svelte

• Карточная система группировки
• Кнопки 5 типов (primary, secondary, outline, danger, mini)
• Слайдеры с отображением значения
• Цветовой пикер
• Выбор шрифта из 8 системных
• Три кнопки выравнивания
• Темная/светлая тема
• Приоритет: Medium - работает, но можно улучшить

---

2. Low-hanging fruit (Ближайшие улучшения)

2.1 Завершение системы изображений (High Priority)

Проблема: src/components/image/ImageManager.svelte имеет UI, но нет логики загрузки/обработки.

Требуемые правки:

1. Реализовать загрузку изображений в src/services/imageService.ts:

   • Drag & drop поддержка
   • Paste из буфера обмена
   • Загрузка по URL с валидацией
   • Валидация форматов (JPEG, PNG, WebP, GIF) и размера (10MB max)
   • Контракт: imageService.uploadImage(source: File | string): Promise<ImageConfig>

2. Интегрировать cropperjs в src/components/image/CropInline.svelte:

   • Инициализация cropper.js на canvas
   • Привязка crop box к данным состояния
   • Реализовать drag & drop для перемещения
   • Реализовать resize через 8 handles
   • Контракт: onCropChange(crop: { left, top, right, bottom })

3. Применить фильтры яркости/контраста:

   • В src/states/imageConfig.svelte.ts добавить brightness: number, contrast: number
   • Применить CSS filters к Konva Image в src/components/panel/Preview.svelte
   • Контракт: filter: brightness(${brightness}%) contrast(${contrast}%)

4. Сохранить обрезанное изображение:

   • Метод imageState.applyCrop() должен обновлять image с обрезанными данными
   • Использовать canvas для actual cropping

2.2 Валидация и состояния загрузки (Medium Priority)

Тексты:

• src/components/text/TextInput.svelte: добавить валидацию длины (max 100 chars из src/lib/constants.ts:32)
• Показать ошибку при превышении длины
• Добавить счетчик символов "3/100"

Изображения:

• src/components/image/ImageManager.svelte: показать состояние загрузки (spinner) при загрузке по URL
• Показать ошибку при неудачной загрузке
• Валидация формата/размера до загрузки

Экспорт:

• src/services/downloadService.ts: показать прогресс-бар при downloadAll()
• Отключить кнопки во время экспорта
• Показать toast уведомление об успехе/ошибке

2.3 Пустые состояния (Medium Priority)

Списки:

• src/components/text/TextManager.svelte: когда textsState.texts.length === 0, показать красивый empty state вместо пустого UL
• src/components/panel/PreviewManager.svelte: уже есть empty state, но можно улучшить (иконка + текст + CTA)

Изображение:

• src/components/image/ImageManager.svelte: когда нет изображения, показать placeholder с инструкцией

2.4 Улучшение доступности (Medium Priority)

Файлы для правок:

• Все кнопки уже имеют aria-label ✅
• src/components/text/TextInput.svelte: добавить aria-describedby для валидации
• src/components/text/TextInlineEdit.svelte: добавить aria-label на delete button (уже есть)
• Добавить role="region" и aria-label на карточки
• Убедиться, что фокусный порядок логичен (Tab navigation)

---

3. Масштабирование (Крупные модули/интеграции)

3.1 Сохранение и загрузка проектов (High Priority)

Проблема: Нет persistence, пользователь теряет данные при перезагрузке.

Решение:

1. Создать src/services/storageService.ts:

   • saveProject(project: Project): Promise<void> → localStorage
   • loadProject(id: string): Project | null
   • listProjects(): ProjectInfo[]
   • deleteProject(id: string)
   • Project тип: { id, name, createdAt, texts, imageConfig, textConfig }

2. Добавить UI для управления проектами:

   • src/components/layout/AppHeader.svelte: добавить кнопку "Проекты" → открывает модалку
   • src/components/project/ProjectManager.svelte (новый):
     • Список сохраненных проектов
     • Создание/переименование/удаление
     • Экспорт/импорт JSON (для бэкапа)

3. Автосохранение:

   • В src/routes/+layout.svelte: $effect на изменениях состояний → debounced save
   • Восстановление при загрузке страницы

User Retention impact: Высокий - пользователи смогут возвращаться к своим работам.

3.2 Расширенные настройки текста (Medium Priority)

Файлы для модификации: src/states/textConfig.svelte.ts, src/components/text/TextConfig.svelte

Добавить:

• Тень текста: textShadow: { offsetX, offsetY, blur, color }
• Прозрачность: opacity: number (0-100)
• Градиент: gradient: { type: 'linear' | 'radial', colors: HexColor[], angle? } (сложнее)
• Несколько текстовых блоков на панели: потребует переархитектуры Preview.svelte

Приоритет: Medium - улучшает качество панелей, но требует работы с Konva.

3.3 Расширенные настройки изображений (Medium Priority)

Файлы: src/states/imageConfig.svelte.ts, src/components/image/ImageManager.svelte

Добавить:

• Фильтры: blur, sepia, saturate, grayscale
• Наложение: возможность добавить второй слой изображения
• Режимы наложения: multiply, screen, overlay (CSS blend modes)

Приоритет: Medium - улучшает креативность, но сложная реализация.

3.4 Пресеты и шаблоны (Low Priority)

Новые файлы:

• src/services/templateService.ts
• src/components/template/TemplateGallery.svelte

Функционал:

• Предустановленные шаблоны (разные стили текста/изображений)
• Сохранение пользовательских пресетов
• Применение пресета к текущему проекту

Приоритет: Low - nice-to-have, не критично для MVP.

3.5 Интеграция с Twitch API (Future)

Возможные интеграции:

• Прямая загрузка панелей на Twitch через API
• Синхронизация с существующими панелями
• Планирование публикации

Приоритет: Low - требует OAuth, сложная интеграция.

---

4. User Retention (Повторное использование)

4.1 Сохранение проектов (см. 3.1) - HIGH

4.2 Настройки пользователя (Medium Priority)

Файлы: src/states/theme.svelte.ts уже есть, но нет сохранения.

Добавить:

• Сохранение темы в localStorage (частично есть в src/routes/+layout.svelte:15)
• Сохранение предпочитаемого шрифта
• Сохранение последних использованных цветов
• Файл: src/services/preferencesService.ts

4.3 Экспорт в разные форматы (Medium Priority)

Текущее состояние: Только PNG.

Добавить:

• Экспорт в JPEG (с настройкой качества)
• Экспорт в WebP (современный формат)
• Экспорт в PDF (для печати)
• Файл: src/services/exportService.ts (расширить downloadService)

Приоритет: Medium - увеличивает полезность.

4.4 История изменений (Low Priority)

Новый файл: src/services/historyService.ts

Функционал:

• Undo/Redo для текстов и настроек
• Хранение N последних состояний
• Горячие клавиши Ctrl+Z / Ctrl+Y

Приоритет: Low - удобно, но не обязательно.

4.5 Совместная работа (Future)

Сложная интеграция:

• Share link с состоянием (закодировать в URL)
• Real-time collaboration (WebSocket)
• Комментарии/ревью

Приоритет: Very Low - далеко от MVP.

---

5. Приоритизация по фазам

Фаза 1: Завершение базового функционала (2-3 недели)

Цель: Приложение должно работать end-to-end

1. Полная реализация системы изображений (2.1) - High
2. Сохранение проектов (3.1) - High
3. Валидация и состояния загрузки (2.2) - Medium
4. Пустые состояния (2.3) - Medium
5. Настройки пользователя (4.2) - Medium

Критерий успеха: Пользователь может создать, сохранить и загрузить проект с изображением и текстом.

Фаза 2: Улучшение UX и расширение (3-4 недели)

1. Расширенные настройки текста (3.2) - Medium
2. Расширенные настройки изображений (3.3) - Medium
3. Экспорт в разные форматы (4.3) - Medium
4. Улучшение доступности (2.4) - Medium
5. Пресеты и шаблоны (3.4) - Low

Критерий успеха: Пользователь может создавать сложные панели с эффектами и быстро повторять стили.

Фаза 3: Продвинутые фичи (4+ недели)

1. История изменений (4.4) - Low
2. Интеграция с Twitch API (3.5) - Low
3. Совместная работа (4.5) - Very Low

---

6. Метрики успеха

• Активация: >70% пользователей создают хотя бы 1 панель
• Сохранение: >30% пользователей сохраняют проект
• Экспорт: >50% пользователей экспортируют хотя бы 1 панель
• Время на создание: <2 минут для набора из 5 панелей
• Retention week 1: >40% возвращаются

---

7. Риски и ограничения

1. Сложность Konva: Ограниченная кастомизация текста (несколько блоков на панели потребует переписывания Preview.svelte)
2. Производительность: Множество Konva stages (konvaAllStages) могут тормозить при 50+ панелях
3. Браузерные ограничения: localStorage 5-10MB, может не хватить для изображений
4. Cropper.js: Требует доработки для работы с canvas/Konva

---

Следующие шаги:

1. Утвердить функциональный план
2. Перейти к техническому плану (ENGINEERING_IMPROVEMENTS.md)
3. Начать реализацию Фазы 1 (начиная с imageService)