Fix editor full-screen and add parent-side doc viewer

Student editor:
- Add body.docs-editor-open class when editor opens; hide hero, nav,
  confetti so nothing bleeds behind the fixed overlay

Admin docs panel:
- New "Documents" sidebar entry listing all submitted docs with student
  name, date, and unread badge
- Click any doc to open it in OnlyOffice in view (read-only) mode
- Download button for offline access
- /api/docs/bykey/:key/editor-config server route for admin viewer

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

public/admin.html

@@ -57,6 +57,9 @@
         <button class="nav-pill" data-panel="decks">
           <span class="nav-icon">🗂️</span><span class="nav-label">Flashcards</span>
         </button>
+        <button class="nav-pill" data-panel="docs">
+          <span class="nav-icon">📝</span><span class="nav-label">Docs</span>
+        </button>
       </nav>
       <div class="admin-sidebar-footer">
         <button class="nav-pill" data-panel="settings">
@@ -679,6 +682,23 @@
         </div>
       </section>
 
+      <!-- Docs -->
+      <section id="panel-docs" class="panel" hidden>
+        <h1>Submitted Documents</h1>
+        <div id="admin-docs-list">
+          <p class="hint">Loading…</p>
+        </div>
+        <!-- Full-screen doc viewer -->
+        <div id="admin-doc-viewer" hidden>
+          <div class="docs-editor-toolbar">
+            <button id="btn-admin-doc-back" class="docs-back-btn">← Back to list</button>
+            <span id="admin-doc-viewer-title" class="docs-editor-title-text"></span>
+            <a id="admin-doc-download" class="docs-submit-btn" download>⬇ Download</a>
+          </div>
+          <div id="admin-doc-frame"></div>
+        </div>
+      </section>
+
       <!-- Settings -->
       <section id="panel-settings" class="panel">
         <h1>Settings</h1>

public/admin.js

@@ -120,7 +120,7 @@ document.querySelectorAll('[data-nav]').forEach((btn) =>
 const PANEL_TITLES = {
   dashboard: 'Dashboard', kids: 'Kids', courses: 'Courses', planner: 'Planner',
   grading: 'Grading', messages: 'Messages', gradebook: 'Gradebook',
-  spelling: 'Spelling', decks: 'Flashcards', settings: 'Settings',
+  spelling: 'Spelling', decks: 'Flashcards', docs: 'Documents', settings: 'Settings',
   'course-detail': 'Course Detail', 'item-editor': 'Item Editor',
 };
 
@@ -132,7 +132,7 @@ function showPanel(name) {
   const loaders = {
     dashboard: loadDashboard, kids: loadKids, courses: loadCourses, planner: loadPlannerPanel,
     grading: loadGrading, messages: loadMessages, gradebook: loadGradebookPanel, spelling: loadSpelling, decks: loadDecks,
-    settings: loadSettings,
+    docs: loadAdminDocs, settings: loadSettings,
   };
   if (loaders[name]) loaders[name]();
   if (name === 'course-detail') openCourseDetail(currentCourseId);
@@ -3290,3 +3290,81 @@ $('#app-settings-form').addEventListener('submit', async (e) => {
   msg('Settings saved.');
 });
 
+
+// ── Admin: Submitted Documents ────────────────────────────────────────────────
+
+let adminDocsEditorInstance = null;
+
+async function loadAdminDocs() {
+  const { docs } = await api('/api/admin/docs');
+  const el = $('#admin-docs-list');
+  if (!docs.length) {
+    el.innerHTML = '<p class="hint">No submitted documents yet.</p>';
+    return;
+  }
+  el.innerHTML = docs.map((d) => `
+    <div class="doc-card${!d.parent_read ? ' inbox-new' : ''}" style="cursor:pointer"
+         data-id="${d.id}" data-key="${esc(d.doc_key)}" data-filename="${esc(d.filename)}" data-title="${esc(d.title)}">
+      <div class="doc-card-icon">📄</div>
+      <div class="doc-card-info">
+        <div class="doc-card-title">${esc(d.title)}${!d.parent_read ? ' <span class="feedback-badge">New</span>' : ''}</div>
+        <div class="doc-card-meta">${esc(d.student_name)} · Submitted ${new Date(d.submitted_at + 'Z').toLocaleDateString()}</div>
+      </div>
+    </div>
+  `).join('');
+
+  el.querySelectorAll('.doc-card').forEach((card) => {
+    card.addEventListener('click', () => openAdminDocViewer(
+      +card.dataset.id, card.dataset.key, card.dataset.filename, card.dataset.title
+    ));
+  });
+}
+
+async function openAdminDocViewer(id, key, filename, title) {
+  await api(`/api/admin/docs/${id}/read`, { method: 'PUT' });
+  $('#admin-docs-list').hidden = true;
+  $('#admin-doc-viewer').hidden = false;
+  $('#admin-doc-viewer-title').textContent = title;
+  $('#admin-doc-download').href = `/api/docs/file/${filename}`;
+  $('#admin-doc-download').download = title + '.docx';
+
+  const frame = $('#admin-doc-frame');
+  frame.innerHTML = '';
+  if (adminDocsEditorInstance) {
+    try { adminDocsEditorInstance.destroyEditor(); } catch { /* ignore */ }
+    adminDocsEditorInstance = null;
+  }
+
+  const { onlyofficeUrl, config } = await api(`/api/docs/bykey/${key}/editor-config`).catch(() => null) || {};
+  if (!onlyofficeUrl || !config) {
+    frame.innerHTML = `<div class="docs-error">Could not load document config.</div>`;
+    return;
+  }
+  // Parent views in read mode
+  config.editorConfig = config.editorConfig || {};
+  config.editorConfig.mode = 'view';
+
+  function initEditor() {
+    adminDocsEditorInstance = new window.DocsAPI.DocEditor('admin-doc-frame', config);
+  }
+  if (window.DocsAPI) {
+    initEditor();
+  } else {
+    const s = document.createElement('script');
+    s.src = `${onlyofficeUrl}/web-apps/apps/api/documents/api.js`;
+    s.onload = initEditor;
+    s.onerror = () => { frame.innerHTML = `<div class="docs-error">Could not reach OnlyOffice server.</div>`; };
+    document.head.appendChild(s);
+  }
+}
+
+document.getElementById('btn-admin-doc-back')?.addEventListener('click', () => {
+  if (adminDocsEditorInstance) {
+    try { adminDocsEditorInstance.destroyEditor(); } catch { /* ignore */ }
+    adminDocsEditorInstance = null;
+  }
+  $('#admin-doc-frame').innerHTML = '';
+  $('#admin-doc-viewer').hidden = true;
+  $('#admin-docs-list').hidden = false;
+  loadAdminDocs();
+});

public/app.js

@@ -2571,6 +2571,7 @@ async function openDocEditor(id, key, title) {
   $('#btn-docs-submit').disabled = false;
   $('#btn-docs-submit').textContent = 'Submit to Parent ✓';
 
+  document.body.classList.add('docs-editor-open');
   const frame = $('#docs-editor-frame');
   frame.innerHTML = '';
   if (docsEditorInstance) {
@@ -2626,6 +2627,7 @@ $('#docs-new-form').addEventListener('submit', async (e) => {
 });
 
 $('#btn-docs-back').addEventListener('click', () => {
+  document.body.classList.remove('docs-editor-open');
   if (docsEditorInstance) {
     try { docsEditorInstance.destroyEditor(); } catch { /* ignore */ }
     docsEditorInstance = null;

public/styles.css

@@ -2213,6 +2213,10 @@ body.bg-bubbles {
   display: flex; flex-direction: column;
   background: #fff;
 }
+body.docs-editor-open .kid-hero,
+body.docs-editor-open .kid-nav,
+body.docs-editor-open .page-confetti,
+body.docs-editor-open .tab-panel { display: none !important; }
 #docs-editor-frame { flex: 1; min-height: 0; }
 #docs-editor-frame iframe { width: 100%; height: 100%; border: none; display: block; }
 
@@ -2243,3 +2247,11 @@ body.bg-bubbles {
 
 .docs-error { padding: 1.5rem; color: var(--muted); font-size: .9rem; }
 .docs-error code { background: var(--surface); padding: .1rem .4rem; border-radius: 4px; }
+
+/* Admin doc viewer */
+#admin-doc-viewer {
+  position: fixed; inset: 0; z-index: 10000;
+  display: flex; flex-direction: column; background: #fff;
+}
+#admin-doc-frame { flex: 1; min-height: 0; }
+#admin-doc-frame iframe { width: 100%; height: 100%; border: none; display: block; }

server.js

@@ -2546,6 +2546,20 @@ app.get('/api/docs/config', (req, res) => {
   res.json({ onlyofficeUrl: ONLYOFFICE_URL, serverUrl: SERVER_URL });
 });
 
+// Returns a fully-signed OnlyOffice editor config — lookup by doc key (for admin)
+app.get('/api/docs/bykey/:key/editor-config', (req, res) => {
+  const doc = db.prepare(`SELECT d.*, s.name AS student_name FROM documents d JOIN students s ON s.id = d.student_id WHERE d.doc_key = ?`).get(req.params.key);
+  if (!doc) return res.status(404).json({ error: 'Not found' });
+  const config = {
+    document: { fileType: 'docx', key: doc.doc_key, title: doc.title, url: `${SERVER_URL}/api/docs/file/${doc.filename}`, permissions: { edit: false, download: true, print: true } },
+    editorConfig: { user: { id: 'parent', name: 'Parent' }, mode: 'view', lang: 'en', customization: { logo: { visible: false }, compactHeader: true, toolbarNoTabs: true } },
+    type: 'desktop', height: '100%', width: '100%',
+  };
+  const token = jwtSign(config);
+  if (token) config.token = token;
+  res.json({ onlyofficeUrl: ONLYOFFICE_URL, config });
+});
+
 // Returns a fully-signed OnlyOffice editor config for a specific document
 app.get('/api/docs/:id/editor-config', (req, res) => {
   const doc = db.prepare(`SELECT d.*, s.name AS student_name FROM documents d JOIN students s ON s.id = d.student_id WHERE d.id = ?`).get(req.params.id);