user friendly message if no topics exist in a category

public/templates/category.tpl

@@ -5,12 +5,16 @@
 		<div id="category_active_users"></div>
 	</ul>
 </div>
+<div class="alert alert-warning hide" id="category-no-topics">
+	<strong>There are no topics in this category.</strong><br />
+	Why don't you try posting one?
+</div>
 <div class="category row">
 
 	<div class="span9">
 		<ul id="topics-container">
 		<!-- BEGIN topics -->
-		<a href="../../topic/{topics.slug}"><li class="{topics.deleted-class}">
+		<a href="../../topic/{topics.slug}"><li class="category-item {topics.deleted-class}">
 			<div class="row-fluid">
 				<div class="span1 thread-rating hidden-phone hidden-tablet">
 					<span>
@@ -90,6 +94,11 @@
 		'event:new_topic'
 	]);
 
+	if (jQuery('.category-item').length == 0) {
+		jQuery('.category.row').hide();
+		jQuery('#category-no-topics').show();
+	}
+
 	socket.on('event:new_topic', function(data) {
 		var html = templates.prepare(templates['category'].blocks['topics']).parse({ topics: [data] }),
 			topic = document.createElement('div'),

src/topics.js

@@ -72,18 +72,19 @@ marked.setOptions({
 					callback(false);
 					return;
 				}
+				
+				active_usernames = replies[1];
+				var topics = [];
+
 				if (tids.length == 0) {
 					callback({
 						'category_name' : category_id ? category_name : 'Recent',
 						'show_topic_button' : category_id ? 'show' : 'hidden',
 						'category_id': category_id || 0,
-						'topics': topics
+						'topics' : []
 					});
 				}
 
-				active_usernames = replies[1];
-				var topics = [];
-
 				title = replies[2];
 				uid = replies[3];
 				timestamp = replies[4];