web: change tag list styling and show unread at the top

web/graphql/front_page.graphql

@@ -19,5 +19,6 @@ query FrontPageQuery($query: String!, $after: String $before: String, $first: In
     name
     bgColor
     fgColor
+    unread
   }
 }

web/graphql/show_thread.graphql

@@ -37,5 +37,6 @@ query ShowThreadQuery($threadId: String!) {
     name
     bgColor
     fgColor
+    unread
   }
 }

web/index.html

@@ -143,6 +143,13 @@ blockquote[type="cite"],
 .tags-menu .menu-list a {
   padding: 0.25em 0.5em;
 }
+.tags-menu .tag-indent {
+  padding-left: .5em;
+}
+.tags-menu .tag-tag {
+  margin-left: -1em;
+  padding-right: .25em;
+}
 .navbar {
   border: none;
 }

web/src/lib.rs

@@ -180,6 +180,7 @@ struct Tag {
     name: String,
     bg_color: String,
     fg_color: String,
+    unread: i64,
 }
 
 #[derive(Debug, PartialEq)]
@@ -394,6 +395,7 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                         name: t.name,
                         bg_color: t.bg_color,
                         fg_color: t.fg_color,
+                        unread: t.unread,
                     })
                     .collect(),
             );
@@ -425,6 +427,7 @@ fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
                         name: t.name,
                         bg_color: t.bg_color,
                         fg_color: t.fg_color,
+                        unread: t.unread,
                     })
                     .collect(),
             );
@@ -1039,7 +1042,7 @@ fn view_thread(thread: &ShowThreadQueryThread) -> Node<Msg> {
             /* TODO(wathiede): collect all the attachments from all the subparts */
             msg.from
                 .as_ref()
-                .map(|from| div![C!["header"], "From: ", view_addresses(&[from])]),
+                .map(|from| div![C!["header"], "From: ", view_address(&from)]),
             msg.timestamp
                 .map(|ts| div![C!["header"], "Date: ", human_age(ts)]),
             IF!(!msg.to.is_empty() => div![C!["header"], "To: ", view_addresses(&msg.to)]),
@@ -1235,24 +1238,77 @@ fn view_desktop(model: &Model) -> Node<Msg> {
             pager,
         } => view_search_results(&query, results.as_slice(), *count, pager),
     };
+    fn view_tag_li(display_name: &str, indent: usize, t: &Tag) -> Node<Msg> {
+        li![a![
+            attrs! {
+                At::Href => urls::search(&format!("tag:{}", t.name), 0)
+            },
+            (0..indent).map(|_| span![C!["tag-indent"], ""]),
+            i![
+                C!["tag-tag", "fa-solid", "fa-tag"],
+                style! {
+                    //"--fa-primary-color" => t.fg_color,
+                    St::Color => t.bg_color,
+                },
+            ],
+            display_name,
+            IF!(t.unread>0 => format!(" ({})", t.unread))
+        ]]
+    }
+    fn matches(a: &[&str], b: &[&str]) -> usize {
+        std::iter::zip(a.iter(), b.iter())
+            .take_while(|(a, b)| a == b)
+            .count()
+    }
+    fn view_tag_list<'a>(tags: impl Iterator<Item = &'a Tag>) -> Vec<Node<Msg>> {
+        let mut lis = Vec::new();
+        let mut last = Vec::new();
+        for t in tags {
+            let parts: Vec<_> = t.name.split('/').collect();
+            let mut n = matches(&last, &parts);
+            if t.name.starts_with("ZZCrap/Free") {
+                info!("n: {n}, parts: {parts:?} last: {last:?}");
+            }
+            if n <= parts.len() - 2 && parts.len() > 1 {
+                // Synthesize fake tags for proper indenting.
+                for i in n..parts.len() - 1 {
+                    let display_name = parts[n];
+                    lis.push(view_tag_li(
+                        &display_name,
+                        n,
+                        &Tag {
+                            name: parts[..i + 1].join("/"),
+                            bg_color: "#000".to_string(),
+                            fg_color: "#fff".to_string(),
+                            unread: 0,
+                        },
+                    ));
+                }
+                last = parts[..parts.len() - 1].to_vec();
+                n = parts.len() - 1;
+            }
+            let display_name = parts[n];
+            lis.push(view_tag_li(&display_name, n, t));
+            last = parts;
+        }
+        lis
+    }
+    let unread = model
+        .tags
+        .as_ref()
+        .map(|tags| tags.iter().filter(|t| t.unread > 0));
+    let read = model
+        .tags
+        .as_ref()
+        .map(|tags| tags.iter().filter(|t| t.unread == 0));
     div![
         C!["desktop-main-content"],
         aside![
             C!["tags-menu", "menu"],
-            p![C!["menu-label"], "Tags"],
+            p![C!["menu-label"], "Unread"],
-            ul![
+            ul![C!["menu-list"], unread.map(view_tag_list)],
-                C!["menu-list"],
+            p![C!["menu-label"], "Read"],
-                model.tags.as_ref().map(|tags| tags.iter().map(|t| li![a![
+            ul![C!["menu-list"], read.map(view_tag_list)]
-                    attrs! {
-                        At::Href => urls::search(&format!("tag:{}", t.name), 0)
-                    },
-                    style! {
-                        St::BackgroundColor => t.bg_color,
-                        St::Color => t.fg_color,
-                    },
-                    &t.name
-                ]]))
-            ]
         ],
         div![
             view_header(&model.query, &model.refreshing_state),