ssb: Canceling loads, more mobile-friendly sidebar, and respond to channel subscription changes.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&ksxKqT3Bkp0Z2zV2dQU4ttVZ1k16zdWoJVv6R7m5yAQ=.sha256"
+	"previous": "&NniJybtFHDaypdljDj1kbGIpwU8T5lX9m7+bA1YTu+M=.sha256"
 }

apps/ssb/tf-app.js

@@ -68,7 +68,10 @@ class TfElement extends LitElement {
 		let ids = (await tfrpc.rpc.getIdentities()) || [];
 		this.whoami = whoami ?? (ids.length ? ids[0] : undefined);
 		this.ids = ids;
+		await this.load_channels();
+	}
 
+	async load_channels() {
 		let channels = await tfrpc.rpc.query(`
 			SELECT
 				content ->> 'channel' AS channel,
@@ -192,6 +195,14 @@ class TfElement extends LitElement {
 			`,
 			[JSON.stringify(this.following), id]
 		);
+		for (let message of messages) {
+			if (message.author == this.whoami) {
+				let content = JSON.parse(message.content);
+				if (content?.type == 'channel') {
+					this.load_channels();
+				}
+			}
+		}
 		if (messages && messages.length) {
 			this.unread = [...this.unread, ...messages];
 			this.unread = this.unread.slice(this.unread.length - 1024);

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

@@ -146,9 +146,10 @@ class TfTabNewsFeedElement extends LitElement {
 
 	async load_more() {
 		this.loading++;
+		this.loading_canceled = false;
 		try {
 			let more = [];
-			while (!more.length) {
+			while (!more.length && !this.loading_canceled) {
 				let last_start_time = this.start_time;
 				this.start_time = last_start_time - 7 * 24 * 60 * 60 * 1000;
 				more = await this.fetch_messages(this.start_time, last_start_time);
@@ -160,6 +161,10 @@ class TfTabNewsFeedElement extends LitElement {
 		}
 	}
 
+	cancel_load() {
+		this.loading_canceled = true;
+	}
+
 	async decrypt(messages) {
 		console.log('decrypt');
 		let result = [];
@@ -254,6 +259,9 @@ class TfTabNewsFeedElement extends LitElement {
 					<button ?disabled=${this.loading} class="w3-button w3-theme-d1" @click=${this.load_more}>
 						Load More
 					</button>
+					<button class=${'w3-button w3-theme-d1' + (this.loading ? '' : ' w3-hide')} @click=${this.cancel_load}>
+						Cancel
+					</button>
 					<span>Showing ${new Date(this.time_range[0]).toLocaleDateString()} - ${new Date(this.time_range[1]).toLocaleDateString()}.</span>
 				</p>
 			`;

apps/ssb/tf-tab-news.js

@@ -122,14 +122,10 @@ class TfTabNewsElement extends LitElement {
 
 	show_sidebar() {
 		this.renderRoot.getElementById('sidebar').style.display = 'block';
-		this.renderRoot.getElementById('main').style.marginLeft = '2in';
-		this.renderRoot.getElementById('show_sidebar').style.display = 'none';
 	}
 
 	hide_sidebar() {
 		this.renderRoot.getElementById('sidebar').style.display = 'none';
-		this.renderRoot.getElementById('main').style.marginLeft = '0';
-		this.renderRoot.getElementById('show_sidebar').style.display = 'block';
 	}
 
 	async channel_toggle_subscribed() {
@@ -176,8 +172,8 @@ class TfTabNewsElement extends LitElement {
 			</div>`;
 		}
 		return html`
-			<div class="w3-sidebar w3-bar-block w3-theme-d1" style="width: 2in; left: 0" id="sidebar">
+			<div class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left" style="width: 2in; left: 0" id="sidebar">
-				<div class="w3-right w3-button" @click=${this.hide_sidebar}>&times;</div>
+				<div class="w3-right w3-button w3-hide-large" @click=${this.hide_sidebar}>&times;</div>
 				${this.hash.startsWith('##') && this.channels.indexOf(this.hash.substring(2)) == -1 ?
 					html`
 						<div class="w3-bar-item w3-theme-d2">Viewing</div>
@@ -193,8 +189,8 @@ class TfTabNewsElement extends LitElement {
 						style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a>
 				`)}
 			</div>
-			<div style="margin-left: 2in; padding: 8px" id="main">
+			<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
-				<div id="show_sidebar" class="w3-left w3-button" style="display: none" @click=${this.show_sidebar}>&#9776;</div>
+				<div id="show_sidebar" class="w3-left w3-button w3-hide-large" @click=${this.show_sidebar}>&#9776;</div>
 				<p>
 					<button
 						class="w3-button w3-theme-d1"