🎨 Reorganize the contacts_window widgets + add first interactions with homeserver

src/components/contacts_window/contacts_section.rs

@@ -0,0 +1,87 @@
+use std::cell::RefCell;
+
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::io_icons::IoChevronDown;
+use dioxus_free_icons::Icon;
+use matrix_sdk::RoomState;
+
+use crate::base::Room;
+
+turf::style_sheet!("src/components/contacts_window/contacts_section.scss");
+
+fn ContactsArrow(cx: Scope) -> Element {
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        Icon {
+            icon: IoChevronDown,
+        },
+    })
+}
+
+static NO_SUBJECT_REPR: &str = "No subject";
+
+#[inline_props]
+pub fn ContactsSection<'a>(cx: Scope, name: &'a str, contacts: RefCell<Vec<Room>>) -> Element {
+    println!("ContactsSection rendering");
+
+    let show = use_state(cx, || false);
+
+    let classes = vec![
+        ClassName::SECTION,
+        if **show { ClassName::ACTIVE } else { "" },
+    ]
+    .join(" ");
+
+    let contacts_len = contacts.borrow().len();
+
+    let rendered_contacts = contacts.borrow_mut().clone().into_iter().map(|room| {
+        let room_name = room.name().unwrap();
+        let is_invited = room.matrix_room.state() == RoomState::Invited;
+        let formatted = format!(
+            "{room_name} - {}",
+            if is_invited {
+                format!("Invited - ")
+            } else {
+                "".to_string()
+            }
+        );
+
+        let room_topic = room.topic.unwrap_or(NO_SUBJECT_REPR.to_string()).to_owned();
+
+        rsx!(li {
+            img {
+                src: "./images/status_online.png",
+            },
+            p {
+                formatted,
+            },
+            p {
+                style: "color: darkgrey;",
+                room_topic,
+            },
+        },
+        )
+    });
+
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        div {
+            class: "{classes}",
+
+            p {
+                class: ClassName::HEADER,
+                onclick: move |_| show.set(!show),
+
+                ContactsArrow {},
+
+                format!("{name} ({contacts_len})"),
+            },
+
+            ul {
+                rendered_contacts.into_iter(),
+            },
+        },
+    })
+}