chore: Release

This reverts commit 1411961e36.

.gitea/workflows/rust.yml

@@ -1,4 +1,4 @@
-on: [push, pull_request]
+on: [push]
 
 name: Continuous integration
 

Cargo.toml

@@ -8,7 +8,7 @@ authors = ["Bill Thiede <git@xinu.tv>"]
 edition = "2021"
 license = "UNLICENSED"
 publish = ["xinu"]
-version = "0.8.5"
+version = "0.10.12"
 repository = "https://git.z.xinu.tv/wathiede/letterbox"
 
 [profile.dev]

Justfile

@@ -1,3 +1,6 @@
+export CARGO_INCREMENTAL := "0"
+export RUSTFLAGS := "-D warnings"
+
 default:
     @echo "Run: just patch|minor|major"
 

notmuch/src/lib.rs

@@ -271,6 +271,12 @@ pub struct Headers {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub bcc: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
+    #[serde(alias = "Delivered-To")]
+    pub delivered_to: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    #[serde(alias = "X-Original-To")]
+    pub x_original_to: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     pub reply_to: Option<String>,
     pub date: String,
 }
@@ -639,6 +645,16 @@ impl Notmuch {
             let hdr = &msg.headers.to;
             if let Some(to) = hdr {
                 addrs.push(to);
+            } else {
+                let hdr = &msg.headers.x_original_to;
+                if let Some(to) = hdr {
+                    addrs.push(to);
+                } else {
+                    let hdr = &msg.headers.delivered_to;
+                    if let Some(to) = hdr {
+                        addrs.push(to);
+                    };
+                };
             };
             let hdr = &msg.headers.cc;
             if let Some(cc) = hdr {

server/Cargo.toml

@@ -17,8 +17,8 @@ anyhow = "1.0.79"
 async-graphql = { version = "7", features = ["log"] }
 async-graphql-rocket = "7"
 async-trait = "0.1.81"
-build-info = "0.0.39"
-cacher = { version = "0.1.0", registry = "xinu" }
+build-info = "0.0.40"
+cacher = { version = "0.2.0", registry = "xinu" }
 chrono = "0.4.39"
 clap = { version = "4.5.23", features = ["derive"] }
 css-inline = "0.14.0"
@@ -30,16 +30,15 @@ lol_html = "2.0.0"
 mailparse = "0.16.0"
 maplit = "1.0.2"
 memmap = "0.7.0"
-opentelemetry = "0.28.0"
 regex = "1.11.1"
 reqwest = { version = "0.12.7", features = ["blocking"] }
 rocket = { version = "0.5.0-rc.2", features = ["json"] }
 rocket_cors = "0.6.0"
-scraper = "0.22.0"
+scraper = "0.23.0"
 serde = { version = "1.0.147", features = ["derive"] }
 serde_json = "1.0.87"
 sqlx = { version = "0.8.2", features = ["postgres", "runtime-tokio", "time"] }
-tantivy = { version = "0.22.0", optional = true }
+tantivy = { version = "0.24.0", optional = true }
 thiserror = "2.0.0"
 tokio = "1.26.0"
 tracing = "0.1.41"
@@ -48,11 +47,11 @@ urlencoding = "2.1.3"
 #xtracing = { path = "../../xtracing" }
 #xtracing = { git = "http://git-private.h.xinu.tv/wathiede/xtracing.git" }
 xtracing = { version = "0.3.0", registry = "xinu" }
-letterbox-notmuch = { version = "0.8.5", path = "../notmuch", registry = "xinu" }
-letterbox-shared = { version = "0.8.5", path = "../shared", registry = "xinu" }
+letterbox-notmuch = { version = "0.10.12", path = "../notmuch", registry = "xinu" }
+letterbox-shared = { version = "0.10.12", path = "../shared", registry = "xinu" }
 
 [build-dependencies]
-build-info-build = "0.0.39"
+build-info-build = "0.0.40"
 
 [features]
 #default = [ "tantivy" ]

server/migrations/20250330175930_update-nzfinder-link.sql

@@ -0,0 +1,20 @@
+-- Bad examples:
+ -- https://nzbfinder.ws/getnzb/d2c3e5a08abadd985dccc6a574122892030b6a9a.nzb&i=95972&r=b55082d289937c050dedc203c9653850
+--  https://nzbfinder.ws/getnzb?id=45add174-7da4-4445-bf2b-a67dbbfc07fe.nzb&r=b55082d289937c050dedc203c9653850
+--  https://nzbfinder.ws/api/v1/getnzb?id=82486020-c192-4fa0-a7e7-798d7d72e973.nzb&r=b55082d289937c050dedc203c9653850
+UPDATE nzb_posts
+SET link = 
+regexp_replace(
+    regexp_replace(
+        regexp_replace(
+            link,
+            'https://nzbfinder.ws/getnzb/',
+            'https://nzbfinder.ws/api/v1/getnzb?id='
+            ),
+        'https://nzbfinder.ws/getnzb',
+        'https://nzbfinder.ws/api/v1/getnzb'
+        ),
+    '&r=',
+    '&apikey='
+    ) 
+;

server/src/graphql.rs

@@ -95,6 +95,10 @@ pub struct Message {
     pub to: Vec<Email>,
     // All CC headers found in email
     pub cc: Vec<Email>,
+    // X-Original-To header found in email
+    pub x_original_to: Option<Email>,
+    // Delivered-To header found in email
+    pub delivered_to: Option<Email>,
     // First Subject header found in email
     pub subject: Option<String>,
     // Parsed Date header, if found and valid
@@ -306,6 +310,45 @@ impl QueryRoot {
         info!("count {newsreader_query:?} newsreader count {newsreader_count} notmuch count {notmuch_count} tantivy count {tantivy_count} total {total}");
         Ok(total)
     }
+    async fn catchup<'ctx>(
+        &self,
+        ctx: &Context<'ctx>,
+        query: String,
+    ) -> Result<Vec<String>, Error> {
+        let nm = ctx.data_unchecked::<Notmuch>();
+        let pool = ctx.data_unchecked::<PgPool>();
+        let query: Query = query.parse()?;
+        // TODO: implement optimized versions of fetching just IDs
+        let newsreader_fut = newsreader_search(pool, None, None, None, None, &query);
+        let notmuch_fut = notmuch_search(nm, None, None, None, None, &query);
+        let (newsreader_results, notmuch_results) = join!(newsreader_fut, notmuch_fut);
+
+        let newsreader_results = newsreader_results?;
+        let notmuch_results = notmuch_results?;
+        info!(
+            "newsreader_results ({}) notmuch_results ({})",
+            newsreader_results.len(),
+            notmuch_results.len(),
+        );
+
+        let mut results: Vec<_> = newsreader_results
+            .into_iter()
+            .chain(notmuch_results)
+            .collect();
+        // The leading '-' is to reverse sort
+        results.sort_by_key(|item| match item {
+            ThreadSummaryCursor::Newsreader(_, ts) => -ts.timestamp,
+            ThreadSummaryCursor::Notmuch(_, ts) => -ts.timestamp,
+        });
+        let ids = results
+            .into_iter()
+            .map(|r| match r {
+                ThreadSummaryCursor::Newsreader(_, ts) => ts.thread,
+                ThreadSummaryCursor::Notmuch(_, ts) => ts.thread,
+            })
+            .collect();
+        Ok(ids)
+    }
 
     // TODO: this function doesn't get parallelism, possibly because notmuch is sync and blocks,
     // rewrite that with tokio::process:Command

server/src/lib.rs

@@ -318,13 +318,16 @@ impl<'c> Transformer for SlurpContents<'c> {
         } else {
             let resp = reqwest::get(link.as_str()).await?;
             let status = resp.status();
-            if status.is_server_error() || retryable_status.contains(&status) {
-                return Err(TransformError::RetryableHttpStatusError(
-                    status,
-                    link.to_string(),
-                ));
+            if status.is_server_error() {
+                error!("status error for {link}: {status}");
+                return Ok(html.to_string());
+            }
+            if retryable_status.contains(&status) {
+                error!("retryable error for {link}: {status}");
+                return Ok(html.to_string());
             }
             if !status.is_success() {
+                error!("unsuccessful for {link}: {status}");
                 return Ok(html.to_string());
             }
             let body = resp.text().await?;
@@ -438,6 +441,38 @@ pub fn sanitize_html(
         }
     };
     let mut element_content_handlers = vec![
+        // Remove width and height attributes on elements
+        element!("[width],[height]", |el| {
+            println!("width or height {el:?}");
+            el.remove_attribute("width");
+            el.remove_attribute("height");
+            Ok(())
+        }),
+        // Remove width and height values from inline styles
+        element!("[style]", |el| {
+            println!("style {el:?}");
+            let style = el.get_attribute("style").unwrap();
+            let style = style
+                .split(";")
+                .filter(|s| {
+                    println!("s {s}");
+                    let Some((k, _)) = s.split_once(':') else {
+                        return true;
+                    };
+                    match k {
+                        "width" | "max-width" | "min-width" | "height" | "max-height"
+                        | "min-height" => false,
+                        _ => true,
+                    }
+                })
+                .collect::<Vec<_>>()
+                .join(";");
+            println!("style: {style}");
+            if let Err(e) = el.set_attribute("style", &style) {
+                error!("Failed to set style attribute: {e}");
+            }
+            Ok(())
+        }),
         // Open links in new tab
         element!("a[href]", |el| {
             el.set_attribute("target", "_blank").unwrap();
@@ -682,7 +717,7 @@ fn compute_offset_limit(
     first: Option<i32>,
     last: Option<i32>,
 ) -> (i32, i32) {
-    let default_page_size = 100;
+    let default_page_size = 10000;
     match (after, before, first, last) {
         // Reasonable defaults
         (None, None, None, None) => (0, default_page_size),
@@ -773,7 +808,19 @@ impl Query {
         for uid in &self.uids {
             parts.push(uid.clone());
         }
-        parts.extend(self.remainder.clone());
+        for r in &self.remainder {
+            // Rewrite "to:" to include ExtraTo:. ExtraTo: is configured in
+            // notmuch-config to index Delivered-To and X-Original-To headers.
+            if r.starts_with("to:") {
+                parts.push("(".to_string());
+                parts.push(r.to_string());
+                parts.push("OR".to_string());
+                parts.push(r.replace("to:", "ExtraTo:"));
+                parts.push(")".to_string());
+            } else {
+                parts.push(r.to_string());
+            }
+        }
         parts.join(" ")
     }
 }
@@ -898,3 +945,21 @@ async fn clean_title(title: &str) -> Result<String, ServerError> {
     }
     Ok(title)
 }
+
+#[cfg(test)]
+mod tests {
+    use super::{SanitizeHtml, Transformer};
+
+    #[tokio::test]
+    async fn strip_sizes() -> Result<(), Box<dyn std::error::Error>> {
+        let ss = SanitizeHtml {
+            cid_prefix: "",
+            base_url: &None,
+        };
+        let input = r#"<p width=16 height=16 style="color:blue;width:16px;height:16px;">This el has width and height attributes and inline styles</p>"#;
+        let want = r#"<p style="color:blue;">This el has width and height attributes and inline styles</p>"#;
+        let got = ss.transform(&None, input).await?;
+        assert_eq!(got, want);
+        Ok(())
+    }
+}

server/src/nm.rs

@@ -196,6 +196,8 @@ pub async fn thread(
 
         let to = email_addresses(&path, &m, "to")?;
         let cc = email_addresses(&path, &m, "cc")?;
+        let delivered_to = email_addresses(&path, &m, "delivered-to")?.pop();
+        let x_original_to = email_addresses(&path, &m, "x-original-to")?.pop();
         let subject = m.headers.get_first_value("subject");
         let timestamp = m
             .headers
@@ -315,6 +317,8 @@ pub async fn thread(
             body,
             path,
             attachments,
+            delivered_to,
+            x_original_to,
         });
     }
     messages.reverse();

shared/Cargo.toml

@@ -11,6 +11,6 @@ version.workspace = true
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-build-info = "0.0.39"
-letterbox-notmuch = { version = "0.8.5", path = "../notmuch", registry = "xinu" }
+build-info = "0.0.40"
+letterbox-notmuch = { version = "0.10.12", path = "../notmuch", registry = "xinu" }
 serde = { version = "1.0.147", features = ["derive"] }

web/Cargo.toml

@@ -9,7 +9,7 @@ repository.workspace = true
 version.workspace = true
 
 [build-dependencies]
-build-info-build = "0.0.39"
+build-info-build = "0.0.40"
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.33"
@@ -28,14 +28,15 @@ graphql_client = "0.14.0"
 thiserror = "2.0.0"
 gloo-net = { version = "0.6.0", features = ["json", "serde_json"] }
 human_format = "1.1.0"
-build-info = "0.0.39"
+build-info = "0.0.40"
 wasm-bindgen = "=0.2.100"
 uuid = { version = "1.13.1", features = [
   "js",
 ] } # direct dep to set js feature, prevents Rng issues
-letterbox-shared = { version = "0.8.5", path = "../shared", registry = "xinu" }
-letterbox-notmuch = { version = "0.8.5", path = "../notmuch", registry = "xinu" }
+letterbox-shared = { version = "0.10.12", path = "../shared", registry = "xinu" }
+letterbox-notmuch = { version = "0.10.12", path = "../notmuch", registry = "xinu" }
 seed_hooks = { version = "0.4.0", registry = "xinu" }
+strum_macros = "0.27.1"
 
 [package.metadata.wasm-pack.profile.release]
 wasm-opt = ['-Os']
@@ -49,4 +50,6 @@ features = [
   "MediaQueryList",
   "Navigator",
   "Window",
+  "History",
+  "ScrollRestoration",
 ]

web/graphql/catchup.graphql

@@ -0,0 +1,3 @@
+query CatchupQuery($query: String!) {
+    catchup(query: $query)
+}

web/graphql/schema.json

@@ -671,6 +671,30 @@
                 }
               }
             },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "xOriginalTo",
+              "type": {
+                "kind": "OBJECT",
+                "name": "Email",
+                "ofType": null
+              }
+            },
+            {
+              "args": [],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "deliveredTo",
+              "type": {
+                "kind": "OBJECT",
+                "name": "Email",
+                "ofType": null
+              }
+            },
             {
               "args": [],
               "deprecationReason": null,
@@ -1268,6 +1292,45 @@
                 }
               }
             },
+            {
+              "args": [
+                {
+                  "defaultValue": null,
+                  "description": null,
+                  "name": "query",
+                  "type": {
+                    "kind": "NON_NULL",
+                    "name": null,
+                    "ofType": {
+                      "kind": "SCALAR",
+                      "name": "String",
+                      "ofType": null
+                    }
+                  }
+                }
+              ],
+              "deprecationReason": null,
+              "description": null,
+              "isDeprecated": false,
+              "name": "catchup",
+              "type": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "LIST",
+                  "name": null,
+                  "ofType": {
+                    "kind": "NON_NULL",
+                    "name": null,
+                    "ofType": {
+                      "kind": "SCALAR",
+                      "name": "String",
+                      "ofType": null
+                    }
+                  }
+                }
+              }
+            },
             {
               "args": [
                 {

web/graphql/show_thread.graphql

@@ -31,6 +31,14 @@ query ShowThreadQuery($threadId: String!) {
           name
           addr
         }
+        xOriginalTo {
+          name
+          addr
+        }
+        deliveredTo {
+          name
+          addr
+        }
         timestamp
         body {
           __typename

web/src/graphql.rs

@@ -12,6 +12,14 @@ use serde::{de::DeserializeOwned, Serialize};
 )]
 pub struct FrontPageQuery;
 
+#[derive(GraphQLQuery)]
+#[graphql(
+    schema_path = "graphql/schema.json",
+    query_path = "graphql/catchup.graphql",
+    response_derives = "Debug"
+)]
+pub struct CatchupQuery;
+
 #[derive(GraphQLQuery)]
 #[graphql(
     schema_path = "graphql/schema.json",

web/src/main.rs

@@ -18,6 +18,9 @@ fn main() {
     #[cfg(debug_assertions)]
     console_error_panic_hook::set_once();
 
+    #[cfg(debug_assertions)]
+    let lvl = Level::Debug;
+    #[cfg(not(debug_assertions))]
     let lvl = Level::Info;
     console_log::init_with_level(lvl).expect("failed to initialize console logging");
     // Mount the `app` to the element with the `id` "app".

web/src/state.rs

@@ -29,16 +29,21 @@ pub fn unread_query() -> &'static str {
 pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
     let version = letterbox_shared::build_version(bi);
     info!("Build Info: {}", version);
+    // Disable restoring to scroll position when navigating
+    window()
+        .history()
+        .expect("couldn't get history")
+        .set_scroll_restoration(web_sys::ScrollRestoration::Manual)
+        .expect("failed to set scroll restoration to manual");
     if url.hash().is_none() {
         orders.request_url(urls::search(unread_query(), 0));
     } else {
-        orders.notify(subs::UrlRequested::new(url));
+        orders.request_url(url);
     };
-    orders.stream(streams::window_event(Ev::Resize, |_| Msg::OnResize));
     // TODO(wathiede): only do this while viewing the index? Or maybe add a new message that force
     // 'notmuch new' on the server periodically?
     orders.stream(streams::interval(30_000, || Msg::RefreshStart));
-    orders.subscribe(on_url_changed);
+    orders.subscribe(Msg::OnUrlChanged);
     orders.stream(streams::window_event(Ev::Scroll, |_| Msg::WindowScrolled));
 
     build_info::build_info!(fn bi);
@@ -53,18 +58,23 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
             client: version,
             server: None,
         },
+        catchup: None,
+        last_url: Url::current(),
     }
 }
 
-fn on_url_changed(uc: subs::UrlChanged) -> Msg {
-    let mut url = uc.0;
+fn on_url_changed(old: &Url, mut new: Url) -> Msg {
+    let did_change = *old != new;
+    let mut messages = Vec::new();
+    if did_change {
+        messages.push(Msg::ScrollToTop)
+    }
     info!(
-        "url changed '{}', history {}",
-        url,
+        "url changed\nold '{old}'\nnew '{new}', history {}",
         history().length().unwrap_or(0)
     );
-    let hpp = url.remaining_hash_path_parts();
-    match hpp.as_slice() {
+    let hpp = new.remaining_hash_path_parts();
+    let msg = match hpp.as_slice() {
         ["t", tid] => Msg::ShowThreadRequest {
             thread_id: tid.to_string(),
         },
@@ -101,11 +111,14 @@ fn on_url_changed(uc: subs::UrlChanged) -> Msg {
                 last: None,
             }
         }
-    }
+    };
+    messages.push(msg);
+    Msg::MultiMsg(messages)
 }
 
 // `update` describes how to handle each `Msg`.
 pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
+    info!("update({})", msg);
     match msg {
         Msg::Noop => {}
         Msg::RefreshStart => {
@@ -131,7 +144,7 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             orders.perform_cmd(async move { Msg::Refresh });
         }
         Msg::Refresh => {
-            orders.perform_cmd(async move { on_url_changed(subs::UrlChanged(Url::current())) });
+            orders.request_url(Url::current());
         }
         Msg::Reload => {
             window()
@@ -139,7 +152,10 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                 .reload()
                 .expect("failed to reload window");
         }
-        Msg::OnResize => (),
+        Msg::OnUrlChanged(new_url) => {
+            orders.send_msg(on_url_changed(&model.last_url, new_url.0.clone()));
+            model.last_url = new_url.0;
+        }
 
         Msg::NextPage => {
             match &model.context {
@@ -181,10 +197,7 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             };
         }
         Msg::GoToSearchResults => {
-            let url = urls::search(&model.query, 0);
-            info!("GoToSearchRestuls Start");
-            orders.request_url(url);
-            info!("GoToSearchRestuls End");
+            orders.send_msg(Msg::SearchQuery(model.query.clone()));
         }
 
         Msg::UpdateQuery(query) => model.query = query,
@@ -279,7 +292,9 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                 )
             });
         }
-        Msg::FrontPageResult(Err(e)) => error!("error FrontPageResult: {e:?}"),
+        Msg::FrontPageResult(Err(e)) => {
+            error!("error FrontPageResult: {e:?}");
+        }
         Msg::FrontPageResult(Ok(graphql_client::Response {
             data: None,
             errors: None,
@@ -307,7 +322,6 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                     })
                     .collect(),
             );
-            info!("pager {:#?}", data.search.page_info);
             let selected_threads = 'context: {
                 if let Context::SearchResult {
                     results,
@@ -390,6 +404,38 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
         Msg::ShowThreadResult(bad) => {
             error!("show_thread_query error: {bad:#?}");
         }
+        Msg::CatchupRequest { query } => {
+            orders.perform_cmd(async move {
+                Msg::CatchupResult(
+                    send_graphql::<_, graphql::catchup_query::ResponseData>(
+                        graphql::CatchupQuery::build_query(graphql::catchup_query::Variables {
+                            query,
+                        }),
+                    )
+                    .await,
+                )
+            });
+        }
+        Msg::CatchupResult(Ok(graphql_client::Response {
+            data: Some(data), ..
+        })) => {
+            let items = data.catchup;
+            if items.is_empty() {
+                orders.send_msg(Msg::GoToSearchResults);
+                model.catchup = None;
+            } else {
+                orders.request_url(urls::thread(&items[0]));
+                model.catchup = Some(Catchup {
+                    items: items
+                        .into_iter()
+                        .map(|id| CatchupItem { id, seen: false })
+                        .collect(),
+                });
+            }
+        }
+        Msg::CatchupResult(bad) => {
+            error!("catchup_query error: {bad:#?}");
+        }
         Msg::SelectionSetNone => {
             if let Context::SearchResult {
                 selected_threads, ..
@@ -503,8 +549,12 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                     .expect("failed to copy to clipboard");
             });
         }
+        Msg::ScrollToTop => {
+            info!("scrolling to the top");
+            web_sys::window().unwrap().scroll_to_with_x_and_y(0., 0.);
+        }
         Msg::WindowScrolled => {
-            info!("WindowScrolled");
+            // TODO: model.content_el doesn't go to None like it should when a DOM is recreated and the refrenced element goes away
             if let Some(el) = model.content_el.get() {
                 let ih = window()
                     .inner_height()
@@ -513,7 +563,6 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                     .value_of();
 
                 let r = el.get_bounding_client_rect();
-                info!("r {r:?} ih {ih}");
                 if r.height() < ih {
                     // The whole content fits in the window, no scrollbar
                     orders.send_msg(Msg::SetProgress(0.));
@@ -545,7 +594,8 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             model.read_completion_ratio = ratio;
         }
         Msg::UpdateServerVersion(version) => {
-            if version != model.versions.client {
+            // Only git versions contain dash, don't autoreload there
+            if !version.contains('-') && version != model.versions.client {
                 warn!(
                     "Server ({}) and client ({}) version mismatch, reloading",
                     version, model.versions.client
@@ -554,8 +604,77 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             }
             model.versions.server = Some(version);
         }
+
+        Msg::CatchupStart => {
+            let query = if model.query.contains("is:unread") {
+                model.query.to_string()
+            } else {
+                format!("{} is:unread", model.query)
+            };
+            info!("starting catchup mode w/ {}", query);
+            orders.send_msg(Msg::ScrollToTop);
+            orders.send_msg(Msg::CatchupRequest { query });
+        }
+        Msg::CatchupKeepUnread => {
+            if let Some(thread_id) = current_thread_id(&model.context) {
+                orders.send_msg(Msg::SetUnread(thread_id, true));
+            };
+            orders.send_msg(Msg::CatchupNext);
+        }
+        Msg::CatchupMarkAsRead => {
+            if let Some(thread_id) = current_thread_id(&model.context) {
+                orders.send_msg(Msg::SetUnread(thread_id, false));
+            };
+            orders.send_msg(Msg::CatchupNext);
+        }
+        Msg::CatchupNext => {
+            orders.send_msg(Msg::ScrollToTop);
+            let Some(catchup) = &mut model.catchup else {
+                orders.send_msg(Msg::GoToSearchResults);
+                return;
+            };
+            let Some(idx) = catchup.items.iter().position(|i| !i.seen) else {
+                // All items have been seen
+                orders.send_msg(Msg::CatchupExit);
+                orders.send_msg(Msg::GoToSearchResults);
+                return;
+            };
+            catchup.items[idx].seen = true;
+            if idx < catchup.items.len() - 1 {
+                // Reached last item
+                orders.request_url(urls::thread(&catchup.items[idx + 1].id));
+                return;
+            } else {
+                orders.send_msg(Msg::CatchupExit);
+                orders.send_msg(Msg::GoToSearchResults);
+                return;
+            };
+        }
+        Msg::CatchupExit => {
+            orders.send_msg(Msg::ScrollToTop);
+            model.catchup = None;
+        }
     }
 }
+
+fn current_thread_id(context: &Context) -> Option<String> {
+    match context {
+        Context::ThreadResult {
+            thread:
+                ShowThreadQueryThread::EmailThread(ShowThreadQueryThreadOnEmailThread {
+                    thread_id, ..
+                }),
+            ..
+        } => Some(thread_id.clone()),
+        Context::ThreadResult {
+            thread:
+                ShowThreadQueryThread::NewsPost(ShowThreadQueryThreadOnNewsPost { thread_id, .. }),
+            ..
+        } => Some(thread_id.clone()),
+        _ => None,
+    }
+}
+
 // `Model` describes our app state.
 pub struct Model {
     pub query: String,
@@ -565,6 +684,8 @@ pub struct Model {
     pub read_completion_ratio: f64,
     pub content_el: ElRef<HtmlElement>,
     pub versions: Version,
+    pub catchup: Option<Catchup>,
+    pub last_url: Url,
 }
 
 #[derive(Debug)]
@@ -601,6 +722,15 @@ pub enum Context {
     },
 }
 
+pub struct Catchup {
+    pub items: Vec<CatchupItem>,
+}
+
+pub struct CatchupItem {
+    pub id: String,
+    pub seen: bool,
+}
+
 pub struct Tag {
     pub name: String,
     pub bg_color: String,
@@ -614,14 +744,15 @@ pub enum RefreshingState {
     Error(String),
 }
 // `Msg` describes the different events you can modify state with.
+#[derive(strum_macros::Display)]
 pub enum Msg {
     Noop,
     // Tell the client to refresh its state
     Refresh,
     // Tell the client to reload whole page from server
     Reload,
-    // Window has changed size
-    OnResize,
+    // TODO: add GoToUrl
+    OnUrlChanged(subs::UrlChanged),
     // Tell the server to update state
     RefreshStart,
     RefreshDone(Option<gloo_net::Error>),
@@ -651,10 +782,14 @@ pub enum Msg {
     ShowThreadResult(
         Result<graphql_client::Response<graphql::show_thread_query::ResponseData>, gloo_net::Error>,
     ),
+    CatchupRequest {
+        query: String,
+    },
+    CatchupResult(
+        Result<graphql_client::Response<graphql::catchup_query::ResponseData>, gloo_net::Error>,
+    ),
 
-    #[allow(dead_code)]
     SelectionSetNone,
-    #[allow(dead_code)]
     SelectionSetAll,
     SelectionAddTag(String),
     #[allow(dead_code)]
@@ -670,7 +805,14 @@ pub enum Msg {
 
     CopyToClipboard(String),
 
+    ScrollToTop,
     WindowScrolled,
     SetProgress(f64),
     UpdateServerVersion(String),
+
+    CatchupStart,
+    CatchupKeepUnread,
+    CatchupMarkAsRead,
+    CatchupNext,
+    CatchupExit,
 }

web/src/view/mod.rs

@@ -1,10 +1,10 @@
-use std::{cmp::Ordering, collections::HashSet};
+use std::{cell::RefCell, cmp::Ordering, collections::HashSet};
 
 use chrono::{DateTime, Datelike, Duration, Local, Utc};
 use human_format::{Formatter, Scales};
 use itertools::Itertools;
 use letterbox_shared::compute_color;
-use log::{debug, error, info};
+use log::error;
 use seed::{prelude::*, *};
 use seed_hooks::{state_access::CloneState, topo, use_state, StateAccessEventHandlers};
 use web_sys::{HtmlElement, HtmlInputElement};
@@ -12,7 +12,7 @@ use web_sys::{HtmlElement, HtmlInputElement};
 use crate::{
     api::urls,
     graphql::{front_page_query::*, show_thread_query::*},
-    state::{unread_query, Context, Model, Msg, RefreshingState, Tag},
+    state::{unread_query, CatchupItem, Context, Model, Msg, RefreshingState, Tag, Version},
 };
 
 // TODO(wathiede): create a QueryString enum that wraps single and multiple message ids and thread
@@ -21,6 +21,8 @@ use crate::{
 const MAX_RAW_MESSAGE_SIZE: usize = 100_000;
 
 mod tw_classes {
+    use seed::{prelude::*, *};
+
     pub const TAG: &[&str] = &[
         "rounded-md",
         "px-2",
@@ -37,22 +39,30 @@ mod tw_classes {
         "text-xs",
         "[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]",
     ];
-    pub const BUTTON: &[&str] = &[
-        "bg-neutral-900",
-        "rounded-md",
-        "p-2",
-        "border",
-        "border-neutral-700",
-        "text-center",
-        "text-sm",
-        "transition-all",
-        "shadow-md",
-        "hover:shadow-lg",
-        "hover:bg-neutral-700",
-        "disabled:pointer-events-none",
-        "disabled:opacity-50",
-        "disabled:shadow-none",
-    ];
+
+    // TODO: should this be a builder pattern?
+    pub fn button() -> seed::Attrs {
+        button_with_color("bg-neutral-900", "hover:bg-neutral-700")
+    }
+
+    pub fn button_with_color<T: ToClasses>(bg: T, hover: T) -> seed::Attrs {
+        C![
+            "rounded-md",
+            "p-2",
+            "border",
+            "border-neutral-700",
+            "text-center",
+            "text-sm",
+            "transition-all",
+            "shadow-md",
+            "hover:shadow-lg",
+            "disabled:pointer-events-none",
+            "disabled:opacity-50",
+            "disabled:shadow-none",
+            bg,
+            hover,
+        ]
+    }
 
     pub const CHECKBOX: &[&str] = &[
         "w-8",
@@ -68,24 +78,82 @@ mod tw_classes {
 }
 
 pub fn view(model: &Model) -> Node<Msg> {
-    let content = match &model.context {
-        Context::None => div![h1!["Loading"]],
+    match &model.context {
+        Context::None => normal_view(
+            div![h1!["Loading"]],
+            &model.versions,
+            &model.query,
+            &model.refreshing_state,
+            model.read_completion_ratio,
+            &model.tags,
+        ),
         Context::ThreadResult {
             thread: ShowThreadQueryThread::EmailThread(thread_data),
             open_messages,
-        } => thread(thread_data, open_messages, &model.content_el),
+        } => {
+            if let Some(catchup) = &model.catchup {
+                catchup_view(
+                    thread(thread_data, open_messages, &model.content_el, true),
+                    &catchup.items,
+                    model.read_completion_ratio,
+                )
+            } else {
+                normal_view(
+                    thread(thread_data, open_messages, &model.content_el, false),
+                    &model.versions,
+                    &model.query,
+                    &model.refreshing_state,
+                    model.read_completion_ratio,
+                    &model.tags,
+                )
+            }
+        }
         Context::ThreadResult {
             thread: ShowThreadQueryThread::NewsPost(post),
             ..
-        } => news_post(post, &model.content_el),
+        } => {
+            if let Some(catchup) = &model.catchup {
+                catchup_view(
+                    news_post(post, &model.content_el, true),
+                    &catchup.items,
+                    model.read_completion_ratio,
+                )
+            } else {
+                normal_view(
+                    news_post(post, &model.content_el, false),
+                    &model.versions,
+                    &model.query,
+                    &model.refreshing_state,
+                    model.read_completion_ratio,
+                    &model.tags,
+                )
+            }
+        }
         Context::SearchResult {
             query,
             results,
             count,
             pager,
             selected_threads,
-        } => search_results(&query, results.as_slice(), *count, pager, selected_threads),
-    };
+        } => normal_view(
+            search_results(&query, results.as_slice(), *count, pager, selected_threads),
+            &model.versions,
+            &model.query,
+            &model.refreshing_state,
+            model.read_completion_ratio,
+            &model.tags,
+        ),
+    }
+}
+
+fn normal_view(
+    content: Node<Msg>,
+    versions: &Version,
+    query: &str,
+    refreshing_state: &RefreshingState,
+    read_completion_ratio: f64,
+    tags: &Option<Vec<Tag>>,
+) -> Node<Msg> {
     div![
         C![
             "relative",
@@ -98,19 +166,88 @@ pub fn view(model: &Model) -> Node<Msg> {
         ],
         div![
             C!["w-full", "lg:w-48", "flex-none", "flex", "flex-col"],
-            tags(model),
-            versions(&model.versions)
+            view_tags(tags),
+            view_versions(&versions)
         ],
         div![
             // TODO: This "overflow-hidden" is a hack because I can't figure out
             // how to prevent the search input box on mobile for growing it's
             // parent wider
             C!["flex-auto", "flex", "flex-col", "overflow-hidden"],
-            view_header(&model.query, &model.refreshing_state, true),
+            view_header(query, refreshing_state, true),
             content,
-            view_header(&model.query, &model.refreshing_state, false),
+            view_header(query, refreshing_state, false),
         ],
-        reading_progress(model.read_completion_ratio),
+        reading_progress(read_completion_ratio),
+    ]
+}
+
+fn catchup_view(
+    content: Node<Msg>,
+    items: &[CatchupItem],
+    read_completion_ratio: f64,
+) -> Node<Msg> {
+    div![
+        C!["w-full", "relative", "text-white"],
+        div![
+            C![
+                "fixed",
+                "top-0",
+                "right-0",
+                "left-0",
+                "p-4",
+                "border-b",
+                "border-gray-500",
+                "bg-black/50",
+            ],
+            div![
+                C!["absolute", "top-0", "right-4", "text-gray-500", "p-4"],
+                span![i![C!["fas", "fa-x"]]],
+                ev(Ev::Click, move |_| Msg::CatchupExit)
+            ],
+            h1![
+                C!["text-center"],
+                format!("{} left ", items.iter().filter(|i| !i.seen).count(),)
+            ]
+        ],
+        div![C!["mt-12", "mb-20"], content],
+        div![
+            C![
+                "fixed",
+                "bottom-0",
+                "left-0",
+                "right-0",
+                "flex",
+                "justify-center",
+                "gap-4",
+                "p-4",
+                "border-t",
+                "border-gray-500",
+                "bg-black/50",
+            ],
+            button![
+                tw_classes::button(),
+                span![i![C!["far", "fa-envelope"]]],
+                span![C!["pl-2"], "Keep unread"],
+                ev(Ev::Click, |_| Msg::CatchupKeepUnread)
+            ],
+            button![
+                tw_classes::button(),
+                span![i![C!["fas", "fa-house"]]],
+                span![C!["pl-2"], "Go home"],
+                ev(Ev::Click, |_| Msg::MultiMsg(vec![
+                    Msg::CatchupExit,
+                    Msg::GoToSearchResults
+                ]))
+            ],
+            button![
+                tw_classes::button_with_color("bg-green-800", "hover:bg-green-700"),
+                span![i![C!["far", "fa-envelope-open"]]],
+                span![C!["pl-2"], "Mark as read"],
+                ev(Ev::Click, |_| Msg::CatchupMarkAsRead)
+            ]
+        ],
+        reading_progress(read_completion_ratio)
     ]
 }
 
@@ -136,6 +273,13 @@ fn search_results(
             tags.remove(idx);
         };
         let is_unread = unread_idx.is_some();
+        let mut title_break = None;
+        const TITLE_LENGTH_WRAP_LIMIT: usize = 40;
+        for w in r.subject.split_whitespace() {
+            if w.len() > TITLE_LENGTH_WRAP_LIMIT {
+                title_break = Some(C!["break-all", "text-pretty"]);
+            }
+        }
         div![
             C![
                 "flex",
@@ -178,7 +322,7 @@ fn search_results(
                 attrs! {
                     At::Href => urls::thread(&tid)
                 },
-                div![&r.subject],
+                div![title_break, &r.subject],
                 span![C!["text-xs"], pretty_authors(&r.authors)],
                 div![
                     C!["flex", "flex-wrap", "justify-between"],
@@ -322,16 +466,22 @@ fn search_toolbar(
     let tristate_el: ElRef<HtmlInputElement> = use_state(|| Default::default()).get();
     let tri = el_ref(&tristate_el);
     if let Some(tri) = tri.get() {
-        info!(
-            "setting tristate to {indeterminate}, current {}",
-            tri.indeterminate()
-        );
         tri.set_indeterminate(indeterminate);
     }
     nav![
         C!["py-4", "flex", "w-full", "justify-between"],
         div![
-            C!["gap-2", "flex", IF!(!show_bulk_edit => "invisible")],
+            C!["gap-2", "flex", IF!(show_bulk_edit => "hidden")],
+            div![button![
+                tw_classes::button(),
+                attrs! {At::Title => "Mark as read"},
+                span![i![C!["far", "fa-eye"]]],
+                span![C!["pl-2", "hidden", "md:inline"], "Catch-up"],
+                ev(Ev::Click, |_| Msg::CatchupStart)
+            ]],
+        ],
+        div![
+            C!["gap-2", "flex", IF!(!show_bulk_edit => "hidden")],
             div![
                 C!["flex", "items-center", "mr-4"],
                 input![
@@ -352,14 +502,16 @@ fn search_toolbar(
             ],
             div![
                 button![
-                    C![&tw_classes::BUTTON, "rounded-r-none"],
+                    tw_classes::button(),
+                    C!["rounded-r-none"],
                     attrs! {At::Title => "Mark as read"},
                     span![i![C!["far", "fa-envelope-open"]]],
                     span![C!["pl-2", "hidden", "md:inline"], "Read"],
                     ev(Ev::Click, |_| Msg::SelectionMarkAsRead)
                 ],
                 button![
-                    C![&tw_classes::BUTTON, "rounded-l-none"],
+                    tw_classes::button(),
+                    C!["rounded-l-none"],
                     attrs! {At::Title => "Mark as unread"},
                     span![i![C!["far", "fa-envelope"]]],
                     span![C!["pl-2", "hidden", "md:inline"], "Unread"],
@@ -367,7 +519,8 @@ fn search_toolbar(
                 ]
             ],
             div![button![
-                C![&tw_classes::BUTTON, "text-red-500"],
+                tw_classes::button(),
+                C!["text-red-500"],
                 attrs! {At::Title => "Mark as spam"},
                 span![i![C!["far", "fa-hand"]]],
                 span![C!["pl-2", "hidden", "md:inline"], "Spam"],
@@ -381,13 +534,13 @@ fn search_toolbar(
             C!["flex", "gap-2", "items-center"],
             p![format!("{count} results")],
             button![
-                C![&tw_classes::BUTTON],
+                tw_classes::button(),
                 IF!(!pager.has_previous_page => attrs!{ At::Disabled=>true }),
                 "<",
                 IF!(pager.has_previous_page => ev(Ev::Click, |_| Msg::PreviousPage)),
             ],
             button![
-                C![&tw_classes::BUTTON],
+                tw_classes::button(),
                 IF!(!pager.has_next_page => attrs!{ At::Disabled=>true }),
                 ">",
                 IF!(pager.has_next_page => ev(Ev::Click, |_| Msg::NextPage))
@@ -484,6 +637,53 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
     let is_unread = has_unread(&msg.tags);
     let avatar = render_avatar(photo_url, &from, true);
     let unknown = "UNKNOWN".to_string();
+    let to_xinu = RefCell::new(false);
+    let to_addrs: Vec<_> = msg
+        .to
+        .iter()
+        .map(|to| {
+            let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to;
+            span![
+                addr.as_ref().map(|addr| {
+                    if addr.ends_with("xinu.tv") {
+                        *to_xinu.borrow_mut() = true;
+                    }
+                    attrs! {
+                        At::Title => addr
+                    }
+                }),
+                name.as_ref()
+                    .unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)),
+                " ",
+                addr.as_ref().map(|addr| copy_text_widget(&addr)),
+                " "
+            ]
+        })
+        .collect();
+    let cc_addrs: Vec<_> = msg
+        .cc
+        .iter()
+        .map(|cc| {
+            let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
+            span![
+                addr.as_ref().map(|addr| {
+                    if addr.ends_with("xinu.tv") {
+                        *to_xinu.borrow_mut() = true;
+                    }
+                    attrs! {
+                                At::Title => addr
+                    }
+                }),
+                name.as_ref()
+                    .unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)),
+                " ",
+                addr.as_ref().map(|addr| copy_text_widget(&addr)),
+                " "
+            ]
+        })
+        .collect();
+    let show_x_original_to = !*to_xinu.borrow() && msg.x_original_to.is_some();
+    let show_delivered_to = !*to_xinu.borrow() && !show_x_original_to && msg.delivered_to.is_some();
     div![
         C!["flex", "p-4", "bg-neutral-800"],
         div![avatar],
@@ -505,8 +705,28 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
                     "To: "
                 ],
                 span![
-                    msg.to.iter().map(|to| {
-                        let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to;
+                to_addrs
+                ]
+            ]),
+            IF!(!msg.cc.is_empty() =>div![
+                C!["text-xs"],
+                span![
+                    C!["font-semibold"],
+                    "CC: "
+                ],
+                span![
+                    cc_addrs
+                ]
+            ]),
+            IF!(show_x_original_to => div![
+                C!["text-xs"],
+                span![
+                    C!["font-semibold"],
+                    "Original To: "
+                ],
+                span![
+                    msg.x_original_to.as_ref().map(|to| {
+                        let ShowThreadQueryThreadOnEmailThreadMessagesXOriginalTo { name, addr } = to;
                         span![
                             addr.as_ref().map(|addr| attrs! {
                                 At::Title => addr
@@ -519,15 +739,15 @@ fn render_open_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Node<
                     })
                 ]
             ]),
-            IF!(!msg.cc.is_empty() =>div![
+            IF!(show_delivered_to => div![
                 C!["text-xs"],
                 span![
                     C!["font-semibold"],
-                    "CC: "
+                    "Delivered To: "
                 ],
                 span![
-                    msg.cc.iter().map(|cc| {
-                        let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
+                    msg.delivered_to.as_ref().map(|to| {
+                        let ShowThreadQueryThreadOnEmailThreadMessagesDeliveredTo { name, addr } = to;
                         span![
                             addr.as_ref().map(|addr| attrs! {
                                 At::Title => addr
@@ -581,6 +801,51 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
     let is_unread = has_unread(&msg.tags);
     let avatar = render_avatar(photo_url, &from, false);
     let unknown = "UNKNOWN".to_string();
+    let to_xinu = RefCell::new(false);
+    let to_addrs: Vec<_> = msg
+        .to
+        .iter()
+        .enumerate()
+        .map(|(i, to)| {
+            let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to;
+            span![
+                addr.as_ref().map(|addr| {
+                    if addr.ends_with("xinu.tv") {
+                        *to_xinu.borrow_mut() = true;
+                    }
+                    attrs! {
+                        At::Title => addr
+                    }
+                }),
+                if i > 0 { ", " } else { "" },
+                name.as_ref()
+                    .unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown))
+            ]
+        })
+        .collect();
+    let cc_addrs: Vec<_> = msg
+        .cc
+        .iter()
+        .enumerate()
+        .map(|(i, cc)| {
+            let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
+            span![
+                addr.as_ref().map(|addr| {
+                    if addr.ends_with("xinu.tv") {
+                        *to_xinu.borrow_mut() = true;
+                    }
+                    attrs! {
+                        At::Title => addr
+                    }
+                }),
+                if i > 0 { ", " } else { "" },
+                name.as_ref()
+                    .unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown))
+            ]
+        })
+        .collect();
+    let show_x_original_to = !*to_xinu.borrow() && msg.x_original_to.is_some();
+    let show_delivered_to = !*to_xinu.borrow() && !show_x_original_to && msg.delivered_to.is_some();
     div![
         C!["flex", "p-4", "bg-neutral-800"],
         div![avatar],
@@ -601,16 +866,7 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
                     "To: "
                 ],
                 span![
-                    msg.to.iter().enumerate().map(|(i, to)| {
-                        let ShowThreadQueryThreadOnEmailThreadMessagesTo { name, addr } = to;
-                        span![
-                            addr.as_ref().map(|addr| attrs! {
-                                At::Title => addr
-                            }),
-                            if i > 0 { ", " } else { "" },
-                            name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown))
-                        ]
-                    })
+                    to_addrs
                 ],
                 " "
             ]),
@@ -620,17 +876,46 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
                     C!["font-semibold"],
                     "CC: "
                 ],
-                msg.cc.iter().enumerate().map(|(i,cc)| {
-                    let ShowThreadQueryThreadOnEmailThreadMessagesCc { name, addr } = cc;
-                    span![
-                        addr.as_ref().map(|addr| attrs! {
-                            At::Title => addr
-                        }),
-                        if i > 0 { ", " } else { "" },
-                        name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown))
-                    ]
-                })
-            ])
+                cc_addrs
+            ]),
+            IF!(show_x_original_to => div![
+                C!["text-xs"],
+                span![
+                    C!["font-semibold"],
+                    "Original To: "
+                ],
+                span![
+                    msg.x_original_to.as_ref().map(|to| {
+                        let ShowThreadQueryThreadOnEmailThreadMessagesXOriginalTo { name, addr } = to;
+                        span![
+                            addr.as_ref().map(|addr| attrs! {
+                                At::Title => addr
+                            }),
+                            name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)),
+                            " ",
+                        ]
+                    })
+                ]
+            ]),
+            IF!(show_delivered_to => div![
+                C!["text-xs"],
+                span![
+                    C!["font-semibold"],
+                    "Delivered To: "
+                ],
+                span![
+                    msg.delivered_to.as_ref().map(|to| {
+                        let ShowThreadQueryThreadOnEmailThreadMessagesDeliveredTo { name, addr } = to;
+                        span![
+                            addr.as_ref().map(|addr| attrs! {
+                                At::Title => addr
+                            }),
+                            name.as_ref().unwrap_or_else(|| addr.as_ref().unwrap_or(&unknown)),
+                            " ",
+                        ]
+                    })
+                ]
+            ]),
         ],
         span![
             C!["text-right"],
@@ -656,6 +941,13 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod
 
 fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node<Msg> {
     let expand_id = msg.id.clone();
+    let from = match &msg.from {
+        Some(ShowThreadQueryThreadOnEmailThreadMessagesFrom {
+            addr: Some(addr), ..
+        }) => Some(addr.to_string()),
+        _ => None,
+    };
+    let from = from.map(|f| f.replace('.', "-").replace('@', "-"));
     div![
         C!["lg:mb-4"],
         div![
@@ -675,7 +967,7 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool)
         ],
         IF!(open =>
         div![
-            C!["bg-white", "text-black", "p-4", "min-w-full", "w-0","overflow-x-auto"],
+            C!["bg-white", "text-black", "p-4", "min-w-full", "w-0","overflow-x-auto", from],
             match &msg.body {
                 ShowThreadQueryThreadOnEmailThreadMessagesBody::UnhandledContentType(
                     ShowThreadQueryThreadOnEmailThreadMessagesBodyOnUnhandledContentType { contents ,content_tree},
@@ -779,11 +1071,13 @@ fn render_attachements(
     ]
 }
 
+// TODO: add cathup_mode:bool and hide elements when true
 #[topo::nested]
 fn thread(
     thread: &ShowThreadQueryThreadOnEmailThread,
     open_messages: &HashSet<String>,
     content_el: &ElRef<HtmlElement>,
+    catchup_mode: bool,
 ) -> Node<Msg> {
     // TODO(wathiede): show per-message subject if it changes significantly from top-level subject
     let subject = if thread.subject.is_empty() {
@@ -810,17 +1104,25 @@ fn thread(
     let unread_thread_id = thread.thread_id.clone();
     let spam_add_thread_id = thread.thread_id.clone();
     let spam_unread_thread_id = thread.thread_id.clone();
+    let mut title_break = None;
+    const TITLE_LENGTH_WRAP_LIMIT: usize = 40;
+    for w in subject.split_whitespace() {
+        if w.len() > TITLE_LENGTH_WRAP_LIMIT {
+            title_break = Some(C!["break-all", "text-pretty"]);
+        }
+    }
     div![
-        C!["lg:p-4"],
+        C!["lg:p-4", "max-w-4xl"],
         div![
             C!["p-4", "lg:p-0"],
-            h3![C!["text-xl"], subject],
+            h3![C!["text-xl"], title_break, subject],
             span![removable_tags_chiclet(&thread.thread_id, &tags)],
-            div![
+            IF!(!catchup_mode => div![
                 C!["pt-4", "gap-2", "flex", "justify-around"],
                 div![
                     button![
-                        C![&tw_classes::BUTTON, "rounded-r-none"],
+                        tw_classes::button(),
+                        C!["rounded-r-none"],
                         attrs! {At::Title => "Mark as read"},
                         span![i![C!["far", "fa-envelope-open"]]],
                         span![C!["pl-2"], "Read"],
@@ -830,7 +1132,8 @@ fn thread(
                         ])),
                     ],
                     button![
-                        C![&tw_classes::BUTTON, "rounded-l-none"],
+                        tw_classes::button(),
+                        C!["rounded-l-none"],
                         attrs! {At::Title => "Mark as unread"},
                         span![i![C!["far", "fa-envelope"]]],
                         span![C!["pl-2"], "Unread"],
@@ -841,7 +1144,8 @@ fn thread(
                     ],
                 ],
                 div![button![
-                    C![&tw_classes::BUTTON, "text-red-500"],
+                    tw_classes::button(),
+                    C!["text-red-500"],
                     attrs! {At::Title => "Spam"},
                     span![i![C!["far", "fa-hand"]]],
                     span![C!["pl-2"], "Spam"],
@@ -851,13 +1155,13 @@ fn thread(
                         Msg::GoToSearchResults
                     ])),
                 ]]
-            ],
+            ]),
         ],
         div![
             C!["lg:mt-4", "mail-thread"],
             el_ref(content_el),
             messages,
-            click_to_top()
+            IF!(!catchup_mode => click_to_top())
         ],
         /* TODO(wathiede): plumb in orignal id
         a![
@@ -907,7 +1211,7 @@ fn view_header(
         C!["flex", "px-4", "pt-4", "overflow-hidden"],
         a![
             C![IF![is_error => "bg-red-500"], "rounded-r-none"],
-            C![&tw_classes::BUTTON],
+            tw_classes::button(),
             span![i![C![
                 "fa-solid",
                 "fa-arrow-rotate-right",
@@ -916,7 +1220,7 @@ fn view_header(
             ev(Ev::Click, |_| Msg::RefreshStart),
         ],
         a![
-            C![&tw_classes::BUTTON],
+            tw_classes::button(),
             C!["px-4", "rounded-none"],
             attrs! {
                 At::Href => urls::search(unread_query(), 0)
@@ -924,7 +1228,7 @@ fn view_header(
             "Unread",
         ],
         a![
-            C![&tw_classes::BUTTON],
+            tw_classes::button(),
             C!["px-4", "rounded-none"],
             attrs! {
                 At::Href => urls::search("", 0)
@@ -949,8 +1253,13 @@ fn view_header(
     ]
 }
 
-pub fn tags(model: &Model) -> Node<Msg> {
-    fn view_tag(display_name: &str, indent: usize, t: &Tag, search_unread: bool) -> Node<Msg> {
+pub fn view_tags(tags: &Option<Vec<Tag>>) -> Node<Msg> {
+    fn inner_view_tag(
+        display_name: &str,
+        indent: usize,
+        t: &Tag,
+        search_unread: bool,
+    ) -> Node<Msg> {
         // Hacky, but necessary for tailwind to see all the classes we're using
         let indent_cls = match indent {
             0 => "",
@@ -991,11 +1300,7 @@ pub fn tags(model: &Model) -> Node<Msg> {
                 ],
                 IF!(t.unread>0 => format!("{}", t.unread))
             ],
-            ev(Ev::Click, |_| {
-                // Scroll window to the top when searching for a tag.
-                info!("scrolling to the top because you clicked a tag");
-                web_sys::window().unwrap().scroll_to_with_x_and_y(0., 0.);
-            })
+            ev(Ev::Click, |_| { Msg::ScrollToTop })
         ]
     }
     fn matches(a: &[&str], b: &[&str]) -> usize {
@@ -1003,7 +1308,10 @@ pub fn tags(model: &Model) -> Node<Msg> {
             .take_while(|(a, b)| a == b)
             .count()
     }
-    fn view_tags<'a>(tags: impl Iterator<Item = &'a Tag>, search_unread: bool) -> Vec<Node<Msg>> {
+    fn inner_view_tags<'a>(
+        tags: impl Iterator<Item = &'a Tag>,
+        search_unread: bool,
+    ) -> Vec<Node<Msg>> {
         let mut tag_els = Vec::new();
         let mut last = Vec::new();
         for t in tags {
@@ -1013,7 +1321,7 @@ pub fn tags(model: &Model) -> Node<Msg> {
                 // Synthesize fake tags for proper indenting.
                 for i in n..parts.len() - 1 {
                     let display_name = parts[n];
-                    tag_els.push(view_tag(
+                    tag_els.push(inner_view_tag(
                         &display_name,
                         n,
                         &Tag {
@@ -1027,13 +1335,12 @@ pub fn tags(model: &Model) -> Node<Msg> {
                 n = parts.len() - 1;
             }
             let display_name = parts[n];
-            tag_els.push(view_tag(&display_name, n, t, search_unread));
+            tag_els.push(inner_view_tag(&display_name, n, t, search_unread));
             last = parts;
         }
         tag_els
     }
-    let mut unread = model
-        .tags
+    let mut unread = tags
         .as_ref()
         .map(|tags| tags.iter().filter(|t| t.unread > 0).collect())
         .unwrap_or(Vec::new());
@@ -1054,7 +1361,7 @@ pub fn tags(model: &Model) -> Node<Msg> {
     aside![
         C!["p-2"],
         IF!(!unread.is_empty() => p![C!["uppercase", "font-bold"], "Unread"]),
-        IF!(!unread.is_empty() => div![C!["flex","flex-col"], view_tags(unread.into_iter(), true)]),
+        IF!(!unread.is_empty() => div![C!["flex","flex-col"], inner_view_tags(unread.into_iter(), true)]),
         p![
             span![C!["uppercase", "font-bold", "pr-2"], "Tags"],
             IF!(!force_tags_open =>
@@ -1069,11 +1376,17 @@ pub fn tags(model: &Model) -> Node<Msg> {
             tags_open.on_click(|t| *t = !*t)
         ],
         div![
-            IF!(force_tags_open||tags_open.get() => model.tags.as_ref().map(|tags| view_tags(tags.iter(),false))),
+            IF!(force_tags_open||tags_open.get() => tags.as_ref().map(|t| inner_view_tags(t.iter(),false))),
         ]
     ]
 }
-fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElement>) -> Node<Msg> {
+
+// TODO: add cathup_mode:bool and hide elements when true
+fn news_post(
+    post: &ShowThreadQueryThreadOnNewsPost,
+    content_el: &ElRef<HtmlElement>,
+    catchup_mode: bool,
+) -> Node<Msg> {
     let subject = &post.title;
     set_title(subject);
     let read_thread_id = post.thread_id.clone();
@@ -1098,17 +1411,25 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
         ]
     }
 
+    let mut title_break = None;
+    const TITLE_LENGTH_WRAP_LIMIT: usize = 40;
+    for w in subject.split_whitespace() {
+        if w.len() > TITLE_LENGTH_WRAP_LIMIT {
+            title_break = Some(C!["break-all", "text-pretty"]);
+        }
+    }
     div![
         C!["lg:p-4", "max-w-4xl"],
         div![
             C!["p-4", "lg:p-0"],
-            h3![C!["text-xl"], subject],
+            h3![C!["text-xl"], title_break, subject],
             span![tag(format!("News/{}", post.slug))],
-            div![
+            IF!(!catchup_mode => div![
                 C!["pt-4", "gap-2", "flex", "justify-around"],
                 div![
                     button![
-                        C![&tw_classes::BUTTON, "rounded-r-none"],
+                        tw_classes::button(),
+                        C!["rounded-r-none"],
                         attrs! {At::Title => "Mark as read"},
                         span![i![C!["far", "fa-envelope-open"]]],
                         span![C!["pl-2"], "Read"],
@@ -1118,7 +1439,8 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
                         ])),
                     ],
                     button![
-                        C![&tw_classes::BUTTON, "rounded-l-none"],
+                        tw_classes::button(),
+                        C!["rounded-l-none"],
                         attrs! {At::Title => "Mark as unread"},
                         span![i![C!["far", "fa-envelope"]]],
                         span![C!["pl-2"], "Unread"],
@@ -1130,7 +1452,7 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
                 ],
                 // Placeholder for symmetry with email view that has Spam button
                 div![],
-            ],
+            ]),
         ],
         div![
             C!["lg:mt-4"],
@@ -1150,12 +1472,11 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, content_el: &ElRef<HtmlElem
                 raw![&post.body]
             ]
         ],
-        click_to_top(),
+        IF!(!catchup_mode => click_to_top()),
     ]
 }
 fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg> {
     let from = &post.site;
-    // TODO: move avatar/favicon stuff to the server side and and come up with a solution for emails
     let id = post.thread_id.clone();
     let is_unread = !post.is_read;
     let url = &post.url;
@@ -1193,7 +1514,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
                 div![
                     C!["flex", "gap-2", "pt-2", "text-sm"],
                     a![
-                        C![&tw_classes::BUTTON],
+                        tw_classes::button(),
                         attrs! {
                             At::Href => post.url,
                             At::Target => "_blank",
@@ -1202,7 +1523,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
                         i![C!["fas", "fa-up-right-from-square"]],
                     ],
                     a![
-                        C![&tw_classes::BUTTON],
+                        tw_classes::button(),
                         attrs! {
                             At::Href => add_archive_url,
                             At::Target => "_blank",
@@ -1211,7 +1532,7 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
                         i![C!["fas", "fa-plus"]],
                     ],
                     a![
-                        C![&tw_classes::BUTTON],
+                        tw_classes::button(),
                         attrs! {
                             At::Href => view_archive_url,
                             At::Target => "_blank",
@@ -1244,7 +1565,6 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
 }
 fn reading_progress(ratio: f64) -> Node<Msg> {
     let percent = ratio * 100.;
-    info!("percent {percent}");
     div![
         C![
             "fixed",
@@ -1263,8 +1583,7 @@ fn reading_progress(ratio: f64) -> Node<Msg> {
         ]
     ]
 }
-pub fn versions(versions: &crate::state::Version) -> Node<Msg> {
-    debug!("versions {versions:?}");
+pub fn view_versions(versions: &Version) -> Node<Msg> {
     aside![
         C!["p-2"],
         p![C!["uppercase", "font-bold"], "Versions"],
@@ -1279,11 +1598,10 @@ pub fn versions(versions: &crate::state::Version) -> Node<Msg> {
 
 fn click_to_top() -> Node<Msg> {
     button![
-        C![&tw_classes::BUTTON, "bg-red-500", "lg:m-0", "m-4"],
+        tw_classes::button_with_color("bg-red-500", "hover:bg-neutral-700"),
+        C!["lg:m-0", "m-4"],
         span!["Top"],
         span![i![C!["fas", "fa-arrow-turn-up"]]],
-        ev(Ev::Click, |_| web_sys::window()
-            .unwrap()
-            .scroll_to_with_x_and_y(0., 0.))
+        ev(Ev::Click, |_| Msg::ScrollToTop)
     ]
 }

web/static/overrides.css

@@ -1,18 +1,18 @@
 html {
-    background-color: black;
+  background-color: black;
 }
 
 .mail-thread a,
 .news-post a {
-    color: var(--color-link) !important;
-    text-decoration: underline;
+  color: var(--color-link) !important;
+  text-decoration: underline;
 }
 
 .mail-thread br,
 .news-post br {
-    display: block;
-    margin-top: 1em;
-    content: " ";
+  display: block;
+  margin-top: 1em;
+  content: " ";
 }
 
 .mail-thread h1,
@@ -23,47 +23,61 @@ html {
 .news-post h2,
 .news-post h3,
 .news-post h4 {
-    margin-top: 1em !important;
-    margin-bottom: 1em !important;
+  margin-top: 1em !important;
+  margin-bottom: 1em !important;
 }
 
 .mail-thread p,
 .news-post p {
-    margin-bottom: 1em;
+  margin-bottom: 1em;
 }
 
 .mail-thread pre,
+.news-post pre {
+  font-family: monospace;
+  background-color: #eee !important;
+  padding: 0.5em;
+  white-space: break-spaces;
+}
+
 .mail-thread code,
-.news-post pre,
 .news-post code {
-    font-family: monospace;
-    background-color: #eee !important;
-    padding: 0.5em !important;
+  font-family: monospace;
+  white-space: break-spaces;
 }
 
 .mail-thread blockquote {
-    padding-left: 1em;
-    border-left: 2px solid #ddd;
+  padding-left: 1em;
+  border-left: 2px solid #ddd;
 }
 
 .mail-thread ol,
 .mail-thread ul {
-    margin-left: 2em;
+  margin-left: 2em;
+}
+
+.mail-thread .noreply-news-bloomberg-com a {
+  background-color: initial !important;
+}
+
+.mail-thread .noreply-news-bloomberg-com h2 {
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 /* Hackaday figures have unreadable black on dark grey */
 .news-post figcaption.wp-caption-text {
-    background-color: initial !important;
+  background-color: initial !important;
 }
 
 .news-post.site-nautilus .article-ad,
 .news-post.site-nautilus .primis-ad {
-    display: none !important;
+  display: none !important;
 }
 
 .news-post.site-slashdot .story-byline {
-    display: block !important;
-    height: initial !important;
-    overflow: auto !important;
-    position: static !important;
-}
+  display: block !important;
+  height: initial !important;
+  overflow: auto !important;
+  position: static !important;
+}