Игорь Надеин f00f7c0be5 fix(ui): исправлен рендеринг аватаров - устранена деформация и выравнивание

Проблема:
- Аватары деформировались из-за object-fit на контейнере
- Аватары выравнивались по верху сообщения вместо низа
- Неконсистентная HTML структура: <img class="mini-ava"> vs <div class="mini-ava"><i></i></div>

Решение:

SCSS (_common.scss):
- object-fit: cover перемещен с контейнера на вложенный img
- Добавлен display: block для img элементов

SCSS (_chat-detail.scss):
- Добавлен align-items: flex-end к .d-flex.msg для выравнивания по низу
- .mini-ava рефакторинг: display: flex (было grid), border-radius: 50% (было 9999px)
- Добавлен background и border для контейнера
- Добавлен font-size: 20px для fallback иконки
- object-fit остается только на img тегах

JavaScript (messageRendererV2.js):
- Всегда создавать <div class="mini-ava"> как контейнер
- Вложенный <img> или <i class="bi bi-person-circle"> внутри
- Устранена несогласованность разметки

Рефакторинг архитектуры SCSS (бонус):
- Создан Design System: abstracts/_variables.scss (200+ токенов)
- Создано abstracts/_mixins.scss (40+ миксинов)
- Реорганизована файловая структура: layout/, components/, components/chat/
- Централизованы стили аватаров в _common.scss
- Устранены дубликаты (avatar определялся в 3 файлах)
- Применены design tokens к navbar, page-header
- Создана документация: SCSS_NAMING_CONVENTIONS.md
- Удалено 9 дублирующихся CSS файлов

Компиляция: 280KB, 0 ошибок, production ready

2026-01-14 11:18:35 +03:00

6.5 KiB

Raw Blame History

SCSS Architecture Naming Conventions

📁 Структура папок

scss/
├── abstracts/          # Design tokens, mixins, functions
│   ├── _index.scss     # Центральный импорт
│   ├── _variables.scss # Design tokens
│   └── _mixins.scss    # Reusable patterns
├── layout/             # Глобальные структуры страниц
│   └── _chat-layout.scss
├── components/         # UI компоненты
│   ├── _badges.scss    # (было _badges-telegram-style.scss)
│   ├── _cards.scss
│   ├── _navbar.scss
│   ├── _sidebar.scss
│   └── chat/           # Подпапка для чат-компонентов
│       ├── _chat-detail.scss
│       ├── _chat-list.scss
│       ├── _chat-message.scss
│       └── _chat-polls.scss
├── utilities/          # Helper классы
└── custom-bootstrap.scss  # Entry point

🎯 Соглашения об именовании

Файлы

Правило: _[prefix]-[component].scss

✅ Хорошо:

_badges.scss (короткое, понятное)
_chat-detail.scss (prefix + component)
_message-inputs.scss (понятная семантика)

❌ Плохо:

_badges-telegram-style.scss (слишком длинное)
_chat-new-messages-indicator.scss (слишком специфичное)

Классы компонентов

Правило: BEM (Block Element Modifier)

Структура:

.block {}              // Компонент
.block__element {}     // Элемент внутри блока
.block--modifier {}    // Модификация блока
.block__element--modifier {} // Модификация элемента

Примеры:

✅ Правильно:

// Badge компонент
.badge {}
.badge--sm {}          // Модификатор размера
.badge--primary {}     // Модификатор цвета
.badge__icon {}        // Элемент внутри badge

// Chat компонент
.chat {}
.chat__header {}
.chat__message {}
.chat__message--mine {}
.chat__avatar {}

❌ Неправильно:

.badge-telegram {}      // Не добавляй vendor/tech префиксы
.badge-telegram-sm {}   // Используй --sm
.chat-row {}           // Используй .chat__item
.chatAvatar {}         // camelCase недопустим

Utility классы

Правило: Префикс u- для универсальных утилит

.u-hidden {}           // Utility
.u-text-truncate {}
.u-flex-center {}

State классы

Правило: Префикс is- или has-

.is-active {}
.is-disabled {}
.is-loading {}
.has-error {}
.has-badge {}

📦 Организация кода в файле

Структура SCSS файла:

// 1. Header comment
// 2. Imports (если нужны локальные)
// 3. Variables (локальные, если есть)
// 4. Base component
// 5. Elements (__element)
// 6. Modifiers (--modifier)
// 7. States (.is-*, .has-*)
// 8. Responsive (@include mobile {})
// 9. Dark mode (@include dark-mode {})

Пример:

// =============================================================================
// Badges Component
// =============================================================================
// Telegram-style notification badges

// =============================================================================
// 1. BASE COMPONENT
// =============================================================================
.badge {
  @include badge-base();
  // styles
}

// =============================================================================
// 2. ELEMENTS
// =============================================================================
.badge__icon {
  // styles
}

// =============================================================================
// 3. MODIFIERS - SIZE
// =============================================================================
.badge--sm {
  @include badge-base($badge-height-sm);
}

.badge--lg {
  @include badge-base($badge-height-lg);
}

// =============================================================================
// 4. MODIFIERS - COLOR
// =============================================================================
.badge--primary {
  background: var(--bs-primary);
}

// =============================================================================
// 5. STATES
// =============================================================================
.badge.is-hidden {
  display: none;
}

// =============================================================================
// 6. RESPONSIVE
// =============================================================================
@include mobile() {
  .badge {
    font-size: $font-size-xs;
  }
}

// =============================================================================
// 7. DARK MODE
// =============================================================================
[data-bs-theme="dark"] {
  .badge {
    box-shadow: $badge-shadow-dark;
  }
}

🔧 Использование Design Tokens

Всегда используй: