feat: UI–BLL Integration

[kapitulin24]

feat: UI–BLL Integration

Ветка интегрирует фронтенд с реальным API и завершает построение ключевых фич продукта.

Что сделано

Teams — полный CRUD

• Создание команды, приглашение участников, удаление с диалогом подтверждения
• Переключение активной команды через Zustand-стор (createStore factory + team slug store)
• Управление участниками: роли, статусы, карточки с select-компонентами и скелетонами загрузки
• Управление приглашениями: список, смена роли, отзыв приглашения

Team Settings — реальное API

• Форма настроек переведена на react-hook-form + TanStack Query (вместо моков)
• Загрузка обложки команды, настройки идентичности (название, слаг), секция безопасности приглашений, Danger Zone

Profile — вкладка Teams

• Разделены UI для команд и приглашений
• Добавлены mutation-хуки для профиля

Layout & Sidebar

• Добавлен SidebarLayout, модуль сайдбара переработан с плоской структурой
• Команды-переключатель заменён на TeamsDropdown
• Извлечён виджет TabsNav

Entities & Shared

• Обновлены схемы и типы для team и user, добавлен UserAvatar, SlugField
• Структурированы URL аватаров команды (без слага в путях приглашений)
• createStore factory с автогенерацией селекторов
• Переименование invite → invitation по всей кодовой базе
• Переименование entity file → asset

Theme

• Глобальная палитра переведена на OKLCH, токены сайдбара выровнены

Infra

• Добавлены env-переменные для Imagor в infra/dev/.env.example

Проверка

• Создание команды и переключение между командами
• Приглашение / удаление участника
• Смена роли и статуса участника
• Сохранение настроек команды (форма)
• Вкладка Teams на странице профиля
• Скелетоны и состояния загрузки

[perekljuchatel]

[soorq]

А там не через бинд E20/E32 кнопки и тп?
Я чего-то видать упустил =D

[soorq]

Хук опасный по депенденси

Внешние ссылки, старое замыкание и новые баги, что либо в бесконечный цикл уйдет, либо ошибку на клиента отдаст голую

Если у тебя на форме стоит условие criteriaMode: onBlur - ок, такого, вроде не должно быть

Вариант 1

   const id = useId();
    const { field, fieldState, formState } = useController(props);
  
  const slug = (field.value as string) ?? '';
  const defaultSlug = (formState.defaultValues?.[props.name] as string | undefined) ?? '';
  const isDirty = fieldState.isDirty;

  // React Query должен реагировать на изменение slug автоматически, но с условием enabled
  const { data, isFetching } = useQuery({
    ...TeamQueries.checkSlug(slug),
    // Запрос идет только если поле изменилось, оно не пустое и длиннее 1 символа
    enabled: isDirty && slug.trim().length > 1 && slug !== defaultSlug,
  });

  // Синхронизация ошибок API с состоянием формы
  useEffect(() => {
    if (!isDirty || !slug) {
      clearErrors(props.name);
      return;
    }

    if (data?.available === false) {
      setError(props.name, { 
        type: 'validate',
        message: data.message ?? 'Этот адрес уже занят' 
      });
    } else if (data?.available === true) {
      clearErrors(props.name);
    }
  }, [data, isDirty, slug, props.name, setError, clearErrors]);

  const showStatus = isDirty && !!slug && slug !== defaultSlug;

Вариант 2

const id = useId();

const { field, fieldState } = useController({
    ...props,
    rules: {
      validate: () => {
        if (fieldState.isDirty && data?.available === false) {
          return data.message ?? 'Этот адрес уже занят';
        }
        return true;
      }
    }
  });

const slug = (field.value as string) ?? '';

  const { data, isFetching, refetch } = useQuery({
    ...TeamQueries.checkSlug(slug),
    enabled: fieldState.isDirty && slug.length > 1,
  });

useEffect(() => {
    if (data) {
      field.onBlur(); // Заставляет пересчитать rules.validate
    }
  }, [data]);

[soorq]

Добавил еще, где упустил

[soorq]

https://react-hook-form.com/docs/useform
mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit' - почитай, как и кто что делает

https://react-hook-form.com/docs/useform#reValidateMode
reValidateMode: onChange | onBlur | onSubmit = 'onChange' - почитай, как и кто что делает

https://react-hook-form.com/docs/useform#criteriaMode
criteriaMode: firstError | all - лучше до первой ошибки

https://react-hook-form.com/docs/useform#resetOptions

[soorq]

Это база, что улучшить ux, в плане ошибок, валидации и ре-рендеров

[soorq]

Лучше onBlur