added message box

front/src/main.rs

@@ -1,5 +1,6 @@
 use iced::Length::{self, Fill, FillPortion};
 use iced::widget::container;
+use iced::widget::text_editor;
 use iced::{
     Background, Color, Element, Task, Theme,
     widget::{Image, column, container::Style, row, text},
@@ -23,12 +24,14 @@ struct Liscord {
     user: Option<User>,
     selected_server: Option<i32>,
     selected_channel: Option<i32>,
+    message_editor: text_editor::Content,
 }
 
 #[derive(Debug, Clone)]
 enum Event {
     ServerPressed(i32),
     ChannelPressed(i32),
+    MessageInput(text_editor::Action),
 }
 
 impl Liscord {
@@ -38,6 +41,7 @@ impl Liscord {
                 user: Some(User::default()),
                 selected_server: None,
                 selected_channel: None,
+                message_editor: text_editor::Content::new(),
             },
             Task::none(),
         )
@@ -60,16 +64,19 @@ impl Liscord {
                 self.selected_channel = Some(channel_id);
                 // async tasks
             }
+            Event::MessageInput(action) => {
+                self.message_editor.perform(action);
+            }
         }
         Task::none()
     }
 
     fn view(&self) -> Element<'_, Event> {
         let server_bar = {
-            let mut content = column![text("Servers")];
-            if let Some(user) = &self.user {
-                content = content.push(get_servers_buttons(user, self));
-            }
+            let content = match &self.user {
+                Some(user) => get_servers_buttons(user, self).spacing(10),
+                None => column![],
+            };
             container(content)
                 .padding(10)
                 .width(iced::Length::Fixed(200.))
@@ -107,7 +114,17 @@ impl Liscord {
                     .width(Length::Fixed(200.))
                     .padding(10)
                     .spacing(10);
-                container(channels)
+
+                let message_box = if let Some(channel) = self.selected_channel {
+                    self.messages(channel)
+                } else {
+                    text("Select a server to show messages")
+                        .width(Length::Fill)
+                        .height(Length::Fill)
+                        .center()
+                        .into()
+                };
+                container(row![channels, message_box])
                     .width(iced::Length::Fill)
                     .height(iced::Length::Fill)
                     .into()
@@ -118,4 +135,42 @@ impl Liscord {
                 .into(),
         }
     }
+
+    fn messages<'a>(&'a self, _channel: i32) -> Element<'a, Event> {
+        let messages_container = self.messages_container();
+        let text_box = iced::widget::text_editor(&self.message_editor)
+            .height(Length::Fixed(38.0))
+            .padding(6)
+            .size(16.0)
+            .placeholder("Type a message...")
+            .on_action(Event::MessageInput)
+            .style(|_theme, status| {
+                let focused = matches!(status, text_editor::Status::Focused);
+                text_editor::Style {
+                    value: Color::from_rgb8(0, 255, 128),
+                    placeholder: Color::from_rgb8(140, 140, 140),
+                    selection: Color::from_rgba8(0, 120, 255, 0.35),
+                    icon: Color::WHITE,
+                    background: Background::Color(Color::from_rgb8(30, 30, 30)),
+                    border: iced::Border {
+                        color: if focused {
+                            Color::from_rgb8(0, 180, 120)
+                        } else {
+                            Color::from_rgb8(70, 70, 70)
+                        },
+                        width: 1.0,
+                        radius: 4.0.into(),
+                    },
+                }
+            });
+        column![messages_container, text_box].into()
+    }
+
+    fn messages_container<'a>(&self) -> Element<'a, Event> {
+        text("Messages will be there")
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center()
+            .into()
+    }
 }