web: more accurate reading progress bar

web/Cargo.toml

@@ -41,7 +41,9 @@ wasm-opt = ['-Os']
 version = "0.3.58"
 features = [
   "Clipboard",
+  "DomRect",
+  "Element",
   "MediaQueryList",
   "Navigator",
-  "Window"
+  "Window",
 ]

web/src/state.rs

@@ -4,6 +4,7 @@ use graphql_client::GraphQLQuery;
 use log::{error, info, warn};
 use seed::{prelude::*, *};
 use thiserror::Error;
+use web_sys::HtmlElement;
 
 use crate::{
     api,
@@ -39,9 +40,7 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
     // 'notmuch new' on the server periodically?
     orders.stream(streams::interval(30_000, || Msg::RefreshStart));
     orders.subscribe(on_url_changed);
-    orders.stream(streams::window_event(Ev::Scroll, |_| {
+    orders.stream(streams::window_event(Ev::Scroll, |_| Msg::WindowScrolled));
-        compute_scroll_ratio()
-    }));
 
     build_info::build_info!(fn bi);
     Model {
@@ -50,6 +49,7 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
         refreshing_state: RefreshingState::None,
         tags: None,
         read_completion_ratio: 0.,
+        content_el: ElRef::<HtmlElement>::default(),
         versions: Version {
             client: version,
             server: None,
@@ -521,6 +521,27 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                     .expect("failed to copy to clipboard");
             });
         }
+        Msg::WindowScrolled => {
+            if let Some(el) = model.content_el.get() {
+                let ih = window()
+                    .inner_height()
+                    .expect("window height")
+                    .unchecked_into::<js_sys::Number>()
+                    .value_of();
+
+                let r = el.get_bounding_client_rect();
+                info!(
+                    "window scrolled {}x{}@{},{}",
+                    r.width(),
+                    r.height(),
+                    r.x(),
+                    r.y(),
+                );
+                let end = r.height() - ih;
+                let y = -r.y();
+                orders.send_msg(Msg::SetProgress((y / end).max(0.)));
+            }
+        }
         Msg::SetProgress(ratio) => {
             model.read_completion_ratio = ratio;
         }
@@ -543,6 +564,7 @@ pub struct Model {
     pub refreshing_state: RefreshingState,
     pub tags: Option<Vec<Tag>>,
     pub read_completion_ratio: f64,
+    pub content_el: ElRef<HtmlElement>,
     pub versions: Version,
 }
 
@@ -647,6 +669,7 @@ pub enum Msg {
 
     CopyToClipboard(String),
 
+    WindowScrolled,
     SetProgress(f64),
     UpdateServerVersion(String),
 }

web/src/view/desktop.rs

@@ -16,11 +16,11 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
         Context::ThreadResult {
             thread: ShowThreadQueryThread::EmailThread(thread),
             open_messages,
-        } => view::thread(thread, open_messages, show_icon_text),
+        } => view::thread(thread, open_messages, show_icon_text, &model.content_el),
         Context::ThreadResult {
             thread: ShowThreadQueryThread::NewsPost(post),
             ..
-        } => view::news_post(post, show_icon_text),
+        } => view::news_post(post, show_icon_text, &model.content_el),
         Context::SearchResult {
             query,
             results,

web/src/view/mobile.rs

@@ -19,11 +19,11 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
         Context::ThreadResult {
             thread: ShowThreadQueryThread::EmailThread(thread),
             open_messages,
-        } => view::thread(thread, open_messages, show_icon_text),
+        } => view::thread(thread, open_messages, show_icon_text, &model.content_el),
         Context::ThreadResult {
             thread: ShowThreadQueryThread::NewsPost(post),
             ..
-        } => view::news_post(post, show_icon_text),
+        } => view::news_post(post, show_icon_text, &model.content_el),
         Context::SearchResult {
             query,
             results,

web/src/view/mod.rs

@@ -6,9 +6,10 @@ use std::{
 use chrono::{DateTime, Datelike, Duration, Local, Utc};
 use human_format::{Formatter, Scales};
 use itertools::Itertools;
-use log::{error, info};
+use log::{debug, error, info};
 use seed::{prelude::*, *};
 use seed_hooks::{state_access::CloneState, topo, use_state};
+use web_sys::HtmlElement;
 
 use crate::{
     api::urls,
@@ -795,6 +796,7 @@ fn thread(
     thread: &ShowThreadQueryThreadOnEmailThread,
     open_messages: &HashSet<String>,
     show_icon_text: bool,
+    content_el: &ElRef<HtmlElement>,
 ) -> Node<Msg> {
     // TODO(wathiede): show per-message subject if it changes significantly from top-level subject
     let subject = if thread.subject.is_empty() {
@@ -867,8 +869,7 @@ fn thread(
                 ],
             ],
         ],
-        messages,
+        div![el_ref(content_el), messages] /* TODO(wathiede): plumb in orignal id
-        /* TODO(wathiede): plumb in orignal id
                                            a![
                                            attrs! {At::Href=>api::original(&thread_node.0.as_ref().expect("message missing").id)},
                                            "Original"
@@ -1074,7 +1075,11 @@ pub fn tags(model: &Model) -> Node<Msg> {
         ]
     ]
 }
-fn news_post(post: &ShowThreadQueryThreadOnNewsPost, show_icon_text: bool) -> Node<Msg> {
+fn news_post(
+    post: &ShowThreadQueryThreadOnNewsPost,
+    show_icon_text: bool,
+    content_el: &ElRef<HtmlElement>,
+) -> Node<Msg> {
     // TODO(wathiede): show per-message subject if it changes significantly from top-level subject
     let subject = &post.title;
     set_title(subject);
@@ -1114,6 +1119,7 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, show_icon_text: bool) -> No
             div![C!["header"], render_news_post_header(&post)],
             div![
                 C!["body", "news-post", format!("site-{}", post.slug)],
+                el_ref(content_el),
                 raw![&post.body]
             ]
         ],
@@ -1190,7 +1196,7 @@ fn reading_progress(ratio: f64) -> Node<Msg> {
             "progress",
             "is-success",
             "is-small",
-            IF!(percent<5. => "is-invisible")
+            IF!(percent<1. => "is-invisible")
         ],
         attrs! {
             At::Value=>percent,
@@ -1200,7 +1206,7 @@ fn reading_progress(ratio: f64) -> Node<Msg> {
     ]
 }
 pub fn versions(versions: &crate::state::Version) -> Node<Msg> {
-    info!("versions {versions:?}");
+    debug!("versions {versions:?}");
     aside![
         C!["tags-menu", "menu"],
         p![C!["menu-label"], "Versions"],

web/src/view/tablet.rs

@@ -14,11 +14,11 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
         Context::ThreadResult {
             thread: ShowThreadQueryThread::EmailThread(thread),
             open_messages,
-        } => view::thread(thread, open_messages, show_icon_text),
+        } => view::thread(thread, open_messages, show_icon_text, &model.content_el),
         Context::ThreadResult {
             thread: ShowThreadQueryThread::NewsPost(post),
             ..
-        } => view::news_post(post, show_icon_text),
+        } => view::news_post(post, show_icon_text, &model.content_el),
         Context::SearchResult {
             query,
             results,

web/static/style.css

@@ -345,7 +345,12 @@ display: none;
 }
 
 progress.read-progress {
+  border-radius: 0;
   position: fixed;
   top: 0;
   z-index: 999;
 }
+
+progress.read-progress.is-small {
+  height: .25rem;
+}