Revert stub show_pretty that will be obsoleted by graphql.

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 send-keys "cd server; cargo watch -c -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),
 }
@@ -478,6 +480,11 @@ impl Notmuch {
         self.run_notmuch(std::iter::empty::<&str>())
     }
 
+    pub fn tags(&self) -> Result<Vec<String>, NotmuchError> {
+        let res = self.run_notmuch(["search", "--format=json", "--output=tags", "*"])?;
+        Ok(serde_json::from_slice(&res)?)
+    }
+
     pub fn search(
         &self,
         query: &str,

server/Cargo.toml

@@ -2,12 +2,12 @@
 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
 
 [dependencies]
 rocket = { version = "0.5.0-rc.2", features = [ "json" ] }
-rocket_cors = { git = "https://github.com/lawliet89/rocket_cors", branch = "master" }
 notmuch = { path = "../notmuch" }
 shared = { path = "../shared" }
 serde_json = "1.0.87"
@@ -16,6 +16,10 @@ serde = { version = "1.0.147", features = ["derive"] }
 log = "0.4.17"
 tokio = "1.26.0"
 glog = "0.1.0"
+urlencoding = "2.1.3"
+async-graphql = "6.0.11"
+async-graphql-rocket = "6.0.11"
+rocket_cors = "0.6.0"
 
 [dependencies.rocket_contrib]
 version = "0.4.11"

server/src/bin/server.rs

@@ -1,27 +1,24 @@
 #[macro_use]
 extern crate rocket;
-mod error;
-mod nm;
-
 use std::{error::Error, io::Cursor, str::FromStr};
 
+use async_graphql::{http::GraphiQLSource, EmptyMutation, EmptySubscription, Schema};
+use async_graphql_rocket::{GraphQLQuery, GraphQLRequest, GraphQLResponse};
 use glog::Flags;
-use notmuch::{Notmuch, NotmuchError};
+use notmuch::{Notmuch, NotmuchError, ThreadSet};
 use rocket::{
     http::{ContentType, Header},
     request::Request,
-    response::{Debug, Responder},
+    response::{content, Debug, Responder},
     serde::json::Json,
     Response, State,
 };
 use rocket_cors::{AllowedHeaders, AllowedOrigins};
-
-use crate::error::ServerError;
-
-#[get("/")]
-fn hello() -> &'static str {
-    "Hello, world!"
-}
+use server::{
+    error::ServerError,
+    graphql::{GraphqlSchema, QueryRoot},
+};
+use shared::Message;
 
 #[get("/refresh")]
 async fn refresh(nm: &State<Notmuch>) -> Result<Json<String>, Debug<NotmuchError>> {
@@ -43,24 +40,33 @@ async fn search(
     results_per_page: Option<usize>,
 ) -> Result<Json<shared::SearchResult>, Debug<NotmuchError>> {
     let page = page.unwrap_or(0);
-    let results_per_page = results_per_page.unwrap_or(10);
+    let results_per_page = results_per_page.unwrap_or(20);
+    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))
 }
 
-#[get("/show/<query>")]
-async fn show(
+#[get("/show/<query>/pretty")]
+async fn show_pretty(
     nm: &State<Notmuch>,
     query: &str,
-) -> Result<Json<Vec<shared::Message>>, Debug<ServerError>> {
-    let res = nm::threadset_to_messages(nm.show(query).map_err(|e| -> ServerError { e.into() })?)?;
+) -> Result<Json<ThreadSet>, Debug<ServerError>> {
+    let query = urlencoding::decode(query).map_err(|e| ServerError::from(NotmuchError::from(e)))?;
+    let res = 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 query = urlencoding::decode(query).map_err(NotmuchError::from)?;
+    let res = nm.show(&query)?;
     Ok(Json(res))
 }
 
@@ -118,6 +124,24 @@ async fn original(
     Ok((ContentType::Plain, res))
 }
 
+#[rocket::get("/")]
+fn graphiql() -> content::RawHtml<String> {
+    content::RawHtml(GraphiQLSource::build().endpoint("/graphql").finish())
+}
+
+#[rocket::get("/graphql?<query..>")]
+async fn graphql_query(schema: &State<GraphqlSchema>, query: GraphQLQuery) -> GraphQLResponse {
+    query.execute(schema.inner()).await
+}
+
+#[rocket::post("/graphql", data = "<request>", format = "application/json")]
+async fn graphql_request(
+    schema: &State<GraphqlSchema>,
+    request: GraphQLRequest,
+) -> GraphQLResponse {
+    request.execute(schema.inner()).await
+}
+
 #[rocket::main]
 async fn main() -> Result<(), Box<dyn Error>> {
     glog::new()
@@ -141,20 +165,28 @@ async fn main() -> Result<(), Box<dyn Error>> {
     }
     .to_cors()?;
 
+    let schema = Schema::build(QueryRoot, EmptyMutation, EmptySubscription)
+        .data(Notmuch::default())
+        .finish();
+
     let _ = rocket::build()
         .mount(
             "/",
             routes![
                 original_part,
                 original,
-                hello,
                 refresh,
                 search_all,
                 search,
-                show
+                show_pretty,
+                show,
+                graphql_query,
+                graphql_request,
+                graphiql
             ],
         )
         .attach(cors)
+        .manage(schema)
         .manage(Notmuch::default())
         //.manage(Notmuch::with_config("../notmuch/testdata/notmuch.config"))
         .launch()

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/graphql.rs

@@ -0,0 +1,147 @@
+use std::hash::{DefaultHasher, Hash, Hasher};
+
+use async_graphql::{
+    connection::{self, Connection, Edge},
+    Context, EmptyMutation, EmptySubscription, Error, FieldResult, Object, Schema, SimpleObject,
+};
+use log::info;
+use notmuch::Notmuch;
+
+pub struct QueryRoot;
+
+/// # Number of seconds since the Epoch
+pub type UnixTime = isize;
+
+/// # Thread ID, sans "thread:"
+pub type ThreadId = String;
+
+#[derive(Debug, SimpleObject)]
+pub struct ThreadSummary {
+    pub thread: ThreadId,
+    pub timestamp: UnixTime,
+    /// user-friendly timestamp
+    pub date_relative: String,
+    /// number of matched messages
+    pub matched: isize,
+    /// total messages in thread
+    pub total: isize,
+    /// comma-separated names with | between matched and unmatched
+    pub authors: String,
+    pub subject: String,
+    pub tags: Vec<String>,
+}
+
+#[derive(SimpleObject)]
+struct Tag {
+    name: String,
+    fg_color: String,
+    bg_color: String,
+}
+
+#[Object]
+impl QueryRoot {
+    async fn count<'ctx>(&self, ctx: &Context<'ctx>, query: String) -> Result<usize, Error> {
+        let nm = ctx.data_unchecked::<Notmuch>();
+        Ok(nm.count(&query)?)
+    }
+
+    async fn search<'ctx>(
+        &self,
+        ctx: &Context<'ctx>,
+        after: Option<String>,
+        before: Option<String>,
+        first: Option<i32>,
+        last: Option<i32>,
+        query: String,
+    ) -> Result<Connection<usize, ThreadSummary>, Error> {
+        let nm = ctx.data_unchecked::<Notmuch>();
+        connection::query(
+            after,
+            before,
+            first,
+            last,
+            |after, before, first, last| async move {
+                info!("{after:?} {before:?} {first:?} {last:?} {query}");
+                let mut start = 0usize;
+                let total = nm.count(&query)?;
+                let page_size = first.unwrap_or(20);
+
+                if let Some(after) = after {
+                    if after >= total {
+                        return Ok(Connection::new(false, false));
+                    }
+                    start = after + 1;
+                }
+                let mut end = start + page_size;
+                if end > total {
+                    end = total;
+                }
+
+                // TODO(wathiede): handle last/end.
+                if let Some(before) = before {
+                    if before == 0 {
+                        return Ok(Connection::new(false, false));
+                    }
+                    end = before;
+                }
+
+                let slice: Vec<ThreadSummary> = nm
+                    .search(&query, start, first.unwrap_or(20))?
+                    .0
+                    .into_iter()
+                    .map(|ts| ThreadSummary {
+                        thread: ts.thread,
+                        timestamp: ts.timestamp,
+                        date_relative: ts.date_relative,
+                        matched: ts.matched,
+                        total: ts.total,
+                        authors: ts.authors,
+                        subject: ts.subject,
+                        tags: ts.tags,
+                    })
+                    .collect();
+                //let mut slice = &res[..];
+
+                /*
+                if let Some(first) = first {
+                slice = &slice[..first.min(slice.len())];
+                end -= first.min(slice.len());
+                } else if let Some(last) = last {
+                slice = &slice[slice.len() - last.min(slice.len())..];
+                start = end - last.min(slice.len());
+                }
+                */
+
+                let mut connection = Connection::new(start > 0, end < total);
+                connection.edges.extend(
+                    slice
+                        .into_iter()
+                        .enumerate()
+                        .map(|(idx, item)| Edge::new(start + idx, item)),
+                );
+                Ok::<_, Error>(connection)
+            },
+        )
+        .await
+    }
+
+    async fn tags<'ctx>(&self, ctx: &Context<'ctx>) -> FieldResult<Vec<Tag>> {
+        let nm = ctx.data_unchecked::<Notmuch>();
+        Ok(nm
+            .tags()?
+            .into_iter()
+            .map(|tag| {
+                let mut hasher = DefaultHasher::new();
+                tag.hash(&mut hasher);
+                let hex = format!("#{:06x}", hasher.finish() % (1 << 24));
+                Tag {
+                    name: tag,
+                    fg_color: "white".to_string(),
+                    bg_color: hex,
+                }
+            })
+            .collect())
+    }
+}
+
+pub type GraphqlSchema = Schema<QueryRoot, EmptyMutation, EmptySubscription>;

server/src/lib.rs

@@ -0,0 +1,3 @@
+pub mod error;
+pub mod graphql;
+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

@@ -11,25 +11,4 @@ pub struct SearchResult {
 }
 
 #[derive(Serialize, Deserialize, Debug)]
-pub struct ShowResult {
-    messages: Vec<Message>,
-}
-
-pub type AttachementId = String;
-
-/// # Number of seconds since the Epoch
-pub type UnixTime = isize;
-
-#[derive(Serialize, Deserialize, Debug, Default)]
-pub struct Message {
-    pub from: String,
-    pub to: Option<String>,
-    pub cc: Option<String>,
-    pub timestamp: UnixTime,   // date header as unix time
-    pub date_relative: String, // user-friendly timestamp
-    pub tags: Vec<String>,
-
-    // HTML formatted body
-    pub body: String,
-    pub attachment: Vec<AttachementId>,
-}
+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: 7em;
   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/api.rs

@@ -1,16 +0,0 @@
-use seed::Url;
-
-const BASE_URL: &str = "/api";
-pub fn refresh() -> String {
-    format!("{BASE_URL}/refresh")
-}
-pub fn search(query: &str, page: usize, results_per_page: usize) -> String {
-    let query = Url::encode_uri_component(query);
-    format!("{BASE_URL}/search/{query}?page={page}&results_per_page={results_per_page}")
-}
-pub fn show(tid: &str) -> String {
-    format!("{BASE_URL}/show/{tid}")
-}
-pub fn original(message_id: &str) -> String {
-    format!("{BASE_URL}/original/{message_id}")
-}

web/src/lib.rs

@@ -1,16 +1,18 @@
-mod api;
-mod nm;
-
+// (Lines like the one below ignore selected Clippy rules
+//  - it's useful when you want to check your code with `cargo make verify`
+// but some rules are too "annoying" or are not applicable for your case.)
+#![allow(clippy::wildcard_imports)]
 use std::{
     collections::hash_map::DefaultHasher,
     hash::{Hash, Hasher},
 };
 
+use chrono::{DateTime, Datelike, Duration, Local, Utc};
 use itertools::Itertools;
 use log::{debug, error, info, Level};
-use notmuch::ThreadSet;
+use notmuch::{Content, Part, Thread, ThreadNode, ThreadSet};
 use seed::{prelude::*, *};
-use serde::Deserialize;
+use serde::de::Deserialize;
 use wasm_timer::Instant;
 
 const SEARCH_RESULTS_PER_PAGE: usize = 20;
@@ -21,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,
@@ -41,7 +46,7 @@ fn on_url_changed(uc: subs::UrlChanged) -> Msg {
     );
     let hpp = url.remaining_hash_path_parts();
     match hpp.as_slice() {
-        ["t", tid] => Msg::ShowRequest(tid.to_string()),
+        ["t", tid] => Msg::ShowPrettyRequest(tid.to_string()),
         ["s", query] => {
             let query = Url::decode_uri_component(query).unwrap_or("".to_string());
             Msg::SearchRequest {
@@ -93,7 +98,7 @@ mod urls {
 enum Context {
     None,
     Search(shared::SearchResult),
-    Thread(Vec<shared::Message>),
+    Thread(ThreadSet),
 }
 
 // `Model` describes our app state.
@@ -116,8 +121,11 @@ enum RefreshingState {
 
 // (Remove the line below once any of your `Msg` variants doesn't implement `Copy`.)
 // `Msg` describes the different events you can modify state with.
-pub enum Msg {
+enum Msg {
     Noop,
+    // Tell the client to refresh its state
+    Reload,
+    // Tell the server to update state
     RefreshStart,
     RefreshDone(Option<FetchError>),
     SearchRequest {
@@ -127,7 +135,9 @@ pub enum Msg {
     },
     SearchResult(fetch::Result<shared::SearchResult>),
     ShowRequest(String),
-    ShowResult(fetch::Result<Vec<shared::Message>>),
+    ShowResult(fetch::Result<ThreadSet>),
+    ShowPrettyRequest(String),
+    ShowPrettyResult(fetch::Result<ThreadSet>),
     NextPage,
     PreviousPage,
 }
@@ -144,18 +154,12 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             model.refreshing_state = if let Some(err) = err {
                 RefreshingState::Error(format!("{:?}", err))
             } else {
-                // If looking at search page, refresh the search to view update on the server side.
-                if let Context::Search(sr) = &model.context {
-                    let query = sr.query.clone();
-                    let page = sr.page;
-                    let results_per_page = sr.results_per_page;
-                    orders.perform_cmd(async move {
-                        Msg::SearchResult(search_request(&query, page, results_per_page).await)
-                    });
-                }
-
                 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 {
@@ -189,6 +193,19 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
         Msg::ShowResult(Err(fetch_error)) => {
             error!("fetch failed {:?}", fetch_error);
         }
+
+        Msg::ShowPrettyRequest(tid) => {
+            orders
+                .skip()
+                .perform_cmd(async move { Msg::ShowPrettyResult(show_pretty_request(&tid).await) });
+        }
+        Msg::ShowPrettyResult(Ok(response_data)) => {
+            debug!("fetch ok {:#?}", response_data);
+            model.context = Context::Thread(response_data);
+        }
+        Msg::ShowPrettyResult(Err(fetch_error)) => {
+            error!("fetch failed {:?}", fetch_error);
+        }
         Msg::NextPage => {
             match &model.context {
                 Context::Search(sr) => {
@@ -210,19 +227,6 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
     }
 }
 
-pub async fn show_request(tid: &str) -> fetch::Result<Vec<shared::Message>> {
-    let b = Request::new(api::show(tid))
-        .method(Method::Get)
-        .fetch()
-        .await?
-        .check_status()?
-        .bytes()
-        .await?;
-    let mut deserializer = serde_json::Deserializer::from_slice(&b);
-    deserializer.disable_recursion_limit();
-    Ok(Vec::<shared::Message>::deserialize(&mut deserializer)
-        .map_err(|_| FetchError::JsonError(fetch::JsonError::Serde(JsValue::NULL)))?)
-}
 async fn search_request(
     query: &str,
     page: usize,
@@ -237,6 +241,28 @@ async fn search_request(
         .await
 }
 
+mod api {
+    use seed::Url;
+
+    const BASE_URL: &str = "/api";
+    pub fn refresh() -> String {
+        format!("{BASE_URL}/refresh")
+    }
+    pub fn search(query: &str, page: usize, results_per_page: usize) -> String {
+        let query = Url::encode_uri_component(query);
+        format!("{BASE_URL}/search/{query}?page={page}&results_per_page={results_per_page}")
+    }
+    pub fn show(tid: &str) -> String {
+        format!("{BASE_URL}/show/{tid}")
+    }
+    pub fn show_pretty(tid: &str) -> String {
+        format!("{BASE_URL}/show/{tid}/pretty")
+    }
+    pub fn original(message_id: &str) -> String {
+        format!("{BASE_URL}/original/{message_id}")
+    }
+}
+
 async fn refresh_request() -> fetch::Result<()> {
     let t = Request::new(api::refresh())
         .method(Method::Get)
@@ -249,10 +275,158 @@ async fn refresh_request() -> fetch::Result<()> {
     Ok(())
 }
 
+async fn show_request(tid: &str) -> fetch::Result<ThreadSet> {
+    let b = Request::new(api::show(tid))
+        .method(Method::Get)
+        .fetch()
+        .await?
+        .check_status()?
+        .bytes()
+        .await?;
+    let mut deserializer = serde_json::Deserializer::from_slice(&b);
+    deserializer.disable_recursion_limit();
+    Ok(ThreadSet::deserialize(&mut deserializer)
+        .map_err(|_| FetchError::JsonError(fetch::JsonError::Serde(JsValue::NULL)))?)
+}
+
+async fn show_pretty_request(tid: &str) -> fetch::Result<ThreadSet> {
+    Request::new(api::show_pretty(tid))
+        .method(Method::Get)
+        .fetch()
+        .await?
+        .check_status()?
+        .json()
+        .await
+}
+
 // ------ ------
 //     View
 // ------ ------
 
+// <subject>
+// <tags>
+//
+// <from1> <date>
+// <to1>
+// <content1>
+// <zippy>
+// <children1>
+// </zippy>
+//
+// <from2> <date>
+// <to2>
+// <body2>
+fn view_message(thread: &ThreadNode) -> Node<Msg> {
+    let message = thread.0.as_ref().expect("ThreadNode missing Message");
+    let children = &thread.1;
+    div![
+        C!["message"],
+        /* TODO(wathiede): collect all the tags and show them here. */
+        /* TODO(wathiede): collect all the attachments from all the subparts */
+        div![C!["header"], "From: ", &message.headers.from],
+        div![C!["header"], "Date: ", &message.headers.date],
+        div![C!["header"], "To: ", &message.headers.to],
+        div![
+            C!["body"],
+            match &message.body {
+                Some(body) => view_body(body.as_slice()),
+                None => div!["<no body>"],
+            },
+        ],
+        children.iter().map(view_message)
+    ]
+}
+
+fn view_body(body: &[Part]) -> Node<Msg> {
+    div![body.iter().map(view_part)]
+}
+
+fn view_text_plain(content: &Option<Content>) -> Node<Msg> {
+    match &content {
+        Some(Content::String(content)) => p![C!["view-part-text-plain"], content],
+        _ => div![
+            C!["error"],
+            format!("Unhandled content enum for text/plain"),
+        ],
+    }
+}
+
+fn view_part(part: &Part) -> Node<Msg> {
+    match part.content_type.as_str() {
+        "text/plain" => view_text_plain(&part.content),
+        "text/html" => {
+            if let Some(Content::String(html)) = &part.content {
+                let inliner = css_inline::CSSInliner::options()
+                    .load_remote_stylesheets(false)
+                    .remove_style_tags(true)
+                    .build();
+                let inlined = inliner.inline(html).expect("failed to inline CSS");
+
+                return div![C!["view-part-text-html"], raw![&inlined]];
+            } else {
+                div![
+                    C!["error"],
+                    format!("Unhandled content enum for multipart/mixed"),
+                ]
+            }
+        }
+
+        // https://en.wikipedia.org/wiki/MIME#alternative
+        // RFC1341 states: In general, user agents that compose multipart/alternative entities
+        // should place the body parts in increasing order of preference, that is, with the
+        // preferred format last.
+        "multipart/alternative" => {
+            if let Some(Content::Multipart(parts)) = &part.content {
+                for part in parts.iter().rev() {
+                    if part.content_type == "text/html" {
+                        if let Some(Content::String(html)) = &part.content {
+                            let inliner = css_inline::CSSInliner::options()
+                                .load_remote_stylesheets(false)
+                                .remove_style_tags(true)
+                                .build();
+                            let inlined = inliner.inline(html).expect("failed to inline CSS");
+                            return div![Node::from_html(None, &inlined)];
+                        }
+                    }
+                    if part.content_type == "text/plain" {
+                        return view_text_plain(&part.content);
+                    }
+                }
+                div!["No known  multipart/alternative parts"]
+            } else {
+                div![
+                    C!["error"],
+                    format!("multipart/alternative with non-multipart content"),
+                ]
+            }
+        }
+        "multipart/mixed" => match &part.content {
+            Some(Content::Multipart(parts)) => div![parts.iter().map(view_part)],
+            _ => div![
+                C!["error"],
+                format!("Unhandled content enum for multipart/mixed"),
+            ],
+        },
+        _ => div![
+            C!["error"],
+            format!("Unhandled content type: {}", part.content_type)
+        ],
+    }
+}
+
+fn first_subject(thread: &ThreadNode) -> Option<String> {
+    if let Some(msg) = &thread.0 {
+        return Some(msg.headers.subject.clone());
+    } else {
+        for tn in &thread.1 {
+            if let Some(s) = first_subject(&tn) {
+                return Some(s);
+            }
+        }
+    }
+    None
+}
+
 fn set_title(title: &str) {
     seed::document().set_title(&format!("lb: {}", title));
 }
@@ -308,6 +482,29 @@ fn pretty_authors(authors: &str) -> impl Iterator<Item = Node<Msg>> + '_ {
     )
 }
 
+fn human_age(timestamp: i64) -> String {
+    let now = Local::now();
+    let yesterday = now - Duration::days(1);
+    let ts = DateTime::<Utc>::from_timestamp(timestamp, 0)
+        .unwrap()
+        .with_timezone(&Local);
+    let age = now - ts;
+    let datetime = if age < Duration::minutes(1) {
+        format!("{} min. ago", age.num_seconds())
+    } else if age < Duration::hours(1) {
+        format!("{} min. ago", age.num_minutes())
+    } else if ts.date_naive() == now.date_naive() {
+        ts.format("Today %H:%M").to_string()
+    } else if ts.date_naive() == yesterday.date_naive() {
+        ts.format("Yest. %H:%M").to_string()
+    } else if age < Duration::weeks(1) {
+        ts.format("%a %H:%M").to_string()
+    } else {
+        ts.format("%b %e %H:%M").to_string()
+    };
+    datetime
+}
+
 fn view_mobile_search_results(query: &str, search_results: &shared::SearchResult) -> Node<Msg> {
     if query.is_empty() {
         set_title("all mail");
@@ -326,26 +523,28 @@ fn view_mobile_search_results(query: &str, search_results: &shared::SearchResult
         ],
         td![C!["subject"], tags_chiclet(&r.tags), " ", &r.subject],
         td![C!["date"], &r.date_relative],
-        ev(Ev::Click, move |_| Msg::ShowRequest(tid)),
+        ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)),
         ]
         */
         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::ShowRequest(tid)),
+                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,
@@ -362,6 +561,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"],
@@ -380,7 +580,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;
@@ -412,12 +612,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)
         ],
@@ -434,6 +630,58 @@ fn view_search_pager(start: usize, count: usize, total: usize) -> Node<Msg> {
     ]
 }
 
+fn view_thread(thread_set: &ThreadSet) -> Node<Msg> {
+    assert_eq!(thread_set.0.len(), 1);
+    let thread = &thread_set.0[0];
+    assert_eq!(thread.0.len(), 1);
+    let thread_node = &thread.0[0];
+    let subject = first_subject(&thread_node).unwrap_or("<No subject>".to_string());
+    set_title(&subject);
+    div![
+        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"
+        ],
+        /*
+           div![
+           C!["debug"],
+           "Add zippy for debug dump",
+           view_debug_thread_set(thread_set)
+           ] /* pre![format!("Thread: {:#?}", thread_set).replace("    ", "  ")] */
+        */
+    ]
+}
+
+fn view_debug_thread_set(thread_set: &ThreadSet) -> Node<Msg> {
+    ul![thread_set
+        .0
+        .iter()
+        .enumerate()
+        .map(|(i, t)| { li!["t", i, ": ", view_debug_thread(t),] })]
+}
+fn view_debug_thread(thread: &Thread) -> Node<Msg> {
+    ul![thread
+        .0
+        .iter()
+        .enumerate()
+        .map(|(i, tn)| { li!["tn", i, ": ", view_debug_thread_node(tn),] })]
+}
+
+fn view_debug_thread_node(thread_node: &ThreadNode) -> Node<Msg> {
+    ul![
+        IF!(thread_node.0.is_some()=>li!["tn id:", &thread_node.0.as_ref().unwrap().id]),
+        thread_node.1.iter().enumerate().map(|(i, tn)| li![
+            "tn",
+            i,
+            ": ",
+            view_debug_thread_node(tn)
+        ])
+    ]
+}
+
 fn view_header(query: &str, refresh_request: &RefreshingState) -> Node<Msg> {
     let is_loading = refresh_request == &RefreshingState::Loading;
     let is_error = if let RefreshingState::Error(err) = refresh_request {
@@ -509,13 +757,6 @@ fn view_footer(render_time_ms: u128) -> Node<Msg> {
     ]
 }
 
-fn view_thread(messages: &[shared::Message]) -> Node<Msg> {
-    div![
-        "MESSAGES GO HERE",
-        ol![messages.iter().map(|msg| li![format!("{:?}", msg)])]
-    ]
-}
-
 fn view_desktop(model: &Model) -> Node<Msg> {
     let content = match &model.context {
         Context::None => div![h1!["Loading"]],
@@ -524,7 +765,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),
     ]
 }
 
@@ -536,7 +778,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),
     ]
 }
 

web/src/nm.rs

@@ -1,193 +0,0 @@
-use notmuch::{Content, Part, Thread, ThreadNode, ThreadSet};
-use seed::{prelude::*, *};
-use serde::de::Deserialize;
-
-use crate::{api, set_title, Msg};
-
-pub async fn show_request(tid: &str) -> fetch::Result<ThreadSet> {
-    let b = Request::new(api::show(tid))
-        .method(Method::Get)
-        .fetch()
-        .await?
-        .check_status()?
-        .bytes()
-        .await?;
-    let mut deserializer = serde_json::Deserializer::from_slice(&b);
-    deserializer.disable_recursion_limit();
-    Ok(ThreadSet::deserialize(&mut deserializer)
-        .map_err(|_| FetchError::JsonError(fetch::JsonError::Serde(JsValue::NULL)))?)
-}
-
-pub fn view_thread(thread_set: &ThreadSet) -> Node<Msg> {
-    assert_eq!(thread_set.0.len(), 1);
-    let thread = &thread_set.0[0];
-    assert_eq!(thread.0.len(), 1);
-    let thread_node = &thread.0[0];
-    let subject = first_subject(&thread_node).unwrap_or("<No subject>".to_string());
-    set_title(&subject);
-    div![
-        h1![subject],
-        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("    ", "  ")] */
-    ]
-}
-
-// <subject>
-// <tags>
-//
-// <from1> <date>
-// <to1>
-// <content1>
-// <zippy>
-// <children1>
-// </zippy>
-//
-// <from2> <date>
-// <to2>
-// <body2>
-fn view_message(thread: &ThreadNode) -> Node<Msg> {
-    let message = thread.0.as_ref().expect("ThreadNode missing Message");
-    let children = &thread.1;
-    div![
-        C!["message"],
-        /* TODO(wathiede): collect all the tags and show them here. */
-        /* TODO(wathiede): collect all the attachments from all the subparts */
-        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 {
-                Some(body) => view_body(body.as_slice()),
-                None => div!["<no body>"],
-            },
-        ],
-        children.iter().map(view_message)
-    ]
-}
-
-fn view_body(body: &[Part]) -> Node<Msg> {
-    div![body.iter().map(view_part)]
-}
-
-fn view_text_plain(content: &Option<Content>) -> Node<Msg> {
-    match &content {
-        Some(Content::String(content)) => p![C!["view-part-text-plain"], content],
-        _ => div![
-            C!["error"],
-            format!("Unhandled content enum for text/plain"),
-        ],
-    }
-}
-
-fn view_part(part: &Part) -> Node<Msg> {
-    match part.content_type.as_str() {
-        "text/plain" => view_text_plain(&part.content),
-        "text/html" => {
-            if let Some(Content::String(html)) = &part.content {
-                let inliner = css_inline::CSSInliner::options()
-                    .load_remote_stylesheets(false)
-                    .remove_style_tags(true)
-                    .build();
-                let inlined = inliner.inline(html).expect("failed to inline CSS");
-
-                return div![C!["view-part-text-html"], div!["TEST"], raw![&inlined]];
-            } else {
-                div![
-                    C!["error"],
-                    format!("Unhandled content enum for multipart/mixed"),
-                ]
-            }
-        }
-
-        // https://en.wikipedia.org/wiki/MIME#alternative
-        // RFC1341 states: In general, user agents that compose multipart/alternative entities
-        // should place the body parts in increasing order of preference, that is, with the
-        // preferred format last.
-        "multipart/alternative" => {
-            if let Some(Content::Multipart(parts)) = &part.content {
-                for part in parts.iter().rev() {
-                    if part.content_type == "text/html" {
-                        if let Some(Content::String(html)) = &part.content {
-                            let inliner = css_inline::CSSInliner::options()
-                                .load_remote_stylesheets(false)
-                                .remove_style_tags(true)
-                                .build();
-                            let inlined = inliner.inline(html).expect("failed to inline CSS");
-                            return div![Node::from_html(None, &inlined)];
-                        }
-                    }
-                    if part.content_type == "text/plain" {
-                        return view_text_plain(&part.content);
-                    }
-                }
-                div!["No known  multipart/alternative parts"]
-            } else {
-                div![
-                    C!["error"],
-                    format!("multipart/alternative with non-multipart content"),
-                ]
-            }
-        }
-        "multipart/mixed" => match &part.content {
-            Some(Content::Multipart(parts)) => div![parts.iter().map(view_part)],
-            _ => div![
-                C!["error"],
-                format!("Unhandled content enum for multipart/mixed"),
-            ],
-        },
-        _ => div![
-            C!["error"],
-            format!("Unhandled content type: {}", part.content_type)
-        ],
-    }
-}
-
-fn first_subject(thread: &ThreadNode) -> Option<String> {
-    if let Some(msg) = &thread.0 {
-        return Some(msg.headers.subject.clone());
-    } else {
-        for tn in &thread.1 {
-            if let Some(s) = first_subject(&tn) {
-                return Some(s);
-            }
-        }
-    }
-    None
-}
-
-fn view_debug_thread_set(thread_set: &ThreadSet) -> Node<Msg> {
-    ul![thread_set
-        .0
-        .iter()
-        .enumerate()
-        .map(|(i, t)| { li!["t", i, ": ", view_debug_thread(t),] })]
-}
-fn view_debug_thread(thread: &Thread) -> Node<Msg> {
-    ul![thread
-        .0
-        .iter()
-        .enumerate()
-        .map(|(i, tn)| { li!["tn", i, ": ", view_debug_thread_node(tn),] })]
-}
-
-fn view_debug_thread_node(thread_node: &ThreadNode) -> Node<Msg> {
-    ul![
-        IF!(thread_node.0.is_some()=>li!["tn id:", &thread_node.0.as_ref().unwrap().id]),
-        thread_node.1.iter().enumerate().map(|(i, tn)| li![
-            "tn",
-            i,
-            ": ",
-            view_debug_thread_node(tn)
-        ])
-    ]
-}