- messageLoader.js → messageLoader.legacy.js
- scrollManager.js → scrollManager.legacy.js
- messageRenderer.js → messageRenderer.legacy.js
Теперь используются V2 версии этих модулей
- ScrollManagerV2: использует prepend + height difference вместо полного ре-рендера
- MessageLoaderV2: фильтрует новые сообщения, возвращает только их
- MessageStoreV2: silent mode для загрузки истории (без событий)
- MessageRendererV2: детальное логирование для диагностики
Проблема: Store emit'ил события → appendMessage добавлял в конец → prependMessages пропускал дубликаты
Решение: silent mode отключает события → отрисовка только через prepend → сообщения в начало
- Created comprehensive badges-telegram-style.css (240 lines) based on Telegram Web K
- Updated all badge markup in templates (navbar, sidebar, chat_list, chat_detail, chat_title)
- Replaced Bootstrap badge classes with .badge-telegram classes
- Implemented Telegram specifications: 20px height, 10px radius, 11px font, 600 weight
- Added smooth animations: pulse (on update), animate-in (on mount), animate-out (on unmount)
- Updated JavaScript: replaced .d-none with style.display for badge visibility
- Updated 5 JS files: bottom-navbar, notification-manager, chatBadgeHandler, chatBadgeManager, chatListRealtime
- Added pulse animation on badge value increase
- Improved shadows and transitions with cubic-bezier easing
- Added badges-telegram-style.css to base.html for global availability
- Created documentation: TELEGRAM_BADGES_GUIDE.md, TELEGRAM_BADGES_UPDATE.md
Technical details:
- Research: Analyzed 50+ files from Telegram Web K GitHub repository
- Perfect circles: border-radius: 10px (not 50%)
- Spring animation: cubic-bezier(0.175, 0.885, 0.32, 1.275)
- Auto-hide: :empty and [data-count='0'] selectors
- Responsive design + dark theme support
ГЛУБОКИЙ АУДИТ выявил корневые причины прыжков:
НАЙДЕННЫЕ ПРОБЛЕМЫ:
1. chatMarkRead делал свою прокрутку ПОСЛЕ handleInitialMessages
- mark.scrollIntoView() или autoscroll() в requestAnimationFrame
- Конфликтовал с уже установленной прокруткой
2. Дублирование обработчика кнопки 'вниз':
- chatMarkRead.js: btn.addEventListener
- chat-detail-enhanced.js: scrollBtn.addEventListener
- Два обработчика на одну кнопку!
3. Излишняя сложность в scrollToBottom():
- Вызывал markReadApi.autoscroll() вместо прямой установки
- Дополнительный уровень косвенности = источник багов
ИСПРАВЛЕНИЯ:
1. chatMarkRead НЕ скроллит при инициализации:
- Divider создается, но не скроллится к нему
- Прокрутка управляется ТОЛЬКО из handleInitialMessages
- Единая точка ответственности
2. Убрано дублирование кнопки:
- Удален обработчик из chat-detail-enhanced.js
- Остался только в chatMarkRead.js
3. Упрощен scrollToBottom():
- Прямая установка scrollTop вместо вызова markReadApi
- Поддержка instant режима (без анимации)
- Предсказуемое поведение
4. Добавлены комментарии и документация:
- Пояснено почему НЕ скроллим в chatMarkRead
- Описано назначение каждой функции прокрутки
- Создан полный аудит в docs/completed/SCROLL_CONFLICTS_AUDIT.md
АРХИТЕКТУРА ПРОКРУТКИ:
✅ При загрузке: ТОЛЬКО handleInitialMessages
✅ Кнопка вниз: chatMarkRead.autoscroll()
✅ Новые сообщения: ТОЛЬКО если свое ИЛИ уже внизу
✅ Ввод текста: autoscroll() если внизу
РЕЗУЛЬТАТ:
✅ Нет прыжков - единая точка управления прокруткой
✅ Нет конфликтов - каждая функция делает одно
✅ Нет дублирования - один обработчик на событие
✅ Предсказуемость - прямые вызовы вместо косвенных
Файлы:
- userWebSocket.js: упрощен scrollToBottom
- chatMarkRead.js: убрана автопрокрутка при инициализации
- chat-detail-enhanced.js: убран дублирующий обработчик
- docs/completed/SCROLL_CONFLICTS_AUDIT.md: полный аудит
ПРОБЛЕМЫ:
1. Видимые прыжки прокрутки при загрузке чата
2. Принудительный скролл при получении чужих сообщений
3. Дублирование загрузки chat-detail-enhanced.js
РЕШЕНИЯ:
1. Используем requestAnimationFrame для гарантии обновления DOM перед прокруткой
- Скрываем контейнер → рендерим → ждем RAF → скроллим → показываем
- Прокрутка происходит ДО показа контейнера = нет видимых прыжков
2. Убираем агрессивный автоскролл в handleNewMessage:
- Скроллим только если это наше сообщение ИЛИ мы уже внизу
- Предотвращаем прерывание чтения старых сообщений
3. Убираем дублирование chat-detail-enhanced.js в шаблоне:
- Было: загружается ДО chatDetail.js
- Стало: загружается ПОСЛЕ для правильного порядка инициализации
4. Улучшен порядок загрузки скриптов в chat_detail.html:
- emoji-picker (третья сторона)
- chatDetail.js (core инициализация)
- chat-detail-enhanced.js (UI расширения)
РЕЗУЛЬТАТЫ:
✅ Нет видимых прыжков - чат открывается сразу в конце
✅ Не прерывается чтение старых сообщений при приходе новых
✅ Правильный порядок инициализации компонентов
✅ Убрано дублирование загрузки скриптов
Проблема: При открытии чата сначала загружались сообщения,
затем происходила видимая прокрутка вниз - плохой UX
Решение:
1. Скрываем контейнер (visibility: hidden) перед рендерингом
2. Используем DocumentFragment в renderMessages для батчевой вставки
3. Устанавливаем scrollTop ДО показа контейнера
4. Показываем контейнер - пользователь сразу видит конец диалога
Преимущества:
- Нет видимой прокрутки - сразу показывается конец чата
- Меньше reflow (1 вместо N при forEach)
- Быстрее рендеринг больших чатов (все элементы вставляются за раз)
- Лучший UX - нет "прыжков" при загрузке
Изменения:
- userWebSocket.js: добавлено скрытие/показ контейнера, прямая установка scrollTop
- messageRenderer.js: renderMessages использует DocumentFragment вместо множественных insertAdjacentHTML
Фаза 3-4: Упрощение и документирование
- Улучшена структура initializeComponents() в chatDetail.js
* Пронумерованные шаги (1-8) для четкого порядка
* Улучшенное логгирование с ✓ маркерами
* MessageRenderer создается первым
* Экспорт всех API в window для отладки
- Добавлена подробная JSDoc документация
* @fileoverview с описанием архитектуры
* @param для всех функций
* Описание порядка инициализации
- Обновлена документация MESSAGES_LOADING_REFACTORING.md
* Отмечены все 4 фазы как завершенные
* Добавлена финальная архитектура
* Количественные и качественные показатели
* Переведен в docs/completed/
Результаты рефакторинга:
✅ Удалено 540+ строк мертвого кода
✅ Унифицирован рендеринг через MessageRenderer
✅ Улучшена читаемость и поддерживаемость
✅ Исправлен баг infinite loader
Рефакторинг завершен успешно!
- Добавлен метод MessageRenderer.createMessageElement() для создания DOM элементов
- Обновлен chatComposer для использования MessageRenderer
- Обновлен chatHistoryLoader для использования MessageRenderer
- Обновлен chatDetail.js для передачи messageRenderer в модули
- Все модули теперь используют единый источник рендеринга
- Сохранена обратная совместимость через fallback на createMessageElement()
Phase 2 of 4: Rendering unification completed
- Удалён chatWebSocket.js (дублировал userWebSocket.js)
- Удалён initialMessagesLoader.js (не используется, загрузка через WS)
- Очищены импорты и закомментированный код в chatDetail.js
- Добавлен план рефакторинга в docs/in-progress/
Загрузка initial messages теперь происходит только через:
- userWebSocket.handleInitialMessages() - начальные сообщения
- chatHistoryLoader - подгрузка истории при скролле
- Реализован современный нижний navbar для мобильных (5 кнопок)
- Скрытие нижнего navbar на странице чата
- Новая шапка чата с аватарами и бейджами типа чата
- Переработана HTML структура чата (убраны лишние Bootstrap контейнеры)
- Добавлены стили для аватаров и бейджей типов чатов
- Условное отображение: аватар OR иконка категории
- Граница у .chat-header теперь только на мобильных устройствах
- На десктопе границы у .chat-container (общий стиль карточки)
- Увеличен отступ кнопки скролла вниз (не перекрывает форму ввода)
- Мобильная версия: учитывает safe-area-inset-bottom
- Добавлена bottom navbar с 5 кнопками (Главная, Уведомления, Поиск, Календарь, Ещё)
- Панель отображается только на мобильных устройствах (до 768px)
- Использованы системные CSS переменные и стили
- Удалена кнопка гамбургера из верхней панели (дублирование функционала)
- Добавлена синхронизация бейджей уведомлений
- Поддержка светлой и темной темы
- Backdrop-filter для полупрозрачности в iOS-стиле
- Добавлен API endpoint для включения/выключения уведомлений чата
- Реализован frontend для управления уведомлениями через меню чата
- Обновлены сигналы для проверки настроек notifications_enabled
- Стандартизирована логика уведомлений для всех типов чатов
- Оптимизированы запросы к БД (1 запрос вместо N для ChatUserSettings)
- Переведены детальные логи с INFO на DEBUG уровень
Файлы:
- backend/api/v1/communications/views.py (новый endpoint)
- backend/api/v1/urls.py (новый маршрут)
- backend/static/js/components/chatMenuActions.js (полная реализация)
- backend/communications/notification_signals.py (проверка настроек + оптимизация)
- backend/notifications/services.py (оптимизация логирования)
✅ КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ:
1. Упростил _checkSubscription() - теперь ТОЛЬКО чтение
- Убрана автоматическая синхронизация с сервером
- Убрана автоматическая переподписка при ошибках
- Метод не модифицирует состояние
2. Исправил subscribe() - убран принудительный unsubscribe
- Браузер сам управляет существующими подписками
- update_or_create на backend обновит запись
- Избегаем конфликтов Push Service
3. Улучшен resetEverything() для recovery
- Полная очистка: unsubscribe + unregister + localStorage
- Задержка 2 сек для обработки Push Service
- Подробное логирование каждого шага
- Инструкции для пользователя
4. Добавлена детекция AbortError
- Понятное сообщение в консоли
- Инструкция по recovery
- Ссылка на resetEverything()
�� Добавлен полный аудит:
- backend/docs/reports/WEB_PUSH_AUDIT_2026_01_06.md
- Детальный анализ всех компонентов
- План рефакторинга (4 фазы)
- Чек-листы для тестирования
Связано с: #AbortError #WebPush #VAPID
- Добавлена автоматическая отписка от Web Push при выходе
- При входе принудительно переподписываем пользователя
- Очищаем старую подписку из localStorage перед новой
- Это исправляет AbortError из-за старых подписок с другими VAPID ключами
- Split notification sending into separate WebSocket and Web Push channels
- Add Web Push support for offline users
- Configure VAPID keys for push authentication
- Add 'aud' field to VAPID claims for WNS compatibility
- Optimize subscription sync - only POST when endpoint changes
- Remove debug logs and minimize server logging
- Update Service Worker with improved error handling
- Add Service-Worker-Allowed header for proper scope
Web Push now works independently from WebSocket, enabling
notifications when browser is closed (requires HTTPS in production)
- Move Service Worker to root (/sw.js) for proper scope registration
- Add route to serve sw.js from root with correct content-type
- Update push-notifications.js to register sw.js from root
- Fix all notification API URLs to use /api/v1/ prefix
- Update notificationsApi.js to use correct v1 endpoints
- Add WebPushSubscription model for storing push subscriptions
- Generate VAPID keys for Web Push authentication
- Add API endpoints for push subscribe/unsubscribe
- Create Service Worker (sw.js) for handling push events
- Create JavaScript module for managing push subscriptions
- Integrate send_web_push_notification into NotificationService
- Add Service Worker registration to base.html
- Update requirements.txt with pywebpush package
BREAKING CHANGES:
- Removed OU=Roles from LDAP structure, role groups now created directly in department OU
- Role groups use ROLE_<Name> naming convention (similar to DEP_, POS_)
New features:
- RoleAssignment model: allows assigning roles to ANY employee, not just department members
- New API endpoints: /assign/, /revoke/, /assignments/ on DepartmentRoleViewSet
- Permission system updated: has_dept_perm() checks RoleAssignment first
- Employee profile shows external roles with 'внешняя роль' badge
- Employee list filter includes role-only employees with department_relation field
- Role assignment modal now searches all employees via AJAX
LDAP changes:
- _ensure_role_group(): creates ROLE_<Name> group in department OU
- assign_role(), revoke_role(): manage RoleAssignment + LDAP sync
- rename_role_group(), delete_role_group(): full lifecycle support
- Removed all references to OU=Roles
Migrations:
- 0035: Create RoleAssignment model
- 0036: Data migration from EmployeeDepartment.role
Tests:
- 7 new tests for role assignment (all passing)
Docs:
- 9 detailed reports on architecture, models, API, LDAP, tests
- Полная переделка шаблона request_detail.html с единообразными стилями
- Новая структура: основная карточка (8 колонок) + боковая панель комментариев (4 колонки)
- Единообразные иконки типов заявлений (calendar-check, capsule, umbrella-fill и т.д.)
- Единообразные бейджи статуса и типа как в списке
- Информационные блоки для автора, описания, получателей, одобрившего
- Форма комментариев с правильным стилем message-field--compact
- Emoji picker с поддержкой dropdown-menu поверх контента
- AJAX обработка отправки и удаления комментариев
- Новый CSS файл request-detail.css с адаптивностью
- Добавлена функция _add_type_display() в views.py для отображения типа
Улучшения:
- Единство дизайна со страницей списка заявлений
- Правильное позиционирование emoji picker (fixed positioning)
- Sticky боковая панель с комментариями
- Форма комментария как в ленте (message-field--compact)
- Кнопки одобрения/отклонения с правильными иконками
ПРОБЛЕМА: Уведомления не отправлялись при создании нового заявления
ПРИЧИНА: Сигнал post_save срабатывал ДО установки ManyToMany связей (recipients, cc_users)
РЕШЕНИЕ:
- Добавлен сигнал m2m_changed для отслеживания установки recipients/cc_users
- При создании заявления оно помечается как ожидающее отправки уведомлений
- После установки recipients через .set() срабатывает m2m_changed и отправляет уведомления
- Используется глобальный set _pending_new_requests для отслеживания
УЛУЧШЕНИЯ:
- Добавлено подробное логирование процесса создания и отправки уведомлений
- Разные эмодзи-иконки для разных типов получателей (� адресовано, � в копии, ✅ на согласование)
- Все типы используют notification_type='request_new' (существующий в БД)
Файлы:
- notification_signals.py: добавлены сигналы m2m_changed
- serializers.py: добавлено логирование создания и установки recipients
- requestCrudHandler.js: заменены alert+reload на закрытие модального окна + событие
- requestList.js: добавлен обработчик события request:updated с отложенной перезагрузкой (500ms)
- Улучшен UX: модальное окно плавно закрывается, затем обновляется список
- Системное уведомление больше не появляется
- Approver (тот кто принял решение) не получает уведомление о своем действии
- Исключены employee.id и approver_id из recipients при approve/reject
- Упрощен signal create_request_notifications (убран лишний запрос в БД)
- Теперь передается актуальный request_obj с установленным approver_id
MOBILE FIXES:
- request-list.css: переделан мобильный layout с flexbox вместо grid
- page-header.css: оптимизирован padding/margin для мобильных экранов
- requestListHandler.js:
* Добавлен AbortController с таймаутом (10/15 сек для мобильных)
* Обработка offline/online событий сети
* Информативные сообщения об ошибках (отсутствие интернета, таймаут)
* Адаптивный Intersection Observer (rootMargin 200px для мобильных)
* Лучшая обработка network failures
UI/UX:
- Скрыт счётчик на экранах < 480px
- Контент теперь отображается на всех разрешениях
- Исчезновение спиннера при ошибке сети
- Визуальное различие между ошибками загрузки
NEW FEATURE:
- Добавлен новый тип заявления 'Отгул' (day_off)
- Обновлена миграция 0009_alter_request_type
- Добавлен во все формы создания/редактирования
- Добавлен в фильтры списка
- Добавлен обработчик для смены статуса заявления в JavaScript
- Интегрирована форма смены статуса в шаблон request_detail.html
- Форма видна только администраторам (can_process=True)
- Поддерживаются переходы: pending->approved/rejected, *->cancelled
- Добавлена валидация и подтверждение перед изменением статуса
- Используются API endpoints: /api/v1/requests/{id}/approve/, reject/, cancel/
- Автоматическое обновление содержимого модали после смены статуса
- Отображение статуса обновления (loading, success, error) в UI
- Добавлена функция удаления комментариев в views_front.py
- Добавлена обработка удаления в URL routing
- Расширен JavaScript модуль для работы с добавлением/удалением комментариев
- Добавлена обработка формы добавления комментариев с JSON
- Улучшена обработка ошибок при добавлении комментария
- Добавлена инициализация emoji picker в модали
- Обновлен счетчик комментариев при добавлении/удалении
- Обновлены шаблоны для работы с данными из API
- Добавлена поддержка перезагрузки содержимого модали после каждого действия
Этап 3 разработки включает:
✅ Создан JavaScript модуль requestDetail.js:
- Класс RequestDetailModal для управления модальным окном
- Функция open(requestId) для открытия заявления
- Функция loadData(requestId) для загрузки через AJAX
- Обработка ошибок (404, 403)
- Поддержка добавления комментариев в модали
- initRequestDetailModal() для инициализации на странице список
✅ Добавлено модальное окно в request_list_full.html:
- HTML структура модального окна requestDetailModal
- ID контейнера для содержимого: requestDetailContent
- Bootstrap 5 modal с размером modal-lg
- Scrollable модаль для больших содержимо
✅ Обновлена инициализация скриптов:
- Подключение модуля requestDetail.js
- Инициализация RequestDetailModal при загрузке страницы
- Сохранение экземпляра для использования на странице
✅ Интеграция с кликами:
- Подготовка к интеграции с существующей логикой списка
- Возможность открытия заявления из списка или по прямой ссылке
Готово для следующего этапа 4: Функциональность комментариев
Improved human silhouette overlay to better center the face and make it larger for optimal FaceID recognition.
Changes:
Face positioning:
- Moved face center from cy=120 to cy=150 (centered vertically)
- Face now occupies middle of frame instead of upper third
- Eyes align with horizontal center line at y=150
- Better balance between head and body in frame
Face size increase:
- Increased head ellipse from rx=75,ry=95 to rx=90,ry=115
- ~20% larger face area for better recognition
- More prominent facial features in final crop
- Improved face-to-frame ratio (70-80% coverage)
Body proportions updated:
- Neck: y=250 to y=285 (moved down)
- Shoulders: y=230 to y=285 (centered below face)
- Torso extends to bottom of frame
- More natural body proportions
Guide lines adjusted:
- Eye-level line: y=120 → y=150 (center of frame)
- Shoulder line: y=230 → y=285 (below center)
- Vertical center line unchanged (x=150)
UI text updates:
- Instructions emphasize face centering
- 'Расположите глаза на центральной линии'
- 'Голова занимает верхнюю половину фото'
- Changed bottom label from 'Пояс' to 'Низ кадра'
Benefits:
✓ Face more prominent in photo (better for FaceID)
✓ Centered composition (professional appearance)
✓ Balanced head-to-body ratio
✓ Easier for users to align correctly
✓ Improved recognition accuracy
Changed avatar cropper aspect ratio from 1:1 to 3:4 (portrait) for better FaceID recognition.
Improved human silhouette overlay synchronization with crop box during all interactions.
Key changes:
Aspect ratio:
- Changed from 1:1 (square) to 3:4 (portrait)
- Output size: 600x800px (instead of 800x800px)
- Better suited for full body positioning (head, shoulders, torso)
SVG overlay improvements:
- Updated viewBox from 400x400 to 300x400 (3:4 proportions)
- Redesigned human silhouette for portrait format
- Added torso outline up to waist level
- Additional guide line for shoulders
- Better proportions for face/head/shoulders alignment
Synchronization enhancements:
- Added cropstart, cropmove, cropend event handlers
- Overlay now follows crop box during all interactions:
✓ Moving the crop box
✓ Resizing the crop box
✓ Zooming the image
✓ Initial positioning
- Real-time position updates using getCropBoxData()
UI/UX updates:
- Updated instructions: 'Совместите тело с зелёным контуром'
- Face should occupy upper third of frame
- Portrait format 3:4 mentioned in requirements
- Changed label from 'Плечи' to 'Пояс' (waist)
- Templates updated with new size requirements (600x800px)
Technical details:
- minCropBoxHeight: 266px (200 * 4/3 for aspect ratio)
- preserveAspectRatio: none (for proper stretching)
- Event handlers ensure overlay follows crop box smoothly
- No performance impact from additional event listeners
Benefits:
✓ Better for FaceID (full body context)
✓ Standard portrait photo format
✓ More professional appearance
✓ Consistent with ID photo standards
✓ Improved overlay visibility and accuracy
Added visual guide with human body contour overlay to help users properly position their face for FaceID.
Features:
- SVG overlay with human silhouette (head, neck, shoulders)
- Green dashed outline (70-80% face coverage guidance)
- Guide lines (vertical center, horizontal eye level)
- Text labels ('Верх головы', 'Плечи')
- Toggle checkbox to show/hide overlay
- Real-time overlay positioning synchronized with crop box
Technical implementation:
- SVG viewBox 400x400 with preserveAspectRatio
- Dynamic positioning using getCropBoxData()
- Event handlers: ready, crop, zoom
- Overlay updates on cropper interactions
- Pointer-events: none for non-intrusive UI
UI/UX improvements:
- Clear visual guidance for face positioning
- Non-intrusive overlay (can be toggled off)
- Color: #00ff00 (green) for high visibility
- Opacity: 0.8 for overlay, 0.4 for guide lines
- Auto-shown by default, user can disable
Benefits:
✓ Reduces user errors in face positioning
✓ Ensures consistent photo quality for FaceID
✓ Visual feedback for proper head/shoulders alignment
✓ Improves user experience and reduces support requests
- Added dismissal form on employee profile page with permissions
- Shows warning when dismissing (LDAP deactivation notice)
- Inactive employees filtered by default in employee list (active=true)
- Team wheel now shows only active employees
- Auto-submit filter form on status change
- Added redirect to set active=true by default on first visit
Problem:
- When editing employee profile, got duplicate PATCH requests
- One request returned 502, another 200 OK
- Error appeared in console but operation succeeded
- Classic double-submit race condition
Root Cause:
initEmployeeForm() added new addEventListener('submit') on every call.
If function was called twice (e.g., on tab navigation or re-render),
two event handlers would fire simultaneously, sending parallel requests.
Solution:
1. Check if form already initialized via data-attribute
2. Set form.dataset.employeeFormInitialized = 'true' flag
3. Skip re-initialization if already initialized
4. Return API object for already initialized forms
This ensures only ONE submit handler per form, preventing:
- Duplicate PATCH requests
- 502 errors from race conditions
- Confusing UX with errors that don't break functionality
Now form submits cleanly with single request.
Backend (API):
- Added logging of user ID and request data keys before validation
- Log validation errors with full details before raising exception
- Helps diagnose 400 Bad Request errors from users
Frontend (JS):
- Added console logging of all FormData entries before submit
- Improved error message display with field-specific validation errors
- Shows structured error messages instead of generic 'HTTP 400'
This will help identify why some users get 400 errors when creating requests.
RecipientPicker (заявления):
- Added pagination support to load ALL users (not just first page)
- Added avatar images from media URLs instead of base64
- Falls back to initials when no avatar available
- Loads users in batches of 100 per page
RecipientPickerHandler (чаты):
- Added pagination support for full user list
- Keeps existing avatar display logic
- Loads 100 users per page when not searching
- Limits to 20 results when searching
CSS improvements:
- Added styles for avatar images (.user-avatar-img)
- Added placeholder styles for initials
- Proper object-fit and border-radius for avatars
Changed auto-scroller behavior for new employees:
- Removed pause on card hover - cards now only scale on hover (CSS)
- Added edge detection (20% zones on left/right sides)
- Scroller pauses ONLY when mouse is near container edges
- When paused at edge, centers nearest card for better visibility
- Mouse in center zone keeps auto-scroll running
- Smoother interaction - no interruption when browsing cards
