added file_previewer

Author: alanpoon

resources/icons/add_attachment.svg

@@ -1269,7 +1269,7 @@ impl RoomScreen {
                     if is_append && !portal_list.is_at_end() {
                         // Immediately show the unread badge with no count while we fetch the actual count in the background.
                         jump_to_bottom.show_unread_message_badge(cx, UnreadMessageCount::Unknown);
-                        submit_async_request(MatrixRequest::GetNumberUnreadMessages{ room_id: tl.room_id.clone() });
+                        submit_async_request(MatrixRequest::GetNumberUnreadMessages{ room_id: tl.room_id.clone() }); 
                     }
 
                     if prior_items_changed {
@@ -1495,10 +1495,6 @@ impl RoomScreen {
                         }),
                     }
                 }
-                TimelineUpdate::ScrollToBottom => {
-                    // Scroll the portal list to the bottom of the timeline
-                    portal_list.set_first_id_and_scroll(tl.items.len().saturating_sub(1), 0.0);
-                }
             }
         }
 
@@ -2576,9 +2572,6 @@ pub enum TimelineUpdate {
         user_id: OwnedUserId,
         result: matrix_sdk::Result<()>,
     },
-    /// A request to scroll the timeline to the bottom.
-    ScrollToBottom,
-
 }
 
 thread_local! {

resources/icons/file.svg

@@ -20,6 +20,7 @@ use matrix_sdk::room::reply::{EnforceThread, Reply};
 use matrix_sdk_ui::timeline::{EmbeddedEvent, EventTimelineItem, TimelineEventItemId};
 use ruma::{events::room::message::{LocationMessageEventContent, MessageType, RoomMessageEventContent}, OwnedRoomId};
 use crate::{home::{editing_pane::{EditingPaneState, EditingPaneWidgetExt}, location_preview::LocationPreviewWidgetExt, room_screen::{MessageAction, RoomScreenProps, populate_preview_of_timeline_item}, tombstone_footer::{SuccessorRoomDetails, TombstoneFooterWidgetExt}}, location::init_location_subscriber, shared::{avatar::AvatarWidgetRefExt, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, mentionable_text_input::MentionableTextInputWidgetExt, popup_list::{PopupItem, PopupKind, enqueue_popup_notification}, progress::MyProgressWidgetExt, styles::*}, sliding_sync::{MatrixRequest, UserPowerLevels, submit_async_request}, utils};
+use crate::shared::file_previewer::FilePreviewerAction;
 
 live_design! {
     use link::theme::*;
@@ -39,7 +40,7 @@ live_design! {
     use link::tsp_link::TspSignAnycastCheckbox;
 
     ICO_LOCATION_PERSON = dep("crate://self/resources/icons/location-person.svg")
-    ICO_ADD_IMAGE = dep("crate://self/resources/icons/add_image.svg")
+    ICON_ADD_ATTACHMENT = dep("crate://self/resources/icons/add_attachment.svg")
 
 
     pub RoomInputBar = {{RoomInputBar}}<RoundedView> {
@@ -128,11 +129,11 @@ live_design! {
                     text: "",
                 }
 
-                image_upload_button = <RobrixIconButton> {
+                attachment_upload_button = <RobrixIconButton> {
                     margin: {left: 4}
                     spacing: 0,
                     draw_icon: {
-                        svg_file: (ICO_ADD_IMAGE)
+                        svg_file: (ICON_ADD_ATTACHMENT)
                         color: (COLOR_ACTIVE_PRIMARY_DARKER)
                     },
                     draw_bg: {
@@ -248,28 +249,22 @@ impl Widget for RoomInputBar {
             }
             _ => {}
         }
-        if let Event::FileDialogResult { live_id: _, path } = event {
-            if let Some(path) = path {
-                log!("File selected for upload: {}", path.display());
-
-                // Prepare the reply context if replying to a message
-                let replied_to_event_id = self.replying_to.as_ref()
-                    .and_then(|(event_tl_item, _emb)| event_tl_item.event_id().map(ToOwned::to_owned));
-
-                // Post action to show the file previewer modal
-                cx.action(crate::shared::file_previewer::FilePreviewerAction::Show {
-                    file_path: path.clone(),
-                    room_id: room_screen_props.room_name_id.room_id().clone(),
-                    replied_to_event_id,
-                });
+        if let Event::FileDialogResult { live_id, path } = event {
+            if *live_id == live_id!(attachment_upload) {
+                if let Some(path) = path {
+                    log!("File selected for upload: {}", path.display());
+                    // Post action to show the file previewer modal
+                    cx.action(FilePreviewerAction::Show {
+                        file_path: path.clone(),
+                    });
+                }
             }
         }
 
         // Handle upload progress updates
         if let Some(subscriber) = &self.upload_progress_subscriber {
             // Get the current progress value
             let progress = subscriber.get();
-            println!("Upload progress: {}/{}", progress.current, progress.total);
             if progress.current >= progress.total {
                 // Upload complete, hide progress bar
                 self.view.view(ids!(upload_progress_view)).set_visible(cx, false);
@@ -336,9 +331,8 @@ impl RoomInputBar {
         }
 
         // Handle the image upload button being clicked.
-        if self.button(ids!(image_upload_button)).clicked(actions) {
-            log!("Image upload button clicked; opening file dialog...");
-            cx.open_system_openfile_dialog(live_id!(upload), FileDialog::new());
+        if self.button(ids!(attachment_upload_button)).clicked(actions) {
+            cx.open_system_openfile_dialog(live_id!(attachment_upload), FileDialog::new());
         }
 
         // Handle the send location button being clicked.
@@ -438,12 +432,16 @@ impl RoomInputBar {
         // Handle file upload action
         for action in actions {
             match action.downcast_ref() {
-                Some(crate::shared::file_previewer::FilePreviewerAction::Upload { room_id, file_path, replied_to_event_id }) => {
+                Some(FilePreviewerAction::Upload { file_path }) => {
                     // Reconstruct the Reply from the event_id
-                    let replied_to = replied_to_event_id.as_ref().map(|event_id| Reply {
-                        event_id: event_id.clone(),
-                        enforce_thread: EnforceThread::MaybeThreaded,
-                    });
+                    let replied_to = self.replying_to.take().and_then(|(event_tl_item, _emb)|
+                        event_tl_item.event_id().map(|event_id|
+                            Reply {
+                                event_id: event_id.to_owned(),
+                                enforce_thread: EnforceThread::MaybeThreaded,
+                            }
+                        )
+                    );
 
                     // Create a SharedObservable for tracking upload progress
                     use matrix_sdk::TransmissionProgress;
@@ -453,15 +451,15 @@ impl RoomInputBar {
                     // Store the subscriber so we can track progress updates
                     self.upload_progress_subscriber = Some(progress_subscriber);
                     progress_observable.set(TransmissionProgress { current: 0, total: 100 });
-                    println!("FilePreviewerAction::Upload");
                     submit_async_request(MatrixRequest::Upload {
-                        room_id: room_id.clone(),
+                        room_id: room_screen_props.room_name_id.room_id().clone(),
                         file_path: file_path.clone(),
                         replied_to,
                         #[cfg(feature = "tsp")]
                         sign_with_tsp: false,
                         progress_sender: Some(progress_observable),
                     });
+                    self.clear_replying_to(cx);
                 }
                 _ => {}
             }

src/home/room_screen.rs

@@ -70,7 +70,9 @@ live_design! {
     }
 
     pub FilePreviewer = {{FilePreviewer}} {
+        width: Fit, height: Fit
         wrapper = <RoundedView> {
+            width: Fit, height: Fit
             align: {x: 0.5}
             flow: Down
             padding: {top: 30, right: 40, bottom: 20, left: 40}
@@ -82,7 +84,7 @@ live_design! {
             }
 
             header_view = <View> {
-                width: Fill
+                width: 400
                 height: Fit
                 flow: Right
                 align: {x: 1.0, y: 0.0}
@@ -92,42 +94,49 @@ live_design! {
                     draw_icon: { svg_file: (ICON_CLOSE) }
                     icon_walk: {width: 21, height: 21 }
                 }
-                
             }
-
-            // File metadata section (always visible)
-            metadata_view = <View> {
-                width: Fill
-                height: Fit
-                flow: Down
-                spacing: 5
-                padding: {bottom: 15}
-
-                filename_label = <Label> {
-                    width: Fill
-                    height: Fit
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 14},
-                        color: #000,
-                        wrap: Word
+            <View> {
+                width: Fit, height: Fit
+                flow: Right
+                // Document view (visible only for non-image files)
+                document_view = <View> {
+                    visible: false,
+                    width: Fit
+                    height: 40
+                    flow: Down
+                    align: {x: 0.5, y: 0.5}
+                    file_icon = <Icon> {
+                        draw_icon: {
+                            svg_file: (ICON_FILE),
+                            color: #999,
+                        }
+                        icon_walk: { width: 20, height: 20 }
                     }
                 }
-
-                filesize_label = <Label> {
-                    width: Fill
+                // File metadata section (always visible)
+                metadata_view = <View> {
+                    width: 400
                     height: Fit
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 12},
-                        color: #666,
+                    flow: Down
+                    spacing: 5
+
+                    filename_text = <Label> {
+                        width: Fill
+                        height: Fit
+                        draw_text: {
+                            text_style: <REGULAR_TEXT>{font_size: 14},
+                            color: #000,
+                            wrap: Word
+                        }
                     }
                 }
             }
 
             // Image preview (visible only for image files)
             image_view = <View> {
                 visible: true,
-                width: 400
-                height: 400
+                width: 300
+                height: 300
                 flow: Down
                 align: {x: 0.5, y: 0.5}
 
@@ -137,28 +146,9 @@ live_design! {
                 }
             }
 
-            // Document view (visible only for non-image files)
-            document_view = <View> {
-                visible: false,
-                width: Fill
-                height: Fit
-                flow: Down
-                align: {x: 0.5, y: 0.5}
-                padding: 20,
-
-                file_icon = <Icon> {
-                    draw_icon: {
-                        svg_file: (ICON_HTML_FILE),
-                        color: #999,
-                    }
-                    icon_walk: { width: 48, height: 48 }
-                }
-            }
-
             buttons_view = <View> {
-                width: Fill, height: Fit
+                width: 300, height: Fit
                 flow: Right,
-                padding: {top: 20, bottom: 20}
                 margin: {right: -15}
                 align: {x: 1.0, y: 0.5}
                 spacing: 20
@@ -209,14 +199,10 @@ pub enum FilePreviewerAction {
     /// Display the FilePreviewer widget with the given file path and room context.
     Show {
         file_path: PathBuf,
-        room_id: ruma::OwnedRoomId,
-        replied_to_event_id: Option<ruma::OwnedEventId>,
     },
     /// Upload the file with the given path.
     Upload {
-        room_id: ruma::OwnedRoomId,
         file_path: PathBuf,
-        replied_to_event_id: Option<ruma::OwnedEventId>,
     },
     /// Hide the FilePreviewer widget.
     Hide,
@@ -230,8 +216,6 @@ pub struct FilePreviewer {
     #[rust] background_task_id: u32,
     #[rust] receiver: Option<(u32, std::sync::mpsc::Receiver<(FilePreviewerMetaData, Vec<u8>)>)>,
     #[rust] file_path: Option<PathBuf>,
-    #[rust] room_id: Option<ruma::OwnedRoomId>,
-    #[rust] replied_to_event_id: Option<ruma::OwnedEventId>,
 }
 
 impl Widget for FilePreviewer {
@@ -260,7 +244,6 @@ impl Widget for FilePreviewer {
                             self.view(ids!(wrapper.document_view)).set_visible(cx, false);
                             self.file_type = FileType::Image;
 
-                            
                         } else {
                             println!("Failed to load image from bytes");
                             // Failed to load image, show as document
@@ -278,7 +261,6 @@ impl Widget for FilePreviewer {
                 Err(std::sync::mpsc::TryRecvError::Disconnected) => {
                     remove_receiver = true;
                 }
-                
             }
             if remove_receiver {
                 self.receiver = None;
@@ -291,6 +273,7 @@ impl Widget for FilePreviewer {
         self.view.draw_walk(cx, scope, walk)
     }
 }
+
 impl MatchEvent for FilePreviewer {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
         // Handle close button click
@@ -311,11 +294,9 @@ impl MatchEvent for FilePreviewer {
         }
         // Handle upload button click
         if self.view.button(ids!(wrapper.buttons_view.upload_button)).clicked(actions) {
-            if let (Some(file_path), Some(room_id)) = (&self.file_path, &self.room_id) {
+            if let Some(file_path) = &self.file_path {
                 cx.action(FilePreviewerAction::Upload {
-                    room_id: room_id.clone(),
                     file_path: file_path.clone(),
-                    replied_to_event_id: self.replied_to_event_id.clone(),
                 });
                 cx.action(FilePreviewerAction::Hide);
                 self.view.button(ids!(wrapper.buttons_view.upload_button)).set_enabled(cx, false);
@@ -324,7 +305,7 @@ impl MatchEvent for FilePreviewer {
         }
         for action in actions {
             match action.downcast_ref() {
-                Some(FilePreviewerAction::Show { file_path, room_id, replied_to_event_id }) => {
+                Some(FilePreviewerAction::Show { file_path }) => {
                     self.view.button(ids!(close_button)).reset_hover(cx);
                     self.view.button(ids!(close_button)).set_enabled(cx, true);
                     // Reset button states
@@ -334,8 +315,6 @@ impl MatchEvent for FilePreviewer {
                     self.view.button(ids!(wrapper.buttons_view.upload_button)).set_enabled(cx, true);
                     // Store the context for later use when upload button is clicked
                     self.file_path = Some(file_path.clone());
-                    self.room_id = Some(room_id.clone());
-                    self.replied_to_event_id = replied_to_event_id.clone();
                     let (sender, receiver) = std::sync::mpsc::channel();
                     if let Some(new_value) = self.background_task_id.checked_add(1) {
                         self.background_task_id = new_value;
@@ -371,16 +350,16 @@ impl MatchEvent for FilePreviewer {
         }
     }
 }
+
 impl FilePreviewer {
     /// Sets the file metadata (filename and size).
     ///
     /// ## Arguments
     /// * `filename`: the name of the file
     /// * `filesize`: the size of the file in bytes
     pub fn set_metadata(&mut self, cx: &mut Cx, filename: &str, filesize: u64) {
-        self.view.label(ids!(wrapper.metadata_view.filename_label)).set_text(cx, filename);
         let size_str = format_file_size(filesize);
-        self.view.label(ids!(wrapper.metadata_view.filesize_label)).set_text(cx, &size_str);
+        self.view.label(ids!(filename_text)).set_text(cx, &format!("{} - ({})", filename, size_str));
     }
 
     /// Displays an image preview.