Corp/docs/completed/BASE_TEMPLATE_REFACTORING_COMPLETE.md

Рефакторинг base.html - ВЫПОЛНЕНО

Изменения

✅ 1. Упрощён base.html

Было:

• 250+ строк
• Инициализация всех chat-модулей
• chatAvatarMap, chatBadgeManager, chatListFilter, chatListRealtime
• chatMarkRead (только для chat_detail)
• Sidebar badge logic
• Сложная конфигурация userWebSocket

Стало:

• ~120 строк (упрощение в 2 раза!)
• Только универсальный userWebSocket
• Только notification-manager
• Чистая архитектура

✅ 2. Созданы include-файлы

includes/chat_scripts.html

Назначение: Общие скрипты для ВСЕХ chat-страниц (chat_list + chat_detail)

Содержит:

• chatAvatarMap - карта аватаров
• chatBadgeManager - управление счётчиками
• sidebarBadge - глобальный счётчик в сайдбаре
• Расширенная инициализация userWebSocket с chat-обработчиками
• Событие chat:system-ready для координации модулей

includes/chat_detail_scripts.html

Назначение: Скрипты ТОЛЬКО для chat_detail.html

Содержит:

• chatMarkRead - отметка прочитанного
• chatComposer - композер сообщений
• chatHistoryLoader - подгрузка истории
• chat-detail-enhanced.js - UI компоненты

includes/chat_list_scripts.html

Назначение: Скрипты ТОЛЬКО для chat_list.html

Содержит:

• chatListFilter - фильтрация чатов
• chatListRealtime - real-time обновления карточек

✅ 3. Обновлены chat-шаблоны

chat_detail.html

{% block extra_js %}
  {% include "includes/chat_scripts.html" %}
  {% include "includes/chat_detail_scripts.html" %}
  {# третьесторонние библиотеки #}
  {# legacy скрипты #}
{% endblock %}

chat_list.html

{% block extra_js %}
  {% include "includes/chat_scripts.html" %}
  {% include "includes/chat_list_scripts.html" %}
  {# legacy скрипты #}
{% endblock %}

---

Новая архитектура событий

1. Базовый WebSocket (base.html)

const userWs = initUserWebSocket({ userId });
window.dispatchEvent(new CustomEvent('user:ws-ready', { 
  detail: { api: userWs, ws: userWs.ws } 
}));

2. Chat-система (chat_scripts.html)

window.addEventListener('user:ws-ready', (e) => {
  const userWs = e.detail.api;
  
  // Инициализация chat-модулей
  const avatarMap = initChatAvatarMap();
  const badgeManager = initChatBadgeManager();
  
  // Уведомляем о готовности chat-системы
  window.dispatchEvent(new CustomEvent('chat:system-ready', {
    detail: { userWs, avatarMap, badgeManager }
  }));
});

3. Специфичные модули (chat_detail_scripts.html / chat_list_scripts.html)

window.addEventListener('chat:system-ready', (e) => {
  const { userWs, avatarMap, badgeManager } = e.detail;
  
  // Инициализация специфичных для страницы модулей
  const markReadApi = initChatMarkRead({ ... });
  const composer = initChatComposer({ ... });
  // и т.д.
});

---

Граф зависимостей модулей

base.html (загружается ВЕЗДЕ)
├─ stringUtils.js
├─ timing.js
├─ scroll.js
├─ navbarHeight.js
├─ likeHandler.js
├─ userWebSocket.js (базовая инициализация)
│  └─ событие: user:ws-ready
└─ notification-manager.js

chat_scripts.html (загружается на chat_list + chat_detail)
├─ слушает: user:ws-ready
├─ chatAvatarMap.js
├─ chatBadgeManager.js
├─ sidebarBadge (inline)
└─ событие: chat:system-ready

chat_detail_scripts.html (загружается ТОЛЬКО на chat_detail)
├─ слушает: chat:system-ready
├─ chatMarkRead.js
├─ chatComposer.js
├─ chatHistoryLoader.js
└─ chat-detail-enhanced.js

chat_list_scripts.html (загружается ТОЛЬКО на chat_list)
├─ слушает: chat:system-ready
├─ chatListFilter.js
└─ chatListRealtime.js

---

Преимущества новой архитектуры

1. ✅ Чистота и читаемость

• base.html содержит только универсальное
• Легко понять, что где используется
• Нет "мёртвого кода" на ненужных страницах

2. ✅ Производительность

• Меньше JS загружается на главной странице
• Chat-модули загружаются только там, где нужны
• Меньше инициализаций при загрузке

3. ✅ Масштабируемость

• Легко добавлять новые модули
• Просто создать includes/calendar_scripts.html
• Не нужно трогать base.html

4. ✅ Тестируемость

• Модули изолированы
• Понятные точки интеграции (события)
• Легко мокировать зависимости

5. ✅ Обратная совместимость

• Старый код продолжает работать
• window.chatWebSocketApi всё ещё доступен
• window.chatAvatarMap, window.chatBadgeManager экспортируются

---

Миграция для других модулей

Если нужно добавить новую страницу с chat-функциональностью:

{# templates/communications/new_chat_page.html #}
{% extends "base.html" %}

{% block extra_js %}
  {# Подключаем общие chat-скрипты #}
  {% include "includes/chat_scripts.html" %}
  
  {# Специфичные скрипты для этой страницы #}
  <script type="module">
    window.addEventListener('chat:system-ready', (e) => {
      const { userWs, avatarMap, badgeManager } = e.detail;
      
      // Ваша логика здесь
    });
  </script>
{% endblock %}

Если нужно добавить новую функциональность (например, календарь):

1. Создаём includes/calendar_scripts.html
2. Добавляем в нужные страницы: {% include "includes/calendar_scripts.html" %}
3. НЕ трогаем base.html!

---

Результат

До:

base.html: 250 строк
├─ 15+ chat-модулей на ВСЕХ страницах
├─ Сложная конфигурация
└─ Непонятно, что где используется

После:

base.html: ~120 строк (только универсальное)
├─ chat_scripts.html: общее для chat-страниц
├─ chat_detail_scripts.html: только для деталей чата
└─ chat_list_scripts.html: только для списка чатов

Упрощение: 50% кода в base.html Производительность: Chat-модули загружаются только на chat-страницах Читаемость: 100% - сразу понятно, что где используется

---

Следующие шаги

1. ✅ ГОТОВО: Рефакторинг base.html
2. 🔄 Следующее: Рефакторинг userWebSocket.js (поддержка .configure())
3. 🔄 Следующее: Рефакторинг chatComposer.js (адаптация под новую архитектуру)
4. 🔄 Следующее: Рефакторинг chatHistoryLoader.js (адаптация под новую архитектуру)
5. 📋 Потом: Полный рефакторинг рендеринга чатов на React/Vue