@emaxe/tuigram 1.0.0

package/src/ui/components/chatList.js

@@ -0,0 +1,295 @@
+import blessed from "neo-blessed";
+import { formatChatTime } from "../../utils/time.js";
+import { escapeBlessed } from "../../telegram/formatter.js";
+import { fg, badge } from "../theme.js";
+import unicode from "neo-blessed/lib/unicode.js";
+
+/**
+ * Создаёт компонент списка диалогов (левая панель).
+ * @param {blessed.Widgets.Screen} screen
+ * @param {object} theme
+ * @param {object} callbacks
+ * @param {(dialog: object) => void} callbacks.onSelectDialog
+ * @param {(tab: string) => void} callbacks.onTabChange
+ * @param {(query: string) => void} callbacks.onSearchChange
+ */
+export function createChatList(screen, theme, { onSelectDialog, onTabChange, onSearchChange } = {}) {
+    const container = blessed.box({
+        parent: screen,
+        top: 4,
+        left: 0,
+        width: "35%",
+        bottom: 1,
+        border: {
+            type: "line",
+        },
+        style: {
+            bg: theme.chatList.bg,
+            fg: theme.chatList.fg,
+            border: {
+                fg: theme.borders.fg,
+            },
+        },
+    });
+
+    // 1. Вкладки фильтрации сверху списка
+    const tabsBox = blessed.box({
+        parent: container,
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 1,
+        tags: true,
+        style: {
+            bg: theme.tabs.bg,
+            fg: theme.tabs.fg,
+        },
+    });
+
+    /** Пиктограммы, которые терминал рисует в две ячейки. */
+    const EMOJI = /\p{Extended_Pictographic}/u;
+
+    const TAB_KEYS = ["all", "users", "groups", "channels", "bots", "unread"];
+    const TAB_NAMES = ["1:Все", "2:ЛС", "3:Группы", "4:Каналы", "5:Боты", "6:Непроч"];
+    let currentTab = "all";
+
+    function renderTabs() {
+        const rendered = TAB_KEYS.map((key, idx) => {
+            const name = TAB_NAMES[idx];
+            if (key === currentTab) {
+                return badge(theme.tabs.activeBg, theme.tabs.activeFg, `{bold} ${name} {/bold}`);
+            }
+            return fg(theme.tabs.fg, ` ${name} `);
+        }).join("");
+        tabsBox.setContent(rendered);
+    }
+
+    // 2. Строка поиска / фильтра
+    const searchBox = blessed.textbox({
+        parent: container,
+        top: 1,
+        left: 0,
+        right: 0,
+        height: 1,
+        inputOnFocus: true,
+        style: {
+            bg: theme.search.bg,
+            fg: theme.search.fg,
+        },
+    });
+    const SEARCH_PLACEHOLDER = "[/] Поиск чатов...";
+    searchBox.setValue(SEARCH_PLACEHOLDER);
+
+    // 3. Список диалогов
+    const list = blessed.list({
+        parent: container,
+        top: 2,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        tags: true,
+        keys: true,
+        vi: true,
+        mouse: true,
+        scrollbar: {
+            ch: "│",
+            style: {
+                bg: theme.scrollbar.bg,
+                fg: theme.scrollbar.fg,
+            },
+        },
+        style: {
+            bg: theme.chatList.bg,
+            fg: theme.chatList.fg,
+            selected: {
+                bg: theme.chatList.selectedBg,
+                fg: theme.chatList.selectedFg,
+                bold: true,
+            },
+            item: {
+                hover: {
+                    bg: theme.chatList.itemHoverBg,
+                },
+            },
+        },
+    });
+
+    // Элемент списка — всегда одна строка. По умолчанию blessed переносит
+    // не влезающий хвост на вторую строку, которой в элементе высотой 1 просто
+    // нет: хвост исчезал, а начатый перед разрывом фон бейджа непрочитанных
+    // оставался залитым до края панели. С wrap: false лишнее просто обрезается.
+    const baseCreateItem = list.createItem.bind(list);
+    list.createItem = (content) => {
+        const item = baseCreateItem(content);
+        item.wrap = false;
+        return item;
+    };
+
+    let currentDialogs = [];
+
+    /**
+     * Ширина строки в ячейках терминала по той же модели, которой пользуется
+     * blessed при отрисовке. Считать через .length нельзя: эмодзи занимают
+     * две ячейки, а в UTF-16 это одна-две единицы — из-за расхождения строка
+     * вылезала за край, blessed резал её посреди бейджа непрочитанных и хвост
+     * оставался залит фоном бейджа.
+     * @param {string} text
+     * @returns {number}
+     */
+    function cellWidth(text) {
+        let width = 0;
+        for (const char of text) {
+            const byBlessed = unicode.strWidth(char);
+            // Эмодзи терминал рисует в две ячейки, а blessed считает их за одну.
+            // Берём максимум: бюджет должен быть верен для обеих моделей, иначе
+            // строка вылезает за край в реальном терминале.
+            width += EMOJI.test(char) ? Math.max(2, byBlessed) : byBlessed;
+        }
+        return width;
+    }
+
+    /**
+     * Обрезает строку до заданной ширины В ЯЧЕЙКАХ, добавляя многоточие.
+     * @param {string} text
+     * @param {number} maxCells
+     * @returns {string}
+     */
+    function truncate(text, maxCells) {
+        if (maxCells <= 1) return "";
+        if (cellWidth(text) <= maxCells) return text;
+
+        let width = 0;
+        let result = "";
+        for (const char of text) {
+            const charCells = cellWidth(char);
+            if (width + charCells > maxCells - 1) break;
+            width += charCells;
+            result += char;
+        }
+        return `${result}…`;
+    }
+
+    /**
+     * Форматирует элемент диалога в ОДНУ строку.
+     * blessed.list жёстко задаёт элементам height: 1, поэтому любой перевод строки
+     * в содержимом теряется без предупреждения.
+     * @param {object} d
+     * @param {number} width доступная ширина строки в символах
+     * @returns {string}
+     */
+    function formatDialogItem(d, width) {
+        const pinIcon = d.pinned ? "📌 " : "";
+        const typeIcon =
+            d.type === "channel" ? "📢 " :
+            d.type === "supergroup" || d.type === "group" ? "👥 " :
+            d.type === "bot" ? "🤖 " :
+            d.type === "saved" ? "⭐ " : "👤 ";
+
+        const timeStr = formatChatTime(d.date);
+        const unreadStr = d.unreadCount > 0 ? ` [${d.unreadCount}]` : "";
+
+        // Всё меряем в ячейках терминала: иконки — это эмодзи переменной ширины
+        const fixedCells =
+            cellWidth(pinIcon) + cellWidth(typeIcon) + cellWidth(timeStr) + cellWidth(unreadStr) + 2;
+        const available = Math.max(10, (width || 40) - fixedCells);
+
+        const rawTitle = d.title || "Чат";
+        const rawPreview = (d.lastMessage?.text || "").replace(/\s+/g, " ").trim();
+
+        // Название важнее превью: оно получает до 60% ширины (но не меньше 16 ячеек)
+        // и никогда не больше доступного места — иначе строка вылезет за край и
+        // бейдж непрочитанных обрежется. Превью занимает остаток и на узких
+        // терминалах просто исчезает.
+        const titleMax = Math.min(
+            cellWidth(rawTitle),
+            available,
+            Math.max(16, Math.floor(available * 0.6))
+        );
+        const title = truncate(rawTitle, titleMax);
+        const previewMax = available - cellWidth(title) - 3;
+        const preview = previewMax >= 6 ? truncate(rawPreview, previewMax) : "";
+
+        const unreadBadge = unreadStr
+            ? ` ${badge(theme.chatList.itemUnreadBg, theme.chatList.itemUnreadFg, `{bold}${unreadStr}{/bold}`)}`
+            : "";
+        const previewPart = preview
+            ? ` ${fg(theme.chatList.previewFg, `· ${escapeBlessed(preview)}`)}`
+            : "";
+        const titlePart = d.pinned
+            ? fg(theme.chatList.pinnedFg, `{bold}${escapeBlessed(title)}{/bold}`)
+            : `{bold}${escapeBlessed(title)}{/bold}`;
+
+        return `${pinIcon}${typeIcon}${titlePart}${previewPart} ${fg(theme.chatList.timeFg, timeStr)}${unreadBadge}`;
+    }
+
+    /**
+     * Обновляет отображаемый список диалогов.
+     * @param {Array<object>} dialogs
+     */
+    function setDialogs(dialogs) {
+        currentDialogs = dialogs;
+        // Элементы списка живут внутри list и ещё на колонку уже из-за скроллбара
+        // -1 колонка скроллбара, -1 запас: при подсчёте переноса blessed
+        // прибавляет к ширине часть символов разметки
+        const width = Math.max(10, list.width - 2);
+        const items = dialogs.map((d) => formatDialogItem(d, width));
+        list.setItems(items);
+        screen.render();
+    }
+
+    // Обработка выбора диалога
+    list.on("select", (item, index) => {
+        if (currentDialogs[index]) {
+            onSelectDialog?.(currentDialogs[index]);
+        }
+    });
+
+    // Горячие клавиши для переключения вкладок внутри списка
+    list.key(["1", "2", "3", "4", "5", "6"], (ch) => {
+        const idx = parseInt(ch, 10) - 1;
+        if (TAB_KEYS[idx]) {
+            currentTab = TAB_KEYS[idx];
+            renderTabs();
+            onTabChange?.(currentTab);
+        }
+    });
+
+    // Быстрый вход в режим поиска по нажатию "/"
+    list.key(["/"], () => {
+        searchBox.setValue("");
+        searchBox.focus();
+        screen.render();
+    });
+
+    // Обработка ввода в поле поиска
+    searchBox.on("submit", (value) => {
+        onSearchChange?.(value === SEARCH_PLACEHOLDER ? "" : value);
+        list.focus();
+    });
+
+    searchBox.on("cancel", () => {
+        searchBox.setValue(SEARCH_PLACEHOLDER);
+        onSearchChange?.("");
+        list.focus();
+    });
+
+    renderTabs();
+
+    return {
+        container,
+        list,
+        searchBox,
+        setDialogs,
+        setTab: (tab) => {
+            currentTab = tab;
+            renderTabs();
+        },
+        focus: () => list.focus(),
+        /** Завершает режим ввода в строке поиска (см. inputBox.release). */
+        release: () => {
+            if (searchBox._reading && typeof searchBox._done === "function") {
+                searchBox._done("stop");
+            }
+        },
+    };
+}

package/src/ui/components/chatView.js

@@ -0,0 +1,178 @@
+import blessed from "neo-blessed";
+import { formatMessageTime, formatDateDivider } from "../../utils/time.js";
+import { formatMessageText, escapeBlessed } from "../../telegram/formatter.js";
+import { fg } from "../theme.js";
+
+/**
+ * Создаёт компонент просмотра сообщений чата (правая центральная панель).
+ * @param {blessed.Widgets.Screen} screen
+ * @param {object} theme
+ * @param {object} callbacks
+ * @param {() => void} [callbacks.onLoadMoreHistory]
+ * @param {(msg: object) => void} [callbacks.onActionMenu]
+ */
+export function createChatView(screen, theme, { onLoadMoreHistory, onActionMenu } = {}) {
+    const container = blessed.box({
+        parent: screen,
+        top: 4,
+        left: "35%",
+        right: 0,
+        bottom: 6,
+        border: {
+            type: "line",
+        },
+        style: {
+            bg: theme.chatView.bg,
+            fg: theme.chatView.fg,
+            border: {
+                fg: theme.borders.fg,
+            },
+        },
+    });
+
+    const scrollBox = blessed.box({
+        parent: container,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        tags: true,
+        scrollable: true,
+        alwaysScroll: true,
+        mouse: true,
+        keys: true,
+        vi: true,
+        scrollbar: {
+            ch: "│",
+            style: {
+                bg: theme.scrollbar.bg,
+                fg: theme.scrollbar.fg,
+            },
+        },
+        style: {
+            bg: theme.chatView.bg,
+            fg: theme.chatView.fg,
+        },
+    });
+
+    let currentMessages = [];
+
+    /**
+     * Форматирует список сообщений в единую ленту текста с разметкой Blessed.
+     * @param {Array<object>} messages
+     * @returns {string}
+     */
+    function renderMessages(messages) {
+        if (!messages || messages.length === 0) {
+            return `\n\n  ${fg(theme.muted, "Сообщений пока нет. Напишите первое сообщение ниже!")}`;
+        }
+
+        let output = "";
+        let lastDateString = "";
+
+        for (const msg of messages) {
+            // Разделитель дат
+            const dateStr = formatDateDivider(msg.date);
+            if (dateStr && dateStr !== lastDateString) {
+                output += `\n  ${fg(theme.chatView.dateDivider, `─────── ${escapeBlessed(dateStr)} ───────`)}\n\n`;
+                lastDateString = dateStr;
+            }
+
+            const time = formatMessageTime(msg.date);
+            const timeTag = fg(theme.chatView.time, `[${time}]`);
+
+            // Отправитель
+            let authorTag = "";
+            if (msg.out) {
+                const readCheck = fg(theme.chatView.outgoingName, "✓✓");
+                authorTag = `${fg(theme.chatView.outgoingName, "{bold}Вы{/bold}")} ${timeTag} ${readCheck}`;
+            } else {
+                const name = escapeBlessed(msg.senderName || "Собеседник");
+                authorTag = `${fg(theme.chatView.incomingName, `{bold}${name}{/bold}`)} ${timeTag}`;
+            }
+
+            // Блок ответа (Reply)
+            let replyBlock = "";
+            if (msg.replyToMsgId) {
+                replyBlock = `  ${fg(theme.chatView.replyBorder, `┌─ Ответ на сообщение #${msg.replyToMsgId}`)}\n`;
+            }
+
+            // Текст сообщения и entities
+            let bodyText = formatMessageText(msg.text, msg.entities);
+            if (msg.mediaDescription) {
+                bodyText = bodyText ? `${msg.mediaDescription}\n  ${bodyText}` : msg.mediaDescription;
+            }
+
+            // Отступ строк текста сообщения
+            const indentedBody = bodyText
+                .split("\n")
+                .map((line) => `  ${line}`)
+                .join("\n");
+
+            // Реакции
+            let reactionsLine = "";
+            if (msg.reactions && msg.reactions.length > 0) {
+                const list = msg.reactions.map((r) => `${r.emoticon} ${r.count}`).join("  ");
+                reactionsLine = `\n  ${fg(theme.chatView.reactionFg, `{bold}${list}{/bold}`)}`;
+            }
+
+            // Метка редактирования
+            let editedTag = "";
+            if (msg.editDate) {
+                editedTag = ` ${fg(theme.chatView.time, "(изменено)")}`;
+            }
+
+            output += ` ${authorTag}${editedTag}\n${replyBlock}${indentedBody}${reactionsLine}\n\n`;
+        }
+
+        return output;
+    }
+
+    /**
+     * Устанавливает сообщения в ленту.
+     * @param {Array<object>} messages
+     * @param {boolean} [autoScrollToBottom=true]
+     */
+    function setMessages(messages, autoScrollToBottom = true) {
+        currentMessages = messages;
+        scrollBox.setContent(renderMessages(messages));
+        if (autoScrollToBottom) {
+            scrollBox.setScrollPerc(100);
+        }
+        screen.render();
+    }
+
+    // Обработка прокрутки вверх для подгрузки истории
+    scrollBox.key(["pageup", "C-u"], () => {
+        scrollBox.scroll(-10);
+        if (scrollBox.getScroll() <= 0) {
+            onLoadMoreHistory?.();
+        }
+        screen.render();
+    });
+
+    scrollBox.key(["pagedown", "C-d"], () => {
+        scrollBox.scroll(10);
+        screen.render();
+    });
+
+    // Ctrl+M терминал шлёт как "\r" (имя клавиши "return"), поэтому меню действий
+    // висит на Ctrl+A — иначе оно недостижимо.
+    scrollBox.key(["C-a"], () => {
+        if (currentMessages.length > 0) {
+            const lastMsg = currentMessages[currentMessages.length - 1];
+            onActionMenu?.(lastMsg);
+        }
+    });
+
+    return {
+        container,
+        scrollBox,
+        setMessages,
+        scrollToBottom: () => {
+            scrollBox.setScrollPerc(100);
+            screen.render();
+        },
+        focus: () => scrollBox.focus(),
+    };
+}

package/src/ui/components/header.js

@@ -0,0 +1,82 @@
+import blessed from "neo-blessed";
+import { escapeBlessed } from "../../telegram/formatter.js";
+import { fg } from "../theme.js";
+
+/**
+ * Верхняя шапка приложения с информацией о пользователе, активном чате и статусе соединения.
+ * @param {blessed.Widgets.Screen} screen
+ * @param {object} theme
+ * @returns {blessed.Widgets.BoxElement & { updateInfo: (data: object) => void }}
+ */
+export function createHeader(screen, theme) {
+    const headerBox = blessed.box({
+        parent: screen,
+        top: 0,
+        left: 0,
+        width: "100%",
+        // 4 = рамка (2) + две строки контента (профиль + активный чат)
+        height: 4,
+        tags: true,
+        border: {
+            type: "line",
+        },
+        style: {
+            bg: theme.header.bg,
+            fg: theme.header.fg,
+            border: {
+                fg: theme.borders.fg,
+            },
+        },
+    });
+
+    /**
+     * Обновляет содержимое шапки.
+     * @param {object} data
+     * @param {object|null} [data.me]
+     * @param {string} [data.status]
+     * @param {object|null} [data.activeChat]
+     * @param {string|null} [data.typingUser]
+     */
+    headerBox.updateInfo = function ({ me, status = "connected", activeChat, typingUser }) {
+        let statusBadge = fg(theme.status.online, "● В сети");
+        if (status === "connecting") {
+            statusBadge = fg(theme.status.connecting, "◌ Подключение...");
+        } else if (status === "disconnected") {
+            statusBadge = fg(theme.status.offline, "○ Не в сети");
+        }
+
+        const userTitle = me
+            ? `${me.firstName || ""} ${me.lastName || ""} ${me.username ? `(@${me.username})` : ""}`.trim()
+            : "Авторизация...";
+
+        let chatTitle = fg(theme.muted, "Выберите чат из списка слева");
+        if (activeChat) {
+            const icon =
+                activeChat.type === "channel" ? "📢" :
+                activeChat.type === "supergroup" || activeChat.type === "group" ? "👥" :
+                activeChat.type === "bot" ? "🤖" :
+                activeChat.type === "saved" ? "⭐" : "👤";
+
+            let details = "";
+            if (activeChat.username) details += ` (@${activeChat.username})`;
+            if (activeChat.entity?.participantsCount) details += ` [${activeChat.entity.participantsCount} уч.]`;
+
+            chatTitle = `{bold}${icon} ${escapeBlessed(activeChat.title)}${escapeBlessed(details)}{/bold}`;
+        }
+
+        let typingNotice = "";
+        if (typingUser) {
+            typingNotice = `  ${fg(theme.warning, `✍️ ${escapeBlessed(typingUser)} печатает...`)}`;
+        }
+
+        const divider = fg(theme.dim, "│");
+        const leftText = `{bold}🚀 TuiGram{/bold} ${divider} ${escapeBlessed(userTitle)} ${divider} ${statusBadge}`;
+
+        headerBox.setContent(
+            ` ${leftText}\n ${chatTitle}${typingNotice}`
+        );
+        screen.render();
+    };
+
+    return headerBox;
+}