web: add scrollbar for read progress

web/src/view/desktop.rs

@@ -5,7 +5,7 @@ use crate::{
     api::urls,
     graphql::show_thread_query::*,
     state::{Context, Model, Msg},
-    view::{self, view_header, view_search_results, view_tags},
+    view::{self, reading_progress, view_header, view_search_results, view_tags},
 };
 
 #[topo::nested]
@@ -40,6 +40,7 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
     };
     div![
         C!["main-content"],
+        reading_progress(model.read_completion_ratio),
         view_tags(model),
         div![
             view_header(&model.query, &model.refreshing_state),

web/src/view/mobile.rs

@@ -7,8 +7,8 @@ use crate::{
     graphql::{front_page_query::*, show_thread_query::*},
     state::{Context, Model, Msg},
     view::{
-        self, human_age, pretty_authors, search_toolbar, set_title, tags_chiclet, view_header,
-        view_tags,
+        self, human_age, pretty_authors, reading_progress, search_toolbar, set_title, tags_chiclet,
+        view_header, view_tags,
     },
 };
 
@@ -41,6 +41,7 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
         ),
     };
     div![
+        reading_progress(model.read_completion_ratio),
         view_header(&model.query, &model.refreshing_state),
         content,
         view_header(&model.query, &model.refreshing_state),

web/src/view/mod.rs

@@ -1117,12 +1117,14 @@ fn news_post(post: &ShowThreadQueryThreadOnNewsPost, show_icon_text: bool) -> No
                 C!["body", "news-post", format!("site-{}", post.slug)],
                 raw![&post.body]
             ]
-        ] /* TODO(wathiede): plumb in orignal id
-          a![
-          attrs! {At::Href=>api::original(&thread_node.0.as_ref().expect("message missing").id)},
-          "Original"
-          ],
-          */
+        ],
+        /* TODO(wathiede): plumb in orignal id
+        a![
+        attrs! {At::Href=>api::original(&thread_node.0.as_ref().expect("message missing").id)},
+        "Original"
+        ],
+        */
+        ev(Ev::Scroll, |e| info!("scroll event {e:?}"))
     ]
 }
 fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg> {
@@ -1181,3 +1183,20 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node<Msg>
         ]
     ]
 }
+fn reading_progress(ratio: f64) -> Node<Msg> {
+    let percent = ratio * 100.;
+    progress![
+        C![
+            "read-progress",
+            "progress",
+            "is-success",
+            "is-small",
+            IF!(percent<5. => "is-invisible")
+        ],
+        attrs! {
+            At::Value=>percent,
+            At::Max=>"100"
+        },
+        format!("{percent}%")
+    ]
+}

web/src/view/tablet.rs

@@ -4,7 +4,7 @@ use seed::{prelude::*, *};
 use crate::{
     graphql::show_thread_query::*,
     state::{Context, Model, Msg},
-    view::{self, view_header, view_search_results, view_tags},
+    view::{self, reading_progress, view_header, view_search_results, view_tags},
 };
 
 pub(super) fn view(model: &Model) -> Node<Msg> {
@@ -39,6 +39,7 @@ pub(super) fn view(model: &Model) -> Node<Msg> {
     div![
         C!["main-content"],
         div![
+            reading_progress(model.read_completion_ratio),
             view_header(&model.query, &model.refreshing_state),
             content,
             view_header(&model.query, &model.refreshing_state),