Room interaction (#66)

* feat: room interaction

* resolve conflict

src/components/atoms/button.rs

@@ -3,6 +3,7 @@ use dioxus::prelude::*;
 pub enum Variant {
     Primary,
     Secondary,
+    Tertiary,
 }
 
 #[derive(Props)]
@@ -21,6 +22,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element<'a> {
     let variant = match cx.props.variant {
         Variant::Primary => "button--primary",
         Variant::Secondary => "button--secondary",
+        Variant::Tertiary => "button--tertiary",
     };
 
     let disabled = if cx.props.disabled {

src/components/atoms/header.rs

@@ -7,6 +7,7 @@ use super::header_main::HeaderEvent;
 #[derive(Props)]
 pub struct HeaderProps<'a> {
     avatar_element: Option<Element<'a>>,
+    menu: Option<Element<'a>>,
     text: &'a str,
     on_event: EventHandler<'a, HeaderEvent>,
 }
@@ -15,25 +16,25 @@ pub fn Header<'a>(cx: Scope<'a, HeaderProps<'a>>) -> Element<'a> {
     cx.render(rsx!(
         nav {
           class: "nav",
-          button {
-            class: "nav__cta",
-            onclick: move |_| {cx.props.on_event.call(HeaderEvent { value: HeaderCallOptions::CLOSE })},
-            Icon {
-              stroke: "var(--text-1)",
-              icon: ArrowLeft,
-              height: 24,
-              width: 24
+          div {
+            class: "nav-wrapper",
+            button {
+              class: "nav__cta",
+              onclick: move |_| {cx.props.on_event.call(HeaderEvent { value: HeaderCallOptions::CLOSE })},
+              Icon {
+                stroke: "var(--text-1)",
+                icon: ArrowLeft,
+                height: 24,
+                width: 24
+              }
+            }
+            cx.props.avatar_element.clone().map(|e| render!(e)) 
+            span {
+              class: "nav__title",
+              "{cx.props.text}"
             }
           }
-          if let Some(element) = &cx.props.avatar_element {
-            rsx!(
-              element
-            )
-          }
-          span {
-            class: "nav__title",
-            "{cx.props.text}"
-          }
+          cx.props.menu.clone().map(|e| render!(e)) 
       }
     ))
 }

src/components/atoms/icons/arrow_down_circle.rs

@@ -0,0 +1,15 @@
+use dioxus::prelude::*;
+
+use super::icon::IconShape;
+
+pub struct ArrowDownCircle;
+impl IconShape for ArrowDownCircle {
+    fn view_box(&self) -> String {
+        String::from("0 0 24 24")    
+    }
+    fn child_elements(&self) -> LazyNodes {
+        rsx!(path {
+            d: "M13 9L10 12L7 9M19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10Z"
+        })
+    }
+}

src/components/atoms/icons/arrow_up_circle.rs

@@ -0,0 +1,15 @@
+use dioxus::prelude::*;
+
+use super::icon::IconShape;
+
+pub struct ArrowUpCircle;
+impl IconShape for ArrowUpCircle {
+    fn view_box(&self) -> String {
+        String::from("0 0 24 24")    
+    }
+    fn child_elements(&self) -> LazyNodes {
+        rsx!(path {
+            d: "M7 11L10 8L13 11M19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10Z"
+        })
+    }
+}

src/components/atoms/icons/exit.rs

@@ -0,0 +1,15 @@
+use dioxus::prelude::*;
+
+use super::icon::IconShape;
+
+pub struct Exit;
+impl IconShape for Exit {
+    fn view_box(&self) -> String {
+        String::from("0 0 24 24")
+    }
+    fn child_elements(&self) -> LazyNodes {
+        rsx!(path {
+            d: "M12 15L15 12M15 12L12 9M15 12H4M4 7.24802V7.2002C4 6.08009 4 5.51962 4.21799 5.0918C4.40973 4.71547 4.71547 4.40973 5.0918 4.21799C5.51962 4 6.08009 4 7.2002 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H7.19691C6.07899 20 5.5192 20 5.0918 19.7822C4.71547 19.5905 4.40973 19.2839 4.21799 18.9076C4 18.4798 4 17.9201 4 16.8V16.75"
+        })
+    }
+}

src/components/atoms/icons/mod.rs

@@ -1,9 +1,12 @@
+pub mod arrow_down_circle;
 pub mod arrow_left;
+pub mod arrow_up_circle;
 pub mod attachment;
 pub mod chat_conversation;
 pub mod close;
 pub mod copy;
 pub mod edit;
+pub mod exit;
 pub mod file_download;
 pub mod group;
 pub mod icon;
@@ -18,12 +21,15 @@ pub mod trash;
 pub mod user_circle;
 pub mod warning;
 
+pub use arrow_down_circle::ArrowDownCircle;
 pub use arrow_left::ArrowLeft;
+pub use arrow_up_circle::ArrowUpCircle;
 pub use attachment::Attachment;
 pub use chat_conversation::ChatConversation;
 pub use close::Close;
 pub use copy::CopyIcon;
 pub use edit::Edit;
+pub use exit::Exit;
 pub use file_download::FileDownload;
 pub use group::Group;
 pub use icon::Icon;

src/components/atoms/room.rs

@@ -16,15 +16,18 @@ pub struct RoomViewProps<'a> {
     #[props(!optional)]
     avatar_uri: Option<String>,
     description: Option<&'a str>,
+    #[props(default = false)]
+    wrap: bool,
     on_click: EventHandler<'a, MouseEvent>,
 }
 
 pub fn RoomView<'a>(cx: Scope<'a, RoomViewProps<'a>>) -> Element<'a> {
     let description = cx.props.description.unwrap_or("");
+    let room_view_wrap = if cx.props.wrap { "room-view--wrap" } else { "" };
 
     cx.render(rsx! {
       div {
-        class: "room-view fade-in",
+        class: "room-view {room_view_wrap} fade-in",
         onclick: move |event| cx.props.on_click.call(event),
 
         Avatar {

src/components/molecules/rooms.rs

@@ -18,6 +18,8 @@ pub struct FormRoomEvent {
 pub struct RoomsListProps<'a> {
     rooms: Vec<RoomItem>,
     is_loading: bool,
+    #[props(default = false)]
+    wrap: bool,
     on_submit: EventHandler<'a, FormRoomEvent>,
 }
 
@@ -27,17 +29,20 @@ pub fn RoomsList<'a>(cx: Scope<'a, RoomsListProps<'a>>) -> Element<'a> {
     } else {
         "rooms-list--skeleton"
     };
+    let room_list_wrap = if cx.props.wrap { "room-list--wrap" } else { "" };
 
     cx.render(rsx! {
         section {
-            class:"rooms-list {rooms_list_skeleton} fade-in",
+            class:"rooms-list {room_list_wrap} {rooms_list_skeleton} fade-in",
             if !cx.props.rooms.is_empty() {
                 rsx!(cx.props.rooms.iter().map(|room| {
-                    rsx!(RoomView {
+                    rsx!(
+                        RoomView {
                         key: "{room.id}",
                         displayname: room.name.as_str(),
                         avatar_uri: room.avatar_uri.clone(),
                         description: "",
+                        wrap: cx.props.wrap,
                         on_click: move |_| {
                             cx.props.on_submit.call(FormRoomEvent {
                                 room: CurrentRoom {
@@ -47,13 +52,16 @@ pub fn RoomsList<'a>(cx: Scope<'a, RoomsListProps<'a>>) -> Element<'a> {
                                 },
                             })
                         }
-                    })
+                    }
+                )
                 }))
             } else if cx.props.is_loading {
                 rsx!(
-                    (0..20).map(|_| {
+                    (0..20).map(|i| {
                         rsx!(
-                            RoomViewSkeleton {}
+                            RoomViewSkeleton {
+                                key: "{i}"
+                            }
                         )
                     })
                 )