web: make tag list hidable

web/src/lib.rs

@@ -13,6 +13,7 @@ use itertools::Itertools;
 use log::{debug, error, info, Level};
 use notmuch::{Content, Part, Thread, ThreadNode, ThreadSet};
 use seed::{prelude::*, *};
+use seed_hooks::{state_access::CloneState, topo, use_state, StateAccessEventHandlers};
 use serde::de::Deserialize;
 use thiserror::Error;
 use wasm_timer::Instant;
@@ -1201,6 +1202,7 @@ fn view_footer(render_time_ms: u128) -> Node<Msg> {
     ]
 }
 
+#[topo::nested]
 fn view_desktop(model: &Model) -> Node<Msg> {
     // Do two queries, one without `unread` so it loads fast, then a second with unread.
     let content = match &model.context {
@@ -1255,8 +1257,8 @@ fn view_desktop(model: &Model) -> Node<Msg> {
                         n,
                         &Tag {
                             name: parts[..i + 1].join("/"),
-                            bg_color: "#000".to_string(),
-                            fg_color: "#fff".to_string(),
+                            bg_color: "#fff".to_string(),
+                            fg_color: "#000".to_string(),
                             unread: 0,
                         },
                     ));
@@ -1278,16 +1280,31 @@ fn view_desktop(model: &Model) -> Node<Msg> {
         .tags
         .as_ref()
         .map(|tags| tags.iter().filter(|t| t.unread == 0));
+    let tags_open = use_state(|| false);
     div![
         C!["desktop-main-content"],
         aside![
             C!["tags-menu", "menu"],
             IF!(unread.is_some() => p![C!["menu-label"], "Unread"]),
             IF!(unread.is_some() => ul![C!["menu-list"], unread.map(view_tag_list)]),
-            p![C!["menu-label"], "Tags"],
+            p![
+                C!["menu-label"],
+                i![C![
+                    "fa-solid",
+                    if tags_open.get() {
+                        "fa-angle-up"
+                    } else {
+                        "fa-angle-down"
+                    }
+                ]],
+                " Tags",
+                ev(Ev::Click, move |_| {
+                    tags_open.set(!tags_open.get());
+                })
+            ],
             ul![
                 C!["menu-list"],
-                model.tags.as_ref().map(|tags| view_tag_list(tags.iter()))
+                IF!(tags_open.get() => model.tags.as_ref().map(|tags| view_tag_list(tags.iter()))),
             ]
         ],
         div![