ssb: Load and show new messages as they arrive.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&b7bvRAB4MWWsJvmyi3G+TG/eseQGUBsO4BZ1qiu8nQc=.sha256"
+	"previous": "&yapJ13Gt1EBAoNfcjqen0o7c4wSjjRSQSxZFFtPDHps=.sha256"
 }

apps/ssb/tf-app.js

@@ -7,7 +7,6 @@ class TfElement extends LitElement {
 		return {
 			whoami: {type: String},
 			hash: {type: String},
-			unread: {type: Array},
 			tab: {type: String},
 			broadcasts: {type: Array},
 			connections: {type: Array},
@@ -28,7 +27,6 @@ class TfElement extends LitElement {
 		super();
 		let self = this;
 		this.hash = '#';
-		this.unread = [];
 		this.tab = 'news';
 		this.broadcasts = [];
 		this.connections = [];
@@ -239,17 +237,13 @@ class TfElement extends LitElement {
 			[JSON.stringify(this.following), id]
 		);
 		for (let message of messages) {
-			if (message.author == this.whoami) {
+			if (
-				let content = JSON.parse(message.content);
+				message.author == this.whoami &&
-				if (content?.type == 'channel') {
+				JSON.parse(message.content)?.type == 'channel'
-					this.load_channels();
+			) {
-				}
+				this.load_channels();
 			}
 		}
-		if (messages && messages.length) {
-			this.unread = [...this.unread, ...messages];
-			this.unread = this.unread.slice(this.unread.length - 1024);
-		}
 		this.schedule_load_channels_latest();
 	}
 
@@ -363,6 +357,7 @@ class TfElement extends LitElement {
 
 	schedule_load_channels_latest() {
 		if (!this.loading_channels_latest) {
+			this.shadowRoot.getElementById('tf-tab-news')?.load_latest();
 			this.load_channels_latest(this.following);
 		} else if (!this.loading_channels_latest_scheduled) {
 			this.loading_channels_latest_scheduled++;
@@ -449,8 +444,6 @@ class TfElement extends LitElement {
 					whoami=${this.whoami}
 					.users=${this.users}
 					hash=${this.hash}
-					.unread=${this.unread}
-					@refresh=${() => (this.unread = [])}
 					?loading=${this.loading}
 					.channels=${this.channels}
 					.channels_latest=${this.channels_latest}
@@ -567,7 +560,9 @@ class TfElement extends LitElement {
 				class="w3-theme-dark"
 			>
 				<div style="flex: 0 0">${tabs}</div>
-				<div style="flex: 1 1; overflow: scroll; contain: layout">${contents}</div>
+				<div style="flex: 1 1; overflow: scroll; contain: layout">
+					${contents}
+				</div>
 			</div>
 		`;
 	}

apps/ssb/tf-tab-news-feed.js

@@ -294,7 +294,12 @@ class TfTabNewsFeedElement extends LitElement {
 			this.loading--;
 		}
 		this.messages = Object.values(
-			Object.fromEntries([...this.messages, ...messages].map((x) => [x.id, x]))
+			Object.fromEntries(
+				[...this.messages, ...messages]
+					.sort((x, y) => x.timestamp - y.timestamp)
+					.slice(-1024)
+					.map((x) => [x.id, x])
+			)
 		);
 		console.log('done loading latest messages.');
 	}

apps/ssb/tf-tab-news.js

@@ -8,7 +8,6 @@ class TfTabNewsElement extends LitElement {
 			whoami: {type: String},
 			users: {type: Object},
 			hash: {type: String},
-			unread: {type: Array},
 			following: {type: Array},
 			drafts: {type: Object},
 			expanded: {type: Object},
@@ -27,7 +26,6 @@ class TfTabNewsElement extends LitElement {
 		this.whoami = null;
 		this.users = {};
 		this.hash = '#';
-		this.unread = [];
 		this.following = [];
 		this.cache = {};
 		this.drafts = {};
@@ -50,36 +48,13 @@ class TfTabNewsElement extends LitElement {
 		document.body.removeEventListener('keypress', this.on_keypress.bind(this));
 	}
 
-	show_more() {
+	load_latest() {
-		let unread = this.unread;
 		let news = this.shadowRoot?.getElementById('news');
 		if (news) {
 			news.load_latest();
-			this.dispatchEvent(new CustomEvent('refresh'));
 		}
 	}
 
-	new_messages_text() {
-		if (!this.unread?.length) {
-			return 'No new messages.';
-		}
-		let counts = {};
-		for (let message of this.unread) {
-			let type = 'private';
-			try {
-				type = JSON.parse(message.content).type || type;
-			} catch {}
-			counts[type] = (counts[type] || 0) + 1;
-		}
-		return (
-			'↻ Show New: ' +
-			Object.keys(counts)
-				.sort()
-				.map((x) => counts[x].toString() + ' ' + x + 's')
-				.join(', ')
-		);
-	}
-
 	draft(event) {
 		let id = event.detail.id || '';
 		let previous = this.drafts[id];
@@ -245,7 +220,11 @@ class TfTabNewsElement extends LitElement {
 				id="sidebar_overlay"
 				@click=${this.hide_sidebar}
 			></div>
-			<div style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: scroll" id="main" class="w3-main">
+			<div
+				style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: scroll"
+				id="main"
+				class="w3-main"
+			>
 				<div style="padding: 8px">
 					<div
 						id="show_sidebar"
@@ -255,9 +234,6 @@ class TfTabNewsElement extends LitElement {
 						&#9776;
 					</div>
 					<p>
-						<button class="w3-button w3-theme-d1" @click=${this.show_more}>
-							${this.new_messages_text()}
-						</button>
 						${this.hash.startsWith('##')
 							? html`
 									<button