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,14 +1260,7 @@ fn view_desktop(model: &Model) -> Node<Msg> {
             .take_while(|(a, b)| a == b)
             .count()
     }
-    div![
+    fn view_tag_list<'a>(tags: impl Iterator<Item = &'a Tag>) -> Vec<Node<Msg>> {
-        C!["desktop-main-content"],
-        aside![
-            C!["tags-menu", "menu"],
-            p![C!["menu-label"], "Tags"],
-            ul![
-                C!["menu-list"],
-                model.tags.as_ref().map(|tags| {
         let mut lis = Vec::new();
         let mut last = Vec::new();
         for t in tags {
@@ -1280,6 +1280,7 @@ fn view_desktop(model: &Model) -> Node<Msg> {
                             name: parts[..i + 1].join("/"),
                             bg_color: "#000".to_string(),
                             fg_color: "#fff".to_string(),
+                            unread: 0,
                         },
                     ));
                 }
@@ -1291,8 +1292,23 @@ fn view_desktop(model: &Model) -> Node<Msg> {
             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"], "Unread"],
+            ul![C!["menu-list"], unread.map(view_tag_list)],
+            p![C!["menu-label"], "Read"],
+            ul![C!["menu-list"], read.map(view_tag_list)]
         ],
         div![
             view_header(&model.query, &model.refreshing_state),