feat: исправление мобильной версии и улучшение UX

- Исправлена мобильная версия: добавлена горизонтальная прокрутка навигации,
  оптимизированы отступы и размеры элементов для touch-интерфейсов
- Устранено зависание на мобильных: удален бесконечный цикл в date-serializer.ts
- Улучшена читаемость: сделаны светлее описание пар, дни недели и текст
  последнего обновления (текущий день остается выделенным)
- Добавлена автоматическая прокрутка до текущего дня при загрузке страницы
- Добавлено отображение 'Пары нет' для отмененных пар при замене
- Оптимизированы скрипты установки: добавлена проверка зависимостей перед
  установкой для ускорения повторных запусков
- Исправлено отображение адреса и аудитории на мобильных устройствах
- Улучшены диалоги и touch-цели для мобильных устройств

src/widgets/navbar/index.tsx

@@ -15,45 +15,25 @@ export function NavBar({ cacheAvailableFor }: {
   cacheAvailableFor: string[]
 }) {
   const { resolvedTheme } = useTheme()
-  const [schemeTheme, setSchemeTheme] = React.useState<string>()
-  const navRef = React.useRef<HTMLDivElement>(null)
-
-  const getSchemeTheme = () => {
-    if (typeof window !== 'undefined') {
-      return window.localStorage.getItem('theme') || document.querySelector('html')!.style.colorScheme
-    } else 
-      return 'light'
-  }
-
-  React.useEffect(() => {
-    setSchemeTheme(getSchemeTheme())
-  }, [])
-
-  const theme = resolvedTheme || schemeTheme
-
-  React.useEffect(() => {
-    if(theme === 'light') {
-      navRef.current?.classList.add('bg-slate-200')
-      navRef.current?.classList.remove('bg-slate-900')
-    } else {
-      navRef.current?.classList.add('bg-slate-900')
-      navRef.current?.classList.remove('bg-slate-200')
-    }
-  }, [theme])
+  const theme = resolvedTheme || 'light'
 
   return (
     <NavContextProvider cacheAvailableFor={cacheAvailableFor}>
       <header className="sticky top-0 w-full p-2 bg-background z-[1] pb-0 mb-2 shadow-header">
-        <nav className={cx('rounded-lg p-2 w-full flex justify-between', { 'bg-slate-200': theme === 'light', 'bg-slate-900': theme === 'dark' })} ref={navRef}>
-          <ul className="flex gap-2">
-            {Object.entries(groups).map(([id, [, name]]) => (
-              <NavBarItem key={id} url={`/${id}`}>{name}</NavBarItem>
-            ))}
-            <AddGroupButton />
-          </ul>
-          <div className='flex gap-1 min-[500px]:gap-2'>
+        <nav className={cx('rounded-lg p-2 w-full flex gap-2 md:justify-between', { 'bg-slate-200': theme === 'light', 'bg-slate-900': theme === 'dark' })}>
+          <div className="flex-1 min-w-0 overflow-x-auto scrollbar-hide">
+            <ul className="flex gap-2 flex-nowrap">
+              {Object.entries(groups).map(([id, [, name]]) => (
+                <NavBarItem key={id} url={`/${id}`}>{name}</NavBarItem>
+              ))}
+              <li className="flex-shrink-0">
+                <AddGroupButton />
+              </li>
+            </ul>
+          </div>
+          <div className='flex gap-1 min-[500px]:gap-2 flex-shrink-0'>
             <Link href={GITHUB_REPO_URL} target='_blank' rel='nofollower noreferrer'>
-              <Button variant='outline' size='icon' tabIndex={-1}>
+              <Button variant='outline' size='icon' className="min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0" tabIndex={-1}>
                 <FaGithub />
               </Button>
             </Link>
@@ -72,27 +52,32 @@ function NavBarItem({ url, children }: React.PropsWithChildren<{
   const isActive = router.asPath === url
   const { cacheAvailableFor, isLoading, setIsLoading } = React.useContext(NavContext)
 
-  const handleStartLoading = async () => {
-    let isLoaded = false
-
-    const loadEnd = () => {
-      isLoaded = true
+  // Подписываемся на события роутера для сброса состояния загрузки
+  React.useEffect(() => {
+    const handleRouteChangeComplete = () => {
       setIsLoading(false)
     }
 
-    router.events.on('routeChangeComplete', loadEnd)
-    router.events.on('routeChangeError', loadEnd)
-
-    if (cacheAvailableFor.includes(url.slice(1))) {
-      await new Promise(resolve => setTimeout(resolve, 500))
-      if(isLoaded) return
+    const handleRouteChangeError = () => {
+      setIsLoading(false)
     }
-    setIsLoading(url)
+
+    router.events.on('routeChangeComplete', handleRouteChangeComplete)
+    router.events.on('routeChangeError', handleRouteChangeError)
 
     return () => {
-      router.events.off('routeChangeComplete', loadEnd)
-      router.events.off('routeChangeError', loadEnd)
+      router.events.off('routeChangeComplete', handleRouteChangeComplete)
+      router.events.off('routeChangeError', handleRouteChangeError)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []) // router.events и setIsLoading стабильны, не требуют зависимостей
+
+  const handleStartLoading = async () => {
+    if (cacheAvailableFor.includes(url.slice(1))) {
+      await new Promise(resolve => setTimeout(resolve, 500))
+      if (isLoading && isLoading !== url) return
+    }
+    setIsLoading(url)
   }
 
   const button = (
@@ -100,6 +85,7 @@ function NavBarItem({ url, children }: React.PropsWithChildren<{
       tabIndex={-1} variant={isActive ? 'default' : 'secondary'} 
       disabled={Boolean(isLoading)}
       loading={isLoading === url}
+      className="min-h-[44px] whitespace-nowrap"
     >
       {children}
     </Button>
@@ -107,7 +93,7 @@ function NavBarItem({ url, children }: React.PropsWithChildren<{
 
   return (
     <li>
-      {isLoading ? (
+      {isLoading && isLoading === url ? (
         button
       ) : (
         <Link href={url} onClick={handleStartLoading}>

src/widgets/schedule/day.tsx

@@ -21,19 +21,29 @@ export function Day({ day }: {
 
   const today = new Date()
   today.setHours(0, 0, 0, 0)
-  const dayPassed = day.date.getTime() < today.getTime()
+  const dayDate = new Date(day.date)
+  dayDate.setHours(0, 0, 0, 0)
+  const dayPassed = dayDate.getTime() < today.getTime()
+  const isToday = dayDate.getTime() === today.getTime()
 
   return (
     <div className="flex flex-col gap-3 md:gap-5">
-      <h2 className={cx('scroll-m-20 text-2xl md:text-4xl font-extrabold tracking-tight lg:text-5xl', { 'text-[hsl(var(--grayed-out))]': dayPassed })} id={getDayOfWeek(day.date)}>
-        {dayOfWeek} <span className={cx('ml-3', { 'text-border': !dayPassed })}>{Intl.DateTimeFormat('ru-RU', {
+      <h2 className={cx('scroll-m-20 text-xl md:text-2xl lg:text-4xl font-extrabold tracking-tight', { 
+        'text-[hsl(var(--grayed-out))]': dayPassed,
+        'text-foreground': isToday,
+        'text-muted-foreground': !dayPassed && !isToday
+      })} id={getDayOfWeek(day.date)}>
+        {dayOfWeek} <span className={cx('ml-2 md:ml-3', { 
+          'text-border': isToday,
+          'text-muted-foreground/70': !dayPassed && !isToday
+        })}>{Intl.DateTimeFormat('ru-RU', {
           day: 'numeric',
           month: 'long',
           // year: 'numeric'
         }).format(day.date)}</span>
       </h2>
       <div>
-        <div className='overflow-auto md:snap-x md:snap-proximity md:-translate-x-16 md:w-[calc(100%+8rem)] scrollbar-hide'>
+        <div className='overflow-x-hidden md:overflow-x-auto md:snap-x md:snap-proximity md:-translate-x-16 md:w-[calc(100%+8rem)] scrollbar-hide'>
           <div className="flex flex-col md:flex-row gap-4 w-full md:w-max">
             <div className='snap-start hidden md:block' style={{ flex: '0 0 3rem' }} />
             {day.lessons.map((lesson, i) => (

src/widgets/schedule/index.tsx

@@ -1,14 +1,54 @@
 import type { Day as DayType } from '@/shared/model/day'
 import { Day } from '@/widgets/schedule/day'
 import { useRouter } from 'next/router'
+import React from 'react'
+import { getDayOfWeek } from '@/shared/utils'
 
 export function Schedule({ days }: {
   days: DayType[]
 }) {
   const group = useRouter().query['group']
+  const hasScrolledRef = React.useRef(false)
+
+  React.useEffect(() => {
+    if (hasScrolledRef.current || typeof window === 'undefined') return
+
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    // Находим текущий день
+    const todayDay = days.find(day => {
+      const dayDate = new Date(day.date)
+      dayDate.setHours(0, 0, 0, 0)
+      return dayDate.getTime() === today.getTime()
+    })
+
+    if (todayDay) {
+      // Небольшая задержка для завершения рендеринга
+      const timeoutId = setTimeout(() => {
+        const elementId = getDayOfWeek(todayDay.date)
+        const element = document.getElementById(elementId)
+        
+        if (element) {
+          // Прокручиваем с отступом для sticky header
+          const headerOffset = 100
+          const elementPosition = element.getBoundingClientRect().top
+          const offsetPosition = elementPosition + window.pageYOffset - headerOffset
+
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth'
+          })
+          hasScrolledRef.current = true
+        }
+      }, 100)
+
+      return () => clearTimeout(timeoutId)
+    }
+  }, [days])
 
   return (
-    <div className="flex flex-col p-8 md:p-16 gap-12 md:gap-14">
+    <div className="flex flex-col p-4 md:p-8 lg:p-16 gap-6 md:gap-12 lg:gap-14">
       {days.map((day, i) => (
         <Day day={day} key={`${group}_day${i}`} />
       ))}

src/widgets/schedule/lesson.tsx

@@ -34,6 +34,9 @@ export function Lesson({ lesson, width = 350 }: {
   const hasPlace = 'place' in lesson && lesson.place
 
   const isFallbackDiscipline = 'fallbackDiscipline' in lesson && lesson.fallbackDiscipline
+  const hasSubject = 'subject' in lesson && lesson.subject
+  const hasContent = hasSubject || (isFallbackDiscipline && lesson.fallbackDiscipline) || (lesson.topic && lesson.topic.trim())
+  const isCancelled = lesson.isChange && !hasContent
 
   const getTeacherPhoto = (url?: string) => {
     if(url) {
@@ -63,9 +66,9 @@ export function Lesson({ lesson, width = 350 }: {
     <Card className={`w-full ${width === 450 ? 'md:w-[450px] md:min-w-[450px] md:max-w-[450px]' : 'md:w-[350px] md:min-w-[350px] md:max-w-[350px]'} flex flex-col relative overflow-hidden snap-start scroll-ml-16 shrink-0`}> 
       {lesson.isChange && <div className='absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#ffc60026] to-[#95620026] pointer-events-none'></div>}
       <CardHeader>
-        <div className='flex gap-4'>
+        <div className='flex gap-2 md:gap-4'>
           {hasTeacher ? (
-            <Avatar>
+            <Avatar className="flex-shrink-0">
               <AvatarImage 
                 src={getTeacherPhoto(teacherObj?.picture)!} 
                 alt={lesson.teacher} 
@@ -76,45 +79,61 @@ export function Lesson({ lesson, width = 350 }: {
               </AvatarFallback>
             </Avatar>
           ) : (
-            <Avatar>
+            <Avatar className="flex-shrink-0">
               <AvatarFallback><MdSchool /></AvatarFallback>
             </Avatar>
           )}
-          <div className='flex flex-col gap-1'>
-            {'subject' in lesson && <CardTitle className='hyphens-auto'>{lesson.subject}</CardTitle>}
-            <CardDescription>
+          <div className='flex flex-col gap-1 min-w-0 flex-1'>
+            {isCancelled ? (
+              <CardTitle className='hyphens-auto break-words text-base md:text-lg'>Пары нет</CardTitle>
+            ) : (
+              hasSubject && <CardTitle className='hyphens-auto break-words text-base md:text-lg'>{lesson.subject}</CardTitle>
+            )}
+            <CardDescription className="text-xs md:text-sm">
               {lesson.time.start} - {lesson.time.end}{
               }{lesson.time.hint && <span className='font-bold'>&nbsp;({lesson.time.hint})</span>}
             </CardDescription>
-            {hasTeacher && lesson.teacher && (
-              <CardDescription className='text-sm font-medium'>
+            {!isCancelled && hasTeacher && lesson.teacher && (
+              <CardDescription className='text-xs md:text-sm font-medium break-words'>
                 {lesson.teacher}
               </CardDescription>
             )}
           </div>
         </div>
       </CardHeader>
-      <CardContent>
-        {lesson.type && <><Badge>{lesson.type}</Badge>{' '}&nbsp;</>}
-        {isFallbackDiscipline && (
-          <span className='leading-relaxed hyphens-auto block'>{lesson.fallbackDiscipline}</span>
-        )}
-        {lesson.topic ? (
-          <span className='leading-relaxed hyphens-auto'>{lesson.topic}</span>
+      <CardContent className="text-sm md:text-base">
+        {isCancelled ? (
+          <span className='text-muted-foreground italic'>Пара отменена</span>
         ) : (
-          !isFallbackDiscipline  && <span className='text-border font-semibold'>Нет описания пары</span>
+          <>
+            {lesson.type && <><Badge className="text-xs md:text-sm">{lesson.type}</Badge>{' '}&nbsp;</>}
+            {isFallbackDiscipline && (
+              <span className='leading-relaxed hyphens-auto block break-words text-muted-foreground'>{lesson.fallbackDiscipline}</span>
+            )}
+            {lesson.topic ? (
+              <span className='leading-relaxed hyphens-auto break-words text-muted-foreground'>{lesson.topic}</span>
+            ) : (
+              !isFallbackDiscipline && hasSubject && <span className='text-border font-semibold'>Нет описания пары</span>
+            )}
+          </>
+        )}
+        {!isCancelled && ('place' in lesson && lesson.place) && (
+          <div className='flex flex-col text-muted-foreground text-xs break-words mt-3 md:hidden'>
+            <span className='flex items-center gap-2'><BsFillGeoAltFill /> <span className="break-words">{lesson.place.address}</span></span>
+            <span className='font-bold flex items-center gap-2'><RiGroup2Fill /> {lesson.place.classroom}</span>
+          </div>
         )}
       </CardContent>
-      {(Boolean(lesson.resources.length) || hasPlace) && (
-        <CardFooter className="flex justify-between mt-auto">
+      {!isCancelled && (Boolean(lesson.resources.length) || ('place' in lesson && lesson.place)) && (
+        <CardFooter className="flex flex-col sm:flex-row justify-between gap-2 mt-auto">
           {('place' in lesson && lesson.place) ? (
-            <div className='flex flex-col text-muted-foreground text-xs'>
-              <span className='flex items-center gap-2'><BsFillGeoAltFill /> {lesson.place.address}</span>
+            <div className='hidden md:flex flex-col text-muted-foreground text-xs break-words'>
+              <span className='flex items-center gap-2'><BsFillGeoAltFill /> <span className="break-words">{lesson.place.address}</span></span>
               <span className='font-bold flex items-center gap-2'><RiGroup2Fill /> {lesson.place.classroom}</span>
             </div>
           ) : <span />}
           {Boolean(lesson.resources.length) && (
-            <Button onClick={handleOpenResources}><AiOutlineFolderView />&nbsp;Материалы</Button>
+            <Button onClick={handleOpenResources} className="min-h-[44px] w-full sm:w-auto"><AiOutlineFolderView />&nbsp;Материалы</Button>
           )}
         </CardFooter>
       )}