Show an '[Refresh] N unread messages' toolbar instead of flooding the browser with new posts.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3717 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/index/app.js

@@ -296,7 +296,11 @@ ssb.addEventListener('message', async function(id) {
 	var db = await database("ssb");
 	var posts = await getPosts(db, [id]);
 	for (let post of posts) {
-		await app.postMessage({message: post});
+		if (post.author == await ssb.whoami()) {
+			await app.postMessage({message: post});
+		} else {
+			await app.postMessage({unread: 1});
+		}
 	}
 });
 

apps/cory/index/index.html

@@ -42,10 +42,11 @@
 						<md-list-item v-for="user in Object.keys(users)" v-bind:key="'user-' + user"><tf-user v-bind:id="user"/></md-list-item>
 					</md-list>
 				</md-app-drawer>
+				<md-app-toolbar class="md-secondary" v-show="unread > 0">
+					<md-button @click="refresh()" class="md-raised md-primary">Refresh</md-button>
+					<span class="md-title">{{unread}} unread item{{unread == 1 ? '' : 's'}}</span>
+				</md-app-toolbar>
 				<md-app-content>
-					<md-button @click="refresh()" class="md-icon-button md-dense md-raised md-primary">
-						<md-icon>cached</md-icon>
-					</md-button>
 					Welcome, <tf-user :id="whoami"></tf-user>.
 					<md-card class="md-elevation-8">
 						<md-card-header>

apps/cory/index/tf.js

@@ -12,6 +12,7 @@ var g_data = {
 	votes: {},
 	apps: {},
 	share_app: null,
+	unread: 0,
 };
 
 var g_data_initial = JSON.parse(JSON.stringify(g_data));
@@ -53,6 +54,8 @@ window.addEventListener('message', function(event) {
 		Object.keys(g_data_initial).forEach(function(key) {
 			Vue.set(g_data, key, JSON.parse(JSON.stringify(g_data_initial[key])));
 		});
+	} else if (key == 'unread') {
+		g_data.unread += event.data.unread;
 	} else {
 		g_data[key] = event.data[key];
 	}