inline scss & collapable channels & show own messages

src/app.rs

@@ -4,6 +4,7 @@ use std::collections::{BTreeMap, BTreeSet, HashMap};
 
 use dioxus::prelude::*;
 use ordermap::OrderSet;
+use sir::css;
 
 pub type ChannelId = u32;
 pub type UserId = u32;
@@ -75,31 +76,67 @@ pub static STATE: State = State {
     server: Signal::global(|| Default::default()),
 };
 
+#[component]
+pub fn UserPill(name: String) -> Element {
+    let pill = css!(
+        "
+        border: solid 1px black;
+        border-radius: 8px;
+        margin: 4px;
+        padding: 4px;
+    "
+    );
+
+    rsx!(
+        span {
+            class: "{pill}",
+            "{name}"
+        }
+    )
+}
+
 #[component]
 pub fn User(id: UserId) -> Element {
     let server = STATE.server.read();
     let state = server.users.get(&id)?;
-    rsx!(
-        span {
-            style: "border: solid black 1px; border-radius: 4px;",
-            "{state.name}"
-        }
-    )
+    rsx!(UserPill {
+        name: state.name.clone()
+    })
 }
 
 #[component]
 pub fn Channel(id: ChannelId) -> Element {
     let server = STATE.server.read();
     let state = server.channels.get(&id)?;
+
+    let channel_details = css!(
+        "
+        flex: 0 0 100%;
+    "
+    );
+    let channel_children = css!(
+        "
+        border-left: solid black 1px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-left: 5px;
+        padding-left: 11px;  "
+    );
+
     rsx!(
-        "{state.name}"
-        div {
-            style: "border-left: solid black 1px; padding-left: 8px;",
-            for child in state.children.iter() {
-                Channel { id: *child }
-            }
-            for id in state.users.iter() {
-                User { id: *id }
+        details {
+            class: "{channel_details}",
+            open: true,
+            summary { "{state.name}" }
+            div {
+                class: "{channel_children}",
+                for id in state.users.iter() {
+                    User { id: *id }
+                }
+                for child in state.children.iter() {
+                    Channel { id: *child }
+                }
             }
         }
     )
@@ -115,10 +152,7 @@ pub fn ChatView() -> Element {
             style: "margin: 16px; padding: 16px; border: solid black 1px;",
             for chat in server.chat.iter() {
                 if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
-                    span {
-                        style: "border: solid black 1px; border-radius: 4px;",
-                        "{sender.name}"
-                    }
+                    UserPill { name: sender.name.clone() }
                     "\u{8194}"
                 }
                 span {
@@ -170,6 +204,7 @@ pub fn app() -> Element {
 
     let status = &STATE.status;
     rsx!(
+        sir::AppStyle { }
         div {
             input {
                 placeholder: "username",