From faf3cd3df70f8b0c42ac45df1a0cbb615b1b1fd6 Mon Sep 17 00:00:00 2001
From: Sam Sartor <me@samsartor.com>
Date: Sat, 28 Sep 2024 17:34:59 -0600
Subject: [PATCH] substantially improved styling

---
 src/app.rs | 110 +++++++++++++++++++++++++++++++++++++++--------------
 src/lib.rs |  11 +++---
 2 files changed, 87 insertions(+), 34 deletions(-)

diff --git a/src/app.rs b/src/app.rs
index 382e788..317c2cb 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -4,7 +4,7 @@ use std::collections::{BTreeMap, BTreeSet, HashMap};
 
 use dioxus::prelude::*;
 use ordermap::OrderSet;
-use sir::css;
+use sir::{css, global_css};
 
 pub type ChannelId = u32;
 pub type UserId = u32;
@@ -82,13 +82,13 @@ pub fn UserPill(name: String) -> Element {
         "
         border: solid 1px black;
         border-radius: 8px;
-        margin: 4px;
         padding: 4px;
+        width: fit-content;
     "
     );
 
     rsx!(
-        span {
+        div {
             class: "{pill}",
             "{name}"
         }
@@ -120,8 +120,10 @@ pub fn Channel(id: ChannelId) -> Element {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+        gap: 8px;
         margin-left: 5px;
-        padding-left: 11px;  "
+        padding-left: 11px;
+    "
     );
 
     rsx!(
@@ -147,34 +149,75 @@ pub fn ChatView() -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let server = STATE.server.read();
     let mut draft = use_signal(|| "".to_string());
+
+    let chat_history_box = css!(
+        "
+        margin: 16px;
+        border: solid black 1px;
+    "
+    );
+    let chat_message = css!(
+        "
+        display: flex;
+        flex-direction: row;
+        margin: 16px;
+        gap: 8px;
+        align-items: center;
+    "
+    );
+    let chat_box = css!(
+        "
+        display: flex;
+        flex-direction: row;
+        margin: 16px;
+        gap: 8px;
+
+        input {
+            flex-grow: 1;
+            padding: 8px;
+        }
+    "
+    );
+
+    let mut do_send = move || {
+        if let Some(user) = STATE.server.read().this_user() {
+            net.send(SendChat {
+                markdown: draft.write().split_off(0),
+                channels: vec![user.channel],
+            });
+        }
+    };
+
     rsx!(
         div {
-            style: "margin: 16px; padding: 16px; border: solid black 1px;",
+            class: "{chat_history_box}",
             for chat in server.chat.iter() {
-                if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
-                    UserPill { name: sender.name.clone() }
-                    "\u{8194}"
-                }
-                span {
-                    dangerous_inner_html: "{chat.dangerous_html}",
-                }
-                hr {}
-            }
-            input {
-                placeholder: "say something",
-                value: "{draft.read()}",
-                oninput: move |evt| draft.set(evt.value().clone()),
-            }
-            button {
-                onclick: move |_| {
-                    if let Some(user) = STATE.server.read().this_user() {
-                        net.send(SendChat {
-                            markdown: draft.write().split_off(0),
-                            channels: vec![user.channel],
-                        });
+                div {
+                    class: "{chat_message}",
+                    if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
+                        UserPill { name: sender.name.clone() }
                     }
-                },
-                "Send"
+                    span {
+                        dangerous_inner_html: "{chat.dangerous_html}",
+                    }
+                }
+            }
+            div {
+                class: "{chat_box}",
+                input {
+                    placeholder: "say something",
+                    value: "{draft.read()}",
+                    oninput: move |evt| draft.set(evt.value().clone()),
+                    onkeypress: move |evt: Event<KeyboardData>| {
+                        if evt.code() == Code::Enter && evt.modifiers().is_empty() {
+                            do_send();
+                        }
+                    }
+                }
+                button {
+                    onclick: move |_| do_send(),
+                    "Send"
+                }
             }
         }
     )
@@ -183,9 +226,18 @@ pub fn ChatView() -> Element {
 #[component]
 pub fn ServerView() -> Element {
     let server = STATE.server.read();
+
+    let channel_box = css!(
+        "
+        padding: 16px;
+        margin: 16px;
+        border: solid black 1px;
+    "
+    );
+
     rsx!(
         div {
-            style: "margin: 16px; padding: 16px; border: solid black 1px;",
+            class: "framed_box {channel_box}",
             for (id, state) in server.channels.iter() {
                 if state.parent.is_none() {
                     Channel { id: *id }
diff --git a/src/lib.rs b/src/lib.rs
index 35ee7f1..412dee3 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -550,10 +550,11 @@ fn accept_command(
     match command {
         Command::SendChat { markdown, channels } => {
             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())
+            let blocks = tokenize(&markdown);
+            let html_text = match blocks.as_slice() {
+                [Block::Paragraph(par)] => match par.as_slice() {
+                    [Span::Text(text)] => text.to_string(),
+                    _ => to_html(&markdown)
                         .trim()
                         .strip_prefix("<p>")
                         .unwrap()
@@ -561,7 +562,7 @@ fn accept_command(
                         .unwrap()
                         .to_string(),
                 },
-                block => generate_markdown(block.to_vec()).trim().to_string(),
+                _ => to_html(&markdown).trim().to_string(),
             };
 
             {