added badge to header for unread topics count

public/css/style.less

@@ -42,7 +42,7 @@ button, a {
 	vertical-align: 17%;
 }
 .nav .badge {
-	vertical-align: 10%;
+	vertical-align: 2%;
 }
 
 #alert_window {

public/src/forum/unread.js

@@ -56,6 +56,10 @@
 				$('#topics-container').empty();
 				$('#category-no-topics').removeClass('hidden');			
 				app.alertSuccess('All topics marked as read!');
+				$('#numUnreadBadge')
+					.removeClass('badge-important')
+					.addClass('badge-inverse')
+					.html('0');
 			} else {
 				app.alertError('There was an error marking topics read!');
 			}

public/src/utils.js

@@ -137,6 +137,22 @@
 				document.title = (numNotifications > 0 ? '(' + numNotifications + ') ' : '') +  title;
 				if (numNotifications > 0) document.querySelector('.notifications a i').className = 'icon-circle active';
 			});
+
+			jQuery.getJSON(RELATIVE_PATH + '/api/unread/total', function(data) {
+				var badge = jQuery('#numUnreadBadge');
+				badge.html(data.count > 20 ? '20+' : data.count);
+
+				if (data.count > 0) {
+					badge
+						.removeClass('badge-inverse')
+						.addClass('badge-important')
+				}
+				else {
+					badge
+						.removeClass('badge-important')
+						.addClass('badge-inverse')
+				}
+			});
 		}
 	}
 

public/templates/header.tpl

@@ -49,7 +49,7 @@
 							<a href="/recent">Recent</a>
 						</li>
 						<li>
-							<a href="/unread">Unread</a>
+							<a href="/unread"><span id="numUnreadBadge" class="badge badge-inverse">0</span> Unread</a>
 						</li>
 						<li>
 							<a href="/users">Users</a>

public/templates/unread.tpl

@@ -16,7 +16,7 @@
 </div>
 
 <div>
-	<button id="mark-allread-btn" class="btn {show_markallread_button}">Mark All Read</button>
+	<button id="mark-allread-btn" class="btn {show_markallread_button}">Mark All As Read</button>
 </div>
 
 <div class="category row">

src/topics.js

@@ -128,11 +128,16 @@ marked.setOptions({
 	}
 	
 	Topics.getTotalUnread = function(uid, callback) {
-		RDB.zcount('topics:recent', '-inf', '+inf', function(err, count) {
+		RDB.zrevrange('topics:recent', 0, 21, function (err, tids) {
-			if (err) count = 0;
+			Topics.hasReadTopics(tids, uid, function(read) {
-			console.log(count);
+				var unreadTids = tids.filter(function(tid, index, self) {
+					return read[index] === 0;
+				});	
 
-			callback(count);
+				callback({
+					count: unreadTids.length
+				});
+			});	
 		});
 	};