chuijs 4.0.2 → 4.0.3

package/framework/appLayout/default/chui_app_layout.js

@@ -1,24 +1,24 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {Icon, Icons} = require('../../components/chui_icons/icons');
-const {Button} = require("../../components/chui_button/button");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { Icon, Icons } = require("../../components/chui_icons/icons");
+const { Button } = require("../../components/chui_button/button");
 // НАСТРОЙКИ
-const {Dialog} = require("../../components/chui_modal/modal");
-const {Label} = require("../../components/chui_label/label");
-const {ContentBlock} = require("../../components/chui_content_block/content_block");
-const {Popup} = require("../../components/chui_popups/popups");
-const {UpdateNotification} = require("../../components/chui_notification/notification_update");
-const {ipcRenderer} = require("electron");
-const chui_functions = require('../../modules/chui_functions');
-const {DownloadNotification} = require("../../components/chui_notification/notification_download");
-const {Log} = require("../../../framework/modules/chui_logger/chui_logger");
-const {MenuKeyboard, makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
-const {LAYOUT_ROLE, LayoutRefs, registerLayout, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {BRIDGE_CHANNELS} = require('../../modules/chui_services/chui_channels');
-const {OverlayScrollbars} = require('../../modules/chui_scrollbar/chui_scrollbar');
-const {MenuBar} = require('../../components/chui_menu_bar/menu_bar');
-const {Avatar} = require('../../components/chui_avatar/avatar');
-const {EmptyState} = require('../../components/chui_empty_state/empty_state');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Dialog } = require("../../components/chui_modal/modal");
+const { Label } = require("../../components/chui_label/label");
+const { ContentBlock } = require("../../components/chui_content_block/content_block");
+const { Popup } = require("../../components/chui_popups/popups");
+const { UpdateNotification } = require("../../components/chui_notification/notification_update");
+const { ipcRenderer } = require("electron");
+const chui_functions = require("../../modules/chui_functions");
+const { DownloadNotification } = require("../../components/chui_notification/notification_download");
+const { Log } = require("../../../framework/modules/chui_logger/chui_logger");
+const { MenuKeyboard, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { LAYOUT_ROLE, LayoutRefs, registerLayout, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { BRIDGE_CHANNELS } = require("../../modules/chui_services/chui_channels");
+const { OverlayScrollbars } = require("../../modules/chui_scrollbar/chui_scrollbar");
+const { MenuBar } = require("../../components/chui_menu_bar/menu_bar");
+const { Avatar } = require("../../components/chui_avatar/avatar");
+const { EmptyState } = require("../../components/chui_empty_state/empty_state");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 const fs = require("fs");
 
 // Глобальные обработчики ошибок renderer-процесса вешаются один раз на процесс
@@ -28,15 +28,15 @@ class Events {
     #route_event = undefined;
     constructor() {}
     route(page) {
-        this.#route_event = new CustomEvent("route_event_"+page.constructor.name, {
+        this.#route_event = new CustomEvent("route_event_" + page.constructor.name, {
             bubbles: true,
             detail: {
                 class: page.constructor.name,
                 title: page.getTitle(),
-                page: page
+                page: page,
             },
         });
-        document.dispatchEvent(this.#route_event)
+        document.dispatchEvent(this.#route_event);
     }
 }
 
@@ -88,21 +88,21 @@ class Route extends Events {
         let center = requireLayoutNode(LAYOUT_ROLE.CENTER);
         //
         setPageName(page.getTitle());
-        center.innerHTML = '';
+        center.innerHTML = "";
         // Содержимое собирает сама страница (`Page#render`), оболочка в него не подмешивает
         // ничего: узел `page_title` (был здесь) дублировал заголовок, который страница
         // рисует сама, а `Page#render` отдаёт один и тот же узел — повторный переход на тот
         // же экземпляр страницы (кнопка «Назад» из `Page#setBackButton`) добавлял второй
         // заголовок. Место названия — шапка (`setPageName`).
         center.appendChild(page.render());
-        const _page = center.querySelector('page');
+        const _page = center.querySelector("page");
         new Animation(_page).fadeIn();
         // Стирания `center.removeAttribute("style")` здесь больше нет: инлайновых
         // стилей на `center` не ставит ни одна часть оболочки, а стирать чужое
         // (если появится) — это ловушка, на которой уже терялись `display: flex`
         applyPageMenuBar(requireLayoutNode(LAYOUT_ROLE.HEADER), page.getMenuBar());
 
-        this.route(page)
+        this.route(page);
     }
 }
 
@@ -161,18 +161,21 @@ function makeHeaderButtonBox(options = { title: undefined, icon: undefined, reve
  * подобраны под вид набора; цвет наследуется от кнопки через `currentColor`.
  */
 const WINDOW_ICONS = {
-    minimize: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 7.5 L10 12.5 L15.5 7.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-    maximize: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 12.5 L10 7.5 L15.5 12.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-    restore: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 5 L15 10 L10 15 L5 10 Z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    minimize:
+        '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 7.5 L10 12.5 L15.5 7.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    maximize:
+        '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.5 12.5 L10 7.5 L15.5 12.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    restore:
+        '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 5 L15 10 L10 15 L5 10 Z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
     close: '<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M5 5 L15 15 M15 5 L5 15" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>',
 };
 
 class WindowControls {
     // Управление кнопками
-    #box = document.createElement("wc_box")
-    #close = document.createElement("wc_close")
-    #maximize = document.createElement("wc_maximize")
-    #minimize = document.createElement("wc_minimize")
+    #box = document.createElement("wc_box");
+    #close = document.createElement("wc_close");
+    #maximize = document.createElement("wc_maximize");
+    #minimize = document.createElement("wc_minimize");
     // Подписка на нересайзящееся окно: set() вызывается и из конструктора Header, и из
     // addWC(), поэтому в set() слушатель ipcRenderer накапливался.
     #resizable_false_event = () => this.#maximize.remove();
@@ -188,15 +191,15 @@ class WindowControls {
         this.#setButton(this.#minimize, I18n.t("appLayout.window.minimize"), "minimize");
         // «Развернуть» — шеврон вверх, зеркало «свернуть»: пара читается как одна ось
         this.#setButton(this.#maximize, I18n.t("appLayout.window.maximize"), "maximize");
-        this.#close.addEventListener("click", () => this.#windowAction("close"))
-        this.#minimize.addEventListener("click", () => this.#windowAction("minimize"))
+        this.#close.addEventListener("click", () => this.#windowAction("close"));
+        this.#minimize.addEventListener("click", () => this.#windowAction("minimize"));
         // Разворот и восстановление — одно действие: решение принимает окно, а не кнопка
-        this.#maximize.addEventListener("click", () => this.#windowAction("toggle-maximize"))
+        this.#maximize.addEventListener("click", () => this.#windowAction("toggle-maximize"));
         // Разворот приходит не только от нашей кнопки (двойной клик по полосе, меню окна),
         // поэтому состояние читаем по факту изменения размера окна
-        window.addEventListener("resize", this.#sync_maximized_event)
-        this.#syncMaximized()
-        ipcRenderer.on("chui_resizable_false", this.#resizable_false_event)
+        window.addEventListener("resize", this.#sync_maximized_event);
+        this.#syncMaximized();
+        ipcRenderer.on("chui_resizable_false", this.#resizable_false_event);
     }
     /** Кнопка окна — значок с именем для скринридера, фокусом и активацией с клавиатуры.
      *  Значок рисуется линиями (`WINDOW_ICONS`), размер задаёт CSS (см. global_style.css) */
@@ -247,13 +250,13 @@ class WindowControls {
     #sync_maximized_event = () => this.#syncMaximized();
     set(pos_bool = Boolean()) {
         if (pos_bool) {
-            this.#box.appendChild(this.#close)
-            this.#box.appendChild(this.#maximize)
-            this.#box.appendChild(this.#minimize)
+            this.#box.appendChild(this.#close);
+            this.#box.appendChild(this.#maximize);
+            this.#box.appendChild(this.#minimize);
         } else {
-            this.#box.appendChild(this.#minimize)
-            this.#box.appendChild(this.#maximize)
-            this.#box.appendChild(this.#close)
+            this.#box.appendChild(this.#minimize);
+            this.#box.appendChild(this.#maximize);
+            this.#box.appendChild(this.#close);
         }
         return this.#box;
     }
@@ -276,7 +279,7 @@ class Header {
         this.#header_main.appendChild(this.#header_left_box);
         this.#header_main.appendChild(this.#header_right_box);
         this.#header_main.appendChild(this.#wc_box.set(false));
-        this.#header.appendChild(this.#header_main)
+        this.#header.appendChild(this.#header_main);
         this.#observeHeight();
     }
     /*
@@ -316,7 +319,8 @@ class Header {
         this.#header_main.insertBefore(this.#wc_box.set(boolean), this.#header_main.firstChild);
     }
     addToLeftBeforeTitle(...components) {
-        for (let component of components) this.#header_left_box.insertBefore(component, this.#header_left_box.firstChild);
+        for (let component of components)
+            this.#header_left_box.insertBefore(component, this.#header_left_box.firstChild);
     }
     /** Прежнее имя с опечаткой (`Tittle`): оставлено синонимом, чтобы не ломать чужие вызовы */
     addToLeftBeforeTittle(...components) {
@@ -324,11 +328,12 @@ class Header {
     }
     addToLeft(...components) {
         for (let component of components) {
-            this.#header_left_box.appendChild(component)
+            this.#header_left_box.appendChild(component);
         }
     }
     addToRight(...components) {
-        for (let component of components) this.#header_right_box.insertBefore(component, this.#header_right_box.firstChild);
+        for (let component of components)
+            this.#header_right_box.insertBefore(component, this.#header_right_box.firstChild);
     }
     removeToRight(...components) {
         for (let component of components) {
@@ -344,7 +349,7 @@ class Header {
 }
 
 class Center {
-    #center = document.createElement('center');
+    #center = document.createElement("center");
     constructor(layout) {
         this.#center.id = "center";
         layout.set(LAYOUT_ROLE.CENTER, this.#center);
@@ -356,12 +361,14 @@ class Center {
 
 class AppMenu {
     #routeList = [];
-    #appMenu = document.createElement('app_menu');
+    #appMenu = document.createElement("app_menu");
     #appMenuWidth = 400;
     #appMenuOffset = 25;
-    get #appMenuSlide() { return this.#appMenuWidth + this.#appMenuOffset; }
-    #routeViews = document.createElement('route_views');
-    #appMenuButton = document.createElement('app_menu_button');
+    get #appMenuSlide() {
+        return this.#appMenuWidth + this.#appMenuOffset;
+    }
+    #routeViews = document.createElement("route_views");
+    #appMenuButton = document.createElement("app_menu_button");
     // Шапка панели: плитка со значком и заголовок — панель читается выдвижным ящиком
     #app_menu_header = document.createElement("app_menu_header");
     #app_menu_header_icon = document.createElement("app_menu_header_icon");
@@ -379,7 +386,7 @@ class AppMenu {
     #routeKeyboard = undefined;
     #header = undefined;
     #center = undefined;
-    #page_name = document.createElement('page_name');
+    #page_name = document.createElement("page_name");
     constructor(header, center, layout) {
         this.#header = header;
         this.#center = center;
@@ -389,9 +396,9 @@ class AppMenu {
         this.#appMenu.style.width = `${this.#appMenuWidth}px`;
         this.#appMenu.style.left = `calc(-${this.#appMenuSlide}px)`;
         //
-        this.#appMenuButton.id = "appMenuButton"
+        this.#appMenuButton.id = "appMenuButton";
         // Список пунктов — тот узел, которым управляет кнопка: `aria-controls` ссылается на него
-        this.#routeViews.id = "chui_app_menu"
+        this.#routeViews.id = "chui_app_menu";
         // Значок — украшение: без подписи имя кнопки складывалось из лигатуры («menu»)
         this.#appMenuButton.setAttribute("aria-label", I18n.t("appLayout.menu"));
         this.#appMenuButton.setAttribute("title", I18n.t("appLayout.menu"));
@@ -399,16 +406,16 @@ class AppMenu {
         this.#appMenuButton.addEventListener("click", () => {
             if (this.#appMenuButton.classList.contains("app_menu_button_active")) this.#close();
             else this.#open();
-        })
-        header.set().addEventListener('click', (e) => {
+        });
+        header.set().addEventListener("click", (e) => {
             if (e.target !== this.#appMenuButton) this.#close();
-        })
-        center.addEventListener('click', (e) => {
+        });
+        center.addEventListener("click", (e) => {
             if (!this.#appMenu.contains(e.target)) {
                 if (this.#appMenu.style.transform === `translateX(${this.#appMenuSlide}px)`) this.#close();
             }
-        })
-        this.#page_name.id = "page_name"
+        });
+        this.#page_name.id = "page_name";
         layout.set(LAYOUT_ROLE.PAGE_NAME, this.#page_name);
         header.addToLeft(this.#appMenuButton, this.#page_name);
         this.#app_menu_header_icon.appendChild(new Icon(Icons.NAVIGATION.MENU_OPEN, "16px").set());
@@ -418,18 +425,18 @@ class AppMenu {
         // Список пунктов назван головкой панели: скринридер читает «Меню», а не безымянный список
         this.#app_menu_header_title.id = "chui_app_menu_title";
         this.#routeViews.setAttribute("aria-labelledby", this.#app_menu_header_title.id);
-        this.#app_menu_header.appendChild(this.#app_menu_header_icon)
-        this.#app_menu_header.appendChild(this.#app_menu_header_title)
+        this.#app_menu_header.appendChild(this.#app_menu_header_icon);
+        this.#app_menu_header.appendChild(this.#app_menu_header_title);
         this.#app_menu_empty.innerText = I18n.t("appLayout.search.empty");
         // Подсказка лежит внутри списка, но пунктом не является: клавиатура меню её не видит (itemSelector "route")
-        this.#routeViews.appendChild(this.#app_menu_empty)
-        this.#appMenu.appendChild(this.#app_menu_header)
-        this.#appMenu.appendChild(this.#routeViews)
+        this.#routeViews.appendChild(this.#app_menu_empty);
+        this.#appMenu.appendChild(this.#app_menu_header);
+        this.#appMenu.appendChild(this.#routeViews);
         // Клавиатура и aria меню маршрутов: стрелки по пунктам, Escape закрывает и возвращает фокус на кнопку
         this.#routeKeyboard = new MenuKeyboard(this.#routeViews, {
             itemSelector: "route",
             onEscape: () => this.#close(),
-            trigger: this.#appMenuButton
+            trigger: this.#appMenuButton,
         });
         makeKeyboardButton(this.#appMenuButton);
         // Закрытая панель объявляется закрытой сразу: иначе у кнопки не было бы aria-expanded,
@@ -466,18 +473,18 @@ class AppMenu {
     enableSearchInput() {
         if (this.#search_enabled) return;
         this.#search_enabled = true;
-        this.#app_menu_search_input.classList.add("app_menu_search_input")
-        this.#app_menu_search_input.placeholder = I18n.t("appLayout.search.placeholder")
-        this.#app_menu_search_input.setAttribute("aria-label", I18n.t("appLayout.search.sections"))
+        this.#app_menu_search_input.classList.add("app_menu_search_input");
+        this.#app_menu_search_input.placeholder = I18n.t("appLayout.search.placeholder");
+        this.#app_menu_search_input.setAttribute("aria-label", I18n.t("appLayout.search.sections"));
         // Подсветку поля даёт :focus-within на поверхности поиска — инлайновых стилей больше нет
         this.#app_menu_search_input.addEventListener("input", (event) => {
-            this.#filterRoutes(event.target.value)
-        })
+            this.#filterRoutes(event.target.value);
+        });
         this.#app_menu_search_icon.innerHTML = new Icon(Icons.ACTIONS.SEARCH, "15px").getHTML();
-        this.#app_menu_search_box.appendChild(this.#app_menu_search_icon)
-        this.#app_menu_search_box.appendChild(this.#app_menu_search_input)
-        this.#app_menu_search_main.appendChild(this.#app_menu_search_box)
-        this.#appMenu.insertBefore(this.#app_menu_search_main, this.#routeViews)
+        this.#app_menu_search_box.appendChild(this.#app_menu_search_icon);
+        this.#app_menu_search_box.appendChild(this.#app_menu_search_input);
+        this.#app_menu_search_main.appendChild(this.#app_menu_search_box);
+        this.#appMenu.insertBefore(this.#app_menu_search_main, this.#routeViews);
     }
     // Пункты списка: подсказка о пустом результате лежит там же, поэтому фильтруем по тегу
     #routes() {
@@ -499,9 +506,9 @@ class AppMenu {
         let center = this.#center;
         //
         setPageName(page.getTitle());
-        center.innerHTML = '';
+        center.innerHTML = "";
         center.appendChild(page.render());
-        const _page = center.querySelector('page');
+        const _page = center.querySelector("page");
         new Animation(_page).fadeIn();
         // Стирания `center.removeAttribute("style")` здесь больше нет: инлайновых
         // стилей на `center` не ставит ни одна часть оболочки, а стирать чужое
@@ -510,30 +517,30 @@ class AppMenu {
     }
     setRouteTest(page) {
         this.#routeList.push(page);
-        let test = this.#routeList.filter(route => route.getTitle().includes(page.getTitle()));
+        let test = this.#routeList.filter((route) => route.getTitle().includes(page.getTitle()));
         if (test.length === 1) {
-            let button_route = document.createElement('route');
-            let icon_menu = document.createElement('route_icon');
+            let button_route = document.createElement("route");
+            let icon_menu = document.createElement("route_icon");
             icon_menu.innerHTML = page.getIcon();
-            let title_menu = document.createElement('route_title');
+            let title_menu = document.createElement("route_title");
             title_menu.innerHTML = page.getTitle();
             if (page.getMain()) {
                 this.go(page);
                 button_route.classList.add("route_active");
             }
-            button_route.addEventListener('click', () => {
-                const eventAwesome = new CustomEvent("route_event_"+page.constructor.name, {
+            button_route.addEventListener("click", () => {
+                const eventAwesome = new CustomEvent("route_event_" + page.constructor.name, {
                     bubbles: true,
                     detail: {
                         class: page.constructor.name,
                         title: page.getTitle(),
-                        page: page
+                        page: page,
                     },
                 });
-                document.dispatchEvent(eventAwesome)
+                document.dispatchEvent(eventAwesome);
 
-                if (!button_route.classList.contains('route_active')) {
-                    for (const act of this.#routes()) act.classList.remove('route_active');
+                if (!button_route.classList.contains("route_active")) {
+                    for (const act of this.#routes()) act.classList.remove("route_active");
                     this.go(page);
                     button_route.classList.add("route_active");
                     if (this.#auto_close) {
@@ -544,15 +551,15 @@ class AppMenu {
                 }
             });
             if (page.getIcon() !== undefined) {
-                button_route.appendChild(icon_menu)
+                button_route.appendChild(icon_menu);
             }
-            button_route.appendChild(title_menu)
-            this.#routeViews.appendChild(button_route)
+            button_route.appendChild(title_menu);
+            this.#routeViews.appendChild(button_route);
             this.#routeKeyboard.refresh();
             // Новый пункт мог не пройти уже введённый фильтр — список и подсказка пересобираются
             this.#filterRoutes(this.#app_menu_search_input.value);
         } else {
-            Log.error(I18n.t("appLayout.search.alreadyAdded", {title: page.getTitle()}))
+            Log.error(I18n.t("appLayout.search.alreadyAdded", { title: page.getTitle() }));
         }
     }
     setAutoClose() {
@@ -564,7 +571,7 @@ class AppMenu {
 }
 
 class NotificationBox {
-    #notification_box = document.createElement('notification_box');
+    #notification_box = document.createElement("notification_box");
     #notification_box_main = document.createElement("notification_box_main");
     // Шапка ящика: заголовок со счётчиком истории и действие «Очистить»
     #notification_box_header = document.createElement("notification_box_header");
@@ -578,16 +585,16 @@ class NotificationBox {
     #observer = undefined;
     #notification_box_width = 400;
     #notification_box_width_test = 425;
-    #notification_button = document.createElement('notification_button');
+    #notification_button = document.createElement("notification_button");
     constructor(header, center, layout) {
         layout.set(LAYOUT_ROLE.NOTIFICATION_BOX, this.#notification_box);
         layout.set(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, this.#notification_box_main);
-        this.#notification_box_main.id = 'chui_notification_box';
+        this.#notification_box_main.id = "chui_notification_box";
         // Шапка: заголовок, счётчик записей и очистка списка
         this.#notification_box_title.innerText = I18n.t("appLayout.notifications.title");
         this.#notification_box_count.setAttribute("aria-hidden", "true");
-        this.#notification_box_header_text.appendChild(this.#notification_box_title)
-        this.#notification_box_header_text.appendChild(this.#notification_box_count)
+        this.#notification_box_header_text.appendChild(this.#notification_box_title);
+        this.#notification_box_header_text.appendChild(this.#notification_box_count);
         // Очистка — обычная кнопка-действие, а не Button: в шапке нужна тихая ссылка-действие
         this.#clear_button.className = "notification_box_clear";
         this.#clear_button.type = "button";
@@ -596,22 +603,22 @@ class NotificationBox {
         this.#clear_button.appendChild(new Icon(Icons.ACTIONS.DELETE, "14px").set());
         const clear_title = document.createElement("span");
         clear_title.innerText = I18n.t("appLayout.notifications.clear");
-        this.#clear_button.appendChild(clear_title)
+        this.#clear_button.appendChild(clear_title);
         this.#clear_button.addEventListener("click", () => this.#clearAll());
-        this.#notification_box_header.appendChild(this.#notification_box_header_text)
-        this.#notification_box_header.appendChild(this.#clear_button)
+        this.#notification_box_header.appendChild(this.#notification_box_header_text);
+        this.#notification_box_header.appendChild(this.#clear_button);
         // Пустое состояние — общий компонент, а не своя разметка из значка и подписи: это был
         // третий вариант одного и того же блока (здесь, в поиске меню, в таблицах). Заодно он
         // объявляется скринридеру (role="status"), а прежняя заглушка молчала
         this.#empty_state = new EmptyState({
             icon: Icons.SOCIAL.NOTIFICATIONS_OFF,
             title: I18n.t("appLayout.notifications.empty"),
-            compact: true
+            compact: true,
         });
-        this.#notification_box_empty.appendChild(this.#empty_state.set())
-        this.#notification_box_main.appendChild(this.#notification_box_empty)
-        this.#notification_box.appendChild(this.#notification_box_header)
-        this.#notification_box.appendChild(this.#notification_box_main)
+        this.#notification_box_empty.appendChild(this.#empty_state.set());
+        this.#notification_box_main.appendChild(this.#notification_box_empty);
+        this.#notification_box.appendChild(this.#notification_box_header);
+        this.#notification_box.appendChild(this.#notification_box_main);
         // Карточки кладёт снаружи Notification, поэтому счётчик, группы и пустое состояние
         // следим по списку. Разделители дней ящик вставляет сам: на них реакция не нужна,
         // иначе пересборка дёргала бы сама себя без конца
@@ -623,7 +630,7 @@ class NotificationBox {
         this.#notification_button.addEventListener("click", () => {
             if (this.#notification_button.classList.contains("notification_button_active")) this.#closePanel();
             else this.#openPanel();
-        })
+        });
         // Значок — украшение: без подписи имя кнопки складывалось из лигатуры («notifications»)
         const notification_glyph = new Icon(Icons.SOCIAL.NOTIFICATIONS, "var(--header_icon_size)").set();
         notification_glyph.setAttribute("aria-hidden", "true");
@@ -649,20 +656,21 @@ class NotificationBox {
             event.preventDefault();
             this.#closePanel();
         });
-        header.set().addEventListener('click', (e) => {
+        header.set().addEventListener("click", (e) => {
             if (e.target !== this.#notification_button) this.#closePanel();
-        })
-        center.addEventListener('click', (e) => {
+        });
+        center.addEventListener("click", (e) => {
             if (!this.#notification_box.contains(e.target)) {
-                if (this.#notification_box.style.transform === `translateX(-${this.#notification_box_width_test}px)`) this.#closePanel();
+                if (this.#notification_box.style.transform === `translateX(-${this.#notification_box_width_test}px)`)
+                    this.#closePanel();
             }
-        })
+        });
         center.onscroll = () => {
             // Прокрутка меняет материал шапки: плотнее фон и тень. Класс, а не инлайновые стили:
             // вид полосы целиком описан в global_style.css
             header.set().classList.toggle("header_scrolled", center.scrollTop > 15);
         };
-        header.addToRight(this.#notification_button)
+        header.addToRight(this.#notification_button);
     }
     #openPanel() {
         this.#notification_box.style.transform = `translateX(-${this.#notification_box_width_test}px)`;
@@ -693,7 +701,8 @@ class NotificationBox {
      */
     #onBoxMutated(records = []) {
         const changed = records.some((record) =>
-            [...record.addedNodes, ...record.removedNodes].some((node) => node.tagName === "NOTIFICATION"));
+            [...record.addedNodes, ...record.removedNodes].some((node) => node.tagName === "NOTIFICATION")
+        );
         if (changed) this.#syncState();
     }
     // Счётчик, пустое состояние, группы дней и доступность кнопки согласованы с составом ящика
@@ -730,7 +739,8 @@ class NotificationBox {
         yesterday.setDate(yesterday.getDate() - 1);
         const group = document.createElement("notification_group");
         if (day === chui_functions.getDayKey()) group.innerText = I18n.t("appLayout.notifications.today");
-        else if (day === chui_functions.getDayKey(yesterday)) group.innerText = I18n.t("appLayout.notifications.yesterday");
+        else if (day === chui_functions.getDayKey(yesterday))
+            group.innerText = I18n.t("appLayout.notifications.yesterday");
         else {
             // Ключ хранится как ГГГГ-ММ-ДД, а в подписи порядок привычный: ДД.ММ.ГГГГ
             const [year, month, date] = String(day).split("-");
@@ -748,9 +758,10 @@ class NotificationBox {
     #syncUnread(notifications = []) {
         const unread = notifications.filter((notification) => notification.dataset.unread === "true").length;
         this.#notification_button.classList.toggle("notification_button_unread", unread > 0);
-        const label = unread === 0
-            ? I18n.t("appLayout.notifications.title")
-            : I18n.t("appLayout.notifications.unreadCount", {count: unread});
+        const label =
+            unread === 0
+                ? I18n.t("appLayout.notifications.title")
+                : I18n.t("appLayout.notifications.unreadCount", { count: unread });
         this.#notification_button.setAttribute("aria-label", label);
         this.#notification_button.setAttribute("title", label);
     }
@@ -760,9 +771,9 @@ class NotificationBox {
     }
     #clearAll() {
         for (const notification of this.#notifications()) {
-            notification.style.transform = "translateX(100%)"
-            notification.style.opacity = "0"
-            setTimeout(() => notification.remove(), 300)
+            notification.style.transform = "translateX(100%)";
+            notification.style.opacity = "0";
+            setTimeout(() => notification.remove(), 300);
         }
     }
     getBox() {
@@ -776,7 +787,7 @@ class AppLayout {
     #center = new Center(this.#layout).set();
     #appMenu = new AppMenu(this.#header, this.#center, this.#layout);
     #notificationBox = new NotificationBox(this.#header, this.#center, this.#layout);
-    #notificationPanel = document.createElement('notification_panel');
+    #notificationPanel = document.createElement("notification_panel");
     // Текущие уведомления: ipc-обработчики регистрируются один раз и работают с последним
     #downloadNotification = undefined;
     #updateNotificationLoad = undefined;
@@ -785,18 +796,22 @@ class AppLayout {
     // Слушатели живут весь процесс — обработчик ошибок обязан быть на месте всегда.
     #onWindowError = (event) => {
         const place = event.filename === undefined ? "" : ` (${event.filename}:${event.lineno})`;
-        this.#logError(I18n.t("appLayout.error.uncaught"), event.error === undefined ? event.message : event.error, place)
-    }
+        this.#logError(
+            I18n.t("appLayout.error.uncaught"),
+            event.error === undefined ? event.message : event.error,
+            place
+        );
+    };
     #onUnhandledRejection = (event) => {
-        this.#logError(I18n.t("appLayout.error.unhandledRejection"), event.reason)
-    }
+        this.#logError(I18n.t("appLayout.error.unhandledRejection"), event.reason);
+    };
     #logError(prefix, value, place = "") {
         const text = `${prefix}: ${AppLayout.#formatError(value)}${place}`;
         try {
-            Log.error(text)
+            Log.error(text);
         } catch (e) {
             // Сам обработчик ошибок падать не должен (например, ipcRenderer уже недоступен при закрытии окна)
-            console.error(text, e)
+            console.error(text, e);
         }
     }
     static #formatError(value) {
@@ -805,10 +820,10 @@ class AppLayout {
         return String(value);
     }
     constructor() {
-        require('../../modules/chui_fonts').install();
+        require("../../modules/chui_fonts").install();
         // Глобальные стили
-        chui_functions.setStyles(__dirname + `/global_style.css`, 'chUiJS_Global_App')
-        chui_functions.setStyles(__dirname + `/main_theme_style.css`, 'chUiJS_Main_Theme')
+        chui_functions.setStyles(__dirname + `/global_style.css`, "chUiJS_Global_App");
+        chui_functions.setStyles(__dirname + `/main_theme_style.css`, "chUiJS_Main_Theme");
         // Необработанные ошибки и reject’ы renderer-процесса — один раз на процесс
         if (app_error_handlers_installed === false) {
             app_error_handlers_installed = true;
@@ -818,11 +833,11 @@ class AppLayout {
         //if (process.platform !== "darwin") document.body.style.border = "1px solid var(--border_color)";
         // ===
 
-        document.body.appendChild(this.#header.set())
-        document.body.appendChild(this.#center)
-        document.body.appendChild(this.#appMenu.getMenu())
-        document.body.appendChild(this.#notificationBox.getBox())
-        document.body.appendChild(this.#notificationPanel)
+        document.body.appendChild(this.#header.set());
+        document.body.appendChild(this.#center);
+        document.body.appendChild(this.#appMenu.getMenu());
+        document.body.appendChild(this.#notificationBox.getBox());
+        document.body.appendChild(this.#notificationPanel);
         // Части layout'а зарегистрированы: уведомления и Route ищут свои узлы по ролям, а не по id
         this.#layout.set(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#notificationPanel);
         registerLayout(this.#layout);
@@ -837,41 +852,43 @@ class AppLayout {
         ipcRenderer.on("sendNotificationDownload", (e, text, body) => {
             this.#downloadNotification = new DownloadNotification({ title: text, text: body });
             this.#downloadNotification.show();
-        })
+        });
         ipcRenderer.on("sendNotificationDownloadUpdate", (e, title, text) => {
             if (this.#downloadNotification !== undefined) this.#downloadNotification.update(title, text);
-        })
+        });
         ipcRenderer.on("sendNotificationDownloadComplete", () => {
             if (this.#downloadNotification !== undefined) this.#downloadNotification.done();
-        })
+        });
         ipcRenderer.on("sendNotificationDownloadError", () => {
             if (this.#downloadNotification !== undefined) this.#downloadNotification.error();
-        })
+        });
         //
         ipcRenderer.on("sendNotificationUpdateLoad", (e, text, body) => {
             this.#updateNotificationLoad = new UpdateNotification({ title: text, text: body, spinner: true });
             this.#updateNotificationLoad.show(true);
-        })
+        });
         ipcRenderer.on("sendNotificationUpdateLoadClose", () => {
             if (this.#updateNotificationLoad !== undefined) this.#updateNotificationLoad.hide();
-        })
+        });
         ipcRenderer.on("sendNotificationUpdate", (e, text, body) => {
             this.#updateNotification = new UpdateNotification({ title: text, text: body, spinner: false });
             this.#updateNotification.show(true);
-        })
+        });
         ipcRenderer.on("sendNotificationUpdateClose", () => {
             if (this.#updateNotification !== undefined) this.#updateNotification.hide();
-        })
+        });
         let popup = new Popup();
         ipcRenderer.once("checkUpdatesTrue", async (e, check, version) => {
             if (check) {
                 let confirm_res = await popup.confirm({
-                    title: I18n.t("appLayout.update.available", {version: version}), message: I18n.t("appLayout.update.question"),
-                    cancelText: I18n.t("appLayout.update.cancel"), okText: I18n.t("appLayout.update.install")
+                    title: I18n.t("appLayout.update.available", { version: version }),
+                    message: I18n.t("appLayout.update.question"),
+                    cancelText: I18n.t("appLayout.update.cancel"),
+                    okText: I18n.t("appLayout.update.install"),
                 });
-                e.sender.send("updateInstallConfirm", confirm_res)
+                e.sender.send("updateInstallConfirm", confirm_res);
             }
-        })
+        });
     }
     setWindowControlsLeft() {
         this.#header.addWC(true);
@@ -898,64 +915,84 @@ class AppLayout {
         this.#header.addToLeftBeforeTitle(...headerLeft);
     }
     disableAppMenu() {
-        this.#layout.get(LAYOUT_ROLE.APP_MENU_BUTTON).remove()
+        this.#layout.get(LAYOUT_ROLE.APP_MENU_BUTTON).remove();
         // Отступ имени страницы считает CSS: `.page_name_no_menu` в global_style.css
-        this.#layout.get(LAYOUT_ROLE.PAGE_NAME).classList.add("page_name_no_menu")
+        this.#layout.get(LAYOUT_ROLE.PAGE_NAME).classList.add("page_name_no_menu");
     }
     setScript(pathToJS = String(), id = String()) {
-        let data = fs.readFileSync(pathToJS, 'utf8');
-        let script = document.createElement('script');
+        let data = fs.readFileSync(pathToJS, "utf8");
+        let script = document.createElement("script");
         script.innerHTML = String(data);
-        script.setAttribute('id', id);
+        script.setAttribute("id", id);
         // Скрипт подключается в сам документ (не узел компонента), поэтому проверка по id и document
         if (document.querySelector(`script[id="${id}"]`) === null) document.body.appendChild(script);
     }
-    static TABS(options = {
-        width: String(),
-        default: Number(),
-        tabs: []
-    }) { return new HeaderTabs(options).set(); }
-    static BUTTON(options = {
-        title: String(),
-        icon: undefined,
-        reverse: Boolean(),
-        clickEvent: () => {}
-    }) { return new HeaderButton(options).set(); }
-    static USER_PROFILE(options = {
-        username: String(),
-        image: { noImage: Boolean(), imageLink: String(), imageBase64: String(), path: String() },
-        items: []
-    }) { return new UserProfile(options).set(); }
-    static USER_PROFILE_ITEM(options = {
-        title: String(),
-        icon: undefined,
-        clickEvent: () => {}
-    }) { return new UserDDItem(options).set(); }
-    static DIALOG(options = {
-        title: String(),
-        icon: undefined,
-        reverse: Boolean(),
-        label: String(),
-        dialogOptions: {
+    static TABS(
+        options = {
+            width: String(),
+            default: Number(),
+            tabs: [],
+        }
+    ) {
+        return new HeaderTabs(options).set();
+    }
+    static BUTTON(
+        options = {
             title: String(),
-            closeOutSideClick: Boolean(),
-            style: {
-                width: String(),
-                height: String(),
-                direction: String(),
-                wrap: String(),
-                align: String(),
-                justify: String(),
+            icon: undefined,
+            reverse: Boolean(),
+            clickEvent: () => {},
+        }
+    ) {
+        return new HeaderButton(options).set();
+    }
+    static USER_PROFILE(
+        options = {
+            username: String(),
+            image: { noImage: Boolean(), imageLink: String(), imageBase64: String(), path: String() },
+            items: [],
+        }
+    ) {
+        return new UserProfile(options).set();
+    }
+    static USER_PROFILE_ITEM(
+        options = {
+            title: String(),
+            icon: undefined,
+            clickEvent: () => {},
+        }
+    ) {
+        return new UserDDItem(options).set();
+    }
+    static DIALOG(
+        options = {
+            title: String(),
+            icon: undefined,
+            reverse: Boolean(),
+            label: String(),
+            dialogOptions: {
+                title: String(),
+                closeOutSideClick: Boolean(),
+                style: {
+                    width: String(),
+                    height: String(),
+                    direction: String(),
+                    wrap: String(),
+                    align: String(),
+                    justify: String(),
+                },
+                components: [],
             },
-            components: []
         }
-    }) { return new HeaderDialog(options).set(); }
+    ) {
+        return new HeaderDialog(options).set();
+    }
 }
 
 class HeaderTabs {
     #id_list = require("randomstring").generate();
     #header_tabs_list = undefined;
-    #header_tabs = document.createElement('header_tabs');
+    #header_tabs = document.createElement("header_tabs");
     #keydown_event = (event) => this.#onKeydown(event);
     constructor(options = { width: String(), default: Number(), tabs: [] }) {
         this.#header_tabs_list = options.tabs;
@@ -968,13 +1005,13 @@ class HeaderTabs {
             item.setAttribute("role", "tab");
             item.setAttribute("tabindex", "-1");
             this.#header_tabs.appendChild(item);
-            item.addEventListener('click', (event) => {
+            item.addEventListener("click", (event) => {
                 if (event.target.tagName === "HEADER_BUTTON_ICON" || event.target.tagName === "HEADER_BUTTON_TITLE") {
-                    this.#setActive(event.target.parentNode)
+                    this.#setActive(event.target.parentNode);
                 } else {
-                    this.#setActive(event.target)
+                    this.#setActive(event.target);
                 }
-            })
+            });
         }
         // Клик по выбранной вкладке не переигрывает её действие — как у пункта меню текущего
         // раздела (`route_active`, который тоже не переходит повторно). Раньше клик до вкладки
@@ -982,11 +1019,15 @@ class HeaderTabs {
         // кликом он снимал у неё и курсор-указатель, и ховер, которых у соседних кнопок шапки
         // нет. Слушатель ловит клик в фазе перехвата: действие вкладки и `#setActive` висят
         // на самом элементе и иначе сработали бы первыми
-        this.#header_tabs.addEventListener("click", (event) => {
-            const tab = event.target.closest === undefined ? null : event.target.closest("header_button");
-            if (tab === null || tab.getAttribute("active") === null) return;
-            event.stopImmediatePropagation();
-        }, true);
+        this.#header_tabs.addEventListener(
+            "click",
+            (event) => {
+                const tab = event.target.closest === undefined ? null : event.target.closest("header_button");
+                if (tab === null || tab.getAttribute("active") === null) return;
+                event.stopImmediatePropagation();
+            },
+            true
+        );
         // Пока ни одна вкладка не выбрана, остановкой обхода становится первая по счёту:
         // иначе в полосу нельзя было бы войти с клавиатуры вообще
         const default_tab = this.#header_tabs_list[options.default === undefined ? 0 : options.default];
@@ -996,9 +1037,9 @@ class HeaderTabs {
         for (let item of this.#header_tabs_list) {
             if (this.#header_tabs_list.indexOf(item) === options.default) {
                 setTimeout(() => {
-                    item.click()
+                    item.click();
                     //this.#setActive(item)
-                }, 250)
+                }, 250);
             }
         }
     }
@@ -1009,13 +1050,13 @@ class HeaderTabs {
         if (target.getAttribute("active") === null) {
             // `children`, а не `childNodes`: в `childNodes` попадают и текстовые узлы, у которых нет classList.
             // `children` — HTMLCollection, поэтому перебираем копию
-            [...this.#header_tabs.children].forEach(child => {
+            [...this.#header_tabs.children].forEach((child) => {
                 child.removeAttribute("active");
                 child.removeAttribute("aria-current");
                 child.removeAttribute("aria-selected");
                 child.setAttribute("tabindex", "-1");
-                child.classList.remove("header_tab_active")
-            })
+                child.classList.remove("header_tab_active");
+            });
             target.setAttribute("active", true);
             // Вкладка без `active` была только подсвечена классом: скринридер о выборе не знал (как у пункта меню маршрутов)
             target.setAttribute("aria-current", "page");
@@ -1023,7 +1064,7 @@ class HeaderTabs {
             target.setAttribute("aria-selected", "true");
             // Выбранная вкладка — единственная остановка Tab в полосе вкладок
             target.setAttribute("tabindex", "0");
-            target.classList.add("header_tab_active")
+            target.classList.add("header_tab_active");
         }
     }
     /*
@@ -1040,7 +1081,7 @@ class HeaderTabs {
         if (tabs.length === 0) return;
         const focused = tabs.indexOf(document.activeElement);
         // Фокус мог быть не в полосе: тогда считаем от вкладки с остановкой обхода
-        const from = focused === -1 ? tabs.findIndex(tab => tab.getAttribute("tabindex") === "0") : focused;
+        const from = focused === -1 ? tabs.findIndex((tab) => tab.getAttribute("tabindex") === "0") : focused;
         const start = from === -1 ? 0 : from;
         const last = tabs.length - 1;
         let next;
@@ -1075,23 +1116,25 @@ class UserProfile {
     #window_click_event = (event) => {
         if (this.#user_main.contains(event.target) || this.#user_dropdown.contains(event.target)) return;
         this.#closeMenu();
-    }
+    };
     // Выбор пункта закрывает меню. Обработчик на списке, а не на каждом пункте: пункты
     // приходят из UserDDItem и могут быть добавлены кем угодно снаружи
     #dropdown_click_event = (event) => {
         const item = event.target.closest === undefined ? null : event.target.closest("user_item");
         if (item === null || !this.#user_dropdown.contains(item)) return;
         this.#closeMenu();
-    }
+    };
     //
-    constructor(options = {
-        username: String(),
-        image: { noImage: Boolean(), imageLink: String(), imageBase64: String(), path: String() },
-        items: []
-    }) {
+    constructor(
+        options = {
+            username: String(),
+            image: { noImage: Boolean(), imageLink: String(), imageBase64: String(), path: String() },
+            items: [],
+        }
+    ) {
         this.#username = options.username;
         this.#user_button.innerText = options.username;
-        this.#user_main.appendChild(this.#user_button)
+        this.#user_main.appendChild(this.#user_button);
         UserProfile.#instances.set(this.#user_main, this);
         // Панель — слой в body: внутри шапки (у неё свой backdrop-filter) её blur не работал бы,
         // а выдвижные слои оболочки перекрывали бы её. Идентификатор нужен для aria-controls
@@ -1100,7 +1143,7 @@ class UserProfile {
         this.#user_button.addEventListener("click", () => {
             if (this.#is_open) this.#closeMenu();
             else this.#openMenu();
-        })
+        });
         //
         if (options.image !== undefined) {
             // Имя пользователя уже есть в кнопке и в пунктах меню, поэтому аватар — украшение
@@ -1108,7 +1151,7 @@ class UserProfile {
                 name: options.username,
                 image: options.image,
                 size: "80px",
-                decorative: true
+                decorative: true,
             });
             this.#user_dd_image_main.appendChild(this.#avatar.set());
             this.#user_dropdown.appendChild(this.#user_dd_image_main);
@@ -1120,7 +1163,7 @@ class UserProfile {
         this.#menuKeyboard = new MenuKeyboard(this.#user_dropdown, {
             itemSelector: "user_item",
             onEscape: () => this.#closeMenu(),
-            trigger: this.#user_button
+            trigger: this.#user_button,
         });
         makeKeyboardButton(this.#user_button);
         // Закрытое меню объявляется закрытым сразу: иначе у кнопки не было бы aria-expanded
@@ -1213,11 +1256,13 @@ class UserProfile {
 class UserDDItem {
     #user_item = document.createElement("user_item");
 
-    constructor(options = {
-        title: String(),
-        icon: undefined,
-        clickEvent: () => {}
-    }) {
+    constructor(
+        options = {
+            title: String(),
+            icon: undefined,
+            clickEvent: () => {},
+        }
+    ) {
         if (options.title !== undefined && options.icon !== undefined) {
             this.#user_item.innerText = options.title;
             // Значок ведёт строку — как в пунктах context_menu_item и выпадающих списков
@@ -1229,7 +1274,7 @@ class UserDDItem {
         } else if (options.icon !== undefined) {
             this.#user_item.innerHTML = new Icon(options.icon).getHTML();
         }
-        this.#user_item.addEventListener("click", options.clickEvent)
+        this.#user_item.addEventListener("click", options.clickEvent);
     }
 
     set() {
@@ -1239,25 +1284,27 @@ class UserDDItem {
 
 class HeaderDialog {
     #header_button = undefined;
-    constructor(options = {
-        title: String(),
-        icon: undefined,
-        reverse: Boolean(),
-        label: String(),
-        dialogOptions: {
+    constructor(
+        options = {
             title: String(),
-            closeOutSideClick: Boolean(),
-            style: {
-                width: String(),
-                height: String(),
-                direction: String(),
-                wrap: String(),
-                align: String(),
-                justify: String(),
+            icon: undefined,
+            reverse: Boolean(),
+            label: String(),
+            dialogOptions: {
+                title: String(),
+                closeOutSideClick: Boolean(),
+                style: {
+                    width: String(),
+                    height: String(),
+                    direction: String(),
+                    wrap: String(),
+                    align: String(),
+                    justify: String(),
+                },
+                components: [],
             },
-            components: []
         }
-    }) {
+    ) {
         // Неполные `dialogOptions` сборку не роняют: `style` и `components` — необязательные
         // части опции, а прямое обращение к ним давало TypeError при создании кнопки
         // («Cannot read properties of undefined») ещё до первого открытия слоя
@@ -1265,22 +1312,22 @@ class HeaderDialog {
         const dialog_style = dialog_options.style === undefined ? {} : dialog_options.style;
         const dialog_components = dialog_options.components === undefined ? [] : dialog_options.components;
         // Пустой заголовок остаётся пустым: заготовка опции рисовала бы слово «undefined»
-        const dialog_title = dialog_options.title === undefined || dialog_options.title === null
-            ? "" : dialog_options.title;
+        const dialog_title =
+            dialog_options.title === undefined || dialog_options.title === null ? "" : dialog_options.title;
         let dialog = new Dialog({
             width: dialog_style.width,
             height: dialog_style.height,
             closeOutSideClick: dialog_options.closeOutSideClick,
             // Имя модального слоя для скринридера: без него диалог объявлялся бы безымянным
-            title: dialog_title
-        })
+            title: dialog_title,
+        });
         // HEADER
         let header_dialog = new ContentBlock({
             direction: "row",
             wrap: "nowrap",
             align: "center",
             justify: "space-between",
-            disableMarginChild: true
+            disableMarginChild: true,
         });
         header_dialog.setWidth("-webkit-fill-available");
         // Заголовок — как у заголовков панелей оболочки (размер `--font_default_size`, вес 500
@@ -1288,13 +1335,13 @@ class HeaderDialog {
         let title = new Label({
             markdownText: `**${dialog_title}**`,
             wordBreak: "normal",
-            width: "max-content"
-        })
+            width: "max-content",
+        });
         let close_button = new Button({
             icon: Icons.NAVIGATION.CLOSE,
             label: I18n.t("common.close"),
             reverse: true,
-            clickEvent: () => dialog.close()
+            clickEvent: () => dialog.close(),
         });
         header_dialog.add(title, close_button);
         dialog.addToHeader(header_dialog);
@@ -1303,10 +1350,10 @@ class HeaderDialog {
             direction: dialog_style.direction,
             wrap: dialog_style.wrap,
             align: dialog_style.align,
-            justify: dialog_style.justify
+            justify: dialog_style.justify,
         });
         body_dialog.setWidth("-webkit-fill-available");
-        body_dialog.add(...dialog_components)
+        body_dialog.add(...dialog_components);
         dialog.addToBody(body_dialog);
         // FOOTER
 
@@ -1328,14 +1375,15 @@ class HeaderDialog {
 class HeaderButton {
     #header_button = undefined;
 
-    constructor(options = {
-        title: String(),
-        icon: undefined,
-        reverse: Boolean(),
-        label: String(),
-        clickEvent: () => {
+    constructor(
+        options = {
+            title: String(),
+            icon: undefined,
+            reverse: Boolean(),
+            label: String(),
+            clickEvent: () => {},
         }
-    }) {
+    ) {
         this.#header_button = makeHeaderButtonBox(options);
         this.#header_button.addEventListener("click", options.clickEvent);
     }
@@ -1345,5 +1393,5 @@ class HeaderButton {
     }
 }
 
-exports.AppLayout = AppLayout
-exports.Route = Route
+exports.AppLayout = AppLayout;
+exports.Route = Route;