feat: decompose frontend into native ES modules (zero bundlers, zero npm)

TODO.md

@@ -274,14 +274,17 @@
 
 ---
 
-### 12. 🧩 Модульность фронтенда на нативных ES-модулях (без Webpack/Vite)
+### 12. 🧩 Модульность фронтенда на нативных ES-модулях (без Webpack/Vite) (Completed)
-- [ ] Перевести [`app/static/js/app.js`](file:///home/ai-projects/services/study.qpid.pro/app/static/js/app.js) на нативный браузерный синтаксис `<script type="module">`.
+- [x] Перевести [`app/static/js/app.js`](file:///home/ai-projects/services/study.qpid.pro/app/static/js/app.js) на нативный браузерный синтаксис `<script type="module">`.
-- [ ] Выделить модули с нативным `import/export`:
+- [x] Выделить модули с нативным `import/export`:
-  - `modules/reader.js` — читалку, блок-парсер и навигацию по главам.
+  - `modules/api.js` — централизованный клиент сетевых вызовов с авто-интерцептором токена.
-  - `modules/srs.js` — алгоритм SM-2, флэшкарты и квиз.
+  - `modules/ui.js` — тосты, модальные окна, темы оформления, утилиты экранирования и шафла.
-  - `modules/api.js` — клиентские сетевые вызовы.
+  - `modules/dictionary.js` — поиск, карточки, коллекции, теги, пакетные операции, модалки редактирования и экспорта.
-  - `modules/ui.js` — тосты, модальные окна, темы оформления.
+  - `modules/srs.js` — алгоритм SM-2, 5 режимов тренировки (флэшкарты, квиз, тайпинг, клоуз, диктант), статистика KPI и гитхаб-хитмап.
-- [ ] Сохранить полное отсутствие внешних сборщиков (0 npm-пакетов, чистая платформа).
+  - `modules/reader.js` — книжная полка, читалка, блок-парсер, виртуализация глав, интерактивный попап слова, настройки Aa.
+  - `app.js` — главный оркестратор, роутер хэшей `#dictionary`, `#srs`, `#reader/book/:id`, префлайт вида без мерцания, мобильный таббар.
+- [x] Сохранить полное отсутствие внешних сборщиков (0 npm-пакетов, чистая платформа, нативные ES6 модули браузера).
+- [x] Обновлен Service Worker (`sw.js`) с прекэшированием всех модулей и версией кэша `notes-v5.0`.
 
 ---
 

app/static/index.html

@@ -1075,7 +1075,7 @@
     <!-- Audio Element for native streaming -->
     <audio id="global-audio-player" preload="none"></audio>
 
-    <script src="/static/js/app.js?v=4.0"></script>
+    <script type="module" src="/static/js/app.js?v=5.0"></script>
 </body>
 </html>
 

app/static/js/modules/api.js

@@ -0,0 +1,184 @@
+// =======================================================================
+// Notes Application - API Client Module (Native ES Module)
+// =======================================================================
+
+// Persistent session: auto-inject Authorization header if token exists in localStorage
+const originalFetch = window.fetch;
+window.fetch = function(url, options = {}) {
+    const token = localStorage.getItem('notes_token');
+    if (token && typeof url === 'string' && url.startsWith('/api/')) {
+        options.headers = options.headers || {};
+        if (options.headers instanceof Headers) {
+            if (!options.headers.has('Authorization')) {
+                options.headers.set('Authorization', `Bearer ${token}`);
+            }
+        } else if (Array.isArray(options.headers)) {
+            if (!options.headers.some(([k]) => k.toLowerCase() === 'authorization')) {
+                options.headers.push(['Authorization', `Bearer ${token}`]);
+            }
+        } else {
+            if (!options.headers['Authorization']) {
+                options.headers['Authorization'] = `Bearer ${token}`;
+            }
+        }
+    }
+    return originalFetch.call(this, url, options);
+};
+
+export const api = {
+    // Auth endpoints
+    auth: {
+        async check() {
+            const resp = await fetch('/api/me');
+            if (resp.ok) {
+                return await resp.json();
+            }
+            return null;
+        },
+        async login(username, password) {
+            return await fetch('/api/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password })
+            });
+        },
+        async logout() {
+            return await fetch('/api/logout', { method: 'POST' });
+        },
+        async changePassword(currentPassword, newPassword) {
+            return await fetch('/api/change-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    old_password: currentPassword,
+                    new_password: newPassword
+                })
+            });
+        }
+    },
+
+    // Cards & Vocabulary
+    cards: {
+        async getAll(params = {}) {
+            const qs = new URLSearchParams(params).toString();
+            const url = qs ? `/api/cards?${qs}` : '/api/cards';
+            const resp = await fetch(url);
+            return resp.ok ? await resp.json() : [];
+        },
+        async lookup(term) {
+            const resp = await fetch(`/api/lookup?term=${encodeURIComponent(term)}`);
+            if (resp.ok) {
+                return await resp.json();
+            }
+            throw new Error(`Lookup failed: ${resp.status}`);
+        },
+        async create(payload) {
+            return await fetch('/api/cards', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+        },
+        async update(id, payload) {
+            return await fetch(`/api/cards/${id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+        },
+        async delete(id) {
+            return await fetch(`/api/cards/${id}`, { method: 'DELETE' });
+        },
+        async batch(payload) {
+            return await fetch('/api/cards/batch', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+        }
+    },
+
+    // Collections & Tags
+    collections: {
+        async getAll() {
+            const resp = await fetch('/api/collections');
+            return resp.ok ? await resp.json() : [];
+        }
+    },
+    tags: {
+        async getAll() {
+            const resp = await fetch('/api/tags');
+            return resp.ok ? await resp.json() : [];
+        }
+    },
+
+    // Statistics & Analytics
+    stats: {
+        async getStats() {
+            const resp = await fetch('/api/stats');
+            return resp.ok ? await resp.json() : null;
+        },
+        async getSrsStats() {
+            const resp = await fetch('/api/srs/stats');
+            return resp.ok ? await resp.json() : null;
+        },
+        async getHeatmap(days = 180) {
+            const resp = await fetch(`/api/srs/activity-heatmap?days=${days}`);
+            return resp.ok ? await resp.json() : { days: [] };
+        }
+    },
+
+    // SRS Spaced Repetition
+    srs: {
+        async getQueue(forceAll = false, tagFilter = null) {
+            let url = '/api/srs/queue?limit=50';
+            if (forceAll) url += '&force_all=true';
+            if (tagFilter) url += `&tag=${encodeURIComponent(tagFilter)}`;
+            const resp = await fetch(url);
+            return resp.ok ? await resp.json() : [];
+        },
+        async submitReview(cardId, rating) {
+            return await fetch('/api/srs/review', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ card_id: cardId, rating })
+            });
+        }
+    },
+
+    // Bookshelf & Reader
+    books: {
+        async getAll() {
+            const resp = await fetch('/api/books');
+            return resp.ok ? await resp.json() : [];
+        },
+        async get(id) {
+            const resp = await fetch(`/api/books/${id}`);
+            if (resp.ok) return await resp.json();
+            throw new Error(`Failed to load book ${id}: ${resp.status}`);
+        },
+        async uploadFile(formData) {
+            return await fetch('/api/books', {
+                method: 'POST',
+                body: formData
+            });
+        },
+        async createManual(payload) {
+            return await fetch('/api/books', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+        },
+        async delete(id) {
+            return await fetch(`/api/books/${id}`, { method: 'DELETE' });
+        },
+        async saveProgress(bookId, payload) {
+            return await fetch(`/api/books/${bookId}/progress`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+        }
+    }
+};

app/static/js/modules/dictionary.js

@@ -0,0 +1,732 @@
+// =======================================================================
+// Notes Application - Dictionary Module (Native ES Module)
+// =======================================================================
+
+import { api } from './api.js';
+import { escapeHtml, showToast, openModal, closeModal } from './ui.js';
+
+export let allCards = [];
+export let collectionsList = ['General', 'Разговорный', 'Работа & IT', 'Книги & Сериалы', 'Идиомы'];
+export let selectedTag = '';
+export let selectedCollection = '';
+export let searchQuery = '';
+
+let currentLookupData = null;
+let foundDuplicateCard = null;
+let duplicateCheckTimer = null;
+let isBatchMode = false;
+let selectedIds = new Set();
+
+export function getAllCards() {
+    return allCards;
+}
+
+export function initDictionary() {
+    // Elements - Search & Capture
+    const termInput = document.getElementById('term-input');
+    const clearSearchBtn = document.getElementById('clear-search-btn');
+    const translateBtn = document.getElementById('translate-btn');
+    const duplicateWarningBox = document.getElementById('duplicate-warning-box');
+    const dupTermLabel = document.getElementById('dup-term-label');
+    const dupTransLabel = document.getElementById('dup-trans-label');
+    const dupOpenBtn = document.getElementById('dup-open-btn');
+
+    const lookupCard = document.getElementById('lookup-card');
+    const resTerm = document.getElementById('res-term');
+    const resPhonetic = document.getElementById('res-phonetic');
+    const resInLibrary = document.getElementById('res-in-library');
+    const audioPlayBtn = document.getElementById('audio-play-btn');
+    const resPos = document.getElementById('res-pos');
+    const resDefinitionWrap = document.getElementById('res-definition-wrap');
+    const resDefinition = document.getElementById('res-definition');
+    const editTranslation = document.getElementById('edit-translation');
+    const editContext = document.getElementById('edit-context');
+    const editCollection = document.getElementById('edit-collection');
+    const collectionsDatalist = document.getElementById('collections-datalist');
+    const editTags = document.getElementById('edit-tags');
+    const editNotes = document.getElementById('edit-notes');
+    const saveCardBtn = document.getElementById('save-card-btn');
+
+    // Elements - Vocabulary List
+    const filterInput = document.getElementById('filter-input');
+    const cardsCountLabel = document.getElementById('cards-count-label');
+    const collectionsFilterBar = document.getElementById('collections-filter-bar');
+    const newCollectionBtn = document.getElementById('new-collection-btn');
+    const tagsFilterBar = document.getElementById('tags-filter-bar');
+    const cardsList = document.getElementById('cards-list');
+    const emptyState = document.getElementById('empty-state');
+
+    // Elements - Batch Action Bar
+    const batchToggleBtn = document.getElementById('batch-toggle-btn');
+    const batchActionBar = document.getElementById('batch-action-bar');
+    const batchSelectAll = document.getElementById('batch-select-all');
+    const batchCountLabel = document.getElementById('batch-count-label');
+    const batchMoveBtn = document.getElementById('batch-move-btn');
+    const batchTagBtn = document.getElementById('batch-tag-btn');
+    const batchDeleteBtn = document.getElementById('batch-delete-btn');
+    const batchCancelBtn = document.getElementById('batch-cancel-btn');
+
+    // Elements - Modals
+    const editModal = document.getElementById('edit-card-modal');
+    const closeModalBtn = document.getElementById('close-modal-btn');
+    const modalCancelBtn = document.getElementById('modal-cancel-btn');
+    const modalSaveBtn = document.getElementById('modal-save-btn');
+    const modalCardId = document.getElementById('modal-card-id');
+    const modalTerm = document.getElementById('modal-term');
+    const modalTranslation = document.getElementById('modal-translation');
+    const modalContext = document.getElementById('modal-context');
+    const modalPhonetic = document.getElementById('modal-phonetic');
+    const modalPos = document.getElementById('modal-pos');
+    const modalDef = document.getElementById('modal-def');
+    const modalCollection = document.getElementById('modal-collection');
+    const modalTags = document.getElementById('modal-tags');
+    const modalNotes = document.getElementById('modal-notes');
+
+    const newColModal = document.getElementById('new-col-modal');
+    const newColNameInput = document.getElementById('new-col-name-input');
+    const closeNewColModalBtn = document.getElementById('close-new-col-modal-btn');
+    const newColCancelBtn = document.getElementById('new-col-cancel-btn');
+    const newColSaveBtn = document.getElementById('new-col-save-btn');
+
+    const moveColModal = document.getElementById('move-col-modal');
+    const moveColInput = document.getElementById('move-col-input');
+    const moveColQuickList = document.getElementById('move-col-quick-list');
+    const closeMoveModalBtn = document.getElementById('close-move-modal-btn');
+    const moveColCancelBtn = document.getElementById('move-col-cancel-btn');
+    const moveColConfirmBtn = document.getElementById('move-col-confirm-btn');
+
+    const exportOpenBtn = document.getElementById('export-open-btn');
+    const exportModal = document.getElementById('export-modal');
+    const closeExportModalBtn = document.getElementById('close-export-modal-btn');
+    const exportCancelBtn = document.getElementById('export-cancel-btn');
+
+    // -----------------------------------------------------------------------
+    // Duplicate Detection & Search Term
+    // -----------------------------------------------------------------------
+    termInput.addEventListener('input', () => {
+        const val = termInput.value.trim();
+        clearSearchBtn.classList.toggle('hidden', val.length === 0);
+
+        clearTimeout(duplicateCheckTimer);
+        if (val.length >= 2) {
+            duplicateCheckTimer = setTimeout(async () => {
+                try {
+                    const resp = await fetch(`/api/cards/check-duplicate?term=${encodeURIComponent(val)}`);
+                    if (resp.ok) {
+                        const res = await resp.json();
+                        if (res.exists && res.card) {
+                            foundDuplicateCard = res.card;
+                            dupTermLabel.textContent = res.card.term;
+                            dupTransLabel.textContent = res.card.translation;
+                            duplicateWarningBox.classList.remove('hidden');
+                        } else {
+                            foundDuplicateCard = null;
+                            duplicateWarningBox.classList.add('hidden');
+                        }
+                    }
+                } catch (e) {}
+            }, 300);
+        } else {
+            foundDuplicateCard = null;
+            duplicateWarningBox.classList.add('hidden');
+        }
+    });
+
+    dupOpenBtn.addEventListener('click', () => {
+        if (foundDuplicateCard) {
+            openEditModal(foundDuplicateCard);
+        }
+    });
+
+    clearSearchBtn.addEventListener('click', () => {
+        termInput.value = '';
+        clearSearchBtn.classList.add('hidden');
+        duplicateWarningBox.classList.add('hidden');
+        lookupCard.classList.add('hidden');
+        termInput.focus();
+    });
+
+    // -----------------------------------------------------------------------
+    // Dictionary Lookup & Capture
+    // -----------------------------------------------------------------------
+    translateBtn.addEventListener('click', performLookup);
+    termInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            performLookup();
+        } else if (e.key === 'Escape') {
+            termInput.value = '';
+            clearSearchBtn.classList.add('hidden');
+            duplicateWarningBox.classList.add('hidden');
+            lookupCard.classList.add('hidden');
+        }
+    });
+
+    async function performLookup() {
+        const term = termInput.value.trim();
+        if (!term) return;
+
+        translateBtn.disabled = true;
+        translateBtn.textContent = 'Ищем...';
+
+        try {
+            const data = await api.cards.lookup(term);
+            currentLookupData = data;
+            displayLookupResult(data);
+        } catch (e) {
+            console.error('Lookup error:', e);
+            showToast('Не удалось получить перевод', 'error');
+        } finally {
+            translateBtn.disabled = false;
+            translateBtn.textContent = 'Перевести';
+        }
+    }
+
+    function displayLookupResult(data) {
+        resTerm.textContent = data.term;
+        resPhonetic.textContent = data.phonetic || '';
+        resPhonetic.style.display = data.phonetic ? 'inline-block' : 'none';
+        resPos.textContent = data.part_of_speech || 'Phrase';
+        audioPlayBtn.classList.add('hidden');
+
+        if (data.definition_en) {
+            resDefinition.textContent = data.definition_en;
+            resDefinitionWrap.classList.remove('hidden');
+        } else {
+            resDefinitionWrap.classList.add('hidden');
+        }
+
+        const inLib = Boolean(data.in_library || foundDuplicateCard);
+        if (resInLibrary) {
+            resInLibrary.classList.toggle('hidden', !inLib);
+        }
+
+        if (inLib) {
+            saveCardBtn.innerHTML = '⭐ Обновить в словаре <span class="btn-subtext">(Ctrl + Enter)</span>';
+            const lib = data.library_card || foundDuplicateCard;
+            if (lib) {
+                if (lib.translation) editTranslation.value = lib.translation;
+                if (lib.context_sentence) editContext.value = lib.context_sentence;
+                if (lib.collection) editCollection.value = lib.collection;
+                if (lib.tags) editTags.value = lib.tags;
+                if (lib.notes) editNotes.value = lib.notes;
+            } else {
+                editTranslation.value = data.translation || '';
+            }
+        } else {
+            saveCardBtn.innerHTML = '💾 Сохранить в словарь <span class="btn-subtext">(Ctrl + Enter)</span>';
+            editTranslation.value = data.translation || '';
+            editContext.value = '';
+            editNotes.value = '';
+            editCollection.value = selectedCollection || 'General';
+        }
+
+        lookupCard.classList.remove('hidden');
+        editTranslation.focus();
+    }
+
+    // Save Card Action
+    saveCardBtn.addEventListener('click', saveNewCard);
+    document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            if (!lookupCard.classList.contains('hidden')) {
+                e.preventDefault();
+                saveNewCard();
+            }
+        }
+    });
+
+    async function saveNewCard() {
+        if (!currentLookupData) return;
+        const term = currentLookupData.term.trim();
+        const translation = editTranslation.value.trim();
+        if (!translation) {
+            alert('Пожалуйста, укажите русский перевод');
+            editTranslation.focus();
+            return;
+        }
+
+        const payload = {
+            term: term,
+            translation: translation,
+            context_sentence: editContext.value.trim(),
+            phonetic: currentLookupData.phonetic || '',
+            audio_url: currentLookupData.audio_url || '',
+            part_of_speech: currentLookupData.part_of_speech || '',
+            definition_en: currentLookupData.definition_en || '',
+            tags: editTags.value.trim() || 'general',
+            notes: editNotes.value.trim(),
+            collection: editCollection.value.trim() || 'General',
+        };
+
+        saveCardBtn.disabled = true;
+        saveCardBtn.textContent = 'Сохраняем...';
+
+        try {
+            const resp = await api.cards.create(payload);
+            if (resp.ok) {
+                termInput.value = '';
+                clearSearchBtn.classList.add('hidden');
+                duplicateWarningBox.classList.add('hidden');
+                lookupCard.classList.add('hidden');
+                currentLookupData = null;
+
+                showToast(`Слово "${term}" сохранено в словарь!`, 'success');
+                await loadInitialData();
+                termInput.focus();
+            } else {
+                const err = await resp.json();
+                alert('Ошибка сохранения: ' + (err.detail || 'Не удалось сохранить'));
+            }
+        } catch (e) {
+            alert('Сетевая ошибка при сохранении');
+        } finally {
+            saveCardBtn.disabled = false;
+            saveCardBtn.innerHTML = '💾 Сохранить в словарь <span class="btn-subtext">(Ctrl + Enter)</span>';
+        }
+    }
+
+    // -----------------------------------------------------------------------
+    // Cards List & Filtering
+    // -----------------------------------------------------------------------
+    filterInput.addEventListener('input', () => {
+        searchQuery = filterInput.value.trim();
+        fetchCards();
+    });
+
+    function renderCollectionsFilter(cols) {
+        collectionsFilterBar.innerHTML = '';
+        const allBtn = document.createElement('button');
+        allBtn.className = `col-chip ${selectedCollection === '' ? 'active' : ''}`;
+        allBtn.textContent = 'Все коллекции';
+        allBtn.onclick = () => {
+            selectedCollection = '';
+            updateFilterChips();
+            fetchCards();
+        };
+        collectionsFilterBar.appendChild(allBtn);
+
+        cols.forEach(c => {
+            const chip = document.createElement('button');
+            chip.className = `col-chip ${selectedCollection === c.name ? 'active' : ''}`;
+            chip.textContent = `${c.name} (${c.count})`;
+            chip.onclick = () => {
+                selectedCollection = c.name;
+                updateFilterChips();
+                fetchCards();
+            };
+            collectionsFilterBar.appendChild(chip);
+        });
+    }
+
+    function renderTagsFilter(tags) {
+        tagsFilterBar.innerHTML = '';
+        const allBtn = document.createElement('button');
+        allBtn.className = `filter-chip ${selectedTag === '' ? 'active' : ''}`;
+        allBtn.textContent = 'Все теги';
+        allBtn.onclick = () => {
+            selectedTag = '';
+            updateFilterChips();
+            fetchCards();
+        };
+        tagsFilterBar.appendChild(allBtn);
+
+        tags.slice(0, 15).forEach(t => {
+            const chip = document.createElement('button');
+            chip.className = `filter-chip ${selectedTag === t.tag ? 'active' : ''}`;
+            chip.textContent = `#${t.tag} (${t.count})`;
+            chip.onclick = () => {
+                selectedTag = selectedTag === t.tag ? '' : t.tag;
+                updateFilterChips();
+                fetchCards();
+            };
+            tagsFilterBar.appendChild(chip);
+        });
+    }
+
+    function updateFilterChips() {
+        document.querySelectorAll('.col-chip').forEach(el => {
+            el.classList.toggle('active', el.textContent.startsWith(selectedCollection || 'Все коллекции'));
+        });
+        document.querySelectorAll('.filter-chip').forEach(el => {
+            el.classList.toggle('active', el.textContent.startsWith(`#${selectedTag}`) || (!selectedTag && el.textContent.startsWith('Все теги')));
+        });
+    }
+
+    function renderCardsList() {
+        cardsCountLabel.textContent = `(${allCards.length} записей)`;
+        cardsList.innerHTML = '';
+
+        if (allCards.length === 0) {
+            emptyState.classList.remove('hidden');
+            cardsList.appendChild(emptyState);
+            return;
+        }
+
+        emptyState.classList.add('hidden');
+
+        allCards.forEach(c => {
+            const cardEl = document.createElement('div');
+            cardEl.className = `vocab-card ${isBatchMode && selectedIds.has(c.id) ? 'is-selected' : ''}`;
+
+            const srsStateClass = c.srs_state === 'mastered' ? 'dot-mastered' : (c.srs_state === 'review' ? 'dot-review' : (c.srs_state === 'learning' ? 'dot-learning' : 'dot-new'));
+
+            cardEl.innerHTML = `
+                <div class="card-top">
+                    <div class="card-term-group">
+                        ${isBatchMode ? `<input type="checkbox" class="card-select-checkbox batch-card-check" data-id="${c.id}" ${selectedIds.has(c.id) ? 'checked' : ''}>` : ''}
+                        <span class="dot ${srsStateClass}" title="SRS статус: ${c.srs_state || 'new'}"></span>
+                        <span class="card-term">${escapeHtml(c.term)}</span>
+                        ${c.phonetic ? `<span class="card-phonetic">${escapeHtml(c.phonetic)}</span>` : ''}
+                        ${c.part_of_speech ? `<span class="card-pos">${escapeHtml(c.part_of_speech)}</span>` : ''}
+                    </div>
+                    <div class="card-actions">
+                        <button class="icon-btn edit-card-btn" data-id="${c.id}" title="Редактировать">✏️</button>
+                        <button class="icon-btn delete-card-btn" data-id="${c.id}" title="Удалить">🗑️</button>
+                    </div>
+                </div>
+                <div class="card-translation">${escapeHtml(c.translation)}</div>
+                ${c.context_sentence ? `<div class="card-context">“${escapeHtml(c.context_sentence)}”</div>` : ''}
+                <div class="card-bottom">
+                    <div class="card-tags">
+                        <span class="card-tag">📁 ${escapeHtml(c.collection || 'General')}</span>
+                        ${c.tags ? c.tags.split(',').map(t => `<span class="card-tag">#${escapeHtml(t.trim())}</span>`).join(' ') : ''}
+                    </div>
+                    ${c.notes ? `<div class="card-notes">💡 ${escapeHtml(c.notes)}</div>` : ''}
+                </div>
+            `;
+
+            // Edit button
+            cardEl.querySelector('.edit-card-btn').addEventListener('click', (e) => {
+                e.stopPropagation();
+                openEditModal(c);
+            });
+
+            // Delete button
+            cardEl.querySelector('.delete-card-btn').addEventListener('click', async (e) => {
+                e.stopPropagation();
+                if (confirm(`Удалить слово "${c.term}" из словаря?`)) {
+                    await api.cards.delete(c.id);
+                    showToast(`Слово "${c.term}" удалено`, 'info');
+                    await loadInitialData();
+                }
+            });
+
+            // Batch selection click
+            if (isBatchMode) {
+                cardEl.addEventListener('click', () => {
+                    toggleBatchSelection(c.id);
+                });
+            }
+
+            cardsList.appendChild(cardEl);
+        });
+    }
+
+    // -----------------------------------------------------------------------
+    // Batch Operations
+    // -----------------------------------------------------------------------
+    batchToggleBtn.addEventListener('click', () => {
+        isBatchMode = !isBatchMode;
+        batchToggleBtn.textContent = isBatchMode ? '✓ Завершить выбор' : '☑️ Выбрать';
+        batchToggleBtn.classList.toggle('btn-primary', isBatchMode);
+        batchToggleBtn.classList.toggle('btn-outline', !isBatchMode);
+        batchActionBar.classList.toggle('hidden', !isBatchMode);
+        if (!isBatchMode) {
+            selectedIds.clear();
+        }
+        renderCardsList();
+        updateBatchCount();
+    });
+
+    batchCancelBtn.addEventListener('click', () => {
+        isBatchMode = false;
+        batchToggleBtn.textContent = '☑️ Выбрать';
+        batchToggleBtn.classList.remove('btn-primary');
+        batchToggleBtn.classList.add('btn-outline');
+        batchActionBar.classList.add('hidden');
+        selectedIds.clear();
+        renderCardsList();
+    });
+
+    function toggleBatchSelection(id) {
+        if (selectedIds.has(id)) selectedIds.delete(id);
+        else selectedIds.add(id);
+        updateBatchCount();
+        renderCardsList();
+    }
+
+    batchSelectAll.addEventListener('change', () => {
+        if (batchSelectAll.checked) {
+            allCards.forEach(c => selectedIds.add(c.id));
+        } else {
+            selectedIds.clear();
+        }
+        updateBatchCount();
+        renderCardsList();
+    });
+
+    function updateBatchCount() {
+        batchCountLabel.textContent = `Выбрано: ${selectedIds.size}`;
+        batchSelectAll.checked = selectedIds.size > 0 && selectedIds.size === allCards.length;
+    }
+
+    batchDeleteBtn.addEventListener('click', async () => {
+        if (selectedIds.size === 0) return;
+        if (confirm(`Удалить выбранные карточки (${selectedIds.size} шт.)?`)) {
+            await api.cards.batch({
+                card_ids: Array.from(selectedIds),
+                action: 'delete'
+            });
+            showToast(`Удалено карточек: ${selectedIds.size}`, 'info');
+            selectedIds.clear();
+            await loadInitialData();
+        }
+    });
+
+    batchMoveBtn.addEventListener('click', () => {
+        if (selectedIds.size === 0) {
+            alert('Сначала выберите хотя бы одну карточку');
+            return;
+        }
+        openModal(moveColModal);
+    });
+
+    batchTagBtn.addEventListener('click', async () => {
+        if (selectedIds.size === 0) return;
+        const tagVal = prompt('Введите тег(и) для добавления (через запятую):');
+        if (tagVal && tagVal.trim()) {
+            await api.cards.batch({
+                card_ids: Array.from(selectedIds),
+                action: 'add_tags',
+                value: tagVal.trim()
+            });
+            showToast(`Теги добавлены`, 'success');
+            await loadInitialData();
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // Edit Card Modal
+    // -----------------------------------------------------------------------
+    function openEditModal(card) {
+        modalCardId.value = card.id;
+        modalTerm.value = card.term;
+        modalTranslation.value = card.translation;
+        modalContext.value = card.context_sentence || '';
+        modalPhonetic.value = card.phonetic || '';
+        modalPos.value = card.part_of_speech || '';
+        modalDef.value = card.definition_en || '';
+        modalCollection.value = card.collection || 'General';
+        modalTags.value = card.tags || '';
+        modalNotes.value = card.notes || '';
+        openModal(editModal);
+    }
+
+    closeModalBtn.addEventListener('click', () => closeModal(editModal));
+    modalCancelBtn.addEventListener('click', () => closeModal(editModal));
+
+    modalSaveBtn.addEventListener('click', async () => {
+        const id = modalCardId.value;
+        const payload = {
+            term: modalTerm.value.trim(),
+            translation: modalTranslation.value.trim(),
+            context_sentence: modalContext.value.trim(),
+            phonetic: modalPhonetic.value.trim(),
+            part_of_speech: modalPos.value.trim(),
+            definition_en: modalDef.value.trim(),
+            collection: modalCollection.value.trim() || 'General',
+            tags: modalTags.value.trim(),
+            notes: modalNotes.value.trim(),
+        };
+
+        const resp = await api.cards.update(id, payload);
+        if (resp.ok) {
+            closeModal(editModal);
+            showToast('Карточка успешно обновлена', 'success');
+            await loadInitialData();
+        } else {
+            alert('Ошибка при сохранении карточки');
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // Export Modal
+    // -----------------------------------------------------------------------
+    if (exportOpenBtn) {
+        exportOpenBtn.addEventListener('click', () => openModal(exportModal));
+    }
+    closeExportModalBtn.addEventListener('click', () => closeModal(exportModal));
+    exportCancelBtn.addEventListener('click', () => closeModal(exportModal));
+
+    document.querySelectorAll('.export-tile').forEach(tile => {
+        tile.addEventListener('click', () => {
+            const format = tile.dataset.format;
+            let url = `/api/export/${format}`;
+            if (selectedCollection) url += `?collection=${encodeURIComponent(selectedCollection)}`;
+            window.location.href = url;
+        });
+    });
+
+    // -----------------------------------------------------------------------
+    // Collections Management
+    // -----------------------------------------------------------------------
+    newCollectionBtn.addEventListener('click', () => {
+        openModal(newColModal);
+        newColNameInput.value = '';
+        newColNameInput.focus();
+    });
+
+    closeNewColModalBtn.addEventListener('click', () => closeModal(newColModal));
+    newColCancelBtn.addEventListener('click', () => closeModal(newColModal));
+
+    newColSaveBtn.addEventListener('click', () => {
+        const name = newColNameInput.value.trim();
+        if (name) {
+            selectedCollection = name;
+            closeModal(newColModal);
+            fetchCards();
+        }
+    });
+
+    closeMoveModalBtn.addEventListener('click', () => closeModal(moveColModal));
+    moveColCancelBtn.addEventListener('click', () => closeModal(moveColModal));
+
+    moveColConfirmBtn.addEventListener('click', async () => {
+        const col = moveColInput.value.trim();
+        if (col && selectedIds.size > 0) {
+            await api.cards.batch({
+                card_ids: Array.from(selectedIds),
+                action: 'set_collection',
+                value: col,
+            });
+            closeModal(moveColModal);
+            selectedIds.clear();
+            showToast(`Перемещено в "${col}"`, 'success');
+            await loadInitialData();
+        }
+    });
+
+    function populateDatalists() {
+        collectionsDatalist.innerHTML = '';
+        const dl = document.getElementById('move-collections-datalist');
+        if (dl) dl.innerHTML = '';
+
+        collectionsList.forEach(c => {
+            const opt = document.createElement('option');
+            opt.value = c;
+            collectionsDatalist.appendChild(opt);
+            if (dl) dl.appendChild(opt.cloneNode(true));
+        });
+
+        if (moveColQuickList) {
+            moveColQuickList.innerHTML = '';
+            collectionsList.forEach(c => {
+                const btn = document.createElement('button');
+                btn.className = 'btn btn-xs btn-outline';
+                btn.textContent = c;
+                btn.onclick = () => { moveColInput.value = c; };
+                moveColQuickList.appendChild(btn);
+            });
+        }
+    }
+
+    // -----------------------------------------------------------------------
+    // Data Loading Functions
+    // -----------------------------------------------------------------------
+    async function fetchCards() {
+        try {
+            const params = { limit: 500 };
+            if (selectedCollection) params.collection = selectedCollection;
+            if (selectedTag) params.tag = selectedTag;
+            if (searchQuery) params.search = searchQuery;
+
+            const data = await api.cards.getAll(params);
+            allCards = data.cards || [];
+            renderCardsList();
+        } catch (e) {
+            console.error('Error fetching cards:', e);
+        }
+    }
+
+    async function fetchCollections() {
+        try {
+            const cols = await api.collections.getAll();
+            collectionsList = cols.map(c => c.name);
+            renderCollectionsFilter(cols);
+            populateDatalists();
+        } catch (e) {
+            console.error('Error fetching collections:', e);
+        }
+    }
+
+    async function fetchTags() {
+        try {
+            const tags = await api.tags.getAll();
+            renderTagsFilter(tags);
+        } catch (e) {
+            console.error('Error fetching tags:', e);
+        }
+    }
+
+    async function fetchStats() {
+        try {
+            const data = await api.stats.getStats();
+            if (data) {
+                const statTotal = document.getElementById('stat-total');
+                const statToday = document.getElementById('stat-today');
+                if (statTotal) statTotal.textContent = data.total_cards;
+                if (statToday) statToday.textContent = `+${data.today_added}`;
+            }
+        } catch (e) {}
+    }
+
+    async function fetchSrsStats() {
+        try {
+            const stats = await api.stats.getSrsStats();
+            if (stats) {
+                const due = stats.due_cards || 0;
+                const srsBadge = document.getElementById('srs-badge');
+                if (srsBadge) srsBadge.textContent = due;
+                const tabSrsBadge = document.getElementById('tab-srs-badge');
+                if (tabSrsBadge) {
+                    tabSrsBadge.textContent = due;
+                    tabSrsBadge.classList.toggle('hidden', due === 0);
+                }
+            }
+        } catch (e) {}
+    }
+
+    async function loadInitialData() {
+        await Promise.all([
+            fetchCards(),
+            fetchCollections(),
+            fetchTags(),
+            fetchStats(),
+            fetchSrsStats(),
+        ]);
+    }
+
+    // Attach to module exports
+    initDictionary.fetchCards = fetchCards;
+    initDictionary.loadInitialData = loadInitialData;
+    initDictionary.openEditModal = openEditModal;
+}
+
+export async function loadInitialData() {
+    if (initDictionary.loadInitialData) {
+        return await initDictionary.loadInitialData();
+    }
+}
+
+export async function fetchCards() {
+    if (initDictionary.fetchCards) {
+        return await initDictionary.fetchCards();
+    }
+}
+
+export function openEditModal(card) {
+    if (initDictionary.openEditModal) {
+        initDictionary.openEditModal(card);
+    }
+}

app/static/js/modules/srs.js

@@ -0,0 +1,735 @@
+// =======================================================================
+// Notes Application - SRS Training & Analytics Module (Native ES Module)
+// =======================================================================
+
+import { api } from './api.js';
+import { escapeHtml, escapeRegex, shuffleArray, showToast, openModal, closeModal, playAudio } from './ui.js';
+import { getAllCards } from './dictionary.js';
+
+let srsQueue = [];
+let srsCurrentIndex = 0;
+let srsCurrentMode = 'flashcards'; // 'flashcards' | 'quiz' | 'typing' | 'cloze' | 'dictation'
+let srsDirection = 'en-ru';
+let srsSmartMix = true;
+let srsSessionRatings = [];
+let srsIsFlipped = false;
+let quizCurrentOptions = [];
+let quizAnswered = false;
+
+export function initSrs() {
+    const srsView = document.getElementById('srs-view');
+    const srsExitBtn = document.getElementById('srs-exit-btn');
+    const srsTabs = document.querySelectorAll('.srs-tab');
+    const srsProgressFill = document.getElementById('srs-progress-fill');
+    const srsCounter = document.getElementById('srs-counter');
+    const srsDirBtn = document.getElementById('srs-dir-btn');
+    const srsDirLabel = document.getElementById('srs-dir-label');
+    const srsMixBtn = document.getElementById('srs-mix-btn');
+    const srsMixLabel = document.getElementById('srs-mix-label');
+
+    const srsLoading = document.getElementById('srs-loading');
+    const srsEmpty = document.getElementById('srs-empty');
+    const srsTrainAllBtn = document.getElementById('srs-train-all-btn');
+    const srsEmptyBackBtn = document.getElementById('srs-empty-back-btn');
+
+    // Mode 1: Flashcards
+    const srsModeFlashcards = document.getElementById('srs-mode-flashcards');
+    const flashcardFlipWrap = document.getElementById('flashcard-flip-wrap');
+    const flashcardInner = document.getElementById('flashcard-inner');
+    const fcFrontDirBadge = document.getElementById('fc-front-dir-badge');
+    const fcFrontPos = document.getElementById('fc-front-pos');
+    const fcFrontMain = document.getElementById('fc-front-main');
+    const fcFrontPhoneticWrap = document.getElementById('fc-front-phonetic-wrap');
+    const fcFrontPhonetic = document.getElementById('fc-front-phonetic');
+    const fcFrontAudioBtn = document.getElementById('fc-front-audio-btn');
+    const fcHintBtn = document.getElementById('fc-hint-btn');
+    const fcHintBox = document.getElementById('fc-hint-box');
+    const fcBackPos = document.getElementById('fc-back-pos');
+    const fcBackTerm = document.getElementById('fc-back-term');
+    const fcBackAudioBtn = document.getElementById('fc-back-audio-btn');
+    const fcBackTranslation = document.getElementById('fc-back-translation');
+    const fcBackDefBox = document.getElementById('fc-back-def-box');
+    const fcBackDef = document.getElementById('fc-back-def');
+    const fcBackContextBox = document.getElementById('fc-back-context-box');
+    const fcBackContext = document.getElementById('fc-back-context');
+    const fcBackNotesBox = document.getElementById('fc-back-notes-box');
+    const fcBackNotes = document.getElementById('fc-back-notes');
+    const fcFlipBtnWrap = document.getElementById('fc-flip-btn-wrap');
+    const fcFlipBtn = document.getElementById('fc-flip-btn');
+    const fcRatingBar = document.getElementById('fc-rating-bar');
+
+    // Mode 2: Multiple Choice Quiz
+    const srsModeQuiz = document.getElementById('srs-mode-quiz');
+    const quizPos = document.getElementById('quiz-pos');
+    const quizTermDisplay = document.getElementById('quiz-term-display');
+    const quizPhoneticDisplay = document.getElementById('quiz-phonetic-display');
+    const quizContextHint = document.getElementById('quiz-context-hint');
+    const quizAudioBtn = document.getElementById('quiz-audio-btn');
+    const quizOptionsGrid = document.getElementById('quiz-options-grid');
+    const quizFeedbackBox = document.getElementById('quiz-feedback-box');
+    const quizDetailsBox = document.getElementById('quiz-details-box');
+    const quizNextBar = document.getElementById('quiz-next-bar');
+    const quizNextBtn = document.getElementById('quiz-next-btn');
+
+    // Mode 3: Active Typing
+    const srsModeTyping = document.getElementById('srs-mode-typing');
+    const typingPos = document.getElementById('typing-pos');
+    const typingPromptRu = document.getElementById('typing-prompt-ru');
+    const typingContextHint = document.getElementById('typing-context-hint');
+    const typingForm = document.getElementById('typing-form');
+    const typingInput = document.getElementById('typing-input');
+    const typingFeedbackBox = document.getElementById('typing-feedback-box');
+    const typingDetailsBox = document.getElementById('typing-details-box');
+    const typingRatingBar = document.getElementById('typing-rating-bar');
+
+    // Mode 4: Cloze Deletion
+    const srsModeCloze = document.getElementById('srs-mode-cloze');
+    const clozePos = document.getElementById('cloze-pos');
+    const clozeTargetTranslation = document.getElementById('cloze-target-translation');
+    const clozeSentenceDisplay = document.getElementById('cloze-sentence-display');
+    const clozeForm = document.getElementById('cloze-form');
+    const clozeInput = document.getElementById('cloze-input');
+    const clozeFeedbackBox = document.getElementById('cloze-feedback-box');
+    const clozeDetailsBox = document.getElementById('cloze-details-box');
+    const clozeRatingBar = document.getElementById('cloze-rating-bar');
+
+    // Mode 5: Dictation
+    const srsModeDictation = document.getElementById('srs-mode-dictation');
+    const dictationBigPlayBtn = document.getElementById('dictation-big-play-btn');
+    const dictationReplayBtn = document.getElementById('dictation-replay-btn');
+    const dictationToggleHintBtn = document.getElementById('dictation-toggle-hint-btn');
+    const dictationHintText = document.getElementById('dictation-hint-text');
+    const dictationForm = document.getElementById('dictation-form');
+    const dictationInput = document.getElementById('dictation-input');
+    const dictationFeedbackBox = document.getElementById('dictation-feedback-box');
+    const dictationDetailsBox = document.getElementById('dictation-details-box');
+    const dictationRatingBar = document.getElementById('dictation-rating-bar');
+
+    // Summary
+    const srsSummary = document.getElementById('srs-summary');
+    const sumCount = document.getElementById('sum-count');
+    const sumRetention = document.getElementById('sum-retention');
+    const sumRepeatBtn = document.getElementById('sum-repeat-btn');
+    const sumReturnBtn = document.getElementById('sum-return-btn');
+
+    // Stats & Heatmap Modal
+    const statsOpenBtn = document.getElementById('stats-open-btn');
+    const mobileStatsBtn = document.getElementById('mobile-stats-btn');
+    const statsModal = document.getElementById('stats-modal');
+    const closeStatsModalBtn = document.getElementById('close-stats-modal-btn');
+    const closeStatsBtn = document.getElementById('close-stats-btn');
+    const kpiCurrentStreak = document.getElementById('kpi-current-streak');
+    const kpiLongestStreak = document.getElementById('kpi-longest-streak');
+    const kpiRetentionRate = document.getElementById('kpi-retention-rate');
+    const kpiTotalReviews = document.getElementById('kpi-total-reviews');
+    const kpiTotalWords = document.getElementById('kpi-total-words');
+    const kpiTodayAdded = document.getElementById('kpi-today-added');
+    const kpiCefrLevel = document.getElementById('kpi-cefr-level');
+    const kpiCefrDesc = document.getElementById('kpi-cefr-desc');
+    const cntMastered = document.getElementById('cnt-mastered');
+    const cntReview = document.getElementById('cnt-review');
+    const cntLearning = document.getElementById('cnt-learning');
+    const cntNew = document.getElementById('cnt-new');
+    const cntLeeches = document.getElementById('cnt-leeches');
+    const progMastered = document.getElementById('prog-mastered');
+    const progReview = document.getElementById('prog-review');
+    const progLearning = document.getElementById('prog-learning');
+    const progNew = document.getElementById('prog-new');
+    const heatmapGrid = document.getElementById('heatmap-grid');
+
+    // -----------------------------------------------------------------------
+    // View & Queue Controls
+    // -----------------------------------------------------------------------
+    srsExitBtn.addEventListener('click', () => {
+        window.location.hash = '#dictionary';
+    });
+
+    srsMixBtn.addEventListener('click', () => {
+        srsSmartMix = !srsSmartMix;
+        srsMixLabel.textContent = srsSmartMix ? '🎲 Микс дня: ВКЛ' : '📚 Обычная очередь';
+        srsMixBtn.classList.toggle('text-success', srsSmartMix);
+        startSrsTrainingSession(false);
+    });
+
+    srsTabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            srsTabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            srsCurrentMode = tab.dataset.mode;
+            renderSrsCurrentCard();
+        });
+    });
+
+    srsDirBtn.addEventListener('click', () => {
+        srsDirection = srsDirection === 'en-ru' ? 'ru-en' : 'en-ru';
+        srsDirLabel.textContent = srsDirection === 'en-ru' ? 'EN ➔ RU' : 'RU ➔ EN';
+        renderSrsCurrentCard();
+    });
+
+    async function startSrsTrainingSession(forceAll = false, tagFilter = null) {
+        srsLoading.classList.remove('hidden');
+        srsEmpty.classList.add('hidden');
+        srsSummary.classList.add('hidden');
+        hideAllSrsModeContainers();
+
+        srsSessionRatings = [];
+        srsCurrentIndex = 0;
+
+        let queue = [];
+        try {
+            const data = await api.srs.getQueue(forceAll, tagFilter);
+            queue = data.cards || [];
+        } catch (e) {
+            console.error('SRS Queue error:', e);
+        }
+
+        const cards = getAllCards();
+        if (queue.length === 0 && forceAll && cards.length > 0) {
+            queue = [...cards];
+        }
+
+        srsLoading.classList.add('hidden');
+
+        if (queue.length === 0) {
+            srsEmpty.classList.remove('hidden');
+            return;
+        }
+
+        srsQueue = queue;
+        renderSrsCurrentCard();
+    }
+
+    function closeSrsView() {
+        window.location.hash = '#dictionary';
+    }
+
+    srsTrainAllBtn.addEventListener('click', () => startSrsTrainingSession(true));
+    srsEmptyBackBtn.addEventListener('click', closeSrsView);
+    sumRepeatBtn.addEventListener('click', () => startSrsTrainingSession(true));
+    sumReturnBtn.addEventListener('click', closeSrsView);
+
+    function hideAllSrsModeContainers() {
+        srsModeFlashcards.classList.add('hidden');
+        srsModeQuiz.classList.add('hidden');
+        srsModeTyping.classList.add('hidden');
+        srsModeCloze.classList.add('hidden');
+        srsModeDictation.classList.add('hidden');
+    }
+
+    function renderSrsCurrentCard() {
+        if (srsCurrentIndex >= srsQueue.length) {
+            showSrsSummary();
+            return;
+        }
+
+        srsEmpty.classList.add('hidden');
+        srsSummary.classList.add('hidden');
+        hideAllSrsModeContainers();
+
+        const total = srsQueue.length;
+        const currentNum = srsCurrentIndex + 1;
+        srsCounter.textContent = `Карточка ${currentNum} из ${total}`;
+        const pct = Math.round(((currentNum - 1) / total) * 100);
+        srsProgressFill.style.width = `${pct}%`;
+
+        const card = srsQueue[srsCurrentIndex];
+
+        if (srsCurrentMode === 'flashcards') {
+            renderFlashcardMode(card);
+        } else if (srsCurrentMode === 'quiz') {
+            renderQuizMode(card);
+        } else if (srsCurrentMode === 'typing') {
+            renderTypingMode(card);
+        } else if (srsCurrentMode === 'cloze') {
+            renderClozeMode(card);
+        } else if (srsCurrentMode === 'dictation') {
+            renderDictationMode(card);
+        }
+    }
+
+    // -----------------------------------------------------------------------
+    // Mode 1: Flashcards
+    // -----------------------------------------------------------------------
+    function renderFlashcardMode(card) {
+        srsModeFlashcards.classList.remove('hidden');
+        srsIsFlipped = false;
+        flashcardInner.classList.remove('is-flipped');
+        fcRatingBar.classList.add('hidden');
+        fcHintBox.classList.add('hidden');
+        fcFlipBtnWrap.style.display = 'block';
+
+        if (srsDirection === 'en-ru') {
+            fcFrontDirBadge.textContent = 'EN ➔ RU';
+            fcFrontMain.textContent = card.term;
+            fcFrontPos.textContent = card.part_of_speech || '';
+            fcFrontPos.style.display = card.part_of_speech ? 'inline-block' : 'none';
+
+            if (card.phonetic) {
+                fcFrontPhonetic.textContent = card.phonetic;
+                fcFrontPhoneticWrap.style.display = 'flex';
+            } else {
+                fcFrontPhoneticWrap.style.display = 'none';
+            }
+
+            fcHintBtn.style.display = card.context_sentence ? 'inline-flex' : 'none';
+            fcHintBox.textContent = card.context_sentence ? `“${card.context_sentence}”` : '';
+
+            fcBackTerm.textContent = card.term;
+            fcBackTranslation.textContent = card.translation;
+            fcBackPos.textContent = card.part_of_speech || '';
+            fcBackPos.style.display = card.part_of_speech ? 'inline-block' : 'none';
+        } else {
+            fcFrontDirBadge.textContent = 'RU ➔ EN';
+            fcFrontMain.textContent = card.translation;
+            fcFrontPos.textContent = card.part_of_speech || '';
+            fcFrontPhoneticWrap.style.display = 'none';
+            fcHintBtn.style.display = 'none';
+
+            fcBackTerm.textContent = card.term;
+            fcBackTranslation.textContent = card.translation;
+            fcBackPos.textContent = card.part_of_speech || '';
+        }
+
+        fcBackDef.textContent = card.definition_en || '';
+        fcBackDefBox.style.display = card.definition_en ? 'block' : 'none';
+        fcBackContext.textContent = card.context_sentence ? `“${card.context_sentence}”` : '';
+        fcBackContextBox.style.display = card.context_sentence ? 'block' : 'none';
+        fcBackNotes.textContent = card.notes || '';
+        fcBackNotesBox.style.display = card.notes ? 'block' : 'none';
+
+        fcFrontAudioBtn.style.display = 'none';
+        fcBackAudioBtn.style.display = 'none';
+    }
+
+    function flipFlashcard() {
+        if (srsIsFlipped) return;
+        srsIsFlipped = true;
+        flashcardInner.classList.add('is-flipped');
+        fcRatingBar.classList.remove('hidden');
+        fcFlipBtnWrap.style.display = 'none';
+    }
+
+    flashcardFlipWrap.addEventListener('click', flipFlashcard);
+    fcFlipBtn.addEventListener('click', flipFlashcard);
+    fcHintBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        fcHintBox.classList.toggle('hidden');
+    });
+
+    document.querySelectorAll('.btn-rate').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const rating = parseInt(btn.dataset.rating, 10);
+            await submitCardReview(rating);
+        });
+    });
+
+    async function submitCardReview(rating) {
+        const card = srsQueue[srsCurrentIndex];
+        if (!card) return;
+
+        srsSessionRatings.push(rating);
+
+        try {
+            await api.srs.submitReview(card.id, rating);
+        } catch (e) {
+            console.error('Review submission error:', e);
+        }
+
+        srsCurrentIndex++;
+        renderSrsCurrentCard();
+    }
+
+    // -----------------------------------------------------------------------
+    // Mode 2: Multiple Choice Quiz
+    // -----------------------------------------------------------------------
+    function renderQuizMode(card) {
+        srsModeQuiz.classList.remove('hidden');
+        quizAnswered = false;
+        quizFeedbackBox.classList.add('hidden');
+        quizDetailsBox.classList.add('hidden');
+        quizNextBar.classList.add('hidden');
+
+        quizPos.textContent = card.part_of_speech || '';
+        quizTermDisplay.textContent = card.term;
+        quizPhoneticDisplay.textContent = card.phonetic || '';
+        quizPhoneticDisplay.style.display = card.phonetic ? 'block' : 'none';
+
+        if (card.context_sentence) {
+            quizContextHint.textContent = `“${card.context_sentence}”`;
+            quizContextHint.classList.remove('hidden');
+        } else {
+            quizContextHint.classList.add('hidden');
+        }
+
+        quizAudioBtn.classList.add('hidden');
+
+        const correctText = card.translation;
+        const all = getAllCards();
+        const candidates = all
+            .filter(c => c.id !== card.id && c.translation && c.translation !== correctText)
+            .map(c => c.translation);
+
+        shuffleArray(candidates);
+        const options = [correctText, ...candidates.slice(0, 3)];
+        while (options.length < 4) {
+            options.push(`Вариант ${options.length + 1}`);
+        }
+        shuffleArray(options);
+        quizCurrentOptions = options;
+
+        quizOptionsGrid.innerHTML = '';
+        options.forEach((optText, idx) => {
+            const btn = document.createElement('button');
+            btn.className = 'quiz-option-btn';
+            btn.innerHTML = `
+                <span class="quiz-opt-num">${idx + 1}</span>
+                <span class="quiz-opt-text">${escapeHtml(optText)}</span>
+            `;
+            btn.onclick = () => handleQuizSelection(optText, correctText, card, btn);
+            quizOptionsGrid.appendChild(btn);
+        });
+    }
+
+    async function handleQuizSelection(selectedText, correctText, card, clickedBtn) {
+        if (quizAnswered) return;
+        quizAnswered = true;
+
+        const isCorrect = selectedText === correctText;
+        const allOptionBtns = quizOptionsGrid.querySelectorAll('.quiz-option-btn');
+
+        allOptionBtns.forEach(btn => {
+            btn.disabled = true;
+            const text = btn.querySelector('.quiz-opt-text').textContent;
+            if (text === correctText) {
+                btn.classList.add('opt-correct');
+            } else if (btn === clickedBtn && !isCorrect) {
+                btn.classList.add('opt-wrong');
+            }
+        });
+
+        if (card.audio_url) playAudio(card.audio_url);
+
+        if (isCorrect) {
+            quizFeedbackBox.className = 'trainer-feedback-box feedback-correct';
+            quizFeedbackBox.innerHTML = '🎉 <strong>Отлично! Правильный ответ.</strong>';
+            srsSessionRatings.push(4);
+            api.srs.submitReview(card.id, 4);
+        } else {
+            quizFeedbackBox.className = 'trainer-feedback-box feedback-wrong';
+            quizFeedbackBox.innerHTML = `❌ <strong>Ошибка!</strong> Правильно: <em>${escapeHtml(correctText)}</em>`;
+            srsSessionRatings.push(1);
+            api.srs.submitReview(card.id, 1);
+        }
+        quizFeedbackBox.classList.remove('hidden');
+
+        if (card.definition_en || card.context_sentence) {
+            quizDetailsBox.innerHTML = `
+                ${card.definition_en ? `<p><strong>Толкование:</strong> ${escapeHtml(card.definition_en)}</p>` : ''}
+                ${card.context_sentence ? `<p><strong>Контекст:</strong> <em>“${escapeHtml(card.context_sentence)}”</em></p>` : ''}
+            `;
+            quizDetailsBox.classList.remove('hidden');
+        }
+
+        quizNextBar.classList.remove('hidden');
+        quizNextBtn.focus();
+    }
+
+    quizNextBtn.addEventListener('click', () => {
+        srsCurrentIndex++;
+        renderSrsCurrentCard();
+    });
+
+    // -----------------------------------------------------------------------
+    // Mode 3: Active Typing
+    // -----------------------------------------------------------------------
+    function renderTypingMode(card) {
+        srsModeTyping.classList.remove('hidden');
+        typingFeedbackBox.classList.add('hidden');
+        typingDetailsBox.classList.add('hidden');
+        typingRatingBar.classList.add('hidden');
+
+        typingPos.textContent = card.part_of_speech || '';
+        typingPromptRu.textContent = card.translation;
+        if (card.context_sentence) {
+            typingContextHint.textContent = `Контекст: “${card.context_sentence}”`;
+            typingContextHint.classList.remove('hidden');
+        } else {
+            typingContextHint.classList.add('hidden');
+        }
+
+        typingInput.value = '';
+        typingInput.disabled = false;
+        typingInput.focus();
+    }
+
+    typingForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const card = srsQueue[srsCurrentIndex];
+        if (!card) return;
+
+        const userInput = typingInput.value.trim().toLowerCase();
+        const target = card.term.trim().toLowerCase();
+        const isMatch = userInput === target;
+
+        if (card.audio_url) playAudio(card.audio_url);
+        typingInput.disabled = true;
+
+        if (isMatch) {
+            typingFeedbackBox.className = 'trainer-feedback-box feedback-correct';
+            typingFeedbackBox.innerHTML = `✅ <strong>Верно!</strong> <em>${escapeHtml(card.term)}</em> ${card.phonetic ? `<code>${escapeHtml(card.phonetic)}</code>` : ''}`;
+        } else {
+            typingFeedbackBox.className = 'trainer-feedback-box feedback-wrong';
+            typingFeedbackBox.innerHTML = `❌ <strong>Не совсем:</strong> правильное написание — <strong>${escapeHtml(card.term)}</strong> ${card.phonetic ? `<code>${escapeHtml(card.phonetic)}</code>` : ''}`;
+        }
+        typingFeedbackBox.classList.remove('hidden');
+
+        renderDynamicRatingBar(typingRatingBar, isMatch ? 3 : 1);
+    });
+
+    // -----------------------------------------------------------------------
+    // Mode 4: Cloze Deletion
+    // -----------------------------------------------------------------------
+    function renderClozeMode(card) {
+        srsModeCloze.classList.remove('hidden');
+        clozeFeedbackBox.classList.add('hidden');
+        clozeDetailsBox.classList.add('hidden');
+        clozeRatingBar.classList.add('hidden');
+
+        clozePos.textContent = card.part_of_speech || '';
+        clozeTargetTranslation.textContent = card.translation;
+
+        const context = card.context_sentence || `The word is ${card.term}.`;
+        const re = new RegExp(escapeRegex(card.term), 'gi');
+        const gapText = context.replace(re, '<span class="gap-placeholder">_____</span>');
+        clozeSentenceDisplay.innerHTML = gapText;
+
+        clozeInput.value = '';
+        clozeInput.disabled = false;
+        clozeInput.focus();
+    }
+
+    clozeForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const card = srsQueue[srsCurrentIndex];
+        if (!card) return;
+
+        const userInput = clozeInput.value.trim().toLowerCase();
+        const target = card.term.trim().toLowerCase();
+        const isMatch = userInput === target;
+
+        if (card.audio_url) playAudio(card.audio_url);
+        clozeInput.disabled = true;
+
+        if (isMatch) {
+            clozeFeedbackBox.className = 'trainer-feedback-box feedback-correct';
+            clozeFeedbackBox.innerHTML = `✅ <strong>Верно!</strong> целевое слово: <strong>${escapeHtml(card.term)}</strong>`;
+        } else {
+            clozeFeedbackBox.className = 'trainer-feedback-box feedback-wrong';
+            clozeFeedbackBox.innerHTML = `❌ Правильный ответ: <strong>${escapeHtml(card.term)}</strong>`;
+        }
+        clozeFeedbackBox.classList.remove('hidden');
+
+        renderDynamicRatingBar(clozeRatingBar, isMatch ? 3 : 1);
+    });
+
+    // -----------------------------------------------------------------------
+    // Mode 5: Dictation
+    // -----------------------------------------------------------------------
+    function renderDictationMode(card) {
+        srsModeDictation.classList.remove('hidden');
+        dictationFeedbackBox.classList.add('hidden');
+        dictationDetailsBox.classList.add('hidden');
+        dictationRatingBar.classList.add('hidden');
+        dictationHintText.classList.add('hidden');
+        dictationHintText.textContent = card.translation;
+
+        dictationInput.value = '';
+        dictationInput.disabled = false;
+
+        const play = () => { if (card.audio_url) playAudio(card.audio_url); };
+        dictationBigPlayBtn.onclick = play;
+        dictationReplayBtn.onclick = play;
+        play();
+
+        dictationInput.focus();
+    }
+
+    dictationToggleHintBtn.addEventListener('click', () => {
+        dictationHintText.classList.toggle('hidden');
+    });
+
+    dictationForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const card = srsQueue[srsCurrentIndex];
+        if (!card) return;
+
+        const userInput = dictationInput.value.trim().toLowerCase();
+        const target = card.term.trim().toLowerCase();
+        const isMatch = userInput === target;
+
+        dictationInput.disabled = true;
+
+        if (isMatch) {
+            dictationFeedbackBox.className = 'trainer-feedback-box feedback-correct';
+            dictationFeedbackBox.innerHTML = `✅ <strong>Идеально!</strong> <strong>${escapeHtml(card.term)}</strong> ${card.phonetic ? `<code>${escapeHtml(card.phonetic)}</code>` : ''} — ${escapeHtml(card.translation)}`;
+        } else {
+            dictationFeedbackBox.className = 'trainer-feedback-box feedback-wrong';
+            dictationFeedbackBox.innerHTML = `❌ <strong>Ошибка спеллинга:</strong> правильное слово — <strong>${escapeHtml(card.term)}</strong> ${card.phonetic ? `<code>${escapeHtml(card.phonetic)}</code>` : ''}`;
+        }
+        dictationFeedbackBox.classList.remove('hidden');
+
+        renderDynamicRatingBar(dictationRatingBar, isMatch ? 3 : 1);
+    });
+
+    function renderDynamicRatingBar(container, defaultRating) {
+        container.innerHTML = `
+            <button class="btn-rate btn-rate-1" data-rating="1"><span class="rate-key">[1]</span> Снова</button>
+            <button class="btn-rate btn-rate-2" data-rating="2"><span class="rate-key">[2]</span> Трудно</button>
+            <button class="btn-rate btn-rate-3" data-rating="3"><span class="rate-key">[3]</span> Хорошо</button>
+            <button class="btn-rate btn-rate-4" data-rating="4"><span class="rate-key">[4]</span> Легко</button>
+        `;
+        container.classList.remove('hidden');
+
+        container.querySelectorAll('.btn-rate').forEach(btn => {
+            btn.onclick = async () => {
+                const r = parseInt(btn.dataset.rating, 10);
+                await submitCardReview(r);
+            };
+        });
+    }
+
+    function showSrsSummary() {
+        hideAllSrsModeContainers();
+        srsSummary.classList.remove('hidden');
+        srsProgressFill.style.width = '100%';
+        srsCounter.textContent = 'Тренировка завершена!';
+
+        const total = srsSessionRatings.length;
+        sumCount.textContent = total;
+        const goodCount = srsSessionRatings.filter(r => r >= 3).length;
+        const retention = total > 0 ? Math.round((goodCount / total) * 100) : 100;
+        sumRetention.textContent = `${retention}%`;
+    }
+
+    // Hotkeys handler
+    document.addEventListener('keydown', (e) => {
+        if (!srsView.classList.contains('hidden')) {
+            if (srsCurrentMode === 'flashcards') {
+                if (e.code === 'Space' && !srsIsFlipped) {
+                    e.preventDefault();
+                    flipFlashcard();
+                } else if (srsIsFlipped && ['1', '2', '3', '4'].includes(e.key)) {
+                    e.preventDefault();
+                    submitCardReview(parseInt(e.key, 10));
+                }
+            } else if (srsCurrentMode === 'quiz' && !quizAnswered) {
+                if (['1', '2', '3', '4'].includes(e.key)) {
+                    const idx = parseInt(e.key, 10) - 1;
+                    const btns = quizOptionsGrid.querySelectorAll('.quiz-option-btn');
+                    if (btns[idx]) {
+                        e.preventDefault();
+                        btns[idx].click();
+                    }
+                }
+            } else if (srsCurrentMode === 'quiz' && quizAnswered) {
+                if (e.key === 'Enter' || e.code === 'Space') {
+                    e.preventDefault();
+                    quizNextBtn.click();
+                }
+            }
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // Analytics Dashboard & Heatmap Modal
+    // -----------------------------------------------------------------------
+    if (statsOpenBtn) statsOpenBtn.addEventListener('click', openStatsDashboard);
+    if (mobileStatsBtn) mobileStatsBtn.addEventListener('click', openStatsDashboard);
+    closeStatsModalBtn.addEventListener('click', () => closeModal(statsModal));
+    closeStatsBtn.addEventListener('click', () => closeModal(statsModal));
+
+    async function openStatsDashboard() {
+        openModal(statsModal);
+        await Promise.all([loadStatsKpis(), loadActivityHeatmap()]);
+    }
+
+    async function loadStatsKpis() {
+        try {
+            const s = await api.stats.getSrsStats();
+            if (s) {
+                kpiCurrentStreak.textContent = `🔥 ${s.streak_days}`;
+                kpiLongestStreak.textContent = `Рекорд: ${s.longest_streak} дн.`;
+                kpiRetentionRate.textContent = `${s.retention_rate}%`;
+                kpiTotalReviews.textContent = `Всего повторений: ${s.total_reviews}`;
+                kpiTotalWords.textContent = s.total_cards;
+                kpiTodayAdded.textContent = `Сегодня добавлено: +${s.today_added}`;
+
+                if (s.cefr) {
+                    kpiCefrLevel.textContent = s.cefr.level;
+                    kpiCefrDesc.textContent = `${s.cefr.title} • ${s.cefr.message}`;
+                } else {
+                    const count = s.total_cards;
+                    let lvl = 'A1';
+                    let desc = 'Базовый словарный запас';
+                    if (count >= 2500) { lvl = 'C1'; desc = 'Продвинутый свободный уровень'; }
+                    else if (count >= 1200) { lvl = 'B2'; desc = 'Уверенное чтение тех. документации'; }
+                    else if (count >= 600) { lvl = 'B1'; desc = 'Понимание общих и рабочих тем'; }
+                    else if (count >= 200) { lvl = 'A2'; desc = 'Элементарный словарный запас'; }
+                    kpiCefrLevel.textContent = lvl;
+                    kpiCefrDesc.textContent = desc;
+                }
+
+                cntMastered.textContent = s.mastered;
+                cntReview.textContent = s.review;
+                cntLearning.textContent = s.learning;
+                cntNew.textContent = s.new_cards;
+                cntLeeches.textContent = s.leech_count;
+
+                const total = s.total_cards || 1;
+                progMastered.style.width = `${(s.mastered / total) * 100}%`;
+                progReview.style.width = `${(s.review / total) * 100}%`;
+                progLearning.style.width = `${(s.learning / total) * 100}%`;
+                progNew.style.width = `${(s.new_cards / total) * 100}%`;
+            }
+        } catch (e) {
+            console.error('Stats load error:', e);
+        }
+    }
+
+    async function loadActivityHeatmap() {
+        try {
+            const data = await api.stats.getHeatmap(180);
+            renderHeatmap(data.days);
+        } catch (e) {
+            console.error('Heatmap load error:', e);
+        }
+    }
+
+    function renderHeatmap(days) {
+        heatmapGrid.innerHTML = '';
+        if (!days || days.length === 0) return;
+
+        days.forEach(d => {
+            const cell = document.createElement('div');
+            cell.className = `heatmap-cell lvl-${d.level}`;
+            cell.title = `${d.date}: ${d.count} повторений / тестов`;
+            heatmapGrid.appendChild(cell);
+        });
+    }
+
+    initSrs.startSession = startSrsTrainingSession;
+    initSrs.openStats = openStatsDashboard;
+}
+
+export function startSrsTrainingSession(forceAll = false, tagFilter = null) {
+    if (initSrs.startSession) {
+        return initSrs.startSession(forceAll, tagFilter);
+    }
+}
+
+export function openStatsDashboard() {
+    if (initSrs.openStats) {
+        return initSrs.openStats();
+    }
+}

app/static/js/modules/ui.js

@@ -0,0 +1,162 @@
+// =======================================================================
+// Notes Application - UI & Utilities Module (Native ES Module)
+// =======================================================================
+
+export function escapeHtml(str) {
+    if (!str) return '';
+    return String(str)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
+export function escapeRegex(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function slugify(text) {
+    if (!text) return 'book';
+    return text.toString().toLowerCase().trim()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/[\s_-]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+
+export function shuffleArray(array) {
+    const arr = [...array];
+    for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+}
+
+// -----------------------------------------------------------------------
+// Toast Notifications
+// -----------------------------------------------------------------------
+export function showToast(message, type = 'info') {
+    let toastContainer = document.getElementById('notes-toast-container');
+    if (!toastContainer) {
+        toastContainer = document.createElement('div');
+        toastContainer.id = 'notes-toast-container';
+        toastContainer.style.cssText = `
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            z-index: 10000;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            pointer-events: none;
+        `;
+        document.body.appendChild(toastContainer);
+    }
+
+    const toast = document.createElement('div');
+    const colors = {
+        success: '#10b981',
+        error: '#ef4444',
+        warning: '#f59e0b',
+        info: '#3b82f6'
+    };
+    const bg = colors[type] || colors.info;
+
+    toast.style.cssText = `
+        background: ${bg};
+        color: #ffffff;
+        padding: 10px 18px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        box-shadow: 0 4px 14px rgba(0,0,0,0.25);
+        opacity: 0;
+        transform: translateY(12px);
+        transition: all 0.25s ease;
+        pointer-events: auto;
+        max-width: 340px;
+    `;
+    toast.textContent = message;
+    toastContainer.appendChild(toast);
+
+    requestAnimationFrame(() => {
+        toast.style.opacity = '1';
+        toast.style.transform = 'translateY(0)';
+    });
+
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateY(12px)';
+        setTimeout(() => toast.remove(), 250);
+    }, 3500);
+}
+
+// -----------------------------------------------------------------------
+// Theme Management
+// -----------------------------------------------------------------------
+export function initTheme() {
+    const themeToggle = document.getElementById('theme-toggle');
+    const mobileThemeBtn = document.getElementById('mobile-theme-btn');
+    const savedTheme = localStorage.getItem('notes_theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+
+    function toggle() {
+        const current = document.documentElement.getAttribute('data-theme');
+        const next = current === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('notes_theme', next);
+    }
+
+    if (themeToggle) {
+        themeToggle.addEventListener('click', toggle);
+    }
+    if (mobileThemeBtn) {
+        mobileThemeBtn.addEventListener('click', () => {
+            toggle();
+            showToast(`Тема переключена`, 'info');
+        });
+    }
+}
+
+// -----------------------------------------------------------------------
+// Modal Open / Close Helpers
+// -----------------------------------------------------------------------
+export function openModal(modalElem) {
+    if (!modalElem) return;
+    modalElem.classList.remove('hidden');
+}
+
+export function closeModal(modalElem) {
+    if (!modalElem) return;
+    modalElem.classList.add('hidden');
+}
+
+// -----------------------------------------------------------------------
+// Header Stat Counters
+// -----------------------------------------------------------------------
+export function updateHeaderStats(total = 0, today = 0, srsCount = 0) {
+    const statTotal = document.getElementById('stat-total');
+    const statToday = document.getElementById('stat-today');
+    const srsBadge = document.getElementById('srs-badge');
+
+    if (statTotal) statTotal.textContent = total;
+    if (statToday) statToday.textContent = today;
+    if (srsBadge) {
+        srsBadge.textContent = srsCount;
+        srsBadge.style.display = srsCount > 0 ? 'inline-block' : 'none';
+    }
+}
+
+// -----------------------------------------------------------------------
+// Audio Player Helper (Safe stub / audio stream)
+// -----------------------------------------------------------------------
+export function playAudio(url) {
+    if (!url) return;
+    try {
+        const audio = new Audio(url);
+        audio.play().catch(e => console.warn('Audio playback not supported or blocked:', e));
+    } catch (e) {
+        console.warn('Audio play error:', e);
+    }
+}

app/static/sw.js

@@ -1,13 +1,18 @@
 // Service Worker for Notes English PWA (Stage 2)
 // Strategy: Cache-first for static assets, Network-first for API calls.
 
-const CACHE_NAME = 'notes-v2.2';
+const CACHE_NAME = 'notes-v5.0';
 const OFFLINE_URL = '/';
 
 const PRECACHE_URLS = [
   '/',
   '/static/css/style.css',
   '/static/js/app.js',
+  '/static/js/modules/api.js',
+  '/static/js/modules/ui.js',
+  '/static/js/modules/dictionary.js',
+  '/static/js/modules/srs.js',
+  '/static/js/modules/reader.js',
   '/manifest.json',
 ];