Добавлено расширение темы Chakra UI, реализован компонент AppHeader с переключением темной/светлой темы, обновлены стили для поддержки темной темы, улучшена загрузка компонентов с учетом цветовой схемы.

src/pages/course-list/course-list.tsx

@@ -19,38 +19,14 @@ import {
   useColorMode,
 } from '@chakra-ui/react'
 import { useForm, Controller } from 'react-hook-form'
-
-const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
-
-const loadServiceMenu = () => {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement('script')
-    script.src = MENU_SCRIPT_URL
-    script.onload = () => setTimeout(() => resolve(true), 1000)
-    script.onerror = reject
-    document.body.appendChild(script)
-  })
-}
+import { AddIcon } from '@chakra-ui/icons'
 
 import { ErrorSpan } from '../style'
-declare global {
-  interface Window {
-    createServiceMenu?: (options: any) => {
-      show: () => void;
-      hide: () => void;
-      update: () => void;
-      destroy: () => void;
-    };
-  }
-}
-
 import { useAppSelector } from '../../__data__/store'
 import { api } from '../../__data__/api/api'
 import { isTeacher } from '../../utils/user'
-import { AddIcon } from '@chakra-ui/icons'
 import { PageLoader } from '../../components/page-loader/page-loader'
 import { CourseCard } from './course-card'
-import { keycloak } from '../../__data__/kc'
 
 interface NewCourseForm {
   startDt: string
@@ -65,13 +41,7 @@ export const CoursesList = () => {
   const [showForm, setShowForm] = useState(false)
   const toastRef = useRef(null)
 
-  const [serviceMenu, setServiceMenu] = useState(false)
-
-  useEffect(() => {
-    loadServiceMenu().then(() => {
-      setServiceMenu(true)
-    }).catch(console.error)
-  }, [])
+  const { colorMode } = useColorMode();
 
   const {
     control,
@@ -111,39 +81,6 @@ export const CoursesList = () => {
     }
   }, [crucQuery.isSuccess])
 
-  const serviceMenuContainerRef = useRef<HTMLDivElement>(null)
-  const serviceMenuInstanceRef = useRef<any>(null)
-
-  useEffect(() => {
-    // Проверяем, что библиотека загружена и есть контейнер для меню
-    if (window.createServiceMenu && serviceMenuContainerRef.current) {
-      // Создаем меню сервисов
-      serviceMenuInstanceRef.current = window.createServiceMenu({
-        accessToken: keycloak.token,
-        apiUrl: 'https://admin.bro-js.ru',
-        targetElement: serviceMenuContainerRef.current,
-        styles: {
-          dotColor: '#333',
-          hoverColor: '#eee',
-          backgroundColor: '#fff',
-          textColor: '#333',
-        },
-        translations: {
-          menuTitle: 'Сервисы BRO',
-          menuAriaLabel: 'Сервисы BRO',
-        }
-      });
-    }
-
-    // Очистка при размонтировании
-    return () => {
-      if (serviceMenuInstanceRef.current) {
-        serviceMenuInstanceRef.current.destroy();
-        serviceMenuInstanceRef.current = null;
-      }
-    };
-  }, [keycloak.token, serviceMenu]);
-
   if (isLoading) {
     return (
       <PageLoader />
@@ -151,8 +88,6 @@ export const CoursesList = () => {
   }
 
   return (
-    <>
-    <div style={{ position: 'absolute', top: 6, left: 6 }} id="dots" ref={serviceMenuContainerRef}></div>
     <Container maxW="container.xl">
       {isTeacher(user) && (
         <Box mt="15" mb="15">
@@ -263,6 +198,5 @@ export const CoursesList = () => {
         ))}
       </VStack>
     </Container>
-        </>
   )
 }