feat(ui): Complete massive UI rework and API integration

- Implemented full Material Design 3 adaptive navigation system
- Added HCT-based Dynamic Color system with contrast level 0.5
- Implemented M3 Filled Text Fields with advanced state layers and validation
- Added functional pages: Profile, Messages, Schedule, Grades, Debts
- Enhanced sidebar with user profile header and university logo
- Polished layouts, groupings, and spacings as per specification

Refs #3
Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/Debts.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import type { GradeEntry } from '../types/api';
+import { AlertCircle, CheckCircle } from 'lucide-react';
+
+export const Debts: React.FC = () => {
+  const [debts, setDebts] = useState<GradeEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchDebts = async () => {
+      try {
+        const debtData = await api.getDebts();
+        setDebts(debtData.entries);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchDebts();
+  }, []);
+
+  if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка задолженностей...</div>;
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '24px' }}>Задолженности</h1>
+
+      {debts.length === 0 ? (
+        <div className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', backgroundColor: 'var(--md-sys-color-primary-container)', color: 'var(--md-sys-color-on-primary-container)' }}>
+          <CheckCircle size={24} />
+          <div>У вас нет академических задолженностей. Поздравляем!</div>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {debts.map((debt, idx) => (
+            <div key={idx} className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', borderLeft: '4px solid var(--md-sys-color-error)', margin: 0 }}>
+              <div style={{ 
+                width: '48px', height: '48px', borderRadius: '24px', 
+                backgroundColor: 'var(--md-sys-color-error-container)',
+                color: 'var(--md-sys-color-on-error-container)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                flexShrink: 0
+              }}>
+                <AlertCircle size={24} />
+              </div>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontWeight: 500, fontSize: '16px' }}>{debt.subject}</div>
+                <div style={{ fontSize: '14px', opacity: 0.7 }}>{debt.type} • {debt.semester} семестр</div>
+              </div>
+              <div style={{ color: 'var(--md-sys-color-error)', fontWeight: 500 }}>
+                Долг
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/pages/Grades.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import type { Grades as GradesType } from '../types/api';
+import { BookOpen } from 'lucide-react';
+
+export const Grades: React.FC = () => {
+  const [grades, setGrades] = useState<GradesType | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchGrades = async () => {
+      try {
+        const data = await api.getGrades();
+        setGrades(data);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchGrades();
+  }, []);
+
+  const getMarkColor = (mark: string) => {
+    mark = mark.toLowerCase();
+    if (mark.includes('отлично') || mark.includes('зачтено')) return 'var(--md-sys-color-primary)';
+    if (mark.includes('хорошо')) return 'var(--md-sys-color-secondary)';
+    if (mark.includes('удовл')) return 'var(--md-sys-color-error)';
+    return 'var(--md-sys-color-outline)';
+  };
+
+  if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка успеваемости...</div>;
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '24px' }}>Успеваемость</h1>
+
+      {!grades || grades.entries.length === 0 ? (
+        <div className="m3-card">Нет данных об оценках</div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {grades.entries.map((grade, idx) => (
+            <div key={idx} className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', margin: 0 }}>
+              <div style={{ 
+                width: '48px', height: '48px', borderRadius: '24px', 
+                backgroundColor: 'var(--md-sys-color-secondary-container)',
+                color: 'var(--md-sys-color-on-secondary-container)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                flexShrink: 0
+              }}>
+                <BookOpen size={24} />
+              </div>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontWeight: 500, fontSize: '16px' }}>{grade.subject}</div>
+                <div style={{ fontSize: '14px', opacity: 0.7 }}>{grade.type} • {grade.semester} семестр</div>
+                {grade.teacher && <div style={{ fontSize: '12px', opacity: 0.6 }}>{grade.teacher}</div>}
+              </div>
+              <div style={{ 
+                padding: '8px 16px', 
+                borderRadius: '16px', 
+                backgroundColor: 'var(--md-sys-color-surface-variant)',
+                color: getMarkColor(grade.mark),
+                fontWeight: 'bold',
+                fontSize: '14px',
+                border: `1px solid ${getMarkColor(grade.mark)}`
+              }}>
+                {grade.mark}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/pages/Login.tsx

@@ -8,18 +8,37 @@ export const Login: React.FC = () => {
   const { apiDomain, apiKey, isMockMode, setApiDomain, setApiKey, setMockMode } = useStore();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
+  const [domainError, setDomainError] = useState('');
+  const [keyError, setKeyError] = useState('');
   const navigate = useNavigate();
 
+  const validate = () => {
+    let valid = true;
+    if (!isMockMode) {
+      if (!apiDomain) {
+        setDomainError('API Домен обязателен');
+        valid = false;
+      } else {
+        setDomainError('');
+      }
+      if (!apiKey) {
+        setKeyError('API Ключ обязателен');
+        valid = false;
+      } else {
+        setKeyError('');
+      }
+    }
+    return valid;
+  };
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!validate()) return;
+
     setLoading(true);
     setError('');
 
     try {
-      if (!isMockMode && (!apiDomain || !apiKey)) {
-        throw new Error('Заполните все поля');
-      }
-
       if (isMockMode && !apiKey) {
         setApiKey('mock-session');
       }
@@ -38,13 +57,14 @@ export const Login: React.FC = () => {
   return (
     <div style={{ maxWidth: '400px', margin: '100px auto', padding: '24px' }}>
       <h1 style={{ marginBottom: '32px', textAlign: 'center', fontWeight: 400 }}>Bonch Client</h1>
-      <form onSubmit={handleLogin}>
+      <form onSubmit={handleLogin} noValidate>
         <TextField
           label="API Домен"
           value={apiDomain}
           onChange={(e) => setApiDomain(e.target.value)}
           disabled={isMockMode}
           required={!isMockMode}
+          error={domainError}
           supportingText="Например: http://localhost:3000"
         />
         
@@ -55,6 +75,7 @@ export const Login: React.FC = () => {
           onChange={(e) => setApiKey(e.target.value)}
           disabled={isMockMode}
           required={!isMockMode}
+          error={keyError}
         />
         
         <div style={{ marginBottom: '24px', display: 'flex', alignItems: 'center', gap: '12px', padding: '0 4px' }}>
@@ -62,7 +83,11 @@ export const Login: React.FC = () => {
             type="checkbox"
             id="mockMode"
             checked={isMockMode}
-            onChange={(e) => setMockMode(e.target.checked)}
+            onChange={(e) => {
+              setMockMode(e.target.checked);
+              setDomainError('');
+              setKeyError('');
+            }}
             style={{ width: '18px', height: '18px', cursor: 'pointer' }}
           />
           <label htmlFor="mockMode" style={{ fontSize: '14px', cursor: 'pointer', userSelect: 'none' }}>
@@ -79,11 +104,15 @@ export const Login: React.FC = () => {
         <button
           type="submit"
           className="m3-button m3-button-filled"
-          style={{ width: '100%', height: '48px' }}
+          style={{ width: '100%', height: '48px', marginBottom: '16px' }}
           disabled={loading}
         >
           {loading ? 'Подключение...' : 'Войти'}
         </button>
+
+        <p style={{ fontSize: '12px', opacity: 0.6, textAlign: 'center' }}>
+          * обязательное поле
+        </p>
       </form>
     </div>
   );

src/pages/Messages.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import type { MessageListItem } from '../types/api';
+import { Mail, Send, Paperclip, ChevronRight } from 'lucide-react';
+
+export const Messages: React.FC = () => {
+  const [messages, setMessages] = useState<MessageListItem[]>([]);
+  const [type, setType] = useState<'in' | 'out'>('in');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchMessages = async () => {
+      setLoading(true);
+      try {
+        const data = await api.getMessages(type);
+        setMessages(data);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchMessages();
+  }, [type]);
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '24px' }}>
+        <h1>Сообщения</h1>
+        <div className="m3-button-row" style={{ display: 'flex', gap: '8px' }}>
+          <button 
+            className={`m3-button ${type === 'in' ? 'm3-button-filled' : 'm3-button-tonal'}`}
+            onClick={() => setType('in')}
+          >
+            <Mail size={18} style={{ marginRight: '8px' }} />
+            Входящие
+          </button>
+          <button 
+            className={`m3-button ${type === 'out' ? 'm3-button-filled' : 'm3-button-tonal'}`}
+            onClick={() => setType('out')}
+          >
+            <Send size={18} style={{ marginRight: '8px' }} />
+            Исходящие
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка сообщений...</div>
+      ) : (
+        <div className="message-list" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {messages.length === 0 ? (
+            <div className="m3-card" style={{ textAlign: 'center', padding: '40px' }}>
+              Нет сообщений
+            </div>
+          ) : (
+            messages.map((msg) => (
+              <div key={msg.id} className="m3-card message-item" style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '16px', margin: 0 }}>
+                <div className="message-icon" style={{ 
+                  width: '40px', height: '40px', borderRadius: '20px', 
+                  backgroundColor: 'var(--md-sys-color-primary-container)',
+                  color: 'var(--md-sys-color-on-primary-container)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  flexShrink: 0
+                }}>
+                  {type === 'in' ? <Mail size={20} /> : <Send size={20} />}
+                </div>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
+                    <span style={{ fontWeight: 500, fontSize: '14px' }}>{msg.senderOrRecipient}</span>
+                    <span style={{ fontSize: '12px', opacity: 0.7 }}>{msg.date}</span>
+                  </div>
+                  <div style={{ fontWeight: 500, fontSize: '16px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                    {msg.subject}
+                  </div>
+                  {msg.hasFiles && (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginTop: '4px', color: 'var(--md-sys-color-primary)', fontSize: '12px' }}>
+                      <Paperclip size={14} />
+                      Есть вложения
+                    </div>
+                  )}
+                </div>
+                <ChevronRight size={20} style={{ opacity: 0.5, flexShrink: 0 }} />
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

src/pages/Profile.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { Profile as ProfileType } from '../types/api';
 import { useNavigate, Link } from 'react-router-dom';
-import { User, Mail, GraduationCap, Users, Calendar, GraduationCap as GradesIcon, MessageSquare, Settings } from 'lucide-react';
+import { User, Mail, GraduationCap, Users, Calendar, MessageSquare, Settings, Smartphone } from 'lucide-react';
 import { useStore } from '../store/useStore';
 
 export const Profile: React.FC = () => {
@@ -31,83 +31,96 @@ export const Profile: React.FC = () => {
     fetchProfile();
   }, [navigate, setProfile]);
 
-  if (loading) return <div style={{ padding: '20px', textAlign: 'center' }}>Loading profile...</div>;
+  if (loading) return <div style={{ padding: '20px', textAlign: 'center' }}>Загрузка профиля...</div>;
   if (error) return (
     <div style={{ padding: '20px', textAlign: 'center', color: 'var(--md-sys-color-error)' }}>
       {error}
       <br />
       <button onClick={() => navigate('/login')} className="m3-button m3-button-tonal" style={{ marginTop: '16px' }}>
-        Back to Login
+        Вернуться к входу
       </button>
     </div>
   );
 
   return (
-    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
-      <div style={{ marginBottom: '24px' }}>
-        <h1>Profile</h1>
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <div style={{ marginBottom: '32px' }}>
+        <h1 style={{ fontWeight: 400 }}>Профиль</h1>
       </div>
 
       {profileData && (
-        <div className="m3-card">
-          <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-            <User size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
-            <div>
-              <div style={{ fontSize: '12px', opacity: 0.7 }}>Full Name</div>
-              <div style={{ fontSize: '18px', fontWeight: 500 }}>{profileData.fullName}</div>
-            </div>
-          </div>
-
-          {profileData.email && (
-            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <Mail size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
-              <div>
-                <div style={{ fontSize: '12px', opacity: 0.7 }}>Email</div>
-                <div>{profileData.email}</div>
+        <div className="profile-content">
+          <section style={{ marginBottom: '24px' }}>
+            <h2 style={{ fontSize: '14px', color: 'var(--md-sys-color-primary)', marginBottom: '16px', fontWeight: 500, letterSpacing: '0.1px' }}>
+              ЛИЧНЫЕ ДАННЫЕ
+            </h2>
+            <div className="m3-card" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '24px' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                <User size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
+                <div>
+                  <div style={{ fontSize: '12px', opacity: 0.7 }}>ФИО</div>
+                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.fullName}</div>
+                </div>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                <Users size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
+                <div>
+                  <div style={{ fontSize: '12px', opacity: 0.7 }}>Группа</div>
+                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.group || '—'}</div>
+                </div>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                <GraduationCap size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
+                <div>
+                  <div style={{ fontSize: '12px', opacity: 0.7 }}>Факультет</div>
+                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.faculty || '—'}</div>
+                </div>
               </div>
             </div>
-          )}
+          </section>
 
-          {profileData.group && (
-            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <Users size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
-              <div>
-                <div style={{ fontSize: '12px', opacity: 0.7 }}>Group</div>
-                <div>{profileData.group}</div>
+          <section style={{ marginBottom: '24px' }}>
+            <h2 style={{ fontSize: '14px', color: 'var(--md-sys-color-primary)', marginBottom: '16px', fontWeight: 500, letterSpacing: '0.1px' }}>
+              КОНТАКТЫ
+            </h2>
+            <div className="m3-card" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '24px' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                <Mail size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
+                <div>
+                  <div style={{ fontSize: '12px', opacity: 0.7 }}>Email</div>
+                  <div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.email || '—'}</div>
+                </div>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                <Smartphone size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
+                <div>
+                  <div style={{ fontSize: '12px', opacity: 0.7 }}>Телефон</div>
+                  <div style={{ fontSize: '16px', fontWeight: 500 }}>—</div>
+                </div>
               </div>
             </div>
-          )}
-
-          {profileData.faculty && (
-            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <GraduationCap size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
-              <div>
-                <div style={{ fontSize: '12px', opacity: 0.7 }}>Faculty</div>
-                <div>{profileData.faculty}</div>
-              </div>
-            </div>
-          )}
+          </section>
         </div>
       )}
 
-      <div style={{ marginTop: '24px' }}>
-        <h2 style={{ fontSize: '18px', marginBottom: '16px' }}>Quick Access</h2>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
-          <Link to="/schedule" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
-            <Calendar size={24} />
-            Schedule
+      <div style={{ marginTop: '32px' }}>
+        <h2 style={{ fontSize: '18px', marginBottom: '16px', fontWeight: 400 }}>Быстрый доступ</h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '16px' }}>
+          <Link to="/schedule" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
+            <Calendar size={28} />
+            Расписание
           </Link>
-          <Link to="/grades" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
-            <GradesIcon size={24} />
-            Grades
+          <Link to="/grades" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
+            <GraduationCap size={28} />
+            Успеваемость
           </Link>
-          <Link to="/messages" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
-            <MessageSquare size={24} />
-            Messages
+          <Link to="/messages" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
+            <MessageSquare size={28} />
+            Сообщения
           </Link>
-          <Link to="/settings" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
-            <Settings size={24} />
-            Settings
+          <Link to="/settings" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
+            <Settings size={28} />
+            Настройки
           </Link>
         </div>
       </div>

src/pages/Schedule.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import type { Schedule as ScheduleType } from '../types/api';
+import { Clock, User, MapPin } from 'lucide-react';
+
+export const Schedule: React.FC = () => {
+  const [schedule, setSchedule] = useState<ScheduleType | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchSchedule = async () => {
+      try {
+        const data = await api.getSchedule();
+        setSchedule(data);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchSchedule();
+  }, []);
+
+  if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка расписания...</div>;
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '24px' }}>Расписание</h1>
+      
+      {!schedule || schedule.days.length === 0 ? (
+        <div className="m3-card">Нет данных о расписании</div>
+      ) : (
+        schedule.days.map((day, idx) => (
+          <div key={idx} style={{ marginBottom: '32px' }}>
+            <h2 style={{ fontSize: '16px', fontWeight: 500, color: 'var(--md-sys-color-primary)', marginBottom: '16px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+              {day.date}
+            </h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              {day.lessons.map((lesson, lIdx) => (
+                <div key={lIdx} className="m3-card" style={{ margin: 0 }}>
+                  <div style={{ display: 'flex', gap: '16px' }}>
+                    <div style={{ minWidth: '100px', borderRight: '1px solid var(--md-sys-color-outline-variant)', paddingRight: '16px' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 500 }}>
+                        <Clock size={16} />
+                        {lesson.time.split(' - ')[0]}
+                      </div>
+                      <div style={{ fontSize: '12px', opacity: 0.7, marginTop: '4px' }}>
+                        {lesson.time.split(' - ')[1]}
+                      </div>
+                    </div>
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontWeight: 500, fontSize: '16px', marginBottom: '4px' }}>{lesson.subject}</div>
+                      <div style={{ fontSize: '14px', color: 'var(--md-sys-color-secondary)', marginBottom: '8px' }}>
+                        {lesson.type}
+                      </div>
+                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', fontSize: '13px', opacity: 0.8 }}>
+                        {lesson.teacher && (
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                            <User size={14} />
+                            {lesson.teacher}
+                          </div>
+                        )}
+                        {lesson.room && (
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                            <MapPin size={14} />
+                            Ауд. {lesson.room}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+};