web: highlight button for current search, bring back debug unread

web/src/view/mod.rs

@@ -12,7 +12,7 @@ use web_sys::{HtmlElement, HtmlInputElement};
 use crate::{
     api::urls,
     graphql::{front_page_query::*, show_thread_query::*},
-    state::{CatchupItem, Context, Model, Msg, RefreshingState, Tag, Version},
+    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
@@ -1210,13 +1210,18 @@ fn view_header(
         false
     };
     let query = Url::decode_uri_component(query).unwrap_or("".to_string());
+    let filter_all = String::new();
+    let filter_unread = unread_query().to_string();
+    let filter_news = "is:unread is:news".to_string();
+    let filter_mail = "is:unread is:mail".to_string();
+    let highlight_color = "bg-sky-800";
 
     nav![
         C!["flex", "flex-col"],
         div![
             C!["flex-auto", "flex"],
             button![
-                C![IF![is_error => "bg-red-500"], "rounded-none"],
+                C![IF!(is_error => "bg-red-500"), "rounded-none"],
                 tw_classes::button(),
                 span![i![C![
                     "fa-solid",
@@ -1226,35 +1231,35 @@ fn view_header(
                 ev(Ev::Click, |_| Msg::RefreshStart),
             ],
             button![
+                IF!(query == filter_all => C![highlight_color]),
                 tw_classes::button(),
                 C!["grow", "rounded-none"],
                 "All",
-                ev(Ev::Click, |_| Msg::SearchQuery(String::new())),
+                ev(Ev::Click, |_| Msg::SearchQuery(filter_all)),
             ],
             button![
+                IF!(query == filter_unread => C![highlight_color]),
                 tw_classes::button(),
                 C!["grow", "rounded-none"],
                 span![i![C!["far", "fa-envelope"]]],
                 " Unread",
-                ev(Ev::Click, |_| Msg::SearchQuery("is:unread".to_string())),
+                ev(Ev::Click, |_| Msg::SearchQuery(filter_unread)),
             ],
             button![
+                IF!(query == filter_news => C![highlight_color]),
                 tw_classes::button(),
                 C!["grow", "rounded-none"],
                 span![i![C!["far", "fa-envelope"]]],
                 " News",
-                ev(Ev::Click, |_| Msg::SearchQuery(
+                ev(Ev::Click, |_| Msg::SearchQuery(filter_news)),
-                    "is:unread is:news".to_string()
-                )),
             ],
             button![
+                IF!(query == filter_mail => C![highlight_color]),
                 tw_classes::button(),
                 C!["grow", "rounded-none"],
                 span![i![C!["far", "fa-envelope"]]],
                 " Mail",
-                ev(Ev::Click, |_| Msg::SearchQuery(
+                ev(Ev::Click, |_| Msg::SearchQuery(filter_mail)),
-                    "is:unread is:mail".to_string()
-                )),
             ],
         ],
         div![