web: add UI to remove tags when viewing messages

Cargo.lock

@@ -1440,6 +1440,11 @@ version = "1.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "df3b46402a9d5adb4c86a0cf463f42e19994e3ee891101b1841f30a545cb49a9"
 
+[[package]]
+name = "human_format"
+version = "1.0.2"
+source = "git+https://github.com/wathiede/human-format-rs#c5f59f0b0e4d92e649d415a8509bc46e92413356"
+
 [[package]]
 name = "hyper"
 version = "0.10.16"
@@ -1727,6 +1732,7 @@ dependencies = [
  "console_log",
  "gloo-net",
  "graphql_client",
+ "human_format",
  "itertools",
  "log 0.4.20",
  "notmuch",

web/Cargo.toml

@@ -32,6 +32,7 @@ graphql_client = "0.13.0"
 thiserror = "1.0.50"
 seed_hooks = { git = "https://github.com/wathiede/styles_hooks", package = "seed_hooks", branch = "main" }
 gloo-net = { version = "0.4.0", features = ["json", "serde_json"] }
+human_format = { git ="https://github.com/wathiede/human-format-rs" }
 
 [package.metadata.wasm-pack.profile.release]
 wasm-opt = ['-Os']

web/src/state.rs

@@ -222,6 +222,7 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                 if let Err(e) = res {
                     error!("Failed to remove tag {tag} to {query}: {e}");
                 }
+                // TODO: reconsider this behavior
                 seed::window()
                     .location()
                     .set_href(&search_url)

web/src/view/desktop.rs

@@ -9,6 +9,7 @@ use crate::{
 
 #[topo::nested]
 pub(super) fn view(model: &Model) -> Node<Msg> {
+    log::info!("tablet::view");
     let show_icon_text = true;
     // Do two queries, one without `unread` so it loads fast, then a second with unread.
     let content = match &model.context {

web/src/view/mobile.rs

@@ -10,6 +10,7 @@ use crate::{
 };
 
 pub(super) fn view(model: &Model) -> Node<Msg> {
+    log::info!("tablet::view");
     let show_icon_text = false;
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],

web/src/view/mod.rs

@@ -4,6 +4,7 @@ use std::{
 };
 
 use chrono::{DateTime, Datelike, Duration, Local, Utc};
+use human_format::{Formatter, Scales};
 use itertools::Itertools;
 use log::error;
 use seed::{prelude::*, *};
@@ -60,6 +61,59 @@ fn tags_chiclet(tags: &[String], is_mobile: bool) -> impl Iterator<Item = Node<M
     })
 }
 
+fn removable_tags_chiclet<'a>(
+    thread_id: &'a str,
+    tags: &'a [String],
+    is_mobile: bool,
+) -> Node<Msg> {
+    div![
+        C![
+            "message-tags",
+            "field",
+            "is-grouped",
+            "is-grouped-multiline"
+        ],
+        tags.iter().map(move |tag| {
+            let hex = compute_color(tag);
+            let style = style! {St::BackgroundColor=>hex};
+            let classes = C!["tag", IF!(is_mobile => "is-small")];
+            let attrs = attrs! {
+                At::Href => urls::search(&format!("tag:{tag}"), 0)
+            };
+            let tag = tag.clone();
+            let rm_tag = tag.clone();
+            let thread_id = format!("thread:{thread_id}");
+            div![
+                C!["control"],
+                div![
+                    C!["tags", "has-addons"],
+                    a![
+                        classes,
+                        attrs,
+                        style,
+                        match tag.as_str() {
+                            "attachment" => span!["📎"],
+                            "replied" => span![i![C!["fa-solid", "fa-reply"]]],
+                            _ => span![&tag],
+                        },
+                        ev(Ev::Click, move |_| Msg::FrontPageRequest {
+                            query: format!("tag:{tag}"),
+                            after: None,
+                            before: None,
+                            first: None,
+                            last: None,
+                        })
+                    ],
+                    a![
+                        C!["tag", "is-delete"],
+                        ev(Ev::Click, move |_| Msg::RemoveTag(thread_id, rm_tag))
+                    ]
+                ]
+            ]
+        })
+    ]
+}
+
 fn pretty_authors(authors: &str) -> impl Iterator<Item = Node<Msg>> + '_ {
     let one_person = authors.matches(',').count() == 0;
     let authors = authors.split(',');
@@ -641,18 +695,18 @@ fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg>
                 ) => pre![C!["error"], contents],
                 ShowThreadQueryThreadMessagesBody::PlainText(
                     ShowThreadQueryThreadMessagesBodyOnPlainText {
-                        contents,
-                        content_tree,
-                    },
+                    contents,
+                    content_tree,
+                },
                 ) => div![
                     raw_text_message(&contents),
                     view_content_tree(&content_tree),
                 ],
                 ShowThreadQueryThreadMessagesBody::Html(
                     ShowThreadQueryThreadMessagesBodyOnHtml {
-                        contents,
-                        content_tree,
-                    },
+                    contents,
+                    content_tree,
+                },
                 ) => div![
                     C!["view-part-text-html"],
                     raw![contents],
@@ -669,6 +723,9 @@ fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg>
                                     let filename = a.filename.as_ref().unwrap_or(&default);
                                     let host = seed::window().location().host().expect("couldn't get host");
                                     let url = format!("//{host}/download/attachment/{}/{}/{}", a.id,a.idx, filename);
+                                    let mut fmtr = Formatter::new();
+                                    fmtr.with_separator(" ");
+                                    fmtr.with_scales(Scales::Binary());
 
                                     div![
                                         C!["attachment", "card"],
@@ -688,7 +745,7 @@ fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg>
                                         div![C!["card-content"],
                                             div![C!["content"],
                                                 &a.filename, br![],
-                                                small![&a.size, " bytes"]
+                                                small![   fmtr.format(a.size as f64),"B"]
                                             ]
                                         ],
                                         footer![
@@ -744,7 +801,10 @@ fn thread(
     div![
         C!["thread"],
         h3![C!["is-size-5"], subject],
-        span![C!["tags"], tags_chiclet(&tags, false)],
+        span![
+            C!["tags"],
+            removable_tags_chiclet(&thread.thread_id, &tags, false)
+        ],
         div![
             C!["level", "is-mobile"],
             div![

web/src/view/tablet.rs

@@ -6,6 +6,7 @@ use crate::{
 };
 
 pub(super) fn view(model: &Model) -> Node<Msg> {
+    log::info!("tablet::view");
     let show_icon_text = false;
     // Do two queries, one without `unread` so it loads fast, then a second with unread.
     let content = match &model.context {

web/static/style.css

@@ -155,12 +155,14 @@ input::placeholder,
   padding: 1em;
 }
 
+.tablet .thread h3,
 .mobile .thread h3 {
   overflow-wrap: break-word;
   padding: 1em 1em 0;
 }
 
-.mobile .thread .tags {
+.tablet .thread .message-tags,
+.mobile .thread .message-tags {
   padding: 0 1em;
 }