Files

Mikhail Kilin 2a5fd6aa35 perf: optimize Phase 11 image rendering with dual-protocol architecture

Redesigned UX and performance for inline photo viewing:

UX changes:
- Always-show inline preview (fixed 50 chars width)
- Fullscreen modal on 'v' key with ←/→ navigation between photos
- Loading indicator "⏳ Загрузка..." in modal for first view
- ImageModalState type for modal state management

Performance optimizations:
- Dual renderer architecture:
  * inline_image_renderer: Halfblocks protocol (fast, Unicode blocks)
  * modal_image_renderer: iTerm2/Sixel protocol (high quality)
- Frame throttling: inline images 15 FPS (66ms), text remains 60 FPS
- Lazy loading: only visible images loaded (was: all images)
- LRU cache: max 100 protocols with eviction
- Skip partial rendering to prevent image shrinking/flickering

Technical changes:
- App: added inline_image_renderer, modal_image_renderer, last_image_render_time
- ImageRenderer: new() for modal (auto-detect), new_fast() for inline (Halfblocks)
- messages.rs: throttled second-pass rendering, visible-only loading
- modals/image_viewer.rs: NEW fullscreen modal with loading state
- ImagesConfig: added inline_image_max_width, auto_download_images

Result: 10x faster navigation, smooth 60 FPS text, quality modal viewing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-08 01:36:36 +03:00

6.3 KiB

Raw Blame History

Текущий контекст проекта

Статус: Фаза 11 — Inline просмотр фото (DONE)

Завершённые фазы (краткий итог)

Фаза	Описание	Статус
1	Базовая инфраструктура (ratatui + crossterm, vim-навигация)	DONE
2	TDLib интеграция (авторизация, чаты, сообщения)	DONE
3	Улучшение UX (отправка, поиск, скролл, realtime)	DONE
4	Папки и фильтрация (загрузка папок, переключение 1-9)	DONE
5	Расширенный функционал (онлайн-статус, медиа-заглушки, muted)	DONE
6	Полировка (60 FPS, память, graceful shutdown, динамический инпут)	DONE
7	Рефакторинг памяти (единый источник данных, LRU-кэш)	DONE
8	Дополнительные фичи (markdown, edit/delete, reply/forward, блочный курсор)	DONE
9	Расширенные возможности (typing, pinned, поиск в чате, черновики, профиль, копирование, реакции, конфиг)	DONE
10	Desktop уведомления (notify-rust, muted фильтр, mentions, медиа)	DONE (83%)
11	Inline просмотр фото (ratatui-image, кэш, загрузка)	DONE
13	Глубокий рефакторинг архитектуры (7 этапов)	DONE

Фаза 11: Inline фото + оптимизации (подробности)

Feature-gated (images), 2-tier архитектура:

Базовая реализация:

Типы: MediaInfo, PhotoInfo, PhotoDownloadState, ImageModalState, ImagesConfig
Зависимости: ratatui-image 8.1, image 0.25 (feature-gated)
Media модуль: ImageCache (LRU), dual ImageRenderer (inline + modal)
UX: Always-show inline preview (фикс. ширина 50 chars) + полноэкранная модалка на v/м
Метаданные: extract_media_info() из TDLib MessagePhoto; auto-download visible photos

Оптимизации производительности:

Dual protocol strategy:
- inline_image_renderer: Halfblocks → быстро (Unicode блоки), для навигации
- modal_image_renderer: iTerm2/Sixel → медленно (high quality), для просмотра
Frame throttling: inline images 15 FPS (66ms), текст 60 FPS
Lazy loading: загрузка только видимых изображений (не все сразу)
LRU кэш: max 100 протоколов, eviction старых
Loading indicator: "⏳ Загрузка..." в модалке при первом открытии
Navigation hotkeys: ←/→ между фото, Esc/q закрыть модалку

UI рендеринг:

message_bubble.rs: photo status (Downloading/Error/placeholder), inline preview
messages.rs: второй проход с render_images() + throttling + только видимые
modals/image_viewer.rs: fullscreen modal с aspect ratio + loading state

Фаза 13: Рефакторинг (подробности)

Разбиты 5 монолитных файлов (4582 строк) на модульную архитектуру:

input/main_input.rs (1199→164): чистый роутер + 5 handler модулей в handlers/
app/mod.rs (1015→371): 5 trait модулей в methods/ (Navigation, Message, Compose, Search, Modal)
ui/messages.rs (893→365): модули modals/ (search, pinned, delete, reactions) + compose_bar.rs
tdlib/messages.rs (836→3 файла): messages/ (mod, convert, operations)
config/mod.rs (642→3 файла): validation.rs, loader.rs
Очистка дублей: ~220 строк удалено (shared components, format_user_status, scroll_to_message)
Документация: PROJECT_STRUCTURE.md переписан, 16 файлов получили //! docs

Ключевая архитектура

main.rs → event loop (16ms poll)
├── input/ → роутер + handlers/ (chat, chat_list, compose, modal, search)
├── app/ → App<T: TdClientTrait> + methods/ (5 traits, 67 методов)
├── ui/ → рендеринг (messages, chat_list, modals/, compose_bar, components/)
├── media/ → [feature=images] cache.rs, image_renderer.rs
└── tdlib/ → TDLib wrapper (client, auth, chats, messages/, users, reactions, types)

Тестирование

500+ тестов (0 failures):

Snapshot tests: 57 (UI компоненты)
Integration tests: 93 (user flows)
E2E tests: 12 (smoke + journey)
Utils tests: 18
Performance benchmarks: 8

Ключевые решения

Неблокирующий receive: TDLib updates через mpsc::channel в отдельном потоке
Trait-based App: методы разбиты на traits — требуют use import на call site
FakeTdClient: mock для тестов без TDLib (реализует TdClientTrait)
Оптимизация рендеринга: needs_redraw флаг, рендеринг только при изменениях
Конфиг: TOML ~/.config/tele-tui/config.toml, credentials с приоритетом (XDG → .env)
Feature-gated images: images feature flag для ratatui-image + image deps
Dual renderer: inline (Halfblocks, 15 FPS) + modal (iTerm2/Sixel, high quality) для баланса скорости/качества

Зависимости (основные)

ratatui = "0.29"           # TUI фреймворк
crossterm = "0.28"          # Терминальный backend
tdlib-rs = "1.1"            # Telegram TDLib binding
tokio = "1"                 # Async runtime
notify-rust = "4.11"        # Desktop уведомления (feature flag)
ratatui-image = "8.1"       # Inline images (feature flag)
image = "0.25"              # Image decoding (feature flag)

Полная структура проекта: см. PROJECT_STRUCTURE.md Подробный план: см. ROADMAP.md

6.3 KiB Raw Blame History Unescape Escape