feat(lessons): «Мои материалы» — ученик сохраняет материалы урока к себе

Ученик на странице «Мои уроки» может сохранить к себе страницу доски (PNG) и свою заметку
из прошлой онлайн-сессии. Копия хранится у ученика и переживает удаление сессии учителем.

- Миграция 060: student_materials (kind board/note/link/image, denormalized source_title,
  source_session_id ON DELETE SET NULL).
- API /api/materials (GET/POST/DELETE, авторизация + проверка владельца) + helpers в js/api.js.
- my-lessons.html: кнопки «К себе» на доске и заметке (Whiteboard.exportBlob → /api/files → saveMaterial).
- Новая страница /my-materials (просмотр/открыть/скачать/удалить) + пункт сайдбара (ученик).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/js/whiteboard.js

@@ -3595,6 +3595,22 @@ class Whiteboard {
     }, 'image/png');
   }
 
+  /* Same composite as exportPNG, but hands the PNG Blob to a callback
+     (used to save a board page into the student's personal materials). */
+  exportBlob(cb) {
+    const off = document.createElement('canvas');
+    off.width = Whiteboard.VW; off.height = Whiteboard.VH;
+    const ctx = off.getContext('2d');
+    const [sw, sh, sz, spx, spy] = [this._cssW, this._cssH, this._zoom, this._panVX, this._panVY];
+    this._cssW = Whiteboard.VW; this._cssH = Whiteboard.VH;
+    this._zoom = 1; this._panVX = 0; this._panVY = 0;
+    this._renderBg(ctx);
+    if (this._template && this._template !== 'blank') this._renderTemplate(ctx);
+    for (const s of this._strokes) this._renderStroke(ctx, s);
+    this._cssW = sw; this._cssH = sh; this._zoom = sz; this._panVX = spx; this._panVY = spy;
+    off.toBlob(cb, 'image/png');
+  }
+
   _renderMinimap() {
     if (!this._mmCanvas) return;
     const visible = this._zoom > 1.04;

frontend/my-lessons.html

@@ -585,6 +585,10 @@
                       <span>Загрузка доски...</span>
                     </div>
                     <div class="lh-board-export">
+                      <button class="lh-export-btn" onclick="saveBoardToMaterials(this)" title="Сохранить страницу в «Мои материалы»">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+                        К себе
+                      </button>
                       <button class="lh-export-btn" onclick="exportBoardPage()">
                         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                         PNG
@@ -1023,6 +1027,51 @@ function lhZoom(delta) {
 function lhZoomFit() { if (_wb) _wb.zoomFitStrokes(); }
 function exportBoardPage() { if (_wb) _wb.exportPNG(); }
 
+/* ─── Сохранить материалы урока к себе («Мои материалы») ─── */
+let _myNoteText = '';
+function _matSource() {
+  const s = _activeSession && _activeSession.session;
+  return { sourceSessionId: s ? s.id : null, sourceTitle: s ? (s.title || 'Урок') : null };
+}
+async function saveBoardToMaterials(btn) {
+  if (!_wb) { LS.toast('Откройте страницу доски', 'warn'); return; }
+  if (btn) btn.disabled = true;
+  try {
+    const blob = await new Promise(res => _wb.exportBlob(res));
+    if (!blob) throw new Error('Не удалось сделать снимок страницы');
+    const fd = new FormData();
+    fd.append('file', blob, 'board-p' + (_wbCurrentPage || 1) + '.png');
+    const up = await LS.uploadFile(fd);
+    const src = _matSource();
+    await LS.saveMaterial({
+      kind: 'board',
+      title: (src.sourceTitle || 'Доска') + ' · стр. ' + (_wbCurrentPage || 1),
+      url: LS.downloadFileUrl(up.id),
+      sourceSessionId: src.sourceSessionId, sourceTitle: src.sourceTitle,
+    });
+    LS.toast('Страница сохранена в «Мои материалы»', 'success');
+  } catch (e) {
+    LS.toast(e.message || 'Ошибка сохранения', 'error');
+  } finally { if (btn) btn.disabled = false; }
+}
+async function saveNoteToMaterials(btn) {
+  const text = (_myNoteText || '').trim();
+  if (!text) { LS.toast('Заметка пустая', 'warn'); return; }
+  if (btn) btn.disabled = true;
+  try {
+    const src = _matSource();
+    await LS.saveMaterial({
+      kind: 'note',
+      title: 'Заметка · ' + (src.sourceTitle || 'Урок'),
+      body: text,
+      sourceSessionId: src.sourceSessionId, sourceTitle: src.sourceTitle,
+    });
+    LS.toast('Заметка сохранена в «Мои материалы»', 'success');
+  } catch (e) {
+    LS.toast(e.message || 'Ошибка сохранения', 'error');
+  } finally { if (btn) btn.disabled = false; }
+}
+
 /* ─── Chat ─── */
 async function loadChat() {
   _chatLoaded = true;
@@ -1073,12 +1122,15 @@ async function loadNotes() {
   try {
     const data    = await LS.get(`/api/classroom/${sessionId}/notes`);
     const content = data.content || '';
+    _myNoteText = content;
     if (!content.trim()) {
       container.innerHTML = `<div class="ml-empty"><p>Вы не оставили заметок к этому уроку</p></div>`;
       return;
     }
     container.innerHTML = `<div class="lh-own-note-box">
-      <div class="lh-own-note-lbl">Мои заметки</div>
+      <div class="lh-own-note-lbl">Мои заметки
+        <button class="lh-export-btn" style="float:right" onclick="saveNoteToMaterials(this)" title="Сохранить в «Мои материалы»">К себе</button>
+      </div>
       <div class="lh-note-text">${LS.escapeHtml(content)}</div>
     </div>`;
   } catch {

frontend/my-materials.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Мои материалы — LearnSpace</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .mm-main { padding: 28px 24px; max-width: 1100px; margin: 0 auto; width: 100%; }
+    .mm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+    .mm-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--text); }
+    .mm-sub { color: var(--text-3); font-size: 0.9rem; margin-bottom: 22px; }
+    .mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
+    .mm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
+    .mm-card-media { background: #f1f5f9; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+    .mm-card-media img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
+    .mm-card-note { padding: 14px 16px; font-size: 0.84rem; color: var(--text-2); white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; line-height: 1.55; flex: 1; }
+    .mm-card-body { padding: 12px 14px; border-top: 1px solid var(--border); }
+    .mm-card-title { font-weight: 700; font-size: 0.86rem; color: var(--text); margin-bottom: 3px; }
+    .mm-card-meta { font-size: 0.74rem; color: var(--text-3); }
+    .mm-card-actions { display: flex; gap: 8px; margin-top: 10px; }
+    .mm-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 0.76rem; font-weight: 600; color: var(--text-2); text-decoration: none; transition: border-color .12s, color .12s; }
+    .mm-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .mm-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
+    .mm-btn svg { width: 13px; height: 13px; }
+    .mm-kind { position: absolute; top: 8px; left: 8px; font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(155,93,229,0.12); color: var(--violet); }
+    .mm-empty { padding: 60px 20px; text-align: center; color: var(--text-3); }
+    .mm-empty svg { width: 38px; height: 38px; opacity: 0.4; margin-bottom: 12px; }
+    @media (max-width: 640px) { .mm-grid { grid-template-columns: 1fr 1fr; } .mm-main { padding: 18px 14px; } }
+  </style>
+</head>
+<body>
+<div class="app-layout">
+  <aside class="sidebar" id="app-sidebar"></aside>
+  <main class="sb-content">
+    <div class="mm-main">
+      <div class="mm-head">
+        <span class="mm-title">Мои материалы</span>
+      </div>
+      <div class="mm-sub">Сохранённые с уроков: страницы доски, заметки и вложения. Хранятся у вас и не пропадают, даже если урок удалят.</div>
+      <div class="mm-grid" id="mm-grid"><div class="mm-empty">Загрузка…</div></div>
+    </div>
+  </main>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/sidebar.js"></script>
+<script src="/js/notifications.js"></script>
+<script src="/js/mobile.js"></script>
+<script>
+  LS.initPage();
+
+  function esc(s) { return LS.escapeHtml(String(s || '')); }
+  function fmtDate(s) {
+    if (!s) return '';
+    try { const d = new Date(s.replace(' ', 'T') + (s.includes('Z') ? '' : 'Z'));
+      return d.toLocaleDateString('ru', { day: 'numeric', month: 'short', year: 'numeric' }); } catch (e) { return ''; }
+  }
+
+  const KIND_LABEL = { board: 'Доска', note: 'Заметка', link: 'Ссылка', image: 'Изображение' };
+
+  function card(m) {
+    const kind = KIND_LABEL[m.kind] || m.kind;
+    const meta = `${esc(m.source_title || '')}${m.source_title ? ' · ' : ''}${fmtDate(m.created_at)}`;
+    const del = `<button class="mm-btn danger" onclick="delMaterial(${m.id})"><i data-lucide="trash-2"></i> Удалить</button>`;
+    if (m.kind === 'board' || m.kind === 'image') {
+      return `<div class="mm-card">
+        <span class="mm-kind">${kind}</span>
+        <a class="mm-card-media" href="${esc(m.url)}" target="_blank" rel="noopener"><img src="${esc(m.url)}" alt="" loading="lazy"/></a>
+        <div class="mm-card-body">
+          <div class="mm-card-title">${esc(m.title || kind)}</div>
+          <div class="mm-card-meta">${meta}</div>
+          <div class="mm-card-actions">
+            <a class="mm-btn" href="${esc(m.url)}" target="_blank" rel="noopener"><i data-lucide="external-link"></i> Открыть</a>
+            <a class="mm-btn" href="${esc(m.url)}" download><i data-lucide="download"></i></a>
+            ${del}
+          </div>
+        </div>
+      </div>`;
+    }
+    if (m.kind === 'link') {
+      return `<div class="mm-card">
+        <span class="mm-kind">${kind}</span>
+        <div class="mm-card-note"><a href="${esc(m.url)}" target="_blank" rel="noopener" style="color:var(--violet)">${esc(m.url)}</a></div>
+        <div class="mm-card-body">
+          <div class="mm-card-title">${esc(m.title || kind)}</div>
+          <div class="mm-card-meta">${meta}</div>
+          <div class="mm-card-actions">${del}</div>
+        </div>
+      </div>`;
+    }
+    // note
+    return `<div class="mm-card">
+      <span class="mm-kind">${kind}</span>
+      <div class="mm-card-note">${esc(m.body || '')}</div>
+      <div class="mm-card-body">
+        <div class="mm-card-title">${esc(m.title || kind)}</div>
+        <div class="mm-card-meta">${meta}</div>
+        <div class="mm-card-actions">${del}</div>
+      </div>
+    </div>`;
+  }
+
+  async function load() {
+    const grid = document.getElementById('mm-grid');
+    try {
+      const { materials } = await LS.listMaterials();
+      if (!materials || !materials.length) {
+        grid.innerHTML = `<div class="mm-empty" style="grid-column:1/-1">
+          <i data-lucide="folder-open"></i>
+          <p>Пока пусто. На странице «Мои уроки» откройте прошлый урок и нажмите «К себе» на странице доски или заметке.</p>
+        </div>`;
+        lucide.createIcons();
+        return;
+      }
+      grid.innerHTML = materials.map(card).join('');
+      lucide.createIcons();
+    } catch (e) {
+      grid.innerHTML = `<div class="mm-empty" style="grid-column:1/-1">Ошибка загрузки</div>`;
+    }
+  }
+
+  async function delMaterial(id) {
+    if (!confirm('Удалить этот материал?')) return;
+    try { await LS.deleteMaterial(id); load(); }
+    catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+  window.delMaterial = delMaterial;
+
+  load();
+</script>
+</body>
+</html>