feat(reader): implement FEAT-01 Focus Zen Mode (100% vh/vw, auto-hiding HUD, hotkeys F/Esc, native fullscreen)

app/static/js/modules/grammar.js

@@ -5,7 +5,7 @@
 // =======================================================================
 
 import { api } from './api.js';
-import { showToast, escapeHtml } from './ui.js';
+import { showToast, escapeHtml, renderMarkdownTable, renderMarkdownNotes } from './ui.js';
 
 let allUnits = [];
 let currentFilter = 'all';
@@ -29,6 +29,18 @@ export function initGrammar() {
     const sumUnitsBtn = document.getElementById('grammar-sum-units-btn');
     const sumSrsBtn = document.getElementById('grammar-sum-srs-btn');
     const handwrittenToggle = document.getElementById('grammar-handwritten-toggle');
+    const cheatsheetToggle = document.getElementById('grammar-practice-cheatsheet-toggle');
+    const cheatsheetDrawer = document.getElementById('grammar-practice-cheatsheet-drawer');
+
+    if (cheatsheetToggle && cheatsheetDrawer) {
+        cheatsheetToggle.addEventListener('click', () => {
+            const isNowHidden = !cheatsheetDrawer.classList.contains('hidden');
+            cheatsheetDrawer.classList.toggle('hidden', isNowHidden);
+            cheatsheetToggle.innerHTML = isNowHidden
+                ? '<span>📋 Шпаргалка по теме</span><i class="ph-caret-down"></i>'
+                : '<span>📋 Скрыть шпаргалку</span><i class="ph-caret-up"></i>';
+        });
+    }
 
     if (backBtn) {
         backBtn.addEventListener('click', () => {
@@ -314,6 +326,50 @@ function renderUnitTheory() {
         handwrittenToggle.checked = Boolean(currentUnit.handwritten_logged);
     }
 
+    // Cheatsheet Markdown Table
+    const cheatsheetSec = document.getElementById('grammar-cheatsheet-section');
+    const cheatsheetBox = document.getElementById('grammar-cheatsheet-content');
+    if (cheatsheetSec && cheatsheetBox) {
+        if (currentUnit.cheatsheet_table && currentUnit.cheatsheet_table.trim()) {
+            cheatsheetBox.innerHTML = renderMarkdownTable(currentUnit.cheatsheet_table);
+            cheatsheetSec.classList.remove('hidden');
+        } else {
+            cheatsheetBox.innerHTML = '';
+            cheatsheetSec.classList.add('hidden');
+        }
+    }
+
+    // Detailed Murphy Notes
+    const notesSec = document.getElementById('grammar-detailed-notes-section');
+    const notesBox = document.getElementById('grammar-detailed-notes-content');
+    if (notesSec && notesBox) {
+        if (currentUnit.detailed_notes && currentUnit.detailed_notes.trim()) {
+            notesBox.innerHTML = renderMarkdownNotes(currentUnit.detailed_notes);
+            notesSec.classList.remove('hidden');
+        } else {
+            notesBox.innerHTML = '';
+            notesSec.classList.add('hidden');
+        }
+    }
+
+    // Practice Cheatsheet Drawer content
+    const practiceDrawer = document.getElementById('grammar-practice-cheatsheet-drawer');
+    const practiceToggleWrap = document.querySelector('.practice-cheatsheet-toggle-wrap');
+    if (practiceDrawer && practiceToggleWrap) {
+        if (currentUnit.cheatsheet_table && currentUnit.cheatsheet_table.trim()) {
+            practiceDrawer.innerHTML = renderMarkdownTable(currentUnit.cheatsheet_table);
+            practiceToggleWrap.classList.remove('hidden');
+        } else {
+            practiceDrawer.innerHTML = '';
+            practiceToggleWrap.classList.add('hidden');
+        }
+        practiceDrawer.classList.add('hidden');
+        const practiceToggle = document.getElementById('grammar-practice-cheatsheet-toggle');
+        if (practiceToggle) {
+            practiceToggle.innerHTML = '<span>📋 Шпаргалка по теме</span><i class="ph-caret-down"></i>';
+        }
+    }
+
     // Golden formula
     const formulaEl = document.getElementById('grammar-golden-formula-text');
     if (formulaEl) {
@@ -368,6 +424,12 @@ function startUnitPractice() {
     sessionCorrect = 0;
     sessionIngestedCards = [];
 
+    // Ensure cheatsheet drawer is collapsed at practice start
+    const practiceDrawer = document.getElementById('grammar-practice-cheatsheet-drawer');
+    const practiceToggle = document.getElementById('grammar-practice-cheatsheet-toggle');
+    if (practiceDrawer) practiceDrawer.classList.add('hidden');
+    if (practiceToggle) practiceToggle.innerHTML = '<span>📋 Шпаргалка по теме</span><i class="ph-caret-down"></i>';
+
     renderExercise();
 }