Рефакторинг base.html

Проблема

base.html содержит много chat-специфичной логики, которая должна быть только на страницах чатов.

Принципы рефакторинга

✅ Что ДОЛЖНО быть в base.html (универсальное):

Базовая структура - navbar, sidebar, rightbar, main
Глобальные утилиты - stringUtils, timing, scroll
Глобальные переменные - window.currentUserId
Универсальный WebSocket - подключение к ws/, но БЕЗ chat-специфичной логики
Notification Manager - уведомления нужны везде
Theme Initializer - тема нужна везде
Bootstrap, Icons - базовые библиотеки

❌ Что НУЖНО убрать из base.html (chat-специфичное):

chatAvatarMap - нужен только на страницах чатов
chatMarkRead - только для chat_detail.html
chatListFilter - только для chat_list.html
chatBadgeManager - только для страниц с чатами
chatListRealtime - только для chat_list.html
Sidebar badge logic - должна быть в отдельном модуле
Chat-специфичные обработчики в userWebSocket - onListUpdate, markReadApi

План действий

Шаг 1: Создать chat-специфичные include файлы

includes/chat_scripts.html - общие скрипты для всех страниц чатов:

{# Загружается на chat_list.html и chat_detail.html #}
- chatAvatarMap
- chatBadgeManager
- userWebSocket инициализация с chat-обработчиками
- Sidebar badge logic

includes/chat_detail_scripts.html - только для chat_detail.html:

- chatMarkRead
- chatComposer
- chatHistoryLoader
- chat-detail-enhanced

includes/chat_list_scripts.html - только для chat_list.html:

- chatListFilter
- chatListRealtime

Шаг 2: Упростить base.html

Что остаётся:

// Глобальные утилиты
import { esc, norm, ... } from 'stringUtils.js';
import { debounce, throttle } from 'timing.js';
import { smoothScrollTo, ... } from 'scroll.js';

// Базовые компоненты
import { initNavbarHeight } from 'navbarHeight.js';
import { initLikeHandler } from 'likeHandler.js';

// Универсальный WebSocket (БЕЗ chat-специфики)
import { initUserWebSocket } from 'userWebSocket.js';

// Базовая инициализация
const userWs = initUserWebSocket({
  userId: {{ user.id }}
});
window.userWebSocket = userWs;

Шаг 3: Обновить chat_detail.html

{% extends "base.html" %}

{% block extra_js %}
  {% include "includes/chat_scripts.html" %}
  {% include "includes/chat_detail_scripts.html" %}
{% endblock %}

Шаг 4: Обновить chat_list.html

{% extends "base.html" %}

{% block extra_js %}
  {% include "includes/chat_scripts.html" %}
  {% include "includes/chat_list_scripts.html" %}
{% endblock %}

Результат

До:

❌ base.html: 250 строк, много chat-логики
❌ Все chat-модули загружаются на всех страницах
❌ Сложно понять, что где используется

После:

✅ base.html: ~120 строк, только универсальное
✅ Chat-модули загружаются только на нужных страницах
✅ Чёткое разделение ответственности
✅ Легко добавлять новые модули

Архитектура модулей

base.html (универсальные модули)
├─ stringUtils.js
├─ timing.js
├─ scroll.js
├─ navbarHeight.js
├─ likeHandler.js
├─ userWebSocket.js (базовое подключение)
└─ notification-manager.js

includes/chat_scripts.html (общее для всех chat-страниц)
├─ chatAvatarMap.js
├─ chatBadgeManager.js
├─ sidebarBadge.js (новый модуль)
└─ userWebSocket.js (расширенная инициализация с chat-обработчиками)

includes/chat_detail_scripts.html (только для chat_detail.html)
├─ chatMarkRead.js
├─ chatComposer.js
├─ chatHistoryLoader.js
└─ chat-detail-enhanced.js
   ├─ messageReactions.js
   ├─ messageContextMenu.js
   ├─ messageSelection.js
   ├─ chatPoll.js
   └─ messageEditing.js

includes/chat_list_scripts.html (только для chat_list.html)
├─ chatListFilter.js
└─ chatListRealtime.js

4.9 KiB Raw Blame History Unescape Escape