Highlight categories with unread entries

storage/category.go

@@ -122,11 +122,13 @@ func (s *Storage) CategoriesWithFeedCount(userID int64) (model.Categories, error
 			(SELECT count(*)
 			   FROM feeds
 			     JOIN entries ON (feeds.id = entries.feed_id)
-			   WHERE feeds.category_id = c.id AND entries.status = 'unread')
+			   WHERE feeds.category_id = c.id AND entries.status = 'unread') AS count_unread
 		FROM categories c
 		WHERE
 			user_id=$1
-		ORDER BY c.title ASC
+		ORDER BY
+			count_unread DESC,
+			c.title ASC
 	`
 
 	rows, err := s.db.Query(query, userID)

template/templates/views/categories.html

@@ -15,7 +15,7 @@
 {{ else }}
     <div class="items">
         {{ range .categories }}
-        <article role="article" class="item">
+        <article role="article" class="item{{if gt .TotalUnread 0 }} category-has-unread{{end}}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     <a href="{{ route "categoryEntries" "categoryID" .ID }}">{{ .Title }}</a>

ui/static/css/common.css

@@ -785,6 +785,13 @@ article.feed-has-unread {
     cursor: pointer;
 }
 
+/* Categories list */
+article.category-has-unread {
+    background-color: var(--category-has-unread-background-color);
+    border-style: var(--category-has-unread-border-style);
+    border-color: var(--category-has-unread-border-color);
+}
+
 /* Icons */
 .icon,
 .icon-label {

ui/static/css/dark.css

@@ -108,6 +108,10 @@
     --feed-has-unread-border-style: solid;
     --feed-has-unread-border-color: rgb(33 57 76);
 
+    --category-has-unread-background-color: #1b1a1a;
+    --category-has-unread-border-style: solid;
+    --category-has-unread-border-color: rgb(33 57 76);
+
     --keyboard-shortcuts-li-color: #9b9b9b;
 
     --counter-color: #bbb;

ui/static/css/light.css

@@ -108,6 +108,10 @@
     --feed-has-unread-border-style: solid;
     --feed-has-unread-border-color: #bee6bc;
 
+    --category-has-unread-background-color: #dfd;
+    --category-has-unread-border-style: solid;
+    --category-has-unread-border-color: #bee6bc;
+
     --keyboard-shortcuts-li-color: #333;
 
     --counter-color: #666;

ui/static/css/system.css

@@ -107,6 +107,10 @@
     --feed-has-unread-border-style: solid;
     --feed-has-unread-border-color: #bee6bc;
 
+    --category-has-unread-background-color: #dfd;
+    --category-has-unread-border-style: solid;
+    --category-has-unread-border-color: #bee6bc;
+
     --keyboard-shortcuts-li-color: #333;
 
     --counter-color: #666;