web: match email header styling when viewing post

server/src/graphql.rs

@@ -424,7 +424,6 @@ impl QueryRoot {
             .field("body")
             .field("contentTree")
             .exists();
-        // TODO: look at thread_id and conditionally load newsreader
         if newsreader::is_newsreader_thread(&thread_id) {
             Ok(newsreader::thread(config, pool, thread_id).await?)
         } else {

web/src/view/mod.rs

@@ -375,7 +375,7 @@ fn has_unread(tags: &[String]) -> bool {
     tags.contains(&String::from("unread"))
 }
 
-fn render_avatar(avatar: Option<String>, from: &str, big: bool) -> Node<Msg> {
+fn render_avatar(_avatar: Option<String>, from: &str, big: bool) -> Node<Msg> {
     let initials: String = from
         .to_lowercase()
         .trim()
@@ -404,60 +404,6 @@ fn render_avatar(avatar: Option<String>, from: &str, big: bool) -> Node<Msg> {
         span![initials]
     ]
 }
-fn render_svg_avatar(avatar: Option<String>, from: &str) -> Node<Msg> {
-    let initials: String = from
-        .to_lowercase()
-        .trim()
-        .split(" ")
-        .map(|word| word.chars().next().unwrap())
-        .filter(|c| c.is_alphanumeric())
-        // Limit to 2 characters because more characters don't fit in the box
-        .take(2)
-        .collect();
-    if let Some(src) = avatar {
-        img![attrs! {At::Src=>src}]
-    } else {
-        let w = 64;
-        let h = 64;
-        let from_color = compute_color(from);
-        svg![
-            attrs! {
-                At::Width=>w,
-                At::Height=>h,
-                At::ViewBox=>format!("0 0 {w} {h}")
-            },
-            style! {
-                St::Display => "block",
-                St::FontFamily => "Poppins",
-                St::FontSize => pt(28),
-            },
-            g![
-                rect![attrs! {
-                    At::Fill=>from_color,
-                    At::Stroke=>"black",
-                    At::StrokeWidth=>"1",
-
-                    // Round corners
-                    //At::Rx => px(10),
-                    At::X => 0,
-                    At::Y => 0,
-                    At::Width => h,
-                    At::Height => h,
-                }],
-                text![
-                    attrs! {
-                        At::Fill => "white",
-                        At::X => percent(50),
-                        At::Y => percent(50),
-                        At::DominantBaseline => "middle",
-                        At::TextAnchor => "middle"
-                    },
-                    initials
-                ]
-            ]
-        ]
-    }
-}
 
 fn copy_text_widget(text: &str) -> Node<Msg> {
     let text = text.to_string();
@@ -604,7 +550,7 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
                     C!["font-semibold"],
                     "CC: "
                 ],
-                msg.cc.iter().enumerate().map(|(i, cc)| {
+                msg.cc.iter().map(|cc| {
                     let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
                     span![
                     name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown))
@@ -1031,7 +977,6 @@ fn news_post(
     show_icon_text: bool,
     content_el: &ElRef<HtmlElement>,
 ) -> Node<Msg> {
-    // TODO(wathiede): show per-message subject if it changes significantly from top-level subject
     let subject = &post.title;
     set_title(subject);
     let read_thread_id = post.thread_id.clone();
@@ -1089,17 +1034,16 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
     //let avatar: Option<String> = Some(String::from("https://bulma.io/images/placeholders/64x64.png"));
     let id = post.thread_id.clone();
     let is_unread = !post.is_read;
-    let img = render_avatar(avatar, &from, true);
+    let avatar = render_avatar(avatar, &from, true);
-    article![
+    div![
-        C!["media"],
+        C!["flex", "p-4"],
-        figure![C!["media-left"], p![C!["image", "is-64x64"], img]],
+        div![avatar],
         div![
-            C!["media-content"],
+            C!["px-4", "mr-auto"],
             div![
-                C!["content"],
+                span![C!["font-semibold", "text-sm"], from,],
-                p![
+                div![
-                    strong![from],
+                    C!["text-xs"],
-                    br![],
                     small![a![
                         attrs! {
                             At::Href => post.url,
@@ -1107,32 +1051,28 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
                         },
                         "Source ",
                         i![C!["fas", "fa-up-right-from-square"]],
-                    ]],
+                    ]]
-                    table![tr![td![
+                ]
-                        attrs! {At::ColSpan=>2},
+            ]
-                        span![C!["header"], human_age(post.timestamp)]
-                    ]]],
-                ],
-            ],
         ],
-        div![
+        span![
-            C!["media-right"],
+            C!["text-right"],
-            span![
+            div![C!["text-xs", "text-nowrap"], human_age(post.timestamp)],
-                C!["read-status"],
+            i![C![
-                i![C![
+                "mx-4"
-                    "far",
+                "read-status",
-                    if is_unread {
+                "far",
-                        "fa-envelope"
+                if is_unread {
-                    } else {
+                    "fa-envelope"
-                        "fa-envelope-open"
+                } else {
-                    },
+                    "fa-envelope-open"
-                ]]
+                },
-            ],
+            ]]
-            ev(Ev::Click, move |e| {
+        ],
-                e.stop_propagation();
+        ev(Ev::Click, move |e| {
-                Msg::SetUnread(id, !is_unread)
+            e.stop_propagation();
-            })
+            Msg::SetUnread(id, !is_unread)
-        ]
+        })
     ]
 }
 fn reading_progress(ratio: f64) -> Node<Msg> {