Bump version to 0.2.1 and improve image handling

kingwingfly · kingwingfly · commit 8c0b0bf0132c · 2025-04-27T20:42:59.000+08:00
- Added LRU caching for images in the client to optimize rendering.
- Enhanced image resizing and display logic with `ratatui_image`.
- Updated `Setting` widget to display server address type with warnings.
- Introduced `ConversationState` and `ExploreState` for better state management.
- Added `ring` dependency for SHA256 hashing.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@ Note: In this file, do not use the hard wrap in the middle of a sentence for com
 -->
 
 ## [Unreleased]
+## [0.2.1] - 2025-04-27
+
+- improve image display
+
 ## [0.2.0] - 2025-04-27
 
 - TLS support
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/e2ee_chat_client/Cargo.toml b/e2ee_chat_client/Cargo.toml
@@ -29,3 +29,4 @@ ratatui-image = "5.0"
 regex = "1.11"
 lru = "0.14.0"
 image = "0.25.6"
+ring = "0.17"
diff --git a/e2ee_chat_client/src/widget/app.rs b/e2ee_chat_client/src/widget/app.rs
@@ -20,7 +20,7 @@ use crate::{
 
 use super::{
     contacts::Contacts,
-    conversation::Conversation,
+    conversation::{Conversation, ConversationState},
     explore::{Explore, ExploreState},
     footer::Footer,
     form::Form,
@@ -48,6 +48,7 @@ pub struct AppState {
     pub screen: Screen,
 
     pub explore_state: ExploreState,
+    conversation_state: ConversationState,
 
     picker: Picker,
 }
@@ -73,6 +74,7 @@ impl AppState {
             current_activated_textarea: 0,
             screen: Screen::default(),
             explore_state: Default::default(),
+            conversation_state: Default::default(),
             picker: Picker::from_query_stdio()?,
         })
     }
@@ -133,9 +135,10 @@ impl StatefulWidget for App {
             {
                 Conversation {
                     messages,
+                    current: state.current_activated_message,
                     picker: &state.picker,
                 }
-                .render(conversation, buf, &mut state.current_activated_message);
+                .render(conversation, buf, &mut state.conversation_state);
             }
         }
 
@@ -153,7 +156,7 @@ impl StatefulWidget for App {
                 area,
                 buf,
                 &mut SettingState {
-                    server_addr: state.server_addr.to_string(),
+                    server_addr: state.server_addr.clone(),
                     public_identity_key: state.x3dh_client.public_identity_key(),
                 },
             ),
@@ -173,7 +176,12 @@ impl StatefulWidget for App {
                 .render(area, buf, &mut state.current_activated_textarea);
             }
             Screen::SelectFile => {
-                PopUpStateful { inner: Explore {} }.render(area, buf, &mut state.explore_state);
+                PopUpStateful {
+                    inner: Explore {
+                        picker: &state.picker,
+                    },
+                }
+                .render(area, buf, &mut state.explore_state);
             }
         }
     }
diff --git a/e2ee_chat_client/src/widget/bubble.rs b/e2ee_chat_client/src/widget/bubble.rs
@@ -1,9 +1,13 @@
 use image::load_from_memory;
+use lru::LruCache;
 use ratatui::{
     prelude::*,
     widgets::{Block, Padding, Paragraph, Wrap},
 };
-use ratatui_image::{FilterType, Resize, StatefulImage, picker::Picker};
+use ratatui_image::{
+    FilterType, Resize, StatefulImage, picker::Picker, protocol::StatefulProtocol,
+};
+use ring::digest::{SHA256, digest};
 
 use crate::message::{Message, MessageContent, MessageState};
 
@@ -12,8 +16,10 @@ pub struct Bubble<'a> {
     pub message: &'a Message,
 }
 
-impl Widget for Bubble<'_> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
+impl StatefulWidget for Bubble<'_> {
+    type State = LruCache<Vec<u8>, Option<StatefulProtocol>>;
+
+    fn render(self, area: Rect, buf: &mut Buffer, state: &mut Self::State) {
         let chunk = match self.message.state {
             MessageState::Sent => {
                 let chunks = Layout::default()
@@ -64,10 +70,16 @@ impl Widget for Bubble<'_> {
                 p.render(inner, buf);
             }
             MessageContent::Image(bytes) => {
-                if let Ok(image) = load_from_memory(bytes) {
-                    let mut image = self.picker.new_resize_protocol(image);
-                    image.resize_encode(&Resize::Fit(Some(FilterType::CatmullRom)), inner);
-                    StatefulImage::default().render(inner, buf, &mut image);
+                if let Some(image) =
+                    state.get_or_insert_mut(digest(&SHA256, bytes).as_ref().to_vec(), || {
+                        load_from_memory(bytes).ok().map(|image| {
+                            let mut image = self.picker.new_resize_protocol(image);
+                            image.resize_encode(&Resize::Fit(Some(FilterType::CatmullRom)), inner);
+                            image
+                        })
+                    })
+                {
+                    StatefulImage::default().render(inner, buf, image);
                 }
             }
         }
diff --git a/e2ee_chat_client/src/widget/conversation.rs b/e2ee_chat_client/src/widget/conversation.rs
@@ -1,20 +1,36 @@
+use std::num::NonZero;
+
+use lru::LruCache;
 use ratatui::{
     prelude::*,
     widgets::{Scrollbar, ScrollbarState},
 };
-use ratatui_image::picker::Picker;
+use ratatui_image::{picker::Picker, protocol::StatefulProtocol};
 
 use crate::message::Message;
 
 use super::bubble::Bubble;
 
+pub struct ConversationState {
+    lru_image: LruCache<Vec<u8>, Option<StatefulProtocol>>,
+}
+
+impl Default for ConversationState {
+    fn default() -> Self {
+        Self {
+            lru_image: LruCache::new(NonZero::new(16).unwrap()),
+        }
+    }
+}
+
 pub struct Conversation<'a> {
     pub messages: &'a Vec<Message>,
+    pub current: usize,
     pub picker: &'a Picker,
 }
 
 impl StatefulWidget for Conversation<'_> {
-    type State = usize;
+    type State = ConversationState;
 
     fn render(self, area: Rect, buf: &mut Buffer, state: &mut Self::State) {
         let chunks = Layout::default()
@@ -24,11 +40,11 @@ impl StatefulWidget for Conversation<'_> {
         Scrollbar::default().render(
             chunks[1],
             buf,
-            &mut ScrollbarState::new(self.messages.len()).position(*state),
+            &mut ScrollbarState::new(self.messages.len()).position(self.current),
         );
         let lines = chunks[0].height;
         let mut used = 0;
-        for message in self.messages[..=*state].iter().rev() {
+        for message in self.messages[..=self.current].iter().rev() {
             let line_num = message.line_num((chunks[0].width * 3 / 5).max(7) - 6) + 2; // border and padding
             if used + line_num >= lines {
                 break;
@@ -45,7 +61,7 @@ impl StatefulWidget for Conversation<'_> {
                 message,
                 picker: self.picker,
             }
-            .render(chunks[1], buf);
+            .render(chunks[1], buf, &mut state.lru_image);
             used += line_num;
         }
     }
diff --git a/e2ee_chat_client/src/widget/explore.rs b/e2ee_chat_client/src/widget/explore.rs
@@ -12,22 +12,26 @@ use ratatui::{
     prelude::*,
     widgets::{Block, Borders, Padding, Paragraph, Scrollbar, ScrollbarState},
 };
-use ratatui_image::{FilterType, Resize, StatefulImage, picker::Picker};
+use ratatui_image::{
+    FilterType, Resize, StatefulImage, picker::Picker, protocol::StatefulProtocol,
+};
 use regex::Regex;
 use tui_textarea::{Input, TextArea};
 use unicode_width::UnicodeWidthStr;
 
 use crate::message::MessageContent;
 
-pub struct Explore {}
+pub struct Explore<'a> {
+    pub picker: &'a Picker,
+}
 
 #[derive(Debug)]
 pub struct ExploreState {
     pub selected: usize,
     pub paths: Vec<PathBuf>,
     textarea: TextArea<'static>,
-    lru: LruCache<PathBuf, Vec<u8>>,
-    picker: Picker,
+    lru_bytes: LruCache<PathBuf, Option<Vec<u8>>>,
+    lru_image: LruCache<PathBuf, Option<StatefulProtocol>>,
 }
 
 impl Default for ExploreState {
@@ -36,8 +40,8 @@ impl Default for ExploreState {
             selected: 0,
             paths: collect_paths(std::env::current_dir().unwrap()),
             textarea: Default::default(),
-            lru: LruCache::new(NonZeroUsize::new(16).unwrap()),
-            picker: Picker::from_query_stdio().unwrap(),
+            lru_bytes: LruCache::new(NonZeroUsize::new(16).unwrap()),
+            lru_image: LruCache::new(NonZeroUsize::new(16).unwrap()),
         }
     }
 }
@@ -100,7 +104,7 @@ impl ExploreState {
     }
 }
 
-impl StatefulWidget for Explore {
+impl StatefulWidget for Explore<'_> {
     type State = ExploreState;
 
     fn render(self, area: Rect, buf: &mut Buffer, state: &mut Self::State) {
@@ -168,7 +172,7 @@ impl StatefulWidget for Explore {
         if let Some(mime) = mime_guess::from_path(selected).first() {
             match mime.type_() {
                 TEXT => {
-                    let bytes = state.lru.get_or_insert(selected.clone(), || {
+                    if let Some(bytes) = state.lru_bytes.get_or_insert(selected.clone(), || {
                         fs::File::open(selected)
                             .map(|mut file| {
                                 let mut lines = 0;
@@ -189,20 +193,28 @@ impl StatefulWidget for Explore {
                                 }
                                 bytes
                             })
-                            .unwrap_or_default()
-                    });
-                    let text = String::from_utf8_lossy(bytes);
-                    let lines = text.lines().map(Into::into).collect::<Vec<_>>();
-                    Paragraph::new(lines).render(preview, buf);
+                            .ok()
+                    }) {
+                        let text = String::from_utf8_lossy(bytes);
+                        let lines = text.lines().map(Into::into).collect::<Vec<_>>();
+                        Paragraph::new(lines).render(preview, buf);
+                    }
                 }
                 IMAGE => {
-                    let bytes = state.lru.get_or_insert(selected.clone(), || {
-                        std::fs::read(selected).unwrap_or_default()
-                    });
-                    if let Ok(image) = load_from_memory(bytes) {
-                        let mut image = state.picker.new_resize_protocol(image);
-                        image.resize_encode(&Resize::Fit(Some(FilterType::CatmullRom)), preview);
-                        StatefulImage::default().render(preview, buf, &mut image);
+                    if let Some(image) = state.lru_image.get_or_insert_mut(selected.clone(), || {
+                        std::fs::read(selected)
+                            .ok()
+                            .and_then(|bytes| load_from_memory(&bytes).ok())
+                            .map(|image| {
+                                let mut image = self.picker.new_resize_protocol(image);
+                                image.resize_encode(
+                                    &Resize::Fit(Some(FilterType::CatmullRom)),
+                                    preview,
+                                );
+                                image
+                            })
+                    }) {
+                        StatefulImage::default().render(preview, buf, image);
                     }
                 }
                 _ => {}
diff --git a/e2ee_chat_client/src/widget/setting.rs b/e2ee_chat_client/src/widget/setting.rs
@@ -3,11 +3,12 @@ use ratatui::{
     prelude::*,
     widgets::{Block, Cell, Padding, Row, Table},
 };
+use ratchetx2::Uri;
 
 pub struct Setting {}
 
 pub struct SettingState {
-    pub server_addr: String,
+    pub server_addr: Uri,
     pub public_identity_key: Vec<u8>,
 }
 
@@ -33,8 +34,16 @@ impl StatefulWidget for Setting {
                 )
                 .rows([
                     Row::new([
-                        Cell::from("Server Address"),
-                        Cell::from(state.server_addr.as_str()),
+                        {
+                            if state.server_addr.scheme_str() == Some("http") {
+                                Cell::from("Server Addr (HTTP⚠️)").red()
+                            } else if state.server_addr.scheme_str() == Some("https") {
+                                Cell::from("Server Addr (HTTPS)")
+                            } else {
+                                Cell::from("Server Addr (Unknown Type)").yellow()
+                            }
+                        },
+                        Cell::from(state.server_addr.to_string()),
                     ]),
                     Row::new([
                         Cell::from("Public Identity Key"),
diff --git a/e2ee_chat_server/Cargo.toml b/e2ee_chat_server/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "e2ee_chat_server"
-version = "0.2.0"
+version = "0.2.1"
 edition = "2024"
 description = "An E2EE chat server."
 keywords = ["E2EE", "double-ratchet", "xeddsa", "XEdDSA", "signal"]

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ use crate::{`
`20`	`20`
`21`	`21`	`use super::{`
`22`	`22`	`contacts::Contacts,`
`23`		`- conversation::Conversation,`
	`23`	`+ conversation::{Conversation, ConversationState},`
`24`	`24`	`explore::{Explore, ExploreState},`
`25`	`25`	`footer::Footer,`
`26`	`26`	`form::Form,`
`@@ -48,6 +48,7 @@ pub struct AppState {`
`48`	`48`	`pub screen: Screen,`
`49`	`49`
`50`	`50`	`pub explore_state: ExploreState,`
	`51`	`+ conversation_state: ConversationState,`
`51`	`52`
`52`	`53`	`picker: Picker,`
`53`	`54`	`}`
`@@ -73,6 +74,7 @@ impl AppState {`
`73`	`74`	`current_activated_textarea: 0,`
`74`	`75`	`screen: Screen::default(),`
`75`	`76`	`explore_state: Default::default(),`
	`77`	`+ conversation_state: Default::default(),`
`76`	`78`	`picker: Picker::from_query_stdio()?,`
`77`	`79`	`})`
`78`	`80`	`}`
`@@ -133,9 +135,10 @@ impl StatefulWidget for App {`
`133`	`135`	`{`
`134`	`136`	`Conversation {`
`135`	`137`	`messages,`
	`138`	`+ current: state.current_activated_message,`
`136`	`139`	`picker: &state.picker,`
`137`	`140`	`}`
`138`		`- .render(conversation, buf, &mut state.current_activated_message);`
	`141`	`+ .render(conversation, buf, &mut state.conversation_state);`
`139`	`142`	`}`
`140`	`143`	`}`
`141`	`144`
`@@ -153,7 +156,7 @@ impl StatefulWidget for App {`
`153`	`156`	`area,`
`154`	`157`	`buf,`
`155`	`158`	`&mut SettingState {`
`156`		`- server_addr: state.server_addr.to_string(),`
	`159`	`+ server_addr: state.server_addr.clone(),`
`157`	`160`	`public_identity_key: state.x3dh_client.public_identity_key(),`
`158`	`161`	`},`
`159`	`162`	`),`
`@@ -173,7 +176,12 @@ impl StatefulWidget for App {`
`173`	`176`	`.render(area, buf, &mut state.current_activated_textarea);`
`174`	`177`	`}`
`175`	`178`	`Screen::SelectFile => {`
`176`		`- PopUpStateful { inner: Explore {} }.render(area, buf, &mut state.explore_state);`
	`179`	`+ PopUpStateful {`
	`180`	`+ inner: Explore {`
	`181`	`+ picker: &state.picker,`
	`182`	`+ },`
	`183`	`+ }`
	`184`	`+ .render(area, buf, &mut state.explore_state);`
`177`	`185`	`}`
`178`	`186`	`}`
`179`	`187`	`}`