Learn_System/plans/admin-redesign/phase-5-quick-actions.md

Phase 5: Per-row quick actions

Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend Parallelizable with: Phase 3, Phase 4

Objective

На hover-строке user / session показывать кнопки частых action прямо в таблице — без открытия overlay-панели. Сокращает 2-3 клика до 1 для типичных задач (бан, выдача монет, удаление сессии).

Tasks

• Users table (frontend/js/admin/sections/users.js):
  • Добавить в каждый <tr> дополнительную ячейку или абсолютно-позиционированный блок с action-кнопками
  • Visible: только на :hover строки (via CSS)
  • Кнопки:
    • 🔒 Ban / Unban — открывает confirm modal, на confirm вызывает существующий toggleBanUser() (или его эквивалент с userId)
    • 🪙 Award coins — открывает быстрый prompt-modal "Сколько монет?", вызывает существующий shopAdminAwardCoins без перехода в shop tab
    • 📜 Sessions — навигирует через AdminRouter.navigate('#sessions?user=' + uid) (param Phase 6 будет обрабатывать; пока fallback — переход на sessions tab)
    • 🗑 Delete — confirm, вызывает существующий confirmDeleteUser
  • ВАЖНО: иконки только inline SVG (.ic класс) или Lucide — НИКАКИХ эмоджи
  • Кнопки event.stopPropagation() чтобы не триггерить openUserPanel
• Sessions table (frontend/js/admin/sections/sessions.js):
  • 👁 View — открыть session detail (текущий механизм)
  • 🗑 Delete — confirm + DELETE /admin/sessions/:id (если такой endpoint есть, иначе добавить)
• Если delete session endpoint отсутствует — добавить в backend:
  • DELETE /api/admin/sessions/:id с auth admin only
  • Контроллер: удалить из test_sessions + connected session_answers
  • Audit log entry
• CSS (в admin.html style блоке или новый файл):

  .row-actions { opacity: 0; transition: opacity .15s; display: inline-flex; gap: 4px; }
  tr:hover .row-actions { opacity: 1; }
  .row-action-btn { width: 28px; height: 28px; border-radius: 6px; ... }
  

• Подсказки через title="..." атрибут на каждой кнопке
• Confirm-модалки используют LS.confirm (не reinventing)

Files to Modify/Create

• frontend/js/admin/sections/users.js — модификация renderRow + action handlers (~50-100L добавления)
• frontend/js/admin/sections/sessions.js — same (~30-50L)
• frontend/admin.html — стили для .row-actions (~30L)
• backend/src/controllers/adminController.js — deleteSession если отсутствует
• backend/src/routes/admin.js — DELETE /sessions/:id если отсутствует

Acceptance Criteria

• Hover на user row → видны 4 кнопки справа без раздвигания layout
• Hover на session row → видны 2 кнопки
• Каждая кнопка работает (ban / coins / sessions / delete)
• Click на кнопку НЕ открывает user-panel overlay (stopPropagation)
• Tooltip на hover каждой кнопки
• Confirm для деструктивных action (delete, ban)
• LS.toast после success
• Auth check — все action available только admin
• Mobile: actions hidden (tap-only context), либо альтернативный UI (long-press → menu) — пока минимум скрыть на ≤768px

Notes

Существующие helpers использовать

• LS.confirm(message, { okText, danger }) для подтверждений
• LS.modal(...) если нужна форма (например award coins amount)
• LS.toast для feedback
• Существующие admin* функции (toggleBanUser, awardCoins, etc.) — не дублировать

Визуальный паттерн

Inspired by Linear / Vercel admin: actions visible on row hover, positioned right-aligned, ghost-style buttons (transparent bg, border on hover). Иконки только.

Что НЕ делать в этой фазе

• Не делать bulk-actions (select multiple → action) — это после merge
• Не делать undo (toast с "отменить" внутри) — Phase 6+
• Не менять структуру таблицы radically

Review Checklist

• Кнопки не сдвигают layout (используют absolute / hidden / opacity)
• Все action эскейпят пользовательский ввод
• No emoji — только SVG
• event.stopPropagation на всех кнопках
• Confirm для destructive actions
• Tooltip присутствует
• Mobile-friendly (hidden или альтернативный UI)
• Build passes

Handoff to Next Phase