Custom formatting of the age string, widen subject column.

Cargo.toml

@@ -1,4 +1,5 @@
 [workspace]
+resolver = "2"
 members = [
   "web",
   "server",

dev.sh

@@ -1,7 +1,7 @@
 cd -- "$( dirname -- "${BASH_SOURCE[0]}" )"
 tmux new-session -d -s letterbox-dev
 tmux rename-window web
-tmux send-keys "cd web; trunk serve --release --address 0.0.0.0 --port 6758 --proxy-backend http://localhost:9345/ --proxy-rewrite=/api/ -w ../shared -w ../notmuch -w ./" C-m
+tmux send-keys "cd web; trunk serve -w ../shared -w ../notmuch -w ./" C-m
 tmux new-window -n server
 tmux send-keys "cd server; cargo watch -x run -w ../shared -w ../notmuch -w ./" C-m
 tmux attach -d -t letterbox-dev

notmuch/src/lib.rs

@@ -454,6 +454,8 @@ pub enum NotmuchError {
     SerdeJson(#[from] serde_json::Error),
     #[error("failed to parse bytes as str")]
     Utf8Error(#[from] std::str::Utf8Error),
+    #[error("failed to parse bytes as String")]
+    StringUtf8Error(#[from] std::string::FromUtf8Error),
     #[error("failed to parse str as int")]
     ParseIntError(#[from] std::num::ParseIntError),
 }

server/Cargo.toml

@@ -2,6 +2,7 @@
 name = "server"
 version = "0.1.0"
 edition = "2021"
+default-bin = "server"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
@@ -16,6 +17,7 @@ serde = { version = "1.0.147", features = ["derive"] }
 log = "0.4.17"
 tokio = "1.26.0"
 glog = "0.1.0"
+urlencoding = "2.1.3"
 
 [dependencies.rocket_contrib]
 version = "0.4.11"

server/src/bin/server.rs

@@ -4,7 +4,7 @@ extern crate rocket;
 use std::{error::Error, io::Cursor, str::FromStr};
 
 use glog::Flags;
-use notmuch::{Notmuch, NotmuchError, SearchSummary, ThreadSet};
+use notmuch::{Notmuch, NotmuchError, ThreadSet};
 use rocket::{
     http::{ContentType, Header},
     request::Request,
@@ -13,6 +13,8 @@ use rocket::{
     Response, State,
 };
 use rocket_cors::{AllowedHeaders, AllowedOrigins};
+use server::{error::ServerError, nm::threadset_to_messages};
+use shared::Message;
 
 #[get("/")]
 fn hello() -> &'static str {
@@ -40,13 +42,14 @@ async fn search(
 ) -> Result<Json<shared::SearchResult>, Debug<NotmuchError>> {
     let page = page.unwrap_or(0);
     let results_per_page = results_per_page.unwrap_or(10);
+    let query = urlencoding::decode(query).map_err(NotmuchError::from)?;
     info!(" search '{query}'");
     let res = shared::SearchResult {
-        summary: nm.search(query, page * results_per_page, results_per_page)?,
+        summary: nm.search(&query, page * results_per_page, results_per_page)?,
         query: query.to_string(),
         page,
         results_per_page,
-        total: nm.count(query)?,
+        total: nm.count(&query)?,
     };
     Ok(Json(res))
 }
@@ -55,14 +58,16 @@ async fn search(
 async fn show_pretty(
     nm: &State<Notmuch>,
     query: &str,
-) -> Result<Json<ThreadSet>, Debug<NotmuchError>> {
-    let res = nm.show(query)?;
+) -> Result<Json<Vec<Message>>, Debug<ServerError>> {
+    let query = urlencoding::decode(query).map_err(|e| ServerError::from(NotmuchError::from(e)))?;
+    let res = threadset_to_messages(nm.show(&query).map_err(ServerError::from)?)?;
     Ok(Json(res))
 }
 
 #[get("/show/<query>")]
 async fn show(nm: &State<Notmuch>, query: &str) -> Result<Json<ThreadSet>, Debug<NotmuchError>> {
-    let res = nm.show(query)?;
+    let query = urlencoding::decode(query).map_err(NotmuchError::from)?;
+    let res = nm.show(&query)?;
     Ok(Json(res))
 }
 

server/src/error.rs

@@ -0,0 +1,9 @@
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum ServerError {
+    #[error("notmuch")]
+    NotmuchError(#[from] notmuch::NotmuchError),
+    #[error("flatten")]
+    FlattenError,
+}

server/src/lib.rs

@@ -0,0 +1,2 @@
+pub mod error;
+pub mod nm;

server/src/nm.rs

@@ -0,0 +1,13 @@
+use shared::Message;
+
+use crate::error;
+
+// TODO(wathiede): decide good error type
+pub fn threadset_to_messages(
+    thread_set: notmuch::ThreadSet,
+) -> Result<Vec<Message>, error::ServerError> {
+    for t in thread_set.0 {
+        for tn in t.0 {}
+    }
+    Ok(Vec::new())
+}

shared/src/lib.rs

@@ -9,3 +9,6 @@ pub struct SearchResult {
     pub results_per_page: usize,
     pub total: usize,
 }
+
+#[derive(Serialize, Deserialize, Debug)]
+pub struct Message {}

web/Cargo.toml

@@ -27,6 +27,7 @@ itertools = "0.10.5"
 serde_json = { version = "1.0.93", features = ["unbounded_depth"] }
 wasm-timer = "0.2.5"
 css-inline = "0.8.5"
+chrono = "0.4.31"
 
 [package.metadata.wasm-pack.profile.release]
 wasm-opt = ['-Os']

web/Trunk.toml

@@ -0,0 +1,11 @@
+[build]
+release = true
+
+[serve]
+# The address to serve on.
+address = "0.0.0.0"
+port = 6758
+
+[[proxy]]
+backend = "http://localhost:9345/"
+rewrite= "/api/"

web/index.html

@@ -4,18 +4,21 @@
 <head>
     <meta charset="utf-8">
     <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://jenil.github.io/bulmaswatch/cyborg/bulmaswatch.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="icon" href="https://static.xinu.tv/favicon/letterbox.svg" />
 <style>
+
 .message {
-  padding-left: 0.5em;
+  padding: 0.5em;*/
 }
 .body {
   background: white;
   color: black;
-  padding-bottom: 1em;
+  padding: 0.5em;
+  margin-left: -0.5em;
+  margin-right: -0.5em;
+  margin-top: 0.5em;
 }
 .error {
   background-color: red;
@@ -27,13 +30,26 @@ iframe {
   height: 100%;
   width: 100%;
 }
+
+.index {
+  table-layout: fixed;
+  width: 100%;
+}
 .index .from {
-  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 10em;
 }
 .index .subject {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .index .date {
+  width: 6em;
   white-space: nowrap;
+  text-align: right;
 }
 .footer {
   background-color: #eee;
@@ -78,15 +94,35 @@ input, .input {
 input::placeholder, .input::placeholder{
   color: #555;
 }
+
+.search-results .row {
+  border-bottom: 1px #444 solid;
+  padding-bottom: .5em;
+  padding-top: .5em;
+}
+.search-results .row .subject {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.search-results .row .from {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.search-results .row .tag {
+  height: 1.5em;
+  padding-left: .5em;
+  padding-right: .5em;
+}
+.float-right {
+  float: right;
+}
 </style>
 </head>
 
 <body>
     <section id="app"></section>
-    <script type="module">
-        import init from '/pkg/package.js';
-        init('/pkg/package_bg.wasm');
-    </script>
 </body>
 
 </html>

web/src/lib.rs

@@ -7,6 +7,7 @@ use std::{
     hash::{Hash, Hasher},
 };
 
+use chrono::{DateTime, Datelike, Duration, Local, Utc};
 use itertools::Itertools;
 use log::{debug, error, info, Level};
 use notmuch::{Content, Part, Thread, ThreadNode, ThreadSet};
@@ -22,9 +23,12 @@ const SEARCH_RESULTS_PER_PAGE: usize = 20;
 
 // `init` describes what should happen when your app started.
 fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
-    orders
-        .subscribe(on_url_changed)
-        .notify(subs::UrlChanged(url.clone()));
+    if url.hash().is_none() {
+        orders.request_url(urls::search("is:unread", 0));
+    } else {
+        orders.notify(subs::UrlRequested::new(url));
+    };
+    orders.subscribe(on_url_changed);
 
     Model {
         context: Context::None,
@@ -119,6 +123,9 @@ enum RefreshingState {
 // `Msg` describes the different events you can modify state with.
 enum Msg {
     Noop,
+    // Tell the client to refresh its state
+    Reload,
+    // Tell the server to update state
     RefreshStart,
     RefreshDone(Option<FetchError>),
     SearchRequest {
@@ -149,6 +156,10 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             } else {
                 RefreshingState::None
             };
+            orders.perform_cmd(async move { Msg::Reload });
+        }
+        Msg::Reload => {
+            orders.perform_cmd(async move { on_url_changed(subs::UrlChanged(Url::current())) });
         }
 
         Msg::SearchRequest {
@@ -315,7 +326,6 @@ fn view_message(thread: &ThreadNode) -> Node<Msg> {
         div![C!["header"], "From: ", &message.headers.from],
         div![C!["header"], "Date: ", &message.headers.date],
         div![C!["header"], "To: ", &message.headers.to],
-        hr![],
         div![
             C!["body"],
             match &message.body {
@@ -352,7 +362,7 @@ fn view_part(part: &Part) -> Node<Msg> {
                     .build();
                 let inlined = inliner.inline(html).expect("failed to inline CSS");
 
-                return div![C!["view-part-text-html"], div!["TEST"], raw![&inlined]];
+                return div![C!["view-part-text-html"], raw![&inlined]];
             } else {
                 div![
                     C!["error"],
@@ -472,6 +482,28 @@ fn pretty_authors(authors: &str) -> impl Iterator<Item = Node<Msg>> + '_ {
     )
 }
 
+fn human_age(timestamp: i64) -> String {
+    let now = Local::now();
+    let ts = DateTime::<Utc>::from_timestamp(timestamp, 0)
+        .unwrap()
+        .with_timezone(&Local);
+    let age = now - ts;
+    let weekday = now.weekday();
+    let datetime = if age < Duration::minutes(1) {
+        format!("{} ago", age.num_seconds())
+    } else if age < Duration::hours(1) {
+        format!("{} ago", age.num_minutes())
+    } else if age < Duration::days(1) {
+        ts.format("%H:%M").to_string()
+    } else if age < Duration::weeks(1) {
+        ts.format("%a %H:%M").to_string()
+    } else {
+        ts.format("%b %e").to_string()
+    };
+    info!("dateime {datetime} TZ: {}", ts.offset());
+    datetime
+}
+
 fn view_mobile_search_results(query: &str, search_results: &shared::SearchResult) -> Node<Msg> {
     if query.is_empty() {
         set_title("all mail");
@@ -494,22 +526,24 @@ fn view_mobile_search_results(query: &str, search_results: &shared::SearchResult
         ]
         */
         let tid = r.thread.clone();
+        let datetime = human_age(r.timestamp as i64);
         div![
+            C!["row"],
             div![
                 C!["subject"],
                 &r.subject,
                 ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)),
             ],
+            span![C!["from", "is-size-7"], pretty_authors(&r.authors)],
             div![
-                span![C!["from"], pretty_authors(&r.authors)],
-                span![C!["tags"], tags_chiclet(&r.tags, true)],
-            ],
-            span![C!["date"], &r.date_relative],
-            hr![],
+                span![C!["is-size-7"], tags_chiclet(&r.tags, true)],
+                span![C!["is-size-7", "float-right", "date"], datetime]
+            ]
         ]
     });
     let first = search_results.page * search_results.results_per_page;
     div![
+        C!["search-results"],
         h1!["Search results"],
         view_search_pager(first, summaries.len(), search_results.total),
         rows,
@@ -526,6 +560,7 @@ fn view_search_results(query: &str, search_results: &shared::SearchResult) -> No
     let summaries = &search_results.summary.0;
     let rows = summaries.iter().map(|r| {
         let tid = r.thread.clone();
+        let datetime = human_age(r.timestamp as i64);
         tr![
             td![
                 C!["from"],
@@ -544,7 +579,7 @@ fn view_search_results(query: &str, search_results: &shared::SearchResult) -> No
                     &r.subject,
                 ]
             ],
-            td![C!["date"], &r.date_relative]
+            td![C!["date"], datetime]
         ]
     });
     let first = search_results.page * search_results.results_per_page;
@@ -576,12 +611,8 @@ fn view_search_pager(start: usize, count: usize, total: usize) -> Node<Msg> {
     nav![
         C!["pagination"],
         a![
-            C![
-                "pagination-previous",
-                "button",
-                IF!(is_first => "is-static"),
-                IF!(is_first => "is-info"),
-            ],
+            C!["pagination-previous", "button",],
+            IF!(is_first => attrs!{ At::Disabled=>true }),
             "<",
             ev(Ev::Click, |_| Msg::PreviousPage)
         ],
@@ -606,17 +637,20 @@ fn view_thread(thread_set: &ThreadSet) -> Node<Msg> {
     let subject = first_subject(&thread_node).unwrap_or("<No subject>".to_string());
     set_title(&subject);
     div![
-        h1![subject],
+        C!["container"],
+        h1![C!["title"], subject],
+        view_message(&thread_node),
         a![
             attrs! {At::Href=>api::original(&thread_node.0.as_ref().expect("message missing").id)},
             "Original"
         ],
-        view_message(&thread_node),
-        div![
-            C!["debug"],
-            "Add zippy for debug dump",
-            view_debug_thread_set(thread_set)
-        ] /* pre![format!("Thread: {:#?}", thread_set).replace("    ", "  ")] */
+        /*
+           div![
+           C!["debug"],
+           "Add zippy for debug dump",
+           view_debug_thread_set(thread_set)
+           ] /* pre![format!("Thread: {:#?}", thread_set).replace("    ", "  ")] */
+        */
     ]
 }
 
@@ -730,7 +764,8 @@ fn view_desktop(model: &Model) -> Node<Msg> {
     };
     div![
         view_header(&model.query, &model.refreshing_state),
-        section![C!["section"], div![C!["container"], content],]
+        section![C!["section"], content],
+        view_header(&model.query, &model.refreshing_state),
     ]
 }
 
@@ -742,7 +777,8 @@ fn view_mobile(model: &Model) -> Node<Msg> {
     };
     div![
         view_header(&model.query, &model.refreshing_state),
-        section![C!["section"], div![C!["content"], content],]
+        section![C!["section"], div![C!["content"], content]],
+        view_header(&model.query, &model.refreshing_state),
     ]
 }