show current unread counter on headlines toolbar if sidebar is hidden

classes/feeds.php

@@ -51,7 +51,9 @@ class Feeds extends Handler_Protected {
 		if ($error)
 			$reply .= " <i title=\"" . htmlspecialchars($error) . "\" class='material-icons icon-error'>error</i>";
 
-		$reply .= "</span></span>";
+		$reply .= "</span>";
+		$reply .= "<span id='feed_current_unread' style='display: none'></span>";
+		$reply .= "</span>";
 
 		$reply .= "<span class=\"right\">";
 		$reply .= "<span id='selected_prompt'></span>";

css/default.css

@@ -866,12 +866,22 @@ body.ttrss_main .dijitDialog h3:first-of-type,
 body.ttrss_main .dijitDialog h4:first-of-type {
   margin-top: 0px;
 }
-body.ttrss_main i.icon-syndicate {
+body.ttrss_main #toolbar-headlines i.icon-syndicate {
   color: #ff7c4b;
   margin-right: 8px;
   border: 1px solid #ff7c4b;
   border-radius: 4px;
 }
+body.ttrss_main #toolbar-headlines #feed_current_unread {
+  margin-left: 8px;
+  font-weight: bold;
+  text-align: center;
+  border: 1px solid #2a89bc;
+  color: white;
+  background: #2a89bc;
+  border-radius: 4px;
+  min-width: 23px;
+}
 body.ttrss_main i.icon-no-feed {
   opacity: 0.2;
 }

css/tt-rss.less

@@ -1025,11 +1025,23 @@ body.ttrss_main .dijitDialog {
 }
 
 body.ttrss_main {
-	i.icon-syndicate {
-		color : @color-published;
-		margin-right : 8px;
-		border : 1px solid @color-published;
-		border-radius : 4px;
+	#toolbar-headlines {
+		i.icon-syndicate {
+			color: @color-published;
+			margin-right: 8px;
+			border: 1px solid @color-published;
+			border-radius: 4px;
+		}
+		#feed_current_unread {
+			margin-left : 8px;
+			font-weight : bold;
+			text-align : center;
+			border : 1px solid lighten(@color-accent, 5%);;
+			color : white;
+			background : lighten(@color-accent, 5%);
+			border-radius : 4px;
+			min-width : 23px;
+		}
 	}
 
 	i.icon-no-feed {

js/Feeds.js

@@ -93,6 +93,8 @@ define(["dojo/_base/declare"], function (declare) {
 				}
 			}
 
+			Headlines.updateCurrentUnread();
+
 			this.hideOrShowFeeds(App.getInitParam("hide_read_feeds"));
 			this._counters_prev = elems;
 
@@ -119,6 +121,8 @@ define(["dojo/_base/declare"], function (declare) {
 			Element.visible("feeds-holder") ? splitter.show() : splitter.hide();
 
 			dijit.byId("main").resize();
+
+			Headlines.updateCurrentUnread();
 		},
 		cancelSearch: function() {
 			this._search_query = "";

js/Headlines.js

@@ -546,6 +546,16 @@ define(["dojo/_base/declare"], function (declare) {
 
 			return tmp.firstChild;
 		},
+		updateCurrentUnread: function() {
+			const feed_unread = Feeds.getUnread(Feeds.getActive(), Feeds.activeIsCat());
+
+			if (feed_unread > 0 && !Element.visible("feeds-holder")) {
+				$("feed_current_unread").innerText = feed_unread;
+				Element.show("feed_current_unread");
+			} else {
+				Element.hide("feed_current_unread");
+			}
+		},
 		onLoaded: function (transport, offset, append) {
 			const reply = App.handleRpcJson(transport);
 
@@ -648,6 +658,8 @@ define(["dojo/_base/declare"], function (declare) {
 							"</span>";
 					}
 
+					Headlines.updateCurrentUnread();
+
 				} else if (headlines_count > 0 && feed_id == Feeds.getActive() && is_cat == Feeds.activeIsCat()) {
 					const c = dijit.byId("headlines-frame");
 

themes/night.css

@@ -867,12 +867,22 @@ body.ttrss_main .dijitDialog h3:first-of-type,
 body.ttrss_main .dijitDialog h4:first-of-type {
   margin-top: 0px;
 }
-body.ttrss_main i.icon-syndicate {
+body.ttrss_main #toolbar-headlines i.icon-syndicate {
   color: #ff7c4b;
   margin-right: 8px;
   border: 1px solid #ff7c4b;
   border-radius: 4px;
 }
+body.ttrss_main #toolbar-headlines #feed_current_unread {
+  margin-left: 8px;
+  font-weight: bold;
+  text-align: center;
+  border: 1px solid #cd8b31;
+  color: white;
+  background: #cd8b31;
+  border-radius: 4px;
+  min-width: 23px;
+}
 body.ttrss_main i.icon-no-feed {
   opacity: 0.2;
 }

themes/night_blue.css

@@ -867,12 +867,22 @@ body.ttrss_main .dijitDialog h3:first-of-type,
 body.ttrss_main .dijitDialog h4:first-of-type {
   margin-top: 0px;
 }
-body.ttrss_main i.icon-syndicate {
+body.ttrss_main #toolbar-headlines i.icon-syndicate {
   color: #ff7c4b;
   margin-right: 8px;
   border: 1px solid #ff7c4b;
   border-radius: 4px;
 }
+body.ttrss_main #toolbar-headlines #feed_current_unread {
+  margin-left: 8px;
+  font-weight: bold;
+  text-align: center;
+  border: 1px solid #2a89bc;
+  color: white;
+  background: #2a89bc;
+  border-radius: 4px;
+  min-width: 23px;
+}
 body.ttrss_main i.icon-no-feed {
   opacity: 0.2;
 }