Александр

В наглую как-то так

export const useVerifyAuth = () => {
  const { setIsAuth, setUser, setIsLoading } = useUserStore();
  const pathname = usePathname();

  const { data, error, isLoading, isFetching, refetch } = useQuery({
    queryKey: ["verify-auth"],
    queryFn: () => authService.getNewTokens()
  });

  useLayoutEffect(() => {
    if (error !== null) {
      setIsAuth(false);
      setUser(null);
    }

    if (data !== null) {
       setIsAuth(true);
       setUser(data.data.user);
    }
  }, [data, error])

  useEffect(() => {
    // Тут бы проверить, что прошлый pathname не равен текущему
    refetch();
  }, [pathname, refetch]);

  useEffect(() => {
    setIsLoading(isLoading || isFetching)
  }, [isLoading, isFetching]);
};

У Вас перекрывается блок со всем попапом блоком со свайпером. Выносите отображение попапа в другой элемент, который будет поверх всех (например в body). В этом может помочь либа для работы с тултипами, например floating-ui. Ну и никогда по ховеру такое не показывайте, только по клику.

А чтобы в HTML на тэге увидеть жмёте ПКМ - Edit as HTML

Для VS Code ставите курсор на переменную и нажимаете Ctrl + F12.

Видимо нет такого изображения, точнее размера с индексом 9.

Добавляете родителю, который обрамляет ссылку и иконку position: relative, а ссылке добавляете

a::after {
 position: absolute;
 inset: 0;
 content: '';
}

Изучить API: https://gulpjs.com/docs/en/getting-started/creatin...

Как минимум не хватает position у modal, ну и, видимо, воспроизведения. Посмотрите сюда ещё: ::backdrop.

А Outlet не пробовали использовать, а не пытаться рядом с роутером положить компонент? Посмотрите внимательно в девтулзах, дотягиваетесь ли со своего компонента до нужного Вам провайдера?

const routes: RouteObject[] = [
  {
    path: "*",
    element: <Outlet />,
    children: [
      {
        id: "page-a",
        path: "page-a",
        element: <PageA />,
      },
      {
        id: "page-b",
        path: "page-b",
        element: <PageB />,
      },
    ],
  },
];

export const Router: FC = () => {
  const router = createBrowserRouter(routes);

  return <RouterProvider router={router} />;
};

Если надо, чтобы странички были обёрнуты в какой-то провайдер, вот, пожалуйста:

export const SuperWrapper: FC = () => {
  return (
    <ThemeProvider theme={theme}>
      <Notifications />
      <Outlet />
    </ThemeProvider>
  );
};

ЗЫ - не перестанете использовать someComponent(), то Вас ждёт удивительный мир потери состояний и прочего.

Поработав какое-то время с React Query могу выделить следующие моменты:
1. Не стоит пытаться объявлять все query за один раз - они "подвисают" в приложении и не используются. Это можно увидеть в React Query Devtools.
2. Можете вынести сами запросы в функци на отдельный слой/уровень/файл, и уже в useQuery в queryFn и в useMutation в mutationFn использовать функции.
3. Сложную бизнес-логику можно смело убрать под хук, в котором будете вызывать, обрабатывать и возвращать данные из useQuery/useMutation'а.
4. React Query - библиотека не для работы с запросами, это, по сути, ещё одно хранилище, которое просто хранит результаты Promise-операций.

Для начала настройте build: для vite / для wepback, чтобы ссылка в итоге совпадала. Вы открываете /build/index.html, а остальные файлы загружаете по /static/something/file.ext, в начале которых нету /build. Ну и надо почитать, как сделать редирект на файл index.html, если юзаете браузерный роутинг.

Можно написать свой плагин по примеру.
https://milkdown.dev/docs/plugin/example-iframe-plugin

Есть ишью в котором предлагаются улучшения функционала, но пока тишина. А в плагинах нет только под подчеркивание.

Можно сделать вот так.

<div class="scroll-blocker">
  <YOUR_MAP />
</div>

const mouse = { x: -1, y: -1 };
const elements = document.getElementsByClassName('scroll-blocker');

window.addEventListener('mousemove', (event) => {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
});

window.addEventListener('wheel', (event) => {
  const target = document.elementFromPoint(mouse.x, mouse.y);
  for (const element of elements) {
    if (element.contains(target)) {
      event.preventDefault();
      return;
    }
  }
}, { passive: false, capture: true });

<img src="/images/photo/Depositphotos.jpg" alt="" />

async emailSend<T>(mailData: IMail<T>)