Highlight and sort feeds with unread entries in feeds list

storage/feed.go

@@ -9,12 +9,27 @@ import (
 	"errors"
 	"fmt"
 	"runtime"
+	"sort"
 
 	"miniflux.app/config"
 	"miniflux.app/logger"
 	"miniflux.app/model"
 )
 
+type byStateAndName struct{ f model.Feeds }
+
+func (l byStateAndName) Len() int      { return len(l.f) }
+func (l byStateAndName) Swap(i, j int) { l.f[i], l.f[j] = l.f[j], l.f[i] }
+func (l byStateAndName) Less(i, j int) bool {
+	if l.f[i].UnreadCount > 0 && l.f[j].UnreadCount == 0 {
+		return true
+	} else if l.f[i].UnreadCount == 0 && l.f[j].UnreadCount > 0 {
+		return false
+	} else {
+		return l.f[i].Title < l.f[j].Title
+	}
+}
+
 // FeedExists checks if the given feed exists.
 func (s *Storage) FeedExists(userID, feedID int64) bool {
 	var result bool
@@ -121,13 +136,22 @@ func (s *Storage) Feeds(userID int64) (model.Feeds, error) {
 	return builder.GetFeeds()
 }
 
+func getFeedsSorted(builder *FeedQueryBuilder) (model.Feeds, error) {
+	result, err := builder.GetFeeds()
+	if err == nil {
+		sort.Sort(byStateAndName{result})
+		return result, nil
+	}
+	return result, err
+}
+
 // FeedsWithCounters returns all feeds of the given user with counters of read and unread entries.
 func (s *Storage) FeedsWithCounters(userID int64) (model.Feeds, error) {
 	builder := NewFeedQueryBuilder(s, userID)
 	builder.WithCounters()
 	builder.WithOrder(model.DefaultFeedSorting)
 	builder.WithDirection(model.DefaultFeedSortingDirection)
-	return builder.GetFeeds()
+	return getFeedsSorted(builder)
 }
 
 // FeedsByCategoryWithCounters returns all feeds of the given user/category with counters of read and unread entries.
@@ -137,7 +161,7 @@ func (s *Storage) FeedsByCategoryWithCounters(userID, categoryID int64) (model.F
 	builder.WithCounters()
 	builder.WithOrder(model.DefaultFeedSorting)
 	builder.WithDirection(model.DefaultFeedSortingDirection)
-	return builder.GetFeeds()
+	return getFeedsSorted(builder)
 }
 
 // WeeklyFeedEntryCount returns the weekly entry count for a feed.

template/templates/common/feed_list.html

@@ -1,7 +1,7 @@
 {{ define "feed_list" }}
     <div class="items">
         {{ range .feeds }}
-        <article class="item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ end }}">
+        <article class="item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ else if ne .UnreadCount 0 }}feed-has-unread{{ end }}">
             <div class="item-header" dir="auto">
                 <span class="item-title">
                     {{ if and (.Icon) (gt .Icon.IconID 0) }}

ui/static/css/common.css

@@ -749,6 +749,12 @@ article.feed-parsing-error {
     border-color: #aaa;
 }
 
+article.feed-has-unread {
+    background-color: var(--feed-has-unread-background-color);
+    border-style: var(--feed-has-unread-border-style);
+    border-color: var(--feed-has-unread-border-color);
+}
+
 .parsing-error {
     font-size: 0.85em;
     margin-top: 2px;

ui/static/css/dark.css

@@ -101,6 +101,9 @@
 
     --parsing-error-color: #eee;
     --feed-parsing-error-background-color: #343434;
+    --feed-has-unread-background-color: #1b1a1a;
+    --feed-has-unread-border-style: solid;
+    --feed-has-unread-border-color: rgba(82, 168, 236, 0.6);
 
     --keyboard-shortcuts-li-color: #9b9b9b;
 

ui/static/css/light.css

@@ -101,6 +101,9 @@
 
     --parsing-error-color: #333;
     --feed-parsing-error-background-color: #fcf8e3;
+    --feed-has-unread-background-color: #dfd;
+    --feed-has-unread-border-style: dotted;
+    --feed-has-unread-border-color: var(--entry-header-border-color);
 
     --keyboard-shortcuts-li-color: #333;
 

ui/static/css/system.css

@@ -100,6 +100,9 @@
 
     --parsing-error-color: #333;
     --feed-parsing-error-background-color: #fcf8e3;
+    --feed-has-unread-background-color: #dfd;
+    --feed-has-unread-border-style: dotted;
+    --feed-has-unread-border-color: var(--entry-header-border-color);
 
     --keyboard-shortcuts-li-color: #333;
 
@@ -208,6 +211,9 @@
 
         --parsing-error-color: #eee;
         --feed-parsing-error-background-color: #343434;
+        --feed-has-unread-background-color: #1b1a1a;
+        --feed-has-unread-border-style: solid;
+        --feed-has-unread-border-color: rgba(82, 168, 236, 0.6);
 
         --keyboard-shortcuts-li-color: #9b9b9b;