# План внедрения редактора стикеров для Telegram Mini App

## 1. Кнопка "Редактировать" и роутинг

- Добавить кнопку/иконку "Редактировать" на каждый стикер в галерее.
- При нажатии — переход на экран `/edit/:stickerId`, где stickerId — идентификатор стикера (или file_id).
- На экран редактора передаётся webp-стикер 512x512 с прозрачным фоном.

---

## 2. Экран редактора (MVP)

- **Технология:** React + [react-konva](https://konvajs.org/docs/react/index.html) (canvas-редактирование, поддержка мобильных жестов, drag-n-drop, масштабирование, поворот).
- **Холст:** фиксированный размер 512x512, webp-стикер как прозрачный фон.
- **Инструменты:**
  - Масштабирование и перемещение самого стикера (фонового слоя).
  - Добавление текста (выбор шрифта из выпадающего списка, цвета из палитры, размер, позиция, поворот, обводка).
  - Добавление PNG/эмодзи (drag-n-drop, resize, rotate, перемещение).
  - Удаление объектов.
- **История изменений:** стек undo/redo (реализуется через массив состояний редактора, можно использовать useReducer или отдельную библиотеку типа [use-undo](https://github.com/aaronpowell/react-use-undo)).
- **UI:** крупные кнопки, панель инструментов снизу/сбоку, адаптация под мобильные (touch-жесты).

---

## 3. Сохранение результата

- Экспорт canvas в webp 512x512 (react-konva поддерживает toDataURL с нужным форматом и размером).
- Модальное окно подтверждения сохранения (в стиле NotificationModal, как в проекте).
- Отправка изображения на сервер через ваш эндпоинт (с телеграм id).
- После успешного сохранения — возврат в галерею (или показ уведомления).

---

## 4. Расширяемость и удобство

- **Шрифты:**  
  - Список шрифтов хранить в конфиге (например, src/config/editorFonts.ts).
  - Добавлять новые шрифты — просто дописывать в конфиг и подключать через Google Fonts.
- **Палитра цветов:**  
  - Использовать готовый компонент color picker (например, [react-colorful](https://omgovich.github.io/react-colorful/)), палитру можно расширять.
- **Набор эмодзи/картинок:**  
  - Хранить в src/assets/editor-stickers/ (SVG/PNG/WebP).
  - Добавлять новые — просто копировать в папку и прописывать в конфиге.
- **Предупреждение о несохранённых изменениях:**  
  - При попытке выхода из редактора без сохранения — показывать модальное окно с подтверждением.

---

## UX-детали

- Пользователь всегда видит результат редактирования в реальном времени.
- Все действия (масштабирование, перемещение, поворот) доступны для любого объекта, включая сам стикер.
- История изменений (undo/redo) работает в рамках одной сессии редактирования.
- Сохранение всегда в формате webp 512x512 с прозрачным фоном.
- Мобильная адаптация — приоритет (крупные кнопки, поддержка touch-жестов).

---

## Сложность и сроки

- MVP (редактирование, undo/redo, сохранение, мобильная адаптация): 2-3 недели.
- Добавление новых шрифтов/эмодзи — не требует изменений в коде, только в конфиге/папке.
- UI/UX — минимальные риски для остального приложения, редактор полностью изолирован.

---

## Вопросы и ответы

- **Ограничение на количество объектов:** не требуется.
- **Шрифты:** список в конфиге, легко расширять.
- **Цвета:** палитра, легко расширять.
- **Предпросмотр:** не нужен, пользователь видит результат сразу.
- **Модальное окно подтверждения:** обязательно, в стиле NotificationModal.
- **Набор эмодзи/картинок:** система через папку и конфиг, легко расширять.
- **Предупреждение о несохранённых изменениях:** обязательно.

---

## Примерная структура компонентов

- GallerySticker (с кнопкой "Редактировать")
- StickerEditorScreen (отдельный экран)
  - EditorCanvas (react-konva)
  - Toolbar (инструменты: текст, эмодзи, undo/redo, сохранить)
  - ColorPicker, FontPicker, EmojiPicker (модальные/панельные компоненты)
  - ConfirmModal (подтверждение сохранения/выхода)

---

**Резюме:**  
Редактор внедряется как отдельный экран, не затрагивает остальной функционал. Использование react-konva обеспечивает мобильную совместимость и нужный функционал. Все ресурсы (шрифты, эмодзи) легко расширяемы через конфиг/папку. UX — максимально близок к мобильным привычкам.