Group posts by feed name. Step #1 of getting collapsing feeds so it's

easier to swim through larger feeds.

css/screen.css

@@ -204,11 +204,11 @@ canvas {
 .blue   #list li { border-bottom: 1px solid #2980b9; }
 .yellow #list li { border-bottom: 1px solid #f39c12; }
 
-#list li:after {
+#list li li:after {
 	content: "";
 	position: absolute;
 	right: 7px;
-	top: 0.1em;
+	top: -0.2em;
 	font-weight: 100;
 	font-size: 3em;
 	font-family: "Entypo";

js/App.js

@@ -22,10 +22,12 @@ App.prototype.authenticate = function() {
 
 App.prototype.after_login = function(backend) {
 
+	if (window.navigator.mozApps) {
 	    var request = window.navigator.mozApps.getSelf();
 	    request.onsuccess = function() {
 		    $("#version").innerHTML = request.result.manifest.version;
 	    }
+	}
 
 	var _this = this;
 
@@ -227,15 +229,53 @@ App.prototype.validate = function(articles) {
 
 App.prototype.populateList = function() {
 
+	// First pull all articles together from each distinct feed
+	var ua = this.unread_articles;
+	var newarts = [], byfeed = [];
+	while (ua.length > 0) {
+	    article = ua[0];
+
+	    // Next feed ID
+	    var fid = article.feed_id;
+	    // Here's all the articles under that ID
+	    var feeds =
+		ua.filter( function(a) { return a.feed_id == fid; } );
+	    // Keep a list of them so it's easy to tabulate
+	    byfeed.push(feeds);
+
+	    // Add them on to the new unread_articles, so they're
+	    //  in order.
+	    newarts = newarts.concat(feeds);
+
+	    // Trim them off the old, unsorted article list
+	    ua = ua.filter( function(a) { return a.feed_id != fid; } );
+	}
+
+	// Make the reordered article list the "official" one
+	ua = this.unread_articles = newarts;
+
+	// Now build the article list; it's a <ul> of feeds,
+	//  then sub-<ul> of articles in that feed
 	var html_str = "";
-	for (var i = 0; i < this.unread_articles.length; i++) {
+	var artidx = 0;
-		var article = this.unread_articles[i];
+	for (i = 0; i < byfeed.length; ++i) {
-		html_str += "<li"+ (article.unread ? " class='unread'" : "") +">";
+	    var feed = byfeed[i];
-		html_str += "<a href='#full-"+i+"'>";
+	    html_str += "<li>" + feed[0].feed_title;
-		html_str += "<p class='title'>" + article.feed_title + "</p>";
+	    html_str += "<ul>";
+	    for (var j = 0; j < feed.length; ++j) {
+		article = ua[artidx];
+		html_str += "<li"+ (article.unread ?
+		    " class='unread'" : "") +">";
+		html_str += "<a href='#full-" + artidx + "'>";
 		html_str += "<h2>" + article.title + "</h2>";
-		if(article.excerpt)	html_str += "<p class='excerpt'>" + article.excerpt + "</p>";
+		if (article.excerpt) {
+		    html_str += "<p class='excerpt'>" +
+			article.excerpt + "</p>";
+		}
 		html_str += "</a></li>";
+		artidx += 1;
+	    }
+	    html_str += "</ul></li>";
 	}
 	
 	$("#list ul").innerHTML = html_str;
@@ -244,10 +284,10 @@ App.prototype.populateList = function() {
 };
 
 App.prototype.updateList = function() {
-	var unread = 0;
+	var unread = 0, artnum = 0;
-	$$("#list ul li").forEach(function(o, i) {
+	$$("#list ul ul li").forEach(function(o, i) {
 
-		if(!this.unread_articles[i].unread) {
+	    if (!this.unread_articles[artnum++].unread) {
 		o.removeClass("unread");
 	    }
 	    else {
@@ -256,7 +296,7 @@ App.prototype.updateList = function() {
 	    }
 	}, this);
 
-	if(unread > 0) {
+	if (unread > 0) {
 	    $("#all-read").addClass('inactive');
 	} else {
 	    $("#all-read").removeClass('inactive');