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

@@ -144,7 +144,11 @@ blockquote[type="cite"],
   padding: 0.25em 0.5em;
 }
 .tags-menu .tag-indent {
-  padding-left: 1em;
+  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(),
             );
@@ -1240,12 +1243,16 @@ fn view_desktop(model: &Model) -> Node<Msg> {
             attrs! {
                 At::Href => urls::search(&format!("tag:{}", t.name), 0)
             },
-            style! {
-                St::BackgroundColor => t.bg_color,
-                St::Color => t.fg_color,
-            },
             (0..indent).map(|_| span![C!["tag-indent"], ""]),
-            display_name
+            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 {
@@ -1253,46 +1260,55 @@ fn view_desktop(model: &Model) -> Node<Msg> {
             .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| {
+            ul![C!["menu-list"], read.map(view_tag_list)]
-                    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(),
-                                    },
-                                ));
-                            }
-                            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
-                })
-            ]
         ],
         div![
             view_header(&model.query, &model.refreshing_state),