Restyle index table.

notmuch/src/lib.rs

@@ -425,14 +425,14 @@ pub struct SearchTags(pub Vec<String>);
 pub struct ThreadSummary {
     pub thread: ThreadId,
     pub timestamp: UnixTime,
-    pub date_relative: String,
     /// user-friendly timestamp
-    pub matched: isize,
+    pub date_relative: String,
     /// number of matched messages
-    pub total: isize,
+    pub matched: isize,
     /// total messages in thread
-    pub authors: String,
+    pub total: isize,
     /// comma-separated names with | between matched and unmatched
+    pub authors: String,
     pub subject: String,
     pub tags: Vec<String>,
 
@@ -541,6 +541,8 @@ impl Notmuch {
         Ok(BufReader::new(child.stdout.take().unwrap()).lines())
     }
 
+    // TODO(wathiede): implement tags() based on "notmuch search --output=tags '*'"
+
     fn run_notmuch<I, S>(&self, args: I) -> Result<Vec<u8>, NotmuchError>
     where
         I: IntoIterator<Item = S>,

web/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="modulepreload" href="/pkg/package.js" as="script" type="text/javascript">
     <link rel="preload" href="/pkg/package_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 <style>
 .message {
   padding-left: 0.5em;
@@ -23,6 +24,11 @@ iframe {
   height: 100%;
   width: 100%;
 }
+.index .from {
+  width: 200px;
+}
+.index .subject {
+}
 </style>
 </head>
 

web/src/lib.rs

@@ -267,6 +267,10 @@ fn set_title(title: &str) {
     seed::document().set_title(&format!("lb: {}", title));
 }
 
+fn tags_chiclet(tags: &[String]) -> Node<Msg> {
+    empty![]
+}
+
 fn view_search_results(query: &str, search_results: &SearchSummary) -> Node<Msg> {
     if query.is_empty() {
         set_title("all mail");
@@ -276,20 +280,32 @@ fn view_search_results(query: &str, search_results: &SearchSummary) -> Node<Msg>
     let rows = search_results.0.iter().map(|r| {
         let tid = r.thread.clone();
         tr![
-            td![],
             td![
+                C!["from"],
                 &r.authors,
                 IF!(r.total>1 => small![" ", r.total.to_string()]),
                 IF!(r.tags.contains(&"attachment".to_string()) => "📎"),
             ],
-            td![&r.subject],
+            td![C!["subject"], tags_chiclet(&r.tags), &r.subject],
-            td![&r.date_relative],
+            td![C!["date"], &r.date_relative],
             ev(Ev::Click, move |_| Msg::ShowRequest(tid)),
         ]
     });
     div![table![
-        tr![th!["tid"], th!["From"], th!["Subject"], th!["Date"]],
+        C![
-        rows
+            "table",
+            "index",
+            "is-fullwidth",
+            "is-hoverable",
+            "is-narrow",
+            "is-striped",
+        ],
+        thead![tr![
+            th![C!["from"], "From"],
+            th![C!["subject"], "Subject"],
+            th![C!["date"], "Date"]
+        ]],
+        tbody![rows]
     ]]
 }
 
@@ -343,13 +359,20 @@ fn view_debug_thread_node(thread_node: &ThreadNode) -> Node<Msg> {
 
 fn view_header(query: &str) -> Node<Msg> {
     let query = query.to_string();
-    div![
+    nav![
-        button![
+        C!["navbar"],
+        a![
+            C!["navbar-item", "button",],
             "Unread",
             ev(Ev::Click, |_| Msg::SearchRequest("is:unread".to_string())),
         ],
-        button!["All", ev(Ev::Click, |_| Msg::SearchRequest("".to_string())),],
+        a![
+            C!["navbar-item", "button"],
+            "All",
+            ev(Ev::Click, |_| Msg::SearchRequest("".to_string())),
+        ],
         input![
+            C!["navbar-item", "input"],
             attrs! {
                 At::Placeholder => "Search";
                 At::AutoFocus => true.as_at_value();
@@ -373,7 +396,11 @@ fn view(model: &Model) -> Node<Msg> {
         Context::Thread(thread_set) => view_thread(thread_set),
         Context::Search(search_results) => view_search_results(&model.query, search_results),
     };
-    div![view_header(&model.query), content]
+
+    section![
+        C!["section"],
+        div![C!["container"], view_header(&model.query), content]
+    ]
 }
 
 // ------ ------