lab.html 5180L → 4324L (-856L). All CSS moved to frontend/css/lab.css
(855L). Added <link> tag after ls.css for proper cascade.
Visual rendering unchanged — pure file move.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Local quality gate that runs on every git commit:
- node --check syntax on staged .js files
- block on new emoji in staged .js/.html/.css (md files allowed)
- block on new console.log/debug/debugger statements
- backend route auth lint (existing npm run lint:routes)
- backend tests (baseline 3 fails, block if grew)
Install: npm run hooks:install (top-level)
Bypass: git commit --no-verify
Skips slow checks when irrelevant files changed (tests/lint only run
if backend touched).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The feature_classroom_enabled flag was fully wired in backend
(classroom/sessions.js:11-14 returns 403 when '0', initialized in
legacy-migrate.js:870 to '1') but had no UI control — admin could
only flip it via direct SQL.
- adminController.updateFeatures: classroom was ALREADY in allowed list
- admin/sections/games.js: new toggle row with video icon added to GAME_FEATURES
- js/api.js hideDisabledFeatures: classroom path mapping added ('/classroom')
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3D rendering (toggle3D/render3D with VDW radii + sphere gradients) was
implemented but had no visible Esc-key exit and cursor was left in 'grab'
state when leaving 3D mode. Changes:
- Esc key now exits 3D mode (toggle3D) in addition to cancel/close actions
- cursor correctly resets to 'crosshair' on 3D exit and 'grab' on enter
- btn-3d toolbar button confirmed visible with mode-3d-active active state
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Avatar circles in top/worst-5 tables: initials from name, hsl color from hash of name
- Structural skeleton on first load: 4 shimmer card boxes + 5 row placeholders (replaces
LS.state.loading spinner for better layout-anchored feedback)
- @media ≤640px: 2-column main grid, hero card reverts to normal size, quick-grid 2-col
- Palette: existing per-card colors (violet/cyan/green/amber) already form a good muted
hue family with vivid pink/amber for alert cards — kept as is to avoid regression
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- registry.js: добавлен флаг requireConfirmOff для 7 критичных прав (questions.manage, classes.manage, library.upload, courses.manage, sessions.reset, theory.access, simulations.access); byRole() теперь возвращает это поле
- admin.html: subtitle в модале прав — «учителя» → «пользователя»; tooltip на кнопке «Сбросить всё по умолчанию»; поле поиска над сеткой прав; CSS .perm-modified-dot (amber, 8px)
- admin.js: badge «Инд.» → «Индивидуально» (font-size 11px); renderPermissions() рисует .perm-modified-dot когда значение отличается от registry default; togglePermission() показывает LS.confirm перед выключением критичных прав; window.filterPermissions() скрывает карточки и role-блоки по поисковому запросу
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Reset can downgrade effective access (override=1 vs role default=0),
so the user's JWT must be invalidated alongside the DELETE.
Wrapped in db.transaction for atomicity.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- backend/src/permissions/registry.js: single source of truth (PERMISSIONS map)
with all 24 keys (16 teacher + 8 student, student keys also cover free_student).
Exports isKnown(), listKeys(), byRole(), buildDefaultsMap().
- auth.js: PERM_DEFAULTS now sourced from registry.buildDefaultsMap();
new perm() helper validates key at registration time (crashes early on typos).
requirePermission() unchanged — backward compat preserved.
- permissionsController.js: ALL_PERMISSIONS now built from registry.byRole();
inline 24-entry array removed. API response shape unchanged.
- check-route-auth.js: validates every requirePermission/perm call key against
registry; lists unknown keys as errors before exit.
perm() added to GUARDS list so it counts as route protection.
Discrepancy noted: auth.js had free_student with same 8 keys as student;
permissionsController never seeded free_student rows. Registry documents
this via roles:[] array; buildDefaultsMap() correctly covers free_student.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds audit entries for:
- permission.set (role-level change)
- permission.user_set (per-user override)
- permission.user_reset (clear user override)
- feature.update (global feature flag toggle, per-key with old->new diff)
Old value captured for feature.update for full diff trail.
permissionsController: added audit import, wired audit() after each write.
adminController.updateFeatures: replaced bulk audit with per-key entries
capturing old value from app_settings before overwrite.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
setPermission / setUserPermission now bump token_version for affected
users so cached JWTs lose access immediately instead of after expiry.
Aligns with role-change pattern in adminController.updateRole.
Both writes wrapped in db.transaction() so token_version is only bumped
if the permission write itself succeeds.
Also cleaned up inline require('../db/db') calls to use top-level db.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Hardcoded inline <svg class="ic"> markers used as arrow replacements
(left over from emoji removal) were displayed as raw HTML text where
the consumer used textContent or canvas fillText:
- chemsandbox: csbar-v5 (Продукты cell) used textContent → SVG visible.
Switched to innerHTML for consistency with eq/ionNet cells.
Quiz question (qEl.textContent) and answer also receiving SVG —
cleaned via _csClean at source.
- reactions: modeTxt drawn via canvas fillText — replaced SVG with →.
- ionexchange: REACTIONS data + canvas labels — bulk SVG → Unicode arrows.
- newton: action button labels used textContent → switched to innerHTML;
canvas arrow labels: SVG → Unicode →/↓.
- collision: 'KE сохранена' canvas label — SVG checkmark → ✓.
- projectile: canvas badges + textContent wind label — SVG → Unicode ←/→/↩.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Security review caught: per-row hover actions (users.js) and async
user picker (shop.js, gam.js) interpolated user-controlled name into
JS string literals inside onclick. LS.esc() escapes & < > " but
NOT backslash; the .replace(/'/g, '\'') fallback was broken.
Attack: any authenticated user could set their name to
a\'); alert(1); //
via PATCH /api/auth/profile (stripTags doesn't strip \) — admin
viewing the users/shop/gam picker would execute arbitrary JS.
Fix: switch from JS-string interpolation to data-uid/data-name
attributes, read via dataset in handler. esc() correctly escapes
for HTML-attribute context; dataset returns the raw string with
zero parse re-entry.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Now that the deep pages (sub-commit 1) work, retire the legacy
.user-panel inline overlay entirely.
* admin.html: removed <div class="user-panel" id="user-panel"> block
inside #tab-users, removed dead .user-panel* CSS (kept .btn-close
for any external use).
* users.js: removed openUserPanel / closeUserPanel / reloadUserPanel
and their closure state (activeTr, activeUserRole). User row onclick
switched from openUserPanel(...) → AdminRouter.navigate('#users/N').
clearUserHistory / toggleBanUser / confirmDeleteUser / openEditUserModal
/ openUserPermsModal / doSet/doReset* all refactored to use the
getActiveUid() helper (reads window.activeUid, set by user-detail.init)
+ reloadDetailAndList() helper (refreshes deep page + list together).
* sessions.js: row click + eye-button switched from toggleDrawer(id)
→ gotoSession(id) → AdminRouter.navigate('#sessions/N'). Removed
toggleDrawer + renderDrawer functions (~60L) and openDrawerId state.
Inline drawer markup removed from the row template.
Verified node --check on all touched JS. ast-index confirms zero
remaining usages of openUserPanel / closeUserPanel / reloadUserPanel /
toggleDrawer across the repo.
This completes Phase 6 and the admin-redesign feature.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add user-detail.js (~370L) and session-detail.js (~180L) section
modules that render full pages for #users/:id and #sessions/:id, plus
admin.js dispatch and HTML tab-panes. The legacy .user-panel overlay
is intentionally still in place — sub-commit 2 will remove it once the
deep pages are verified.
* admin.js: DEEP_ROUTES map + activateDeepPane(); activate(route, params)
signature; initial dispatch respects hash params (so F5 on #users/123
goes straight to the deep page).
* admin.html: new tab-panes #tab-user-detail / #tab-session-detail and
two script tags. Old #user-panel overlay untouched.
* user-detail.js: header (avatar/role/email/meta) + sub-tabs
(Обзор/Сессии/Классы/Audit) with URL-synced sub-tab routing
(#users/N/sessions etc). Overview: 4 stat cards + per-subject SVG
bar chart. Sessions: clickable rows that navigate to #sessions/N.
Classes: placeholder empty-state (no per-user classes endpoint).
Audit: client-side filter of /admin/audit-log by uid match. Header
action buttons (Изменить/Права/История/Бан/Удалить) call existing
overlay handlers; window.activeUid is set before opening any modal.
* session-detail.js: full header (user/subject/score/stats) + per-
question correctness layout reusing the drawer renderer. Delete
button uses LS.adminDeleteSession then navigates to #sessions.
Clicking the user name opens the user deep page.
* users.js: quickOpenUserSessions now navigates to
#users/<uid>/sessions instead of the bare #sessions list.
Verified node --check on all new/modified JS. baseline npm test still
shows pre-existing 3 auth failures unrelated to this change.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Phase 2 review caught this: updateCharCounter was defined inside
questions.js IIFE but never exposed via window.X; admin.html:1672
calls it via oninput, would throw ReferenceError on every keypress.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace ~3500L admin.js monolith with thin orchestrator (~700L) +
14 IIFE-wrapped per-section modules under /js/admin/sections/.
Section modules expose AdminSections.<name>.init/reload (lazy init via
switchTab/router) and re-expose onclick handlers via window.X for
backward compat. Shared helpers (MODES/DIFFS, fmtDate, pctClass,
renderMath, qTypeBadge, pagination) live in /js/admin/_shared.js
exposed on window.AdminCtx.
switchTab now dispatches to AdminSections via ROUTE_TO_SECTION map;
non-extracted system tabs (topics/audit/errors/health/classroom/avatars)
remain inline in admin.js. user-panel overlay markup untouched — Phase 6
will remove it.
Полный wizard-refactor Q-modal был отложен как высокорискованный
(сложная форма с многими типами вопросов, риск регрессии). Вместо
этого — безопасные ergonomic-улучшения:
1) FORMULA BAR — collapsed by default
Раньше: 18 кнопок формул всегда занимали ~50px вертикали в модалке,
но нужны только при создании math-вопросов.
Теперь: маленькая кнопка «Вставить формулу» с chevron. Click → bar
разворачивается. Состояние сохраняется в пределах сессии (DOM-стейт).
2) PREVIEW — показывается только когда есть текст
Раньше: пустой preview-блок с placeholder «Введите текст вопроса…»
занимал ~80px независимо от состояния.
Теперь: .q-preview-wrap.hidden скрывается полностью пока textarea
пуста. Появляется по input с debounce 150ms (уже было).
Эффект: модал стал ~130px ниже в типичном кейсе (создание non-math
вопроса). На 1080p теперь умещается без скролла для single/multi
с 4 опциями.
Без wizard'а, без риска регрессии — но visible UX-win. Wizard-refactor
по-прежнему доступен как опция, если понадобится дальнейшее снижение
когнитивной нагрузки.
1) LOCK-ICONS на admin-only табах
Раньше: 7 табов (Магазин, Геймификация, Шаблоны, Симуляции, Игры,
Доступные тесты, Права доступа) скрывались от учителей через
display:none. Учитель не знал что они существуют — discoverability 0.
Теперь:
- Все табы видны всем, но для не-админа добавлен .locked класс
- .locked: opacity .42, cursor not-allowed, lock-icon справа
- title=\"Только для администраторов\" — нативный tooltip
- switchTab() при клике на .locked показывает toast вместо
переключения
Эффект: учитель видит границы своих прав; знает что есть в системе,
но не доступно ему — может попросить админа дать доступ.
2) LS.state — общий helper для loading/empty/error состояний
api.js:381 — добавлен LS.state с тремя методами:
LS.state.loading(el, msg?) — спиннер + опц. текст
LS.state.empty(el, msg, icon='inbox') — пустое состояние с иконкой
LS.state.error(el, err, retryFn?) — красная иконка + текст
+ опц. кнопка «Повторить»
Все три используют один CSS (.ls-state*) с одним визуальным языком.
inject стилей лениво (id=ls-state-style).
Демо-миграция: 3 error-handler'а в admin.js (Stats / Users /
Sessions) переписаны на LS.state.error с retry-функцией. Юзер
теперь может нажать «Повторить» вместо перезагрузки страницы.
Остальные 20+ inline error/empty/spinner'ов в admin.js — для
постепенной миграции (паттерн установлен).
3 победы из аудита админ-панели за один заход:
1) STICKY TABLE HEADERS
admin.html:142 — добавлен position:sticky; top:0; z-index:5; на <th>
Заголовки колонок теперь остаются видны при scroll длинных таблиц
(Users, Sessions, Shop, Gam — 100+ строк). Background фон поменян
на opaque #E5EAF7 чтобы строки скроллились чисто за header'ом.
Стоимость: 1 CSS-правило. Эффект: пользователи не теряют контекст
столбцов при просмотре длинного списка.
2) COLLAPSIBLE NAV GROUPS
admin.html:875+ — 4 группы (Аналитика, Контент, Пользователи,
Система) вместо плоского списка 21 кнопки с просто визуальными
сепараторами. Каждая группа сворачивается кликом по заголовку.
Состояние per-группа в localStorage (ls_adm_g_<slug>).
Группа «Система» (только админ) теперь объединяет shop, gam, sims,
games, audit, errors, health — раньше они шли вперемешку с
teacher-видимыми табами (sublog, topics, broadcast). Переместил
sublog/broadcast в группу «Пользователи», topics в «Контент» —
логичнее по смыслу.
Паттерн один-в-один как у sidebar.js (где мы это сделали ранее).
3) УНИФИКАЦИЯ ЛЕЙБЛОВ
Правило: «+ Добавить» для атомов (вопрос, тема, опция, товар),
«+ Создать» для составных объектов (тест, задание, курс).
Изменения:
- admin.html:1431 — «Создать» → «Добавить» (форма темы — атом)
- admin.html:1195 — «Новый товар» → «Добавить товар»
- admin.js:415 — q-modal title «Новый вопрос» → «Добавить вопрос»
- admin.js:2239 — shop-form-title «Новый товар» → «Добавить товар»
Теперь кнопка в toolbar и заголовок модалки/формы согласованы.
Остались крупные пункты из аудита (на отдельный заход):
- Q-modal wizard (split на 2 шага) — 🔴 высокий приоритет
- Pagination в больших таблицах — 🟡
- Standardized error/loading states — 🔵
Заголовки групп были rgba(255,255,255,0.45) — белые 45%, что под
тёмный sidebar. Но LearnSpace использует светлую тему (--bg=#EEF2FF),
из-за чего «УЧЕБНЫЙ ПРОЦЕСС» и пр. сливались с фоном.
Теперь:
color: var(--text-3, #56687A) с opacity .72
hover: var(--violet) с opacity 1
Visible contrast: было ~1.2:1 (невидимо), стало ~4:1 (WCAG AA для
небольшого uppercase-текста — годится).
dashboard.html: 2 → 0 ✅
- join-modal — вступить в класс
- qs-modal — быстрый тест с выбором предмета + режим + кол-во
theory.html: 1 → 0 ✅
- new-course-modal — создание нового курса учителем
course.html: 4 → 0 ✅
- add-section-modal — новый раздел курса
- edit-course-modal — редактирование курса
- add-lesson-modal — новый урок
- save-course-tpl-modal — сохранить курс как шаблон
Везде:
- Inline <div class=\"modal-overlay\">...</div> → удалён
- openX(): создаёт modal через LS.modal({content, actions})
- closeX() удалена — _xModal.close()
- Глобальный selectQsSubject() inline'нут как listener на body модалки
- Enter-handler на главных inputs сохранён
Не трогаю:
- biochem.html#lib-modal — кастомная тёмная тема, не подходит под
светлый LS.modal без редизайна
- library.html — 3 сложные модалки (folder-access, assign, upload)
с tabs и dynamic state — отдельный заход
- classes.html — modal-assign (128 строк, complex) + review-modal
- flashcards.html — fc-modal (не modal-overlay, своя CSS)
Прогресс миграции: 12 простых модалок → LS.modal за серию (4 ранее
+ 2 ранее + 6 сейчас). 4 страницы полностью очищены от
modal-overlay. Унифицированы:
- ESC/backdrop/focus поведение
- z-index (9000)
- Анимация (scale .22s)
- Адаптив на мобилке
admin.html: 5368 → 1922 строк (−64%, −3446 строк)
frontend/js/admin/admin.js: новый файл 3449 строк
Inline <script> блок (1915-5361) был полностью внутри HTML и не
кешировался отдельно — любое изменение HTML инвалидировало
огромный JS, и наоборот. Теперь:
- HTML загружается быстро (122 КБ vs 270 КБ)
- JS кешируется независимо (190 КБ; 7d max-age в prod)
- Любой ctrl+F по JS в редакторе теперь не требует пробираться
через тысячи строк HTML
Порядок выполнения сохранён байт-в-байт:
<script src="/js/api.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/admin/admin.js"></script> ← было inline
... (далее остаётся как было)
<script src="/js/notifications.js"></script>
<script src="/js/search.js"></script>
<script src="/js/mobile.js"></script>
Никаких изменений в логике, scope, DOM-ready timing — чистая
эстетическая операция. Все 22 вкладки + все модалки и обработчики
продолжают работать ровно как раньше.
Это фундамент для дальнейшего сплита (если понадобится): можно
будет в /js/admin/ разнести по табам (sessions.js, classroom.js,
gamification.js и т.д.) с lazy-load по клику. Сейчас не сделано,
т.к. ROI на эстетику ниже, чем у других задач.
Та же миграция что и в exam9: убран inline-overlay HTML, дубликаты
CSS (.ex-overlay/.ex-panel/.ex-panel-* + .ax-error/.ax-success/
.ax-actions/.ax-btn) — всё это теперь .ls-mod-* из LS.modal.
Глобальные window.openAssignModal/closeAssignModal/onAssignOverlayClick/
onAssignEsc/setAssignTab/submitAssign и assignSlug/assignTitle/assignTab
переменные заменены на одну window.openAssignModal с локальным
closure по slug/title/currentTab.
Сохранены внутренние form-классы (.ax-form/.ax-classes/.ax-class/
.ax-tabs/.ax-tab/.ax-student-results/.ax-input/.ax-hint) — они
используются в body модалки.
Student search и tab-switching теперь обработчики на элементах
модалки (m.body.querySelector), а не глобальные document-listener'ы —
автоматически очищаются вместе с модалкой при close().
textbooks.html: 945 → 824 строки
Раньше: плоский список из 25 пунктов в один столбец, для учителя
видно ~20+, новички терялись.
Теперь: 4 группы со свёртывающимися заголовками + always-visible
top-блок и admin-нижний блок.
Группы:
• (top, без заголовка) Поиск · Дашборд · Путеводитель · Руководство
• «УЧЕБНЫЙ ПРОЦЕСС» (6): Классы, Мои ученики, Онлайн-урок,
Архив уроков, Live-квиз, Доска
• «КОНТЕНТ» (6): Учебники, Библиотека, Теория, Карта знаний,
Банк вопросов, Экзамен 9 класс
• «ПРАКТИКА И ИГРЫ» (7): Лаборатория, Биохимия, Красная книга,
Кроссворд, Виселица, Питомец, Коллекция
• «ОТЧЁТЫ И УПРАВЛЕНИЕ» (3, teacher+): Аналитика, Журнал, Управление
Технически:
- Helper G(slug, label, body) — создаёт группу с уникальным slug
- localStorage 'ls_sb_g_<slug>' хранит свёрнутое состояние
- Click на заголовок группы → toggle .collapsed
- Sidebar-collapsed (icon-only) режим: заголовки групп скрыты,
все пункты остаются видны (компактный режим работает как раньше)
- Стили инжектятся inline через id=sb-group-styles (защита от
повторной инжекции при HMR)
Совместимость: все ссылки и их id/class сохранены, нет правок в
других файлах. Существующие onClick'и через id (btn-board, btn-classes,
btn-admin, btn-join) работают.
Maxim Dolgolyov