chuijs 4.0.2 → 4.0.4

package/framework/components/chui_user_list_bar/styles.css

@@ -0,0 +1,173 @@
+/* ── UserListBar — список разговоров ───────────────────────────
+   Левая колонка мессенджера: строки разговоров с человеком, последней строкой,
+   временем и счётчиком непрочитанных. Список не полагает, где он стоит: в карточке
+   он читается кромкой той же карточки, а отдельной колонкой — своей поверхностью. */
+
+chui_user_list_bar {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 300px;
+    height: max-content;
+    margin: var(--block_margin);
+    overflow: hidden;
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+    font-size: var(--font_default_size);
+    color: var(--text_color);
+}
+
+/* Поле поиска: своя строка над списком, как в любом мессенджере */
+user_list_bar_search {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    padding: var(--control_padding) var(--block_padding);
+    border-bottom: 1px solid var(--border_color);
+}
+
+user_list_bar_search_icon {
+    display: flex;
+    align-items: center;
+    color: var(--text_color_disabled);
+}
+
+user_list_bar_search_icon chui_icon {
+    color: inherit;
+}
+
+.user_list_bar_field {
+    flex: 1 1 auto;
+    min-width: 0;
+    box-sizing: border-box;
+    padding: var(--control_padding_sm) 10px;
+    border-radius: var(--radius_sm);
+    border: 1px solid var(--border_color);
+    background: var(--element_background_2);
+    color: var(--text_color);
+    font-family: inherit;
+    font-size: var(--font_default_size);
+}
+
+.user_list_bar_field::placeholder {
+    color: var(--text_color_disabled);
+}
+
+/* Активное поле выдаёт кромка, а не кольцо: поиск по разговорам — то же поле,
+   что панель ввода, и ведёт себя так же */
+.user_list_bar_field:focus {
+    outline: none;
+    border-color: var(--blue_prime_background);
+}
+
+/* Список прокручивается сам: страница под ним не растёт */
+user_list_bar_list {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    box-sizing: border-box;
+    height: var(--user_list_bar_height, 320px);
+    padding: var(--control_padding_sm);
+    overflow-y: auto;
+    overflow-x: hidden;
+    outline: none;
+}
+
+user_list_bar_item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--control_padding);
+    flex: none;
+    box-sizing: border-box;
+    padding: var(--control_padding) 6px;
+    border-radius: var(--radius_sm);
+    cursor: pointer;
+}
+
+/* Скрытая строка не показывается: авторский display перебил бы UA-правило [hidden] */
+user_list_bar_item[hidden] {
+    display: none;
+}
+
+user_list_bar_item:hover {
+    background: var(--element_background_hover);
+}
+
+/* Выбранный разговор: акцентная подложка — по ней видно, о ком идёт переписка справа */
+user_list_bar_item[data-selected="true"] {
+    background: var(--blue_prime_background_tint);
+}
+
+user_list_bar_texts {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+user_list_bar_name {
+    display: block;
+    overflow: hidden;
+    font-weight: 600;
+    color: var(--text_color);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+user_list_bar_preview {
+    display: block;
+    overflow: hidden;
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+user_list_bar_preview[hidden],
+user_list_bar_time[hidden],
+user_list_bar_unread[hidden],
+user_list_bar_empty[hidden] {
+    display: none;
+}
+
+user_list_bar_meta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+    flex: none;
+}
+
+user_list_bar_time {
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    white-space: nowrap;
+}
+
+/* Счётчик непрочитанных: акцентом, чтобы строка читалась на бегу */
+user_list_bar_unread {
+    box-sizing: border-box;
+    min-width: 18px;
+    padding-inline: 5px;
+    border-radius: var(--radius_pill);
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 18px;
+    text-align: center;
+}
+
+/* Заглушка: когда разговоров нет и когда поиск ничего не нашёл */
+user_list_bar_empty {
+    margin: auto;
+    padding: var(--control_padding);
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    text-align: center;
+}

package/framework/components/chui_user_list_bar/user_list_bar.js

@@ -0,0 +1,485 @@
+const { Icon, Icons } = require("../chui_icons/icons");
+const { Avatar } = require("../chui_avatar/avatar");
+const { ContextMenu } = require("../chui_context_menu/context_menu");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { makeKeyboardButton, RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { optionOr, setStyles, getDayKey } = require("../../modules/chui_functions");
+
+/** Высота списка по умолчанию: список прокручивается сам, а страница под ним не растёт */
+const DEFAULT_HEIGHT = "320px";
+
+/**
+ * Список разговоров — левая колонка мессенджера: кто, о чём и когда писал последний раз.
+ *
+ * Четвёртая часть к `UserBar`, `MessageBar` и `WriteBar`: слева список разговоров, справа
+ * переписка — полоса пользователя сверху, лента сообщений в середине, панель ввода снизу.
+ * Список самостоятельный: `onSelect` отдаёт выбранную строку, а что показать справа, решает
+ * приложение.
+ *
+ * Строка показывает человека (аватар с точкой состояния), имя, последнюю строку разговора,
+ * время и число непрочитанных. Время принимает и число (дата), и готовую строку: дата сама
+ * превращается в «14:20» за сегодня, «Вчера» за вчера и короткую дату дальше — приложению
+ * не нужно держать формат у себя. `updateItem(id, {preview, time, unread})` правит строку
+ * на месте: в списке разговоров последняя строка меняется постоянно, и пересборка сдвигала бы
+ * прокрутку.
+ *
+ * Доступность: список — `role="listbox"` с именем (опция `label`, по умолчанию «Разговоры»),
+ * строки — `role="option"` с `aria-selected`. У списка одна остановка Tab, стрелки водят
+ * клавиатуру по строкам, Home/End — края, выбор идёт по клику и по Enter/Space. Имя строки
+ * собирается целиком — человек, последняя строка, время и число непрочитанных: на глаз строка
+ * состоит из кусочков, а скринридеру нужна фраза.
+ *
+ * ```javascript
+ * const list = new UserListBar({
+ *     items: [
+ *         { id: 'ivan', name: 'Иван Петров', preview: 'Скинь отчёт', time: Date.now(), unread: 2 },
+ *         { id: 'maria', name: 'Мария', preview: 'Договорились', time: Date.now() - 90000000 },
+ *     ],
+ *     selected: 'ivan',
+ *     search: true,
+ *     onSelect: (item) => openDialog(item.id),
+ * });
+ * mount(list);   // или body.appendChild(list.set())
+ * ```
+ *
+ * Опции: `id`, `items`, `selected`, `search` (`true` или своя подсказка), `searchPlaceholder`,
+ * `label`, `empty`, `height`, `menu`, `onSelect`.
+ * Строка: `{ id, name, preview, time, unread, status, photo }`; фабрика — `UserListBar.Item(...)`,
+ * состояния — `UserListBar.STATUS` (те же, что у `Avatar`).
+ * Действие меню строки: `{ id, icon, label, danger, disabled, onClick(action, item) }`.
+ * API: `addItem(item)`, `updateItem(id, patch)`, `removeItem(id)`, `setItems(items)`,
+ * `getItems()`, `getVisible()`, `select(id)`, `getSelected()`, `filter(text)`, `setHeight(value)`,
+ * `setEmpty(text)`, `setLabel(text)`, `setMenu(menu)`, `openMenu(target)`, `closeMenu()`,
+ * `getMenu()`, `getList()`, `getSearch()`, `set()`, `destroy()`.
+ *
+ * **Меню строки.** `menu` — список действий или функция `(item) => действия`: правый щелчок
+ * по строке (и клавиша «Меню», и Shift+F10 на ней же) открывает меню разговора. Строитель
+ * получает строку, поэтому подпись может зависеть от её состояния («Отметить прочитанным»
+ * есть только у строки с непрочитанными), а `onClick(action, item)` знает и действие, и строку.
+ */
+class UserListBar {
+    static STATUS = Avatar.STATUS;
+    /** Фабрика строки: `UserListBar.Item({ id, name, preview, time, unread, status, photo })` */
+    static Item = (options = {}) => Object.assign({}, options);
+    static #counter = 0;
+
+    #id = undefined;
+    #root = document.createElement("chui_user_list_bar");
+    #searchBox = document.createElement("user_list_bar_search");
+    #input = document.createElement("input");
+    #list = document.createElement("user_list_bar_list");
+    #empty = document.createElement("user_list_bar_empty");
+    #items = [];
+    #rows = new Map();
+    #selected = undefined;
+    #label = undefined;
+    #emptyOption = undefined;
+    #onSelect = undefined;
+    #menu = undefined;
+    #menuSpec = undefined;
+    #roving = undefined;
+    #query = "";
+
+    constructor(
+        options = {
+            id: String(),
+            items: [],
+            selected: String(),
+            search: Boolean(),
+            searchPlaceholder: String(),
+            label: String(),
+            empty: String(),
+            height: String(),
+            onSelect: undefined,
+        }
+    ) {
+        setStyles(__dirname + "/styles.css", "chUiJS_UserListBar");
+        UserListBar.#counter += 1;
+        this.#id = options.id === undefined ? `chui_user_list_bar_${UserListBar.#counter}` : options.id;
+        this.#root.id = this.#id;
+        this.#label = options.label;
+        this.#emptyOption = options.empty;
+        this.#onSelect = typeof options.onSelect === "function" ? options.onSelect : undefined;
+        this.setHeight(options.height);
+
+        this.#list.id = `${this.#id}_list`;
+        this.#list.setAttribute("role", "listbox");
+        this.#list.setAttribute("aria-label", this.#labelText());
+        // Заглушка объявляет себя: во время поиска «ничего не найдено» надо услышать
+        this.#empty.setAttribute("aria-live", "polite");
+        this.#empty.innerText = this.#emptyText();
+        this.#list.appendChild(this.#empty);
+
+        // Одна остановка Tab на список: стрелки водят фокус, Home/End — края
+        this.#roving = new RovingKeyboard(this.#list, { itemSelector: "user_list_bar_item" });
+
+        if (optionOr(options.search, false) !== false) this.#buildSearch(options.searchPlaceholder, options.search);
+        if (options.menu !== undefined) this.setMenu(options.menu);
+        this.#root.appendChild(this.#list);
+
+        this.setItems(options.items === undefined ? [] : options.items);
+        if (options.selected !== undefined) this.select(options.selected);
+    }
+
+    // GET
+    getId() {
+        return this.#id;
+    }
+    /** Копии строк: правка копии не меняет список */
+    getItems() {
+        return this.#items.map((item) => Object.assign({}, item));
+    }
+    getSelected() {
+        return this.#selected;
+    }
+    getList() {
+        return this.#list;
+    }
+    /** Видимые строки в порядке списка — те, что прошли фильтр */
+    getVisible() {
+        return [...this.#rows.values()].filter((row) => row.node.hidden === false).map((row) => row.item);
+    }
+    /** Поле поиска — для того, кто хочет повесить на него своё; `undefined`, если поиска нет */
+    getSearch() {
+        return this.#input.parentNode === null ? undefined : this.#input;
+    }
+
+    // SET
+    /** Высота списка: своя переменная, поэтому прокручивается список, а не страница */
+    setHeight(value = String()) {
+        this.#root.style.setProperty("--user_list_bar_height", optionOr(value, undefined) ?? DEFAULT_HEIGHT);
+        return this;
+    }
+    /** Имя списка для скринридера: по умолчанию — общая подпись из словаря */
+    setLabel(text = String()) {
+        this.#label = text;
+        this.#list.setAttribute("aria-label", this.#labelText());
+        return this;
+    }
+    /** Заглушка пустого списка */
+    setEmpty(text = String()) {
+        this.#emptyOption = text;
+        this.#syncEmpty();
+        return this;
+    }
+
+    // СТРОКИ
+    /** Полная замена списка: строки собираются заново, выбор и прокрутка сбрасываются */
+    setItems(items = []) {
+        this.#items = [];
+        if (this.#menu !== undefined) for (const row of this.#rows.values()) this.#menu.detach(row.node);
+        this.#rows = new Map();
+        this.#selected = undefined;
+        for (const row of this.#list.querySelectorAll("user_list_bar_item")) row.remove();
+        for (const item of items) this.#add(item, false);
+        this.#applyFilter();
+        this.#syncEmpty();
+        this.#roving.refresh();
+        return this;
+    }
+    /** Новая строка: возвращается сама строка — её `id` нужен для `updateItem()` */
+    addItem(item = {}) {
+        const added = this.#add(item, true);
+        this.#applyFilter();
+        this.#syncEmpty();
+        this.#roving.refresh();
+        return added;
+    }
+    /**
+     * Правка строки по `id`: последняя строка, время, счётчик непрочитанных, имя, состояние.
+     * Строка меняется на месте — пересборка сдвинула бы прокрутку списка
+     */
+    updateItem(id = String(), patch = {}) {
+        const row = this.#rows.get(String(id));
+        if (row === undefined) return this;
+        Object.assign(row.item, patch);
+        this.#applyRow(row);
+        this.#applyFilter();
+        this.#syncEmpty();
+        return this;
+    }
+    removeItem(id = String()) {
+        const row = this.#rows.get(String(id));
+        if (row === undefined) return this;
+        this.#items.splice(this.#items.indexOf(row.item), 1);
+        if (this.#menu !== undefined) this.#menu.detach(row.node);
+        row.node.remove();
+        this.#rows.delete(String(id));
+        if (this.#selected === String(id)) this.#selected = undefined;
+        this.#applyFilter();
+        this.#syncEmpty();
+        this.#roving.refresh();
+        return this;
+    }
+    clear() {
+        return this.setItems([]);
+    }
+    /** Выбор строки: клик, Enter/Space и `onSelect` идут одним путём */
+    select(id = String()) {
+        const row = this.#rows.get(String(id));
+        if (row === undefined) return this;
+        const previous = this.#selected;
+        this.#selected = String(id);
+        for (const [key, entry] of this.#rows) {
+            const selected = key === this.#selected;
+            entry.node.setAttribute("aria-selected", selected ? "true" : "false");
+            entry.node.dataset.selected = selected ? "true" : "false";
+        }
+        if (previous !== this.#selected && this.#onSelect !== undefined) this.#onSelect(row.item, this);
+        return this;
+    }
+    /** Фильтр по имени и последней строке: то же, что вводит человек в поле поиска */
+    filter(text = String()) {
+        this.#query = String(text).trim().toLowerCase();
+        if (this.#input.parentNode !== null && this.#input.value !== text) this.#input.value = text;
+        this.#applyFilter();
+        this.#syncEmpty();
+        return this;
+    }
+
+    // МЕНЮ СТРОКИ
+    /**
+     * Меню строки: правый щелчок по строке (и клавиша «Меню», и Shift+F10 на ней же) открывает
+     * меню разговора. `menu` — список действий или функция `(item) => действия`; строитель
+     * получает строку, поэтому подпись может зависеть от её состояния. Готовое контекстное меню
+     * тоже принимается — тогда его пункты правит тот, кто его собрал
+     */
+    setMenu(menu = undefined) {
+        if (this.#menu !== undefined) this.#menu.destroy();
+        this.#menu = undefined;
+        this.#menuSpec = undefined;
+        for (const row of this.#rows.values()) row.node.removeAttribute("data-menu");
+        if (menu === undefined || menu === null) return this;
+        if (menu instanceof ContextMenu) {
+            this.#menu = menu;
+        } else {
+            this.#menuSpec = menu;
+            this.#menu = new ContextMenu();
+            // Меню строк — слой с ролью меню: имя ему нужно, иначе читается просто списком
+            this.#menu.setLabel(I18n.t("feedback.actionsBar"));
+        }
+        for (const row of this.#rows.values()) this.#attachMenu(row);
+        return this;
+    }
+    /** Контекстное меню списка — для того, кто хочет повесить на него своё */
+    getMenu() {
+        return this.#menu;
+    }
+    /** Открыть меню строки из кода: по `id` или без аргумента — у выбранной строки */
+    openMenu(target = undefined) {
+        if (this.#menu === undefined) return this;
+        const id = target === undefined ? this.#selected : typeof target === "string" ? target : target.id;
+        const row = this.#rows.get(String(id));
+        if (row === undefined) return this;
+        if (this.#prepareMenu(row.item) === 0) return this;
+        const rect = row.node.getBoundingClientRect();
+        this.#menu.show(rect.left + 8, rect.top + rect.height / 2);
+        return this;
+    }
+    closeMenu() {
+        if (this.#menu !== undefined) this.#menu.hide();
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    destroy() {
+        if (this.#menu !== undefined) this.#menu.destroy();
+        this.#menu = undefined;
+        this.#menuSpec = undefined;
+        this.#items = [];
+        this.#rows = new Map();
+        this.#onSelect = undefined;
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    /** Поле поиска: настоящий `input` с типом поиска — очистку и ввод даёт браузер */
+    #buildSearch(placeholder, option) {
+        this.#input.type = "search";
+        this.#input.className = "user_list_bar_field";
+        const text =
+            optionOr(placeholder, undefined) === undefined
+                ? typeof option === "string"
+                    ? option
+                    : I18n.t("feedback.userListBarSearch")
+                : String(placeholder);
+        this.#input.placeholder = text;
+        this.#input.setAttribute("aria-label", text);
+        const glyph = document.createElement("user_list_bar_search_icon");
+        glyph.setAttribute("aria-hidden", "true");
+        glyph.innerHTML = new Icon(Icons.ACTIONS.SEARCH, "16px").getHTML();
+        this.#input.addEventListener("input", this.#onSearch);
+        this.#searchBox.append(glyph, this.#input);
+        this.#root.appendChild(this.#searchBox);
+    }
+    /**
+     * Меню строки: свои слушатели идут первыми — они собирают пункты по строке и могут не дать
+     * меню открыться, если для неё действий нет (`stopImmediatePropagation` глушит слушатели
+     * `ContextMenu`, которые живут на том же узле)
+     */
+    #attachMenu(row) {
+        const prepare = (event) => {
+            if (this.#prepareMenu(row.item) === 0) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        row.node.dataset.menu = "true";
+        row.node.addEventListener("contextmenu", prepare);
+        row.node.addEventListener("keydown", (event) => {
+            if (event.key !== "ContextMenu" && !(event.shiftKey === true && event.key === "F10")) return;
+            prepare(event);
+        });
+        this.#menu.attach(row.node);
+    }
+    /** Пункты для строки: список действий или строитель; возвращается их число */
+    #prepareMenu(item) {
+        if (this.#menuSpec === undefined) return this.#menu.set().querySelectorAll("context_menu_item").length;
+        const source = typeof this.#menuSpec === "function" ? this.#menuSpec(item) : this.#menuSpec;
+        const actions = Array.isArray(source) ? source : [];
+        this.#menu.setItems(
+            actions.map((action) =>
+                ContextMenu.Item({
+                    title: action.label === undefined ? "" : String(action.label),
+                    icon: action.icon,
+                    danger: action.danger === true,
+                    disabled: action.disabled === true,
+                    // Действие знает и себя, и строку: с ней его обработчик и работает
+                    clickEvent: () => {
+                        if (typeof action.onClick === "function") action.onClick(action, item);
+                    },
+                })
+            )
+        );
+        return actions.length;
+    }
+    #labelText() {
+        return optionOr(this.#label, undefined) === undefined ? I18n.t("feedback.userListBar") : String(this.#label);
+    }
+    #emptyText() {
+        return optionOr(this.#emptyOption, undefined) === undefined
+            ? I18n.t("feedback.userListBarEmpty")
+            : String(this.#emptyOption);
+    }
+    /** Новая строка: сборка разметки и запоминание её частей — по ним строка и правится */
+    #add(item = {}, live = true) {
+        const entry = UserListBar.Item(item);
+        if (entry.id === undefined) entry.id = require("randomstring").generate();
+        entry.id = String(entry.id);
+        const node = document.createElement("user_list_bar_item");
+        node.dataset.id = entry.id;
+        node.setAttribute("role", "option");
+        node.setAttribute("aria-selected", "false");
+        // Один путь для мыши и клавиатуры: Enter/Space кликает строку
+        makeKeyboardButton(node, "option");
+        node.addEventListener("click", () => this.select(entry.id));
+
+        const parts = {};
+        parts.avatar = new Avatar({
+            name: entry.name,
+            image: entry.photo === undefined ? undefined : { path: entry.photo },
+            status: entry.status,
+            size: Avatar.SIZE.DEFAULT,
+            decorative: true,
+        });
+        parts.texts = document.createElement("user_list_bar_texts");
+        parts.name = document.createElement("user_list_bar_name");
+        parts.preview = document.createElement("user_list_bar_preview");
+        parts.texts.append(parts.name, parts.preview);
+        parts.meta = document.createElement("user_list_bar_meta");
+        parts.time = document.createElement("user_list_bar_time");
+        parts.unread = document.createElement("user_list_bar_unread");
+        // Счётчик виден, но скринридеру он попадает в имя строки — второй раз не читается
+        parts.unread.setAttribute("aria-hidden", "true");
+        parts.meta.append(parts.time, parts.unread);
+        node.append(parts.avatar.set(), parts.texts, parts.meta);
+
+        const row = { node: node, item: entry, parts: parts };
+        this.#items.push(entry);
+        this.#rows.set(entry.id, row);
+        this.#list.appendChild(node);
+        this.#applyRow(row);
+        if (this.#menu !== undefined) this.#attachMenu(row);
+        if (live === true) {
+            this.#applyFilter();
+            this.#syncEmpty();
+            this.#roving.refresh();
+        }
+        return entry;
+    }
+    /** Заполнить строку по данным: текст, время, счётчик и имя для скринридера */
+    #applyRow(row) {
+        const item = row.item;
+        const parts = row.parts;
+        parts.name.innerText = item.name === undefined ? "" : String(item.name);
+        parts.preview.innerText = item.preview === undefined ? "" : String(item.preview);
+        parts.preview.hidden = parts.preview.innerText === "";
+        const time = this.#timeLabel(item.time);
+        parts.time.innerText = time;
+        parts.time.hidden = time === "";
+        const unread = Number(item.unread);
+        const shown = Number.isFinite(unread) && unread > 0 ? String(unread) : "";
+        parts.unread.innerText = shown;
+        parts.unread.hidden = shown === "";
+        parts.avatar.setName(parts.name.innerText);
+        parts.avatar.setStatus(item.status);
+        row.node.dataset.unread = shown === "" ? "false" : "true";
+        row.node.setAttribute("aria-label", this.#rowLabel(item, time, shown));
+    }
+    /**
+     * Имя строки для скринридера: на глаз строка состоит из кусочков, а читать её надо фразой —
+     * «Иван Петров, Скинь отчёт, 14:20, непрочитанных: 2»
+     */
+    #rowLabel(item, time, unread) {
+        const parts = [item.name === undefined ? "" : String(item.name)];
+        if (item.preview !== undefined && String(item.preview) !== "") parts.push(String(item.preview));
+        if (time !== "") parts.push(time);
+        if (unread !== "") parts.push(I18n.t("feedback.userListBarUnread", { value: unread }));
+        return parts.filter(Boolean).join(", ");
+    }
+    /**
+     * Время разговора: число (дата) превращается в «14:20» за сегодня, «Вчера» за вчера
+     * и короткую дату дальше; готовая строка остаётся как есть
+     */
+    #timeLabel(value) {
+        if (value === undefined || value === null || value === "") return "";
+        if (typeof value === "string") return value;
+        const date = value instanceof Date ? value : new Date(value);
+        if (isNaN(date.getTime())) return "";
+        const now = new Date();
+        const day = (entry) => getDayKey(entry);
+        if (day(date) === day(now)) return this.#clock(date);
+        const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+        if (day(date) === day(yesterday)) return I18n.t("common.yesterday");
+        return new Intl.DateTimeFormat(I18n.getLocale(), { day: "numeric", month: "short" }).format(date);
+    }
+    #clock(date) {
+        return new Intl.DateTimeFormat(I18n.getLocale(), { hour: "2-digit", minute: "2-digit" }).format(date);
+    }
+    /** Фильтр: строки прячутся атрибутом, а не снятием из разметки — так их помнит клавиатура */
+    #applyFilter() {
+        for (const row of this.#rows.values()) {
+            const haystack = `${row.item.name === undefined ? "" : row.item.name} ${
+                row.item.preview === undefined ? "" : row.item.preview
+            }`.toLowerCase();
+            row.node.hidden = this.#query !== "" && haystack.includes(this.#query) === false;
+        }
+        this.#roving.refresh();
+    }
+    /** Заглушка: своя подпись, когда список пуст, и «ничего не найдено», когда пусто от фильтра */
+    #syncEmpty() {
+        const total = this.#rows.size;
+        let visible = 0;
+        for (const row of this.#rows.values()) if (row.node.hidden === false) visible += 1;
+        this.#empty.hidden = visible > 0;
+        this.#empty.innerText =
+            total > 0 && this.#query !== "" ? I18n.t("feedback.userListBarNoMatch") : this.#emptyText();
+    }
+    #onSearch = () => {
+        this.filter(this.#input.value);
+    };
+}
+
+exports.UserListBar = UserListBar;