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",

src/lib.rs

@@ -549,9 +549,35 @@ fn accept_command(
 ) -> Result<(), JsValue> {
     match command {
         Command::SendChat { markdown, channels } => {
-            let html_text = markdown::to_html(&markdown);
+            use markdown::*;
+            let html_text = match tokenize(&markdown).as_slice() {
+                block @ [Block::Paragraph(par)] => match par.as_slice() {
+                    [Span::Text(par)] => par.to_string(),
+                    _ => generate_markdown(block.to_vec())
+                        .trim()
+                        .strip_prefix("<p>")
+                        .unwrap()
+                        .strip_suffix("</p>")
+                        .unwrap()
+                        .to_string(),
+                },
+                block => generate_markdown(block.to_vec()).trim().to_string(),
+            };
+
+            {
+                let mut server = STATE.server.write();
+                let Some(me) = server.session else {
+                    bail!("not signed in with a session id")
+                };
+                server.chat.push(Chat {
+                    raw: markdown,
+                    dangerous_html: html_text.clone(),
+                    sender: Some(me),
+                })
+            }
+
             let mut u = msgs::TextMessage::new();
-            u.set_message(html_text);
+            u.set_message(html_text.to_string());
             u.set_channel_id(channels);
             let _ = send_chan.unbounded_send(u.into());
         }