@emaxe/tuigram 1.3.0 → 1.5.0

package/src/ui/components/header.js

@@ -2,7 +2,7 @@ import blessed from "neo-blessed";
 import { escapeBlessed } from "../../telegram/formatter.js";
 import { fg } from "../theme.js";
 
-import { getHeaderActionAt } from "../../utils/mouse.js";
+import { getHeaderActionAt, isRightClick } from "../../utils/mouse.js";
 
 /**
  * Верхняя шапка приложения с информацией о пользователе, активном чате и статусе соединения.
@@ -39,6 +39,7 @@ export function createHeader(screen, theme, { onHelp, onChatInfo, onStatusClick
     });
 
     headerBox.on("click", (data) => {
+        if (isRightClick(data)) return;
         const relX = data.x - (headerBox.aleft || 0);
         const relY = data.y - (headerBox.atop || 0);
         const action = getHeaderActionAt(relX, relY, { hasActiveChat: Boolean(currentActiveChat) });

package/src/ui/components/inputBox.js

@@ -2,7 +2,7 @@ import blessed from "neo-blessed";
 import { escapeBlessed } from "../../telegram/formatter.js";
 import { fg, badge } from "../theme.js";
 
-import { getInputContextActionAt } from "../../utils/mouse.js";
+import { getInputContextActionAt, isRightClick } from "../../utils/mouse.js";
 
 /**
  * Создаёт компонент поля ввода сообщения (нижняя панель).
@@ -124,6 +124,7 @@ export function createInputBox(screen, theme, {
     }
 
     contextBar.on("click", (data) => {
+        if (isRightClick(data)) return;
         const relX = data.x - (contextBar.aleft || 0);
         const action = getInputContextActionAt(relX, currentMode);
         if (action === "cancel") {
@@ -145,8 +146,10 @@ export function createInputBox(screen, theme, {
     });
 
     textarea.on("click", () => {
-        textarea.focus();
-        screen.render();
+        if (screen.focused !== textarea) {
+            textarea.focus();
+            screen.render();
+        }
     });
 
     textarea.key(["enter"], () => {
@@ -229,7 +232,9 @@ export function createInputBox(screen, theme, {
                 textarea.setValue(target.text);
             }
             renderContext();
-            textarea.focus();
+            if (screen.focused !== textarea) {
+                textarea.focus();
+            }
         },
         /**
          * Текущий режим ввода — нужен, чтобы отправить файл ответом.
@@ -245,7 +250,11 @@ export function createInputBox(screen, theme, {
             textarea.setValue("");
             screen.render();
         },
-        focus: () => textarea.focus(),
+        focus: () => {
+            if (screen.focused !== textarea) {
+                textarea.focus();
+            }
+        },
         /**
          * Завершает режим ввода, отдавая фокус предыдущей панели.
          * Нужно вызывать перед открытием модального окна: иначе textarea по blur

package/src/ui/components/modals/actionModal.js

@@ -1,8 +1,10 @@
 import blessed from "neo-blessed";
 import { escapeBlessed } from "../../../telegram/formatter.js";
 import { fg } from "../../theme.js";
+import { isMessageVideo } from "../../../utils/video.js";
 
-import { isInsideBox } from "../../../utils/mouse.js";
+import { isRightClick } from "../../../utils/mouse.js";
+import { bindOutsideClickClose } from "../../modalMouse.js";
 
 /**
  * Создаёт модальное окно контекстных действий над сообщением.
@@ -72,7 +74,8 @@ export function createActionModal(screen, theme, { onAction } = {}) {
     const baseCreateItem = list.createItem.bind(list);
     list.createItem = (content) => {
         const item = baseCreateItem(content);
-        item.on("click", () => {
+        item.on("click", (data) => {
+            if (isRightClick(data)) return;
             const index = list.getItemIndex(item);
             const action = currentActions[index];
             if (action && currentMsg) {
@@ -109,6 +112,10 @@ export function createActionModal(screen, theme, { onAction } = {}) {
             { id: "reply", label: "↩️  Ответить (Reply)" },
         ];
 
+        if (isMessageVideo(msg)) {
+            currentActions.push({ id: "play_video", label: "▶️  Воспроизвести видео" });
+        }
+
         if (msg.out) {
             currentActions.push({ id: "edit", label: "✏️  Редактировать текст" });
         }
@@ -128,6 +135,7 @@ export function createActionModal(screen, theme, { onAction } = {}) {
 
         list.setItems(currentActions.map((a) => a.label));
         previousFocus = screen.focused;
+        armOutsideClose();
         modal.show();
         modal.setFront();
         list.focus();
@@ -146,18 +154,7 @@ export function createActionModal(screen, theme, { onAction } = {}) {
     list.key(["escape", "q"], hide);
 
     // Закрытие при клике мышью мимо модального окна
-    screen.on("click", (data) => {
-        if (!modal.visible) return;
-        const inside = isInsideBox(data.x, data.y, {
-            left: modal.aleft,
-            top: modal.atop,
-            width: modal.width,
-            height: modal.height,
-        });
-        if (!inside) {
-            hide();
-        }
-    });
+    const armOutsideClose = bindOutsideClickClose(screen, modal, hide);
 
     return {
         modal,

package/src/ui/components/modals/chatInfoModal.js

@@ -3,7 +3,7 @@ import { escapeBlessed } from "../../../telegram/formatter.js";
 import { idToString } from "../../../telegram/entities.js";
 import { fg } from "../../theme.js";
 
-import { isInsideBox } from "../../../utils/mouse.js";
+import { bindOutsideClickClose } from "../../modalMouse.js";
 
 /**
  * Создаёт модальное окно информации о текущем чате.
@@ -111,6 +111,7 @@ export function createChatInfoModal(screen, theme) {
 
         infoText.setContent(body);
         previousFocus = screen.focused;
+        armOutsideClose();
         modal.show();
         modal.setFront();
         closeBtn.focus();
@@ -123,18 +124,7 @@ export function createChatInfoModal(screen, theme) {
     closeBtn.key(["escape", "q"], hide);
 
     // Закрытие при клике мышью мимо модального окна
-    screen.on("click", (data) => {
-        if (!modal.visible) return;
-        const inside = isInsideBox(data.x, data.y, {
-            left: modal.aleft,
-            top: modal.atop,
-            width: modal.width,
-            height: modal.height,
-        });
-        if (!inside) {
-            hide();
-        }
-    });
+    const armOutsideClose = bindOutsideClickClose(screen, modal, hide);
 
     return {
         modal,

package/src/ui/components/modals/confirmModal.js

@@ -1,6 +1,6 @@
 import blessed from "neo-blessed";
 import { fg } from "../../theme.js";
-import { isInsideBox } from "../../../utils/mouse.js";
+import { bindOutsideClickClose } from "../../modalMouse.js";
 
 /**
  * Создаёт модальное окно подтверждения действия (Да / Нет).
@@ -130,18 +130,7 @@ export function createConfirmModal(screen, theme) {
     }
 
     // Закрытие при клике мышью мимо модального окна
-    screen.on("click", (data) => {
-        if (!modal.visible) return;
-        const inside = isInsideBox(data.x, data.y, {
-            left: modal.aleft,
-            top: modal.atop,
-            width: modal.width,
-            height: modal.height,
-        });
-        if (!inside) {
-            hide();
-        }
-    });
+    const armOutsideClose = bindOutsideClickClose(screen, modal, hide);
 
     return {
         modal,
@@ -149,6 +138,7 @@ export function createConfirmModal(screen, theme) {
             currentCallback = onConfirm;
             previousFocus = screen.focused;
             msgBox.setContent(`{bold}${text}{/bold}`);
+            armOutsideClose();
             modal.show();
             modal.setFront();
             noBtn.focus();

package/src/ui/components/modals/fileModal.js

@@ -4,7 +4,7 @@ import { inspectLocalFile } from "../../../utils/storage.js";
 import { formatFileSize } from "../../../utils/time.js";
 import { createFilePickerModal } from "./filePickerModal.js";
 import { fg } from "../../theme.js";
-import { isInsideBox } from "../../../utils/mouse.js";
+import { bindOutsideClickClose } from "../../modalMouse.js";
 
 /** Разделитель нескольких путей в поле ввода. */
 const PATH_SEPARATOR = "|";
@@ -253,6 +253,7 @@ export function createFileModal(screen, theme, { onSendFile } = {}) {
         asDocumentCheck.uncheck();
         statusLine.setContent("");
         previousFocus = screen.focused;
+        armOutsideClose();
         modal.show();
         modal.setFront();
         pathInput.focus();
@@ -360,18 +361,10 @@ export function createFileModal(screen, theme, { onSendFile } = {}) {
         screen.render();
     });
 
-    // Закрытие при клике мышью мимо модального окна
-    screen.on("click", (data) => {
-        if (!modal.visible || picker.modal.visible) return;
-        const inside = isInsideBox(data.x, data.y, {
-            left: modal.aleft,
-            top: modal.atop,
-            width: modal.width,
-            height: modal.height,
-        });
-        if (!inside) {
-            hide();
-        }
+    // Закрытие при клике мышью мимо модального окна.
+    // Пока открыт файловый пикер, клики мимо окна отправки его не закрывают.
+    const armOutsideClose = bindOutsideClickClose(screen, modal, () => {
+        if (!picker.modal.visible) hide();
     });
 
     return {

package/src/ui/components/modals/filePickerModal.js

@@ -4,7 +4,7 @@ import os from "node:os";
 import path from "node:path";
 import { formatFileSize } from "../../../utils/time.js";
 import { fg } from "../../theme.js";
-import { isInsideBox } from "../../../utils/mouse.js";
+import { bindOutsideClickClose } from "../../modalMouse.js";
 
 /**
  * Модальное окно выбора локального файла (обёртка над blessed.filemanager).
@@ -194,18 +194,7 @@ export function createFilePickerModal(screen, theme) {
     footer.on("click", hide);
 
     // Закрытие при клике мышью мимо модального окна
-    screen.on("click", (data) => {
-        if (!modal.visible) return;
-        const inside = isInsideBox(data.x, data.y, {
-            left: modal.aleft,
-            top: modal.atop,
-            width: modal.width,
-            height: modal.height,
-        });
-        if (!inside) {
-            hide();
-        }
-    });
+    const armOutsideClose = bindOutsideClickClose(screen, modal, hide);
 
     return {
         modal,
@@ -219,6 +208,7 @@ export function createFilePickerModal(screen, theme) {
             onPickCallback = onPick;
             onCloseCallback = onClose;
             const cwd = startDir && fs.existsSync(startDir) ? startDir : os.homedir();
+            armOutsideClose();
             modal.show();
             modal.setFront();
             manager.refresh(cwd, () => {

package/src/ui/components/modals/helpModal.js

@@ -1,5 +1,5 @@
 import blessed from "neo-blessed";
-import { isInsideBox } from "../../../utils/mouse.js";
+import { bindOutsideClickClose } from "../../modalMouse.js";
 
 /**
  * Создаёт модальное окно справки по всем горячим клавишам и возможностям.
@@ -44,16 +44,22 @@ export function createHelpModal(screen, theme) {
 
  {bold}Навигация и фокус:{/bold}
    ${K_CYAN}[Tab]${K_END} / ${K_CYAN}[Shift+Tab]${K_END}  Фокус по кругу: Список чатов → Лента сообщений → Ввод
-   ${K_CYAN}[↑] / [↓]${K_END}           Перемещение по списку чатов
-   ${K_CYAN}[Enter]${K_END}             Открыть выбранный чат / Загрузить историю
+   ${K_CYAN}[↑] / [↓]${K_END}           Список чатов: перемещение · Лента: выделение сообщения
+   ${K_CYAN}[Enter]${K_END}             Открыть чат / Меню действий над выделенным сообщением
    ${K_CYAN}[PageUp] / [Ctrl+U]${K_END} Прокрутка сообщений вверх / Подгрузка старой истории
    ${K_CYAN}[PageDown] / [Ctrl+D]${K_END}Прокрутка сообщений вниз
+   ${K_CYAN}[Home] / [End]${K_END}       Начало ленты (подгрузка истории) / Последнее сообщение
 
  {bold}Управление мышью:{/bold}
    ${K_CYAN}Клик по диалогу${K_END}      Мгновенно открыть чат
    ${K_CYAN}Колесо мыши${K_END}          Прокрутка списка чатов и сообщений (вверх — подгрузка истории)
-   ${K_CYAN}Клик по сообщению${K_END}    Открыть меню действий над сообщением
+   ${K_CYAN}Левый клик по сообщению${K_END}  Выделить сообщение (помечается полосой ▌ слева)
+   ${K_CYAN}Правый клик по сообщению${K_END} Меню действий над сообщением
+   ${K_CYAN}Клик по превью фото/видео${K_END}Открыть изображение или воспроизвести видео
+   ${K_CYAN}  [Space] / [r]${K_END}          — в видеоплеере: пауза / перезапуск
    ${K_CYAN}Клик по вкладкам/кнопкам${K_END} Переключение фильтров и вызов действий
+   ${K_GRAY}macOS Terminal.app перехватывает правый клик — там пользуйтесь [Enter] или [Ctrl+A]${K_END}
+   ${K_CYAN}[F12]${K_END}               Отдать мышь терминалу, чтобы выделить и скопировать текст
 
  {bold}Вкладки фильтрации диалогов (нажмите цифру в списке чатов):{/bold}
    ${K_YELLOW}[1]${K_END} Все чаты       ${K_YELLOW}[2]${K_END} Личные (ЛС)     ${K_YELLOW}[3]${K_END} Группы
@@ -63,8 +69,8 @@ export function createHelpModal(screen, theme) {
  {bold}Работа с сообщениями:{/bold}
    ${K_GREEN}[Enter]${K_END}             Отправить набранный текст
    ${K_GREEN}[Ctrl+J]${K_END}            Перенос строки без отправки
-   ${K_GREEN}[Ctrl+R]${K_END}            Ответить (Reply) на последнее сообщение
-   ${K_GREEN}[Ctrl+E]${K_END}            Редактировать своё последнее сообщение
+   ${K_GREEN}[Ctrl+R]${K_END}            Ответить (Reply) на выделенное, иначе — на последнее
+   ${K_GREEN}[Ctrl+E]${K_END}            Редактировать выделенное своё, иначе — последнее своё
    ${K_GREEN}[Ctrl+A]${K_END}            Контекстное меню действий (Реакции, Удаление, Скачивание)
    ${K_GREEN}[Ctrl+O]${K_END}            Отправить файл / картинку / документ
    ${K_GREEN}  [Ctrl+F]${K_END}          — в окне отправки: обзор файлов
@@ -122,6 +128,7 @@ export function createHelpModal(screen, theme) {
 
     function show() {
         previousFocus = screen.focused;
+        armOutsideClose();
         modal.show();
         modal.setFront();
         closeBtn.focus();
@@ -134,18 +141,7 @@ export function createHelpModal(screen, theme) {
     closeBtn.key(["escape", "q", "f1"], hide);
 
     // Закрытие при клике мышью мимо модального окна
-    screen.on("click", (data) => {
-        if (!modal.visible) return;
-        const inside = isInsideBox(data.x, data.y, {
-            left: modal.aleft,
-            top: modal.atop,
-            width: modal.width,
-            height: modal.height,
-        });
-        if (!inside) {
-            hide();
-        }
-    });
+    const armOutsideClose = bindOutsideClickClose(screen, modal, hide);
 
     return {
         modal,

package/src/ui/components/modals/imageViewerModal.js

@@ -0,0 +1,172 @@
+import blessed from "neo-blessed";
+import { fg } from "../../theme.js";
+import { renderImageBuffer } from "../../../utils/image.js";
+
+/**
+ * Создаёт полноэкранный просмотрщик изображений.
+ *
+ * Сначала показывается встроенная в сообщение миниатюра (мгновенно, без сети),
+ * затем она заменяется полноразмерной версией, как только та скачается.
+ *
+ * @param {blessed.Widgets.Screen} screen
+ * @param {object} theme
+ * @param {object} callbacks
+ * @param {(msg: object) => Promise<{ buffer: Buffer, mimeType: string }>} [callbacks.onLoadFullImage]
+ * @param {(msg: object, size: { maxWidth: number, maxHeight: number }) => string} [callbacks.onRenderPlaceholder]
+ * @returns {{ modal: object, show: (msg: object) => void, hide: () => void, isVisible: () => boolean }}
+ */
+export function createImageViewerModal(screen, theme, { onLoadFullImage, onRenderPlaceholder } = {}) {
+    const modal = blessed.box({
+        parent: screen,
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        hidden: true,
+        mouse: true,
+        style: {
+            bg: theme.bg,
+            fg: theme.fg,
+        },
+    });
+
+    const canvas = blessed.box({
+        parent: modal,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 1,
+        tags: true,
+        align: "center",
+        valign: "middle",
+        style: {
+            bg: theme.bg,
+            fg: theme.fg,
+        },
+    });
+
+    const footer = blessed.box({
+        parent: modal,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 1,
+        tags: true,
+        style: {
+            bg: theme.status.bg,
+            fg: theme.status.fg,
+        },
+    });
+
+    let currentMsg = null;
+    let fullImage = null;
+    let statusText = "";
+    let previousFocus = null;
+    /** Счётчик открытий: результат опоздавшей загрузки не должен затирать новую картинку. */
+    let token = 0;
+
+    /** Размер холста в ячейках терминала. */
+    function viewportSize() {
+        return {
+            maxWidth: Math.max(8, (screen.width || 80) - 2),
+            maxHeight: Math.max(4, (screen.height || 24) - 2),
+        };
+    }
+
+    function renderFooter() {
+        const id = currentMsg ? `#${currentMsg.id}` : "";
+        const status = statusText ? `${fg(theme.warning, statusText)} ${fg(theme.dim, "│")} ` : "";
+        footer.setContent(
+            ` ${fg(theme.accent, id)} ${fg(theme.dim, "│")} ${status}${fg(theme.muted, "[Esc] закрыть · клик — закрыть")}`
+        );
+    }
+
+    /** Перерисовывает картинку под текущий размер терминала. */
+    function repaint() {
+        if (!currentMsg) return;
+        const size = viewportSize();
+
+        let content = "";
+        if (fullImage?.buffer) {
+            content = renderImageBuffer(fullImage.buffer, {
+                mimeType: fullImage.mimeType,
+                maxWidth: size.maxWidth,
+                maxHeight: size.maxHeight,
+            });
+        }
+        if (!content) {
+            content = onRenderPlaceholder?.(currentMsg, size) || "";
+        }
+        if (!content) {
+            content = fg(theme.muted, "Изображение недоступно");
+        }
+
+        canvas.setContent(content);
+        renderFooter();
+        screen.render();
+    }
+
+    function hide() {
+        // Инвалидируем незавершённую загрузку: её результат уже не нужен
+        token++;
+        modal.hide();
+        currentMsg = null;
+        fullImage = null;
+        statusText = "";
+        canvas.setContent("");
+        if (previousFocus) {
+            previousFocus.focus();
+            previousFocus = null;
+        }
+        screen.render();
+    }
+
+    /**
+     * Открывает изображение сообщения на весь экран.
+     * @param {object} msg нормализованное сообщение
+     */
+    function show(msg) {
+        if (!msg) return;
+
+        const myToken = ++token;
+        currentMsg = msg;
+        fullImage = null;
+        statusText = "Загрузка полного изображения...";
+        previousFocus = screen.focused;
+
+        repaint();
+        modal.show();
+        modal.setFront();
+        modal.focus();
+        screen.render();
+
+        Promise.resolve()
+            .then(() => onLoadFullImage?.(msg))
+            .then((result) => {
+                if (myToken !== token || !result?.buffer) return;
+                fullImage = result;
+                statusText = "";
+                repaint();
+            })
+            .catch((err) => {
+                if (myToken !== token) return;
+                statusText = `Не удалось загрузить: ${err.message}`;
+                renderFooter();
+                screen.render();
+            });
+    }
+
+    modal.key(["escape", "q", "enter", "return", "space"], hide);
+    modal.on("click", hide);
+
+    screen.on("resize", () => {
+        if (modal.visible) repaint();
+    });
+
+    return {
+        modal,
+        show,
+        hide,
+        isVisible: () => modal.visible,
+    };
+}