From 3ac50957764af496fb287716a45d46a256f273d4 Mon Sep 17 00:00:00 2001
From: Romain de Laage <romain.delaage@rdelaage.ovh>
Date: Wed, 20 Jul 2022 18:24:33 +0200
Subject: [PATCH] Highlight categories with unread entries

---
 storage/category.go                      | 6 ++++--
 template/templates/views/categories.html | 2 +-
 ui/static/css/common.css                 | 7 +++++++
 ui/static/css/dark.css                   | 4 ++++
 ui/static/css/light.css                  | 4 ++++
 ui/static/css/system.css                 | 4 ++++
 6 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/storage/category.go b/storage/category.go
index 8c2ce734..ccf61988 100644
--- a/storage/category.go
+++ b/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)
diff --git a/template/templates/views/categories.html b/template/templates/views/categories.html
index 8e593474..41610bb5 100644
--- a/template/templates/views/categories.html
+++ b/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>
diff --git a/ui/static/css/common.css b/ui/static/css/common.css
index 0003d98a..23c87842 100644
--- a/ui/static/css/common.css
+++ b/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 {
diff --git a/ui/static/css/dark.css b/ui/static/css/dark.css
index b83e8d1b..8e9a7c71 100644
--- a/ui/static/css/dark.css
+++ b/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;
diff --git a/ui/static/css/light.css b/ui/static/css/light.css
index 831b1eed..d56e62fd 100644
--- a/ui/static/css/light.css
+++ b/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;
diff --git a/ui/static/css/system.css b/ui/static/css/system.css
index c9f99a1e..84f9e067 100644
--- a/ui/static/css/system.css
+++ b/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;