Stormic

В последние недели я активно работал над улучшением редактора гайдов. Основная цель — сделать интерфейс более гибким, удобным и функциональным как для авторов, так и для пользователей. В этой статье я кратко расскажу о ключевых изменениях и нововведениях.

🔧 Рефакторинг и упрощение кода

• Объединение обработчиков удаления: Я вынес обработчики удаления текстовых полей и групп табов в единую функцию, что позволило сократить дублирование кода.
• Унификация логики подсчёта элементов: Теперь и при создании табов, и при создании текстовых полей используется одинаковая логика подсчёта секций, что повысило консистентность поведения.
• Упрощение сигнатур функций в actions, связанных с секциями.
• Очистка и структуризация компонентов TabsEditor и TabContent для повышения читаемости.

✨ Новый функционал

• Поддержка групп табов: теперь редактор поддерживает группировку табов, что делает структуру гайдов более наглядной.
• Редактор талантов: добавлен полноценный редактор талантов с поддержкой схем, что существенно расширяет возможности создания гайдов.
• Редактор слотов снаряжения: реализован BisGearSlotEditor для работы с предметами, зачарованиями и сокетами.
• Поддержка drag-and-drop: добавлена возможность перетаскивания секций и табов с использованием dnd-kit.
• Универсальный диалог удаления: реализован подтверждающий диалог при удалении элементов с уведомлениями об успехе или ошибке.

🧠 Улучшения UX/UI

• Загрузка с приоритетом и состояние загрузки на кнопках: теперь пользователи получают мгновенную визуальную обратную связь при выполнении действий.
• Обработка сессий пользователя: реализована проверка авторизации и управление доступом к страницам создания и редактирования гайдов.
• Кнопка возврата к гайду из редактора — удобная навигация для авторов.
• Оптимизация загрузки изображений и кнопки создания гайдов — только для авторизованных пользователей.

♿ Доступность и локализация

• Добавлен атрибут aria-describedby для модального окна удаления, что улучшает доступность интерфейса.
• Расширен словарь переводов типов секций для локализации интерфейса редактора.

В рамках активной доработки функционала редактора гайдов были внедрены мощные инструменты управления вкладками и секциями. Эти изменения направлены на повышение удобства работы авторов с контентом, особенно при создании сложных структур, характерных для игровых гайдов, таких как те, что посвящены World of Warcraft.

📦 Интеграция React Query: управление вкладками стало проще

Первым шагом в улучшении редактора стало подключение React Query для управления состоянием вкладок. Это позволило:

• Упростить загрузку и кеширование данных
• Синхронизировать вкладки с сервером в реальном времени
• Избежать избыточных запросов при редактировании и переключении между вкладками

Теперь авторы могут быстрее переключаться между контентными блоками, не теряя внесённые изменения.

🗂 Группы вкладок и переработка моделей

Следующим шагом стало рефакторинг моделей вкладок и секций. Вкладки теперь объединены в группы, что позволило:

• Создавать сложные структуры гайдов с вложенными темами
• Управлять контентом логически и визуально (например, отдельные группы вкладок для PvE, PvP, билдов и т.п.)
• Улучшить читаемость и масштабируемость редактора

Компоненты TabsEditor и связанные с ним интерфейсы были обновлены для поддержки этой логики.

🖱 Drag & Drop на базе @dnd-kit

В процессе разработки платформы для создания  гайдов по World of Warcraft были реализованы ключевые обновления, значительно расширяющие функциональность системы, улучшающие пользовательский опыт и обеспечивающие более гибкое управление контентом.

🎯 Основные функции: редактор экипировки и управления контентом

Одним из самых значимых нововведений стал редактор слотов экипировки. С его помощью авторы гайдов могут задавать предметы, их чары и камни непосредственно в интерфейсе. Наряду с этим был разработан диалог редактирования экипировки , позволяющий настраивать каждый предмет индивидуально с учетом игровых особенностей.

Кроме того, были добавлены следующие редакторы:

• Управление статусом гайда (черновик, опубликован и т.д.).
• ContentTypeSelector — добавление различных типов контента в секции гайда.
• Выбор и добавление новых секций в гайд.
• Управление вкладками внутри секций.
• Редактор markdown-содержимого.
• Редактирование обычных текстовых полей.

Для унификации интерфейса реализован многоразовый компонент выдвижной панели (Drawer), который используется в нескольких частях редактора.

🧠 Улучшенная работа с гайдами

Новая логика отображения и фильтрации гайдов позволяет пользователям быстрее находить нужные материалы. Теперь каждая карточка гайда (GuidesCard) содержит больше информации, включая автора, статус и контекст, а также интеграцию со сторонними компонентами UI, такими как боковая панель (Sidebar) и система фильтров.

Также реализована страница UnauthorizedPage — её видят пользователи, не имеющие доступа к определенным гайдам или разделам. Это позволяет аккуратно ограничивать доступ к приватным материалам без ухудшения пользовательского опыта.

🔁 Рефакторинг и улучшение архитектуры

Были проведены важные работы по рефакторингу структуры кода. Это обеспечило:

• Лучшую читаемость и поддержку кода
• Более гибкое управление состояниями
• Повышение производительности и масштабируемости приложения

В рамках улучшения метаданных и SEO была обновлена конфигурация Next.js, в том числе:

• Замена иконки сайта (favicon)
• Улучшение отображения заголовков и описаний на страницах гайдов

⚙️ Итого

В этом обновлении я сосредоточился на улучшении архитектуры проекта и пользовательского интерфейса. Изменения затронули как логику работы с экипировкой, так и управление эффективности класса. Вот основные нововведения:

Новый useGearSlotEditor хук

Теперь управление состоянием предметов, сокетами и чарами в слотах происходит через кастомный хук useGearSlotEditor. Это позволило:

• Упростить компонент GearSlotEditorDialog;
• Централизовать всю бизнес-логику редактирования;
• Ввести ограничения на количество сокетов и чаров в зависимости от типа слота.

Дополнительно добавлены toast-уведомления — пользователи теперь получают обратную связь при сохранении изменений или ошибках.

🎚 Редактор эффективности класса

Добавлен совершенно новый компонент — Difficulty Bar Editor. Он включает:

• Хук useDifficultyEditor для управления рейтингом эффективности класса и его сохранением;
• Обновлённый GuideDifficultyBar, который теперь динамически реагирует на изменения;
• Интеграцию с новым API для обновления данных о эффективности.

🧼 Улучшение структуры GuideEditor

Компонент GuideEditor был переработан:

• Улучшено визуальное расположение элементов;
• Удалён устаревший и неиспользуемый код;
• Улучшена читаемость и поддерживаемость.

🌍 Локализация названий слотов

Теперь все названия слотов экипировки отображаются на русском языке:

• Добавлена локализация в slot-backgrounds.ts;
• Интерфейс стал более понятным и дружелюбным для русскоязычных пользователей.

🧩 Новый API для данных эффективности

Для управления рейтингом эффективности реализован серверный API:

• Обработка PATCH-запросов для обновления данных;
• Логика сохранения и обновления записей реализована на сервере.

Это обновление значительно упростило архитектуру и улучшило пользовательский опыт. 

И теперь пару скринов 
страница редактора, кнопки сохранения появляються если изменяются данные 

Диалоговые окна для редактора гира

Оптимизация и улучшения в работе с гайдами

В рамках последнего обновления я сосредоточился на повышении производительности и удобства взаимодействия с системой гайдов. Ниже кратко расскажу, что было сделано:

⚡ Кэширование данных

• Реализовано кэширование получения данных гайдов с использованием unstable_cache, с временем повторной валидации в 1 час. Это значительно снижает нагрузку на сервер при повторных запросах.
• Добавлено кэширование фильтров по режимам и специализациям, что улучшает скорость отклика интерфейса при выборе параметров.

💡 Обновление компонентов

• Компонент ClassGuidesPage был обновлён для использования закэшированных данных, что положительно сказалось на его производительности.
• Компонент отображения кнопки гайда (GuideButton) получил расширение: теперь он показывает больше информации о гайде, делая интерфейс более информативным и полезным.

🧼 Рефакторинг и улучшение читаемости

• Модальное окно создания гайда было переработано для улучшения читаемости и единообразия кода.
• Также улучшена общая структура кода и логика фильтрации — теперь за это отвечают кастомные хуки, что упростило поддержку и расширение функциональности.

📦 Новый API-роут

• Реализован новый маршрут API для фильтрации гайдов по различным критериям, включая класс, специализацию, роль и режим.

✅ Результат

В результате этих изменений проект стал:

• Быстрее
• Более читаемым и поддерживаемым
• Готовым к масштабированию и добавлению новых функций

Эти улучшения — шаг вперёд к стабильной и гибкой системе гайдов для WoW-сообщества.

Теперь перешел к реализации slug дальше планирую делать структуру страници гайдов

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

Закончил делать функционал добавления гайда 

Кнопка которая запускает генерацию гайда готова, спасибо Вампиратке за экшн который с апи близов тягает версии патчей, теперь патч автоматически определяется и записавыется в бд, я переделал рендер, теперь все данные генериреут сервер, а не подгружает клиен, это убрало проблему с подргузкой данных и на клиенте

Так же по мере надобности пополняю модели в схеме призмы, и приступаю к работе над рендером guides-page

Я закончил серверную часть для табов, не без проблем но я их решил.
А вот где не ожидал подлянки так это на делое, деплой прошел очень тяжело, поел не мало мох нервов, но я справился, все протестировал, работает как задумано, без ошибок. 
Но проделанной работой за сегодня я вполне доволен. И так что имеем на текущий момент.
Сирое создание гайда, кнопка которая по сути создает в бд пустую заглушку под гайд. Табы, добавление табов, редактирование названий, добавление картинки в таб,  markdown редактор для контента, все сохраняется, удаляется и изменяется.

Сохранения работает через поиск уник ид которые присваиваются табам через heroTalentId, модель табов будет пере использоваться в других местах.

Сохранение я делаю через множественное обновление или создание записей в таблице Tab через Prisma, используя транзакцию (tx).

const upsertResults = await Promise.all(
        tabs.map((tab) =>
          tx.tab.upsert({
            where: {
              value_heroTalentsId: {
                value: tab.value,
                heroTalentsId: tab.heroTalentsId,
              },
            },
            create: tab,
            update: {
              label: tab.label,
              iconUrl: tab.iconUrl,
              content: tab.content,
            },
          })
        )
      );