Profile Banner
Rodriguez

Присоединился

15.04.2025 г.

0

подписчиков

0 подписки

Улучшение редактора гайдов: табы, секции и новый функционал

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

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

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

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

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

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

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

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

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

Последний билд залит  https://black-temple.vercel.app/

Для желающих потыкать ласт билд, акк с админ правами

Login: test@test.com

password: test123456

https://black-temple.vercel.app/class-guides/mag-led-reyd-2/edit

пост от ака выше, после того как войдете можете перейти потыкать

0

50

🧩 Улучшения редактора гайдов: Drag & Drop, управление вкладками и интеграция React Query

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

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

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

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

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

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

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

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

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

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

Одним из самых ожидаемых и визуально приятных нововведений стало добавление Drag & Drop-функциональности с использованием библиотеки @dnd-kit. Теперь пользователи могут:

  • Перетаскивать вкладки внутри группы или между группами
  • Упорядочивать секции с помощью простого drag’n’drop
  • Получать визуальную обратную связь во время взаимодействия

Это не только ускоряет процесс редактирования, но и делает его более интуитивным.

🛡 Подтверждение удаления: alert dialog

Для предотвращения случайной потери контента была добавлена интеграция Alert Dialog:

  • При удалении вкладки или секции пользователь видит предупреждение
  • Удаление не происходит без подтверждения
  • Это повышает надёжность и контроль над действиями

0

144

🛠 Развитие редактора гайдов по World of Warcraft: новые возможности и улучшения

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

Image

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

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

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

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

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

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

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

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

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

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

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

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

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

⚙️ Итого

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

Тестовый аккаунт с админ правами
https://black-temple.vercel.app/

Login: test@test.com
Password: testpassword

0

129

👤 Улучшения профиля пользователя: загрузка аватара, социальные ссылки и настройки

В рамках последних обновлений я значительно улучшил функциональность профиля пользователя в своём приложении на базе Next.js, Tailwind CSS, Radix UI и Prisma. Ниже рассказываю, что было реализовано, какие задачи решены и как это повлияло на пользовательский опыт.

📸 Загрузка аватара и обновление профиля

✅ Что сделано:

  • Добавлена возможность загрузки аватара пользователя через новую функцию updateUserAvatar.
  • Использован пакет @radix-ui/react-avatar для управления отображением аватаров.
  • Обновлена модель User в Prisma schema:
    • Поле fullName теперь уникальное.
    • Добавлено новое поле telegram для связи.
    • Поле fullName теперь уникальное.
    • Добавлено новое поле telegram для связи.
  • В updateUserInfo теперь также можно сохранять информацию пользователя (О себе).

🔒 Валидация данных:

  • Использованы Zod-схемы для валидации всех форм профиля (настройки, соцсети и др.).
ImageImage

🌐 Социальные ссылки и улучшения интерфейса

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

  • Создан хук useProfileSocialForm — упрощает управление полями с социальными ссылками.
  • Расширена страница профиля: теперь отображаются дополнительные поля пользователя (bio, Telegram, и др.).

🎨 Обновления в UI:

  • Обновлены компоненты ProfileSettingsPage и ProfileSettingsSocial — теперь код более структурирован и читаем.
  • Удалён устаревший app-sidebar и заменён на адаптированный admin-sidebar для панели администратора.
  • Иконки в профиле теперь отображаются без прозрачности (opacity), улучшена читаемость и контраст.
ImageImage

🧑‍💻 Пользовательский опыт

Улучшения:

  • Все изменения в профиле теперь интуитивно понятны и мгновенно отображаются.
  • Валидация защищает от некорректных данных, а обновлённый интерфейс делает настройки профиля проще.
  • Загрузка аватара работает плавно, даже на мобильных устройствах.

0

121

🚀 Обновление административной панели и функциональности WoW-патчей в Next.js + Tailwind CSS

В этом обновлении я значительно улучшил административный интерфейс и логику работы с патчами World of Warcraft в моём проекте на базе Next.js 15, Tailwind CSS, ShadCN, и Turbopack. Ниже рассказываю, какие задачи были решены и какие компоненты были реализованы.

👥 Управление пользователями: новая админка

Image

✅ Основные улучшения:

  • Создана страница AdminUsersPage, где администраторы могут просматривать и управлять пользователями.
  • Хук useAdminUsers реализует логику получения данных, поиска, пагинации и обновления состояния пользователей.
  • Компонент AdminUsersPanel объединяет таблицу, строку поиска и пагинацию в единую панель.
  • Добавлен компонент строки пользователя — позволяет менять роль пользователя прямо из таблицы.
  • Реализована система пагинации и фильтрации по имени/почте.
  • Добавлен метод updateUserRole для смены ролей через API.

🛠 Работа с патчами World of Warcraft

Image

Новые функции:

  • addPatchAction теперь возвращает добавленный патч и запускает повторную валидацию страницы.
  • updatePatchAction добавлен для обновления патчей с валидацией и повторной подгрузкой данных.
  • В компонент add-patch-wow добавлены функции редактирования и удаления патча, включая модальное окно для редактирования.
  • Функция удаления теперь также инициирует повторную валидацию страницы.

🧱 Новые UI-компоненты

  • Sidebar: адаптивная боковая панель с контекстным управлением состоянием (открытие/закрытие на мобильных).
  • Table: компонент таблицы для структурированного отображения данных.
  • Pagination: UI-контролы для переключения страниц с пользовательскими стрелками и логикой.
  • useIsMobile: хук для определения мобильного устройства и адаптации интерфейса.

🔐 Аутентификация и структура API

  • Создан клиент API с конфигурацией базового URL и авторизацией через токен.
  • auth service реализует регистрацию, вход и управление сессией.
  • Оптимизирован импорт в auth-options.ts — устранён лишний код.

0

130

Рефакторинг редактора слотов и новый редактор сложности: очередной шаг вперёд

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

Новый useGearSlotEditor хук

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ImageImage

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

ImageImage

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

Для любопытных потыкать свежий билд
Редактор или вот вам Страница билдов
Оставайтесь на связи — впереди ещё много интересного!


Рефакторинг редактора слотов и новый редактор сложности: очередной шаг вперёд

0

234

Время нового мини отчета

Улучшение управления экипировкой: рефакторинг BisGearEditor и связанных компонентов

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

🛠 Рефакторинг BisGearEditor Теперь компонент BisGearEditor использует GuideSpecGearProps, что позволяет эффективнее работать с данными экипировки и упростить логику внутри компонента.

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

🧩 GearSlotEditorDialog Добавлен новый диалог для редактирования деталей конкретного слота экипировки. Это делает редактирование наглядным и более удобным.

🌐 Серверный API для обновления данных Добавлен серверный маршрут, который позволяет обновлять информацию об экипировке напрямую в базе данных. Это ещё один шаг к полноценному CRUD-интерфейсу.

🎨 UI-улучшения Интерфейс получил улучшенные подсказки (tooltips) и более логичную компоновку слотов. Также введён утилитный модуль slotBackgrounds, который помогает управлять фоновыми изображениями для разных слотов.

📚 Обновление GuideEditor и GuidePageContent Я адаптировал эти компоненты под новую структуру данных и API. Теперь они интегрируются с обновлённой системой редактирования экипировки без лишней логики.

Это обновление серьёзно повысило удобство работы с редактором Best-in-Slot снаряжения и заложило прочную основу для будущих улучшений. 

А теперь время скринов и быстрых объяснений

Image

Я полностью переработал компонету для бис листов, теперь она избавилась от тоны кода и стала удобной в работе и поддержке.
Я уже 3й раз перерабатываю модель для ранения данных о бис листах и сегодня меня осенило и я смог реализовать наконец то что мне было нужно, теперь для слотов я использую enum с прописаными слотами и у гемов тоже теперь есть прописаный слот, что избавило меня от головной боли с рендером в нужные слоты и от бд на 100+ строк

ImageImage

Так же реализовал редактор бис листа с тултипами чтоб был более понятный интерфейс

Image

Редактирование происходит в диалоговом окне

Image

Я достаю id предметов с ссылок wowhed и через blizzard api получаю их картинку и название, редактор уже рабочий и работает исправно, как минимум по моей быстрой проверке. Для пустых слотов тоже сделал заглушку 

Image

Нужно только добавить локализацию, чтоб данные слотов конвертило на русский 

Если интересно — следите за обновлениями!

Время нового мини отчета

0

154

Финальный пост по фильтрам

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

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

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

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

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

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

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

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

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

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

✅ Результат

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

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

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

ImageImage

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

Для желающих покликать что я там накодил ссылка

0

185

Начал делать страницу гайдов class-guides

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

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

Image

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

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

Image

немного подкрутил модели призмы и добавил туда новые поля для картинок фона класБГ режима и роли.
Теперь в планах сделать сид, чтоб можно было удобно все тестить и продолжить работу нам guides-page

Огромное спасибо,
Overk1lls и LionBlackVMP за то, что вызвались помочь.
планов пока много, начали прощупывать апи близов, если все получиться то откажемся от тултипов вовхеда и в целом по минимуму будет использовать ембеты вовхеда

Начал делать страницу гайдов class-guides

0

212

Небольшой отчет о проделанной работе

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


ImageImage

Сохранения работает через поиск уник ид которые присваиваются табам через 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,
            },
          })
        )
      );

Линк на страницу с табами https://black-temple.vercel.app/havoc/1

Небольшой отчет о проделанной работе

0

232

Небольшой пост по проделанной работе

Закончил сегодня с версткой и логикой для компоненты табов, пришлось немного переделать дефолтные табы от shadcn, так же встроил в них react-md-editor с предпросмотром и возможностью развернуть на весь экран редактор. 


Image

Каждую табу можно отредактировать или удалить, после удаления переносит на ближайшую табу слева если такая есть, если нет то справа. Скрол всегда движется за активной вкладкой и появляется если табы не помещаются в блок

Image

Все настроено для светой и темной темы, и мобильной версии

Image

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

Небольшой пост по проделанной работе

0

235