chuijs 4.0.2 → 4.0.4

package/framework/components/chui_card_scroll/card_scroll.js

@@ -0,0 +1,169 @@
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { reducedMotion } = require("../../modules/chui_animations/motion");
+
+/** Зазор между карточками по умолчанию: тот же шаг, что у отступов компонентов */
+const DEFAULT_GAP = 12;
+
+/**
+ * Лента карточек — горизонтальный список, который прокручивается колесом, стрелками на краях
+ * и клавиатурой.
+ *
+ * От `SlideShow` отличается тем, что не показывает слайды по одному: карточки идут подряд,
+ * лента листается свободно, а прилипание к началу карточки лишь помогает остановиться ровно.
+ * От `List` — направлением: строки идут вбок и не переносятся.
+ *
+ * Опции: `id`, `gap`, `snap` (прилипание к карточке, по умолчанию включено), `arrows`
+ * (стрелки на краях, по умолчанию включены), `label` (имя списка для скринридера),
+ * `items` (карточки).
+ *
+ * Методы: `addCard(component)`, `getCards()`, `scrollToCard(index)`, `scrollToEnd()`,
+ * `destroy()`, `set()`. В ленту принимаются компоненты фреймворка (у них есть `set()`)
+ * и готовые узлы.
+ */
+class CardScroll {
+    #root = document.createElement("chui_card_scroll");
+    #track = document.createElement("card_scroll_track");
+    #start = undefined;
+    #end = undefined;
+    #gap = DEFAULT_GAP;
+    #observer = undefined;
+
+    constructor(options = {}) {
+        setStyles(__dirname + "/styles.css", "chUiJS_CardScroll");
+        if (options.id !== undefined) this.#root.id = options.id;
+        const gap = Number(options.gap);
+        this.#gap = Number.isFinite(gap) && gap >= 0 ? gap : DEFAULT_GAP;
+        this.#track.style.gap = `${this.#gap}px`;
+        // Список, а не просто лента: скринридер объявляет число карточек, а каждая —
+        // свой `listitem` (роль ставит `addCard`)
+        this.#track.setAttribute("role", "list");
+        this.#track.setAttribute("aria-label", optionOr(options.label, I18n.t("feedback.cardScroll")));
+        // Лента сама принимает фокус: стрелки клавиатуры прокручивают её, не уводя фокус в карточки
+        this.#track.setAttribute("tabindex", "0");
+        this.#track.addEventListener("keydown", (event) => this.#onKeydown(event));
+        // Вертикальное колесо прокручивает ленту вбок — так её листают мышью с колесом
+        this.#track.addEventListener("wheel", (event) => this.#onWheel(event), { passive: false });
+        this.#track.addEventListener("scroll", () => this.#syncArrows());
+        if (options.snap === false) this.#root.dataset.snap = "false";
+        if (options.arrows !== false) {
+            this.#start = this.#makeArrow(Icons.NAVIGATION.CHEVRON_LEFT, I18n.t("feedback.cardScrollPrev"), -1);
+            this.#end = this.#makeArrow(Icons.NAVIGATION.CHEVRON_RIGHT, I18n.t("feedback.cardScrollNext"), 1);
+            this.#root.append(this.#start, this.#track, this.#end);
+        } else {
+            this.#root.appendChild(this.#track);
+        }
+        if (Array.isArray(options.items)) for (const item of options.items) this.addCard(item);
+        // Стрелки появляются только там, где лента действительно уходит за край: следим
+        // за размером (карточку могли добавить после сборки) и за прокруткой
+        if (typeof ResizeObserver === "function") {
+            this.#observer = new ResizeObserver(() => this.#syncArrows());
+            this.#observer.observe(this.#track);
+        }
+        this.#syncArrows();
+    }
+
+    /** Карточка ленты: компонент фреймворка (у него есть `set()`) или готовый узел */
+    addCard(component = undefined) {
+        if (component === undefined || component === null) return this;
+        const item = document.createElement("card_scroll_item");
+        item.setAttribute("role", "listitem");
+        item.appendChild(typeof component.set === "function" ? component.set() : component);
+        this.#track.appendChild(item);
+        this.#syncArrows();
+        return this;
+    }
+
+    getCards() {
+        return [...this.#track.children];
+    }
+
+    /** Переход к карточке по номеру: место берут у самой карточки, а не считают по ширине */
+    scrollToCard(index = Number()) {
+        const cards = this.getCards();
+        const card = cards[Number(index)];
+        if (card === undefined) return this;
+        this.#scrollTo(card.offsetLeft - this.#track.offsetLeft);
+        return this;
+    }
+
+    scrollToEnd() {
+        this.#scrollTo(this.#track.scrollWidth);
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    destroy() {
+        if (this.#observer !== undefined) this.#observer.disconnect();
+        this.#observer = undefined;
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    #makeArrow(icon = String(), label = String(), direction = 1) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "card_scroll_arrow";
+        // Сторона видна и стилям, и замерам: край ленты — то, что здесь важно
+        button.dataset.side = direction < 0 ? "start" : "end";
+        button.innerHTML = new Icon(icon, "20px").getHTML();
+        button.setAttribute("aria-label", label);
+        button.title = label;
+        button.addEventListener("click", () => this.#step(direction));
+        return button;
+    }
+    #scrollTo(left = Number()) {
+        // При уменьшенном движении лента перескакивает без плавности
+        this.#track.scrollTo({ left: left, behavior: reducedMotion() ? "auto" : "smooth" });
+    }
+    /** Шаг — одна карточка с зазором: он берётся у самой карточки, а не из настроек */
+    #step(direction = 1) {
+        const card = this.#track.querySelector("card_scroll_item");
+        const step = card === null ? this.#track.clientWidth : card.getBoundingClientRect().width + this.#gap;
+        this.#scrollTo(this.#track.scrollLeft + step * direction);
+    }
+    #onKeydown(event = {}) {
+        if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.#step(event.key === "ArrowRight" ? 1 : -1);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            this.#scrollTo(0);
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            this.scrollToEnd();
+        }
+    }
+    /**
+     * Вертикальное колесо двигает ленту вбок. Когда лента упирается, событие отдаётся странице:
+     * иначе список «съел» бы прокрутку, и до содержимого ниже было бы не добраться.
+     */
+    #onWheel(event = {}) {
+        const track = this.#track;
+        if (event.deltaY === 0) return;
+        const max = track.scrollWidth - track.clientWidth;
+        if (max <= 0) return;
+        if ((track.scrollLeft <= 0 && event.deltaY < 0) || (track.scrollLeft >= max && event.deltaY > 0)) return;
+        event.preventDefault();
+        track.scrollLeft += event.deltaY;
+    }
+    /** Стрелка видна только там, где за краем есть карточки */
+    #syncArrows() {
+        if (this.#start === undefined || this.#end === undefined) return;
+        const track = this.#track;
+        const max = track.scrollWidth - track.clientWidth;
+        // Отступ ленты (он держит тень карточек) сдвигает нулевую позицию: без него
+        // лента с прилипанием стоит на нём, и стрелка «назад» светилась бы на старте
+        const offset = parseFloat(getComputedStyle(track).paddingLeft) || 0;
+        this.#start.hidden = track.scrollLeft <= offset + 1;
+        this.#end.hidden = track.scrollLeft >= max - 1;
+    }
+}
+
+exports.CardScroll = CardScroll;

package/framework/components/chui_card_scroll/styles.css

@@ -0,0 +1,86 @@
+/* Лента карточек: горизонтальный список со стрелками на краях.
+   Своей палитры у компонента нет: карточки приносят её сами, полоса прокрутки — общая
+   (`chui_scrollbar`). */
+
+chui_card_scroll {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    /* Компонент сам задаёт ширину: в flex-колонке с `align-items: flex-start` лента
+       без ширины получила бы `max-content` и вылезла за содержимое */
+    width: -webkit-fill-available;
+    box-sizing: border-box;
+}
+
+card_scroll_track {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    min-width: 0;
+    box-sizing: border-box;
+    /* Лента идёт вбок: по вертикали содержимое не переносится и не обрезается тенью карточек */
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* Прилипание к началу карточки помогает остановиться ровно, но не заставляет ленту
+       прыгать через карточку: `proximity`, а не `mandatory` */
+    scroll-snap-type: x proximity;
+    /* Отступ под тень карточек: у обрезанного слоя тень срезалась бы по краю */
+    padding: 4px;
+    margin: -4px;
+}
+
+chui_card_scroll[data-snap="false"] card_scroll_track {
+    scroll-snap-type: none;
+}
+
+/* Лента сама принимает фокус: стрелки клавиатуры прокручивают её, а не уводят фокус в карточку */
+card_scroll_track:focus-visible {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
+    border-radius: var(--radius_sm);
+}
+
+card_scroll_item {
+    flex: none;
+    display: flex;
+    scroll-snap-align: start;
+}
+
+/* Стрелка на краю ленты — круглая кнопка со значком: имя ей даёт словарь, значка скринридер
+   не читает (`Icon` помечает его `aria-hidden`) */
+.card_scroll_arrow {
+    flex: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--control_height);
+    height: var(--control_height);
+    padding: 0;
+    border: 1px solid var(--border_color);
+    border-radius: var(--radius_circle);
+    background: var(--element_background_2);
+    color: var(--text_color);
+    box-shadow: var(--box_shadow_main);
+}
+
+.card_scroll_arrow:hover {
+    background: var(--element_background_hover);
+}
+
+/* Нажатие — акцент, как у прочих кнопок тонкой настройки */
+.card_scroll_arrow:active {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.card_scroll_arrow chui_icon {
+    color: inherit;
+}
+
+/* За краем карточек нет — стрелки нет: `hidden` убирает её и из обхода клавиатурой */
+.card_scroll_arrow[hidden] {
+    display: none;
+}

package/framework/components/chui_chat/chat.js

@@ -1,14 +1,14 @@
-const { setStyles, markdownToHtml, optionOr } = require('../../modules/chui_functions');
-const { Avatar } = require('../chui_avatar/avatar');
-const { Icon, Icons } = require('../chui_icons/icons');
-const { I18n } = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, markdownToHtml, optionOr } = require("../../modules/chui_functions");
+const { Avatar } = require("../chui_avatar/avatar");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Значки состояния отправленного сообщения: в пути, доставлено, прочитано, ошибка */
 const STATUS_ICONS = {
     sending: Icons.ACTIONS.SCHEDULE,
     sent: Icons.NAVIGATION.CHECK,
     read: Icons.ACTIONS.DONE_ALL,
-    failed: Icons.ALERT.ERROR_OUTLINE
+    failed: Icons.ALERT.ERROR_OUTLINE,
 };
 /** Прокрутка считается «у нижнего края», если до него осталось меньше этого, px */
 const NEAR_BOTTOM = 80;
@@ -63,7 +63,7 @@ class Chat {
         SENDING: "sending",
         SENT: "sent",
         READ: "read",
-        FAILED: "failed"
+        FAILED: "failed",
     };
     static #counter = 0;
 
@@ -76,42 +76,54 @@ class Chat {
     #typing = document.createElement("chat_typing");
     #composer = document.createElement("chat_composer");
     #input = document.createElement("textarea");
-    #send_button = document.createElement("button");
+    #sendButton = document.createElement("button");
     #messages = [];
     #own = undefined;
     #placeholder = undefined;
-    #send_text = undefined;
-    #send_label = undefined;
-    #date_separators = true;
-    #composer_visible = true;
+    #sendText = undefined;
+    #sendLabel = undefined;
+    #dateSeparators = true;
+    #composerVisible = true;
     #disabled = false;
-    #typing_name = undefined;
-    #send_listeners = [];
-    #on_send = undefined;
-    #on_message_click = undefined;
+    #typingName = undefined;
+    #sendListeners = [];
+    #onSend = undefined;
+    #onMessageClick = undefined;
     // Текущий день и текущая группа — по ним решается, дописывать пузырь или начать новую;
     // группа — это {node, bubbles, avatar, author, day}
-    #last_date = undefined;
-    #last_group = undefined;
+    #lastDate = undefined;
+    #lastGroup = undefined;
 
-    constructor(options = {
-        id: String(), title: String(), subtitle: String(), messages: [], own: String(),
-        placeholder: String(), sendText: String(), sendLabel: String(), composer: Boolean(),
-        height: String(), width: String(), dateSeparators: Boolean(),
-        onSend: undefined, onMessageClick: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            subtitle: String(),
+            messages: [],
+            own: String(),
+            placeholder: String(),
+            sendText: String(),
+            sendLabel: String(),
+            composer: Boolean(),
+            height: String(),
+            width: String(),
+            dateSeparators: Boolean(),
+            onSend: undefined,
+            onMessageClick: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Chat");
         Chat.#counter += 1;
         this.#id = options.id === undefined ? `chui_chat_${Chat.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#own = options.own;
         this.#placeholder = options.placeholder;
-        this.#send_text = options.sendText;
-        this.#send_label = options.sendLabel;
-        this.#on_send = options.onSend;
-        this.#on_message_click = options.onMessageClick;
-        this.#date_separators = options.dateSeparators !== false;
-        this.#composer_visible = options.composer !== false;
+        this.#sendText = options.sendText;
+        this.#sendLabel = options.sendLabel;
+        this.#onSend = options.onSend;
+        this.#onMessageClick = options.onMessageClick;
+        this.#dateSeparators = options.dateSeparators !== false;
+        this.#composerVisible = options.composer !== false;
         if (options.width !== undefined) this.#root.style.width = options.width;
         // Высота журнала: своя переменная, чтобы поле ввода и шапка оставались на месте
         this.#log.style.setProperty("--chat_height", options.height === undefined ? "320px" : options.height);
@@ -130,19 +142,20 @@ class Chat {
         this.#composer.setAttribute("aria-label", I18n.t("feedback.chatComposer"));
         this.#input.className = "chat_input";
         this.#input.rows = 1;
-        this.#input.placeholder = this.#placeholder === undefined ? I18n.t("feedback.chatPlaceholder") : this.#placeholder;
+        this.#input.placeholder =
+            this.#placeholder === undefined ? I18n.t("feedback.chatPlaceholder") : this.#placeholder;
         this.#input.setAttribute("aria-label", I18n.t("feedback.chatComposer"));
-        this.#send_button.type = "button";
-        this.#send_button.className = "chat_send";
-        this.#send_button.disabled = true;
-        this.#send_button.setAttribute("aria-label", this.#sendLabelText());
-        this.#send_button.setAttribute("title", this.#sendTextText());
-        this.#send_button.innerHTML = new Icon(Icons.CONTENT.SEND, "16px").getHTML();
+        this.#sendButton.type = "button";
+        this.#sendButton.className = "chat_send";
+        this.#sendButton.disabled = true;
+        this.#sendButton.setAttribute("aria-label", this.#sendLabelText());
+        this.#sendButton.setAttribute("title", this.#sendTextText());
+        this.#sendButton.innerHTML = new Icon(Icons.CONTENT.SEND, "16px").getHTML();
 
         this.#header.appendChild(this.#title);
         this.#header.appendChild(this.#subtitle);
         this.#composer.appendChild(this.#input);
-        this.#composer.appendChild(this.#send_button);
+        this.#composer.appendChild(this.#sendButton);
         this.#root.appendChild(this.#header);
         this.#root.appendChild(this.#log);
         this.#root.appendChild(this.#typing);
@@ -151,27 +164,43 @@ class Chat {
         this.#subtitle.hidden = true;
         if (optionOr(options.title, undefined) !== undefined) this.setTitle(options.title);
         if (optionOr(options.subtitle, undefined) !== undefined) this.setSubtitle(options.subtitle);
-        if (!this.#composer_visible) this.#composer.hidden = true;
+        if (!this.#composerVisible) this.#composer.hidden = true;
         if (this.#disabled) this.setDisabled(true);
 
         this.#input.addEventListener("input", () => this.#syncSendState());
         this.#input.addEventListener("keydown", this.#onInputKeyDown);
-        this.#send_button.addEventListener("click", () => this.send());
+        this.#sendButton.addEventListener("click", () => this.send());
         this.#log.addEventListener("click", this.#onLogClick);
         this.setMessages(options.messages === undefined ? [] : options.messages);
     }
 
     // GET
-    getId() { return this.#id; }
-    getTitle() { return this.#title.innerText; }
-    getSubtitle() { return this.#subtitle.innerText; }
+    getId() {
+        return this.#id;
+    }
+    getTitle() {
+        return this.#title.innerText;
+    }
+    getSubtitle() {
+        return this.#subtitle.innerText;
+    }
     /** Текст в поле ввода — то, что ещё не отправлено */
-    getValue() { return this.#input.value; }
+    getValue() {
+        return this.#input.value;
+    }
     /** Копии сообщений: правка копии не меняет журнал */
-    getMessages() { return this.#messages.map((message) => Object.assign({}, message)); }
-    isTyping() { return this.#typing_name !== undefined; }
-    isDisabled() { return this.#disabled; }
-    getLog() { return this.#log; }
+    getMessages() {
+        return this.#messages.map((message) => Object.assign({}, message));
+    }
+    isTyping() {
+        return this.#typingName !== undefined;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
+    getLog() {
+        return this.#log;
+    }
 
     // SET
     setTitle(text = String()) {
@@ -209,17 +238,19 @@ class Chat {
         return this;
     }
     addSendListener(listener = () => {}) {
-        this.#send_listeners.push(listener);
+        this.#sendListeners.push(listener);
         return this;
     }
-    set() { return this.#root; }
+    set() {
+        return this.#root;
+    }
 
     // СООБЩЕНИЯ
     /** Полная замена списка: журнал собирается заново, группы схлопываются по автору и дню */
     setMessages(messages = []) {
         this.#messages = [];
-        this.#last_date = undefined;
-        this.#last_group = undefined;
+        this.#lastDate = undefined;
+        this.#lastGroup = undefined;
         this.#log.innerHTML = "";
         for (const message of messages) this.#appendMessage(Object.assign({}, message), false);
         this.scrollToBottom(false);
@@ -244,22 +275,45 @@ class Chat {
     }
     clear() {
         this.#messages = [];
-        this.#last_date = undefined;
-        this.#last_group = undefined;
+        this.#lastDate = undefined;
+        this.#lastGroup = undefined;
         this.#log.innerHTML = "";
         return this;
     }
     /** «Иван печатает…»: имя автора; `undefined` убирает строку */
     setTyping(name = undefined) {
-        this.#typing_name = name;
-        this.#typing.hidden = name === undefined;
-        this.#typing.innerText = name === undefined ? "" : I18n.t("feedback.chatTyping", {name: name});
+        this.#typingName = name;
+        this.#typing.innerText = name === undefined ? "" : I18n.t("feedback.chatTyping", { name: name });
+        this.#showTyping(name !== undefined);
         return this;
     }
+
+    /**
+     * Строка «печатает» появляется и уходит движением: `hidden` возвращается по концу кадра,
+     * поэтому строка не пропадает рывком. Открытие за время ухода отменяет снятие.
+     */
+    #showTyping(visible) {
+        if (visible === true) {
+            this.#typing.classList.remove("chat_typing_leaving");
+            this.#typing.hidden = false;
+            return;
+        }
+        if (this.#typing.hidden === true) return;
+        this.#typing.classList.add("chat_typing_leaving");
+        const done = (event) => {
+            if (event.target !== this.#typing) return;
+            this.#typing.removeEventListener("animationend", done);
+            if (this.#typing.classList.contains("chat_typing_leaving") === false) return;
+            this.#typing.classList.remove("chat_typing_leaving");
+            this.#typing.hidden = true;
+        };
+        this.#typing.addEventListener("animationend", done);
+    }
     scrollToBottom(smooth = true) {
         // Плавная прокрутка — движение; при `prefers-reduced-motion` она идёт сразу
         const behavior = smooth && this.#reducedMotion() === false ? "smooth" : "auto";
-        if (typeof this.#log.scrollTo === "function") this.#log.scrollTo({top: this.#log.scrollHeight, behavior: behavior});
+        if (typeof this.#log.scrollTo === "function")
+            this.#log.scrollTo({ top: this.#log.scrollHeight, behavior: behavior });
         else this.#log.scrollTop = this.#log.scrollHeight;
         return this;
     }
@@ -276,23 +330,23 @@ class Chat {
             author: this.#own,
             own: true,
             time: Date.now(),
-            status: Chat.STATUS.SENDING
+            status: Chat.STATUS.SENDING,
         });
         this.#input.value = "";
         this.#syncSendState();
         const added = this.#appendMessage(message, true);
-        if (this.#on_send !== undefined) this.#on_send(text, added);
-        for (const listener of [...this.#send_listeners]) listener(text, added);
+        if (this.#onSend !== undefined) this.#onSend(text, added);
+        for (const listener of [...this.#sendListeners]) listener(text, added);
         return this;
     }
 
     // === ВНУТРЕННЕЕ ===
     #sendTextText() {
-        return this.#send_text === undefined ? I18n.t("feedback.chatSend") : this.#send_text;
+        return this.#sendText === undefined ? I18n.t("feedback.chatSend") : this.#sendText;
     }
     /** Имя кнопки отправки: своё (`sendLabel`), иначе `sendText`, иначе словарь */
     #sendLabelText() {
-        if (this.#send_label !== undefined) return this.#send_label;
+        if (this.#sendLabel !== undefined) return this.#sendLabel;
         return this.#sendTextText();
     }
     #reducedMotion() {
@@ -301,7 +355,7 @@ class Chat {
         return query.matches === true;
     }
     #syncSendState() {
-        this.#send_button.disabled = this.#disabled || this.#input.value.trim() === "";
+        this.#sendButton.disabled = this.#disabled || this.#input.value.trim() === "";
     }
     /**
      * Добавить сообщение в журнал. Если автор и день совпадают с прошлой группой, пузырь
@@ -329,23 +383,27 @@ class Chat {
     }
     /** Разделитель дня: между сообщениями разных дней и в начале журнала */
     #insertDateSeparator(date) {
-        if (date === undefined || this.#date_separators === false) return;
+        if (date === undefined || this.#dateSeparators === false) return;
         const key = this.#dayKey(date);
-        if (key === this.#last_date) return;
-        this.#last_date = key;
+        if (key === this.#lastDate) return;
+        this.#lastDate = key;
         const separator = document.createElement("chat_date");
         separator.dataset.day = key;
         const label = document.createElement("chat_date_label");
         label.innerText = this.#dayLabel(date);
         separator.appendChild(label);
         this.#log.appendChild(separator);
-        this.#last_group = undefined;
+        this.#lastGroup = undefined;
     }
     /** Группа для сообщения: та же, если автор и день совпадают, иначе новая */
     #groupFor(message) {
         const author = this.#authorOf(message);
-        if (this.#last_group !== undefined && this.#last_group.author === author && this.#last_group.day === this.#last_date) {
-            return this.#last_group;
+        if (
+            this.#lastGroup !== undefined &&
+            this.#lastGroup.author === author &&
+            this.#lastGroup.day === this.#lastDate
+        ) {
+            return this.#lastGroup;
         }
         const node = document.createElement("chat_group");
         node.dataset.own = message.own === true ? "true" : "false";
@@ -356,15 +414,15 @@ class Chat {
         if (message.own !== true) {
             avatar = new Avatar({
                 name: author,
-                image: message.avatar === undefined ? undefined : {path: message.avatar},
+                image: message.avatar === undefined ? undefined : { path: message.avatar },
                 size: Avatar.SIZE.SMALL,
-                decorative: true
+                decorative: true,
             });
             node.prepend(avatar.set());
         }
         this.#log.appendChild(node);
-        this.#last_group = {node: node, bubbles: bubbles, avatar: avatar, author: author, day: this.#last_date};
-        return this.#last_group;
+        this.#lastGroup = { node: node, bubbles: bubbles, avatar: avatar, author: author, day: this.#lastDate };
+        return this.#lastGroup;
     }
     #bubble(message, first) {
         const bubble = document.createElement("chat_bubble");
@@ -418,7 +476,10 @@ class Chat {
             status.dataset.status = message.status;
             status.setAttribute("aria-label", this.#statusLabel(message.status));
             status.setAttribute("role", "img");
-            status.innerHTML = new Icon(STATUS_ICONS[message.status] === undefined ? STATUS_ICONS.sent : STATUS_ICONS[message.status], "13px").getHTML();
+            status.innerHTML = new Icon(
+                STATUS_ICONS[message.status] === undefined ? STATUS_ICONS.sent : STATUS_ICONS[message.status],
+                "13px"
+            ).getHTML();
             meta.appendChild(status);
         }
         return meta;
@@ -442,10 +503,10 @@ class Chat {
         if (this.#dayKey(date) === this.#dayKey(now)) return I18n.t("common.today");
         const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
         if (this.#dayKey(date) === this.#dayKey(yesterday)) return I18n.t("common.yesterday");
-        return new Intl.DateTimeFormat(I18n.getLocale(), {day: "numeric", month: "long"}).format(date);
+        return new Intl.DateTimeFormat(I18n.getLocale(), { day: "numeric", month: "long" }).format(date);
     }
     #timeLabel(date) {
-        return new Intl.DateTimeFormat(I18n.getLocale(), {hour: "2-digit", minute: "2-digit"}).format(date);
+        return new Intl.DateTimeFormat(I18n.getLocale(), { hour: "2-digit", minute: "2-digit" }).format(date);
     }
 
     // === ОБРАБОТЧИКИ ===
@@ -456,15 +517,15 @@ class Chat {
         this.send();
     };
     #onLogClick = (event) => {
-        if (this.#on_message_click === undefined) return;
+        if (this.#onMessageClick === undefined) return;
         const bubble = event.target instanceof Element ? event.target.closest("chat_bubble") : null;
         if (bubble === null) return;
         const message = this.#messages.find((entry) => entry.id === bubble.dataset.id);
-        if (message !== undefined) this.#on_message_click(message);
+        if (message !== undefined) this.#onMessageClick(message);
     };
 }
 
-exports.Chat = Chat
+exports.Chat = Chat;
 
 // Описание сообщения собирает фабрика — как у ContextMenu и SplitButton
 Chat.Message = (options = {}) => Object.assign({}, options);