# Phase 4: Cmd+K command palette **Status:** ✅ Done **Parent plan:** [PLAN.md](./PLAN.md) **Domain:** fullstack **Parallelizable with:** Phase 3, Phase 5 ## Objective Глобальный палеттный поиск по Ctrl+K (Cmd+K на Mac) — нахоит entities (users, tests, classes, sessions) + actions ("выдать монеты ученику", "разбанить", "создать класс", deep-link routes). Радикально сокращает количество кликов для частых сценариев. ## Tasks - [x] Backend: новый endpoint `GET /api/admin/search?q=X&limit=8`: - Возвращает смешанный результат: ```js { users: [{ id, name, email, role }], // top 5 по name LIKE / email LIKE tests: [{ id, name, subject_slug }], // top 3 classes: [{ id, name, code }], // top 3 sessions: [] // skip пока, добавим если нужно } ``` - Контроллер: новая функция `globalSearch` в `adminController.js` - Route: `router.get('/search', requireAdmin, globalSearch)` - Каждая sub-query SELECT отдельно с LIMIT, общий ответ — простой json - Auth: admin only (teachers видят только своих учеников; для упрощения — admin) - [x] Frontend: `frontend/js/admin/palette.js` — palette модуль: - Не section, а глобальный widget — подключается в admin.js init - Слушает `keydown` на `Ctrl+K` / `Cmd+K` (preventDefault) - Открывает modal через `LS.modal()`: - Header: search input (autofocus) - Body: список результатов с keyboard nav (↑↓ Enter Esc) - Иконка типа справа от каждого результата (User, Test, Class, Action) - Дебаунс поиска ~150ms - Min длина query: 2 символа - При query='' → показать "Recent Actions" hardcoded list - [x] Actions index (hardcoded в palette.js): ```js const ACTIONS = [ { id: 'award_coins', name: 'Выдать монеты', icon: 'coins', handler: () => AdminRouter.navigate('#shop') }, { id: 'award_xp', name: 'Выдать XP', icon: 'zap', handler: () => AdminRouter.navigate('#gam') }, { id: 'new_class', name: 'Создать класс', icon: 'plus-circle', handler: () => window.location.href = '/classes' }, { id: 'new_test', name: 'Создать тест', icon: 'file-plus', handler: () => AdminRouter.navigate('#tests') }, { id: 'view_users', name: 'Все пользователи', icon: 'users', handler: () => AdminRouter.navigate('#users') }, { id: 'view_sessions', name: 'Все сессии', icon: 'history', handler: () => AdminRouter.navigate('#sessions') }, { id: 'view_audit', name: 'Audit log', icon: 'shield', handler: () => AdminRouter.navigate('#sublog') }, // …добавлять по мере надобности ]; ``` - Fuzzy-match в JS (substring match по name) при query - [x] Открытие результата: - User → `AdminRouter.navigate('#users/' + id)` (Phase 6 будет рендерить deep page; пока fallback на `#users` + opening user-panel через имеющийся `openUserPanel`) - Test → `AdminRouter.navigate('#tests')` + scroll к row (если поддерживается, иначе просто tab) - Class → `window.location.href = '/classes#' + id` - Action → выполнить handler - [x] Стили palette: глассморфизм/blur, центрировано, max-width 600px, dark/light theme-friendly. Использовать существующие токены `--surface`, `--border`, `--text-2`. - [x] Подсказка в UI: footer dialog'а "↑↓ — навигация · ↵ — выбрать · esc — закрыть" ## Files to Modify/Create - `backend/src/controllers/adminController.js` — добавить `globalSearch` (~60L) - `backend/src/routes/admin.js` — добавить `/search` route - `js/api.js` — добавить `LS.adminGlobalSearch(q)` helper (~5L) - `frontend/js/admin/palette.js` — новый, ~300-400L - `frontend/admin.html` — добавить `` ## Acceptance Criteria - Ctrl+K (Cmd+K) открывает palette из любого таба admin - Esc закрывает - Печать "иван" → top users с именем "Иван..." - Печать "монеты" → action "Выдать монеты" - ↑↓ навигация работает, Enter выполняет - Поиск отрабатывает <100ms для 8 результатов на тестовой БД - Click outside / Esc закрывают - LS.modal используется (не reinventing wheel) - Auth: только admin может открыть (teachers — палетту не открывают) ## Notes ### Почему Ctrl+K а не / Ctrl+K — индустри-стандарт (GitHub, Linear, Vercel, Slack). `/` конфликтует с input'ами. ### Дебаунсинг Простой setTimeout/clearTimeout. Без библиотек. ### LS.modal compat LS.modal сейчас принимает `{ title, body, footer, onOk, onClose, size }`. Для palette нужен focus management — autofocus input при открытии. Можно использовать через колбэк `onMount` если он есть, либо `setTimeout(() => input.focus(), 0)` после открытия. ### Что НЕ делать в этой фазе - Не делать ML/fuzzy-search в backend (LIKE достаточно) - Не делать historic recents (Cmd+K recents) — это уже после merge - Не делать collaboration ("кто-то ещё печатает") ## Review Checklist - [ ] Ctrl+K не конфликтует с системными shortcut'ами браузера - [ ] Palette не открывается если фокус в textarea / input (если требует ввод)... опционально, можно открывать всегда - [ ] No SQL injection в /admin/search - [ ] Эскейпинг через LS.esc для рендеринга имён пользователей - [ ] No N+1 queries (один SELECT на тип сущности) - [ ] Build passes ## Handoff to Next Phase ### Endpoint contract — `GET /api/admin/search?q=&limit=8` Auth: admin only (inside `requireRole('admin')` block in `backend/src/routes/admin.js`). If `q.trim().length < 2`, returns empty arrays without hitting DB. Errors → 500 `{error:'Search failed'}`. Response shape (top 5 users / top 3 tests / top 3 classes): ```js { users: [{ id, name, email, role }], tests: [{ id, name, subject_slug }], // alias: tests.title AS name classes: [{ id, name, code }], // alias: classes.invite_code AS code } ``` Backend perf: 3 simple parameterised SELECTs with LIMIT — well under 100ms. ### Navigation contract from palette → router | Result kind | Action | |-------------|--------| | Action | calls the hardcoded `go()` callback (most go through `AdminRouter.navigate('#…')`) | | User | `AdminRouter.navigate('#users/' + id)` — params parsed by router, but ROUTE_TO_SECTION currently only dispatches `users` section. **Phase 6** can add a `user` section that reads `params.id` and renders a deep page. | | Test | `AdminRouter.navigate('#tests')` (no deep page yet) | | Class | `window.location.href = '/classes#' + id` — leaves admin (classes UI is a separate page) | ### Action registry (hardcoded in `frontend/js/admin/palette.js`) `award_coins → #shop`, `award_xp → #gam`, `new_class → /classes`, `new_test → #tests`, `view_users → #users`, `view_sessions → #sessions`, `view_audit → #sublog`, `view_overview → #overview`. Phase 5 (quick actions) and Phase 6 (deep pages) may extend the `ACTIONS` array — just add to it; the action's `name` field is what users see and what is fuzzy-matched (lowercase substring on `name` + optional `hint` keyword). ### Ctrl+K conflict with `/js/search.js` `/js/search.js` is also loaded on admin.html and binds its own Ctrl+K listener (bubble phase). Palette binds in **capture phase** + `e.stopImmediatePropagation()`, so on admin pages the palette wins. On non-admin pages the generic search remains intact (palette.js is only loaded from admin.html). ### Exposed globals - `window.AdminPalette = { open, close, isOpen }` — for future programmatic open from quick-actions. - `LS.adminGlobalSearch(q)` — exported helper in `js/api.js`.