Redesign student UI and add OnlyOffice document integration

- Student section: new hero gradient header, fixed bottom nav bar with
  icon+label pills (Today/Courses/Spelling/Inbox/Docs)
- Today rows: card style with left accent stripe, lift on hover
- Course cards: grid layout with top color bar per course
- Docs tab: list view with doc cards, OnlyOffice editor embedded via
  iframe using server-signed JWT config
- Server: documents table, CRUD routes, OnlyOffice callback endpoint
  for auto-save, /api/docs/:id/editor-config returns signed config
- Blank DOCX template embedded as base64 for new document creation
- OnlyOffice server: https://onlyoffice.necloud.us (set ONLYOFFICE_JWT_SECRET
  env var to match your Document Server JWT secret)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/app.js

@@ -313,7 +313,7 @@ document.querySelectorAll('.nav-pill').forEach((pill) =>
   pill.addEventListener('click', () => switchTab(pill.dataset.tab))
 );
 
-const TAB_ORDER = ['today', 'courses', 'spelling', 'inbox'];
+const TAB_ORDER = ['today', 'courses', 'spelling', 'inbox', 'docs'];
 let currentTab = 'today';
 
 function switchTab(name) {
@@ -331,6 +331,7 @@ function switchTab(name) {
     }
   });
   if (name === 'inbox') loadInbox();
+  if (name === 'docs') loadDocs();
 }
 
 function inboxSeenKey(studentId) { return `inbox_seen_${studentId}`; }
@@ -2518,6 +2519,117 @@ $('#btn-test').addEventListener('click', () => {
   startTest();
 });
 
+// ---------- docs (OnlyOffice) ----------
+
+let docsEditorInstance = null;
+let currentDocId = null;
+
+async function loadDocs() {
+  const sid = currentStudent?.id;
+  if (!sid) return;
+  const { docs } = await api(`/api/docs?studentId=${sid}`);
+  const list = $('#docs-list');
+  const empty = $('#docs-empty');
+  if (!docs.length) {
+    list.innerHTML = '';
+    empty.hidden = false;
+    return;
+  }
+  empty.hidden = true;
+  list.innerHTML = docs.map((d) => `
+    <div class="doc-card${d.submitted ? ' doc-submitted' : ''}" data-id="${d.id}" data-key="${esc(d.doc_key)}" data-title="${esc(d.title)}">
+      <div class="doc-card-icon">📄</div>
+      <div class="doc-card-info">
+        <div class="doc-card-title">${esc(d.title)}</div>
+        <div class="doc-card-meta">${d.submitted ? '✓ Submitted' : 'Draft'} · ${new Date(d.updated_at + 'Z').toLocaleDateString()}</div>
+      </div>
+      <button class="doc-delete-btn" data-id="${d.id}" aria-label="Delete">🗑</button>
+    </div>
+  `).join('');
+
+  list.querySelectorAll('.doc-card').forEach((card) => {
+    card.addEventListener('click', (e) => {
+      if (e.target.closest('.doc-delete-btn')) return;
+      openDocEditor(+card.dataset.id, card.dataset.key, card.dataset.title);
+    });
+  });
+  list.querySelectorAll('.doc-delete-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      if (!confirm('Delete this document?')) return;
+      await api(`/api/docs/${btn.dataset.id}`, { method: 'DELETE' });
+      loadDocs();
+    });
+  });
+}
+
+async function openDocEditor(id, key, title) {
+  currentDocId = id;
+  $('#docs-list-view').hidden = true;
+  $('#docs-editor-view').hidden = false;
+  $('#docs-editor-title').textContent = title;
+  $('#btn-docs-submit').disabled = false;
+  $('#btn-docs-submit').textContent = 'Submit to Parent ✓';
+
+  const frame = $('#docs-editor-frame');
+  frame.innerHTML = '';
+  if (docsEditorInstance) {
+    try { docsEditorInstance.destroyEditor(); } catch { /* ignore */ }
+    docsEditorInstance = null;
+  }
+
+  const { onlyofficeUrl, config } = await api(`/api/docs/${id}/editor-config`).catch(() => null) || {};
+  if (!onlyofficeUrl || !config) {
+    frame.innerHTML = `<div class="docs-error">Could not load document config from server.</div>`;
+    return;
+  }
+
+  const apiScript = `${onlyofficeUrl}/web-apps/apps/api/documents/api.js`;
+
+  function initEditor() {
+    docsEditorInstance = new window.DocsAPI.DocEditor('docs-editor-frame', config);
+  }
+
+  if (window.DocsAPI) {
+    initEditor();
+  } else {
+    const s = document.createElement('script');
+    s.src = apiScript;
+    s.onload = initEditor;
+    s.onerror = () => {
+      frame.innerHTML = `<div class="docs-error">Could not load OnlyOffice editor from <code>${onlyofficeUrl}</code>. Make sure the server at <strong>${onlyofficeUrl}</strong> is reachable from this device.</div>`;
+    };
+    document.head.appendChild(s);
+  }
+}
+
+$('#btn-new-doc').addEventListener('click', async () => {
+  const title = prompt('Document title:', 'Untitled Document');
+  if (!title) return;
+  const { id, key } = await api('/api/docs', { method: 'POST', body: { studentId: currentStudent.id, title } });
+  loadDocs();
+  openDocEditor(id, key, title);
+});
+
+$('#btn-docs-back').addEventListener('click', () => {
+  if (docsEditorInstance) {
+    try { docsEditorInstance.destroyEditor(); } catch { /* ignore */ }
+    docsEditorInstance = null;
+  }
+  $('#docs-editor-frame').innerHTML = '';
+  $('#docs-editor-view').hidden = true;
+  $('#docs-list-view').hidden = false;
+  loadDocs();
+});
+
+$('#btn-docs-submit').addEventListener('click', async () => {
+  if (!currentDocId) return;
+  if (!confirm('Submit this document to your parent?')) return;
+  await api(`/api/docs/${currentDocId}/submit`, { method: 'POST' });
+  $('#btn-docs-submit').textContent = '✓ Submitted!';
+  $('#btn-docs-submit').disabled = true;
+});
+
 // ---------- boot ----------
 
 loadHome();