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.json

@@ -1 +1 @@
-{"type":"tildefriends-app","files":{"app.js":"&CuC9hpnUkbbSAgR4E30aVNWMXySrbHDhoIXI/pxU1g8=.sha256","index.html":"&mv6A+VsR0hIDWLtczTB1SlexmT1FTpU/IjfL46Je6Y4=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&t/QhZVt/e3LN3HgSoqe8C81pjq4ZS6uiWcqGOB4NX4Q=.sha256","tf-message.js":"&VNC8ptzGXWAVl9LBBZfrk3YmweA8PQ02d7/wZxWXoAA=.sha256","tf.js":"&swCMB9K4dkPCPC2tYS5aTUZSGUmaezlW6FNeLM9QNXI=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
+{"type":"tildefriends-app","files":{"app.js":"&LPDR4ZoE/qdPy9djmNFUfblXk7W1znMbwuAXp3/zWPI=.sha256","index.html":"&6UkH58DRXi8Y5bnfKWv9CgU5XJ2MWrJ7vzqL/uau5eg=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&t/QhZVt/e3LN3HgSoqe8C81pjq4ZS6uiWcqGOB4NX4Q=.sha256","tf-message.js":"&VNC8ptzGXWAVl9LBBZfrk3YmweA8PQ02d7/wZxWXoAA=.sha256","tf.js":"&Br2AswUPq0krVdr6JF/0r64qF/QLK7iOSC3bf1jqEDI=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}

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];
 	}