ssb: Add a button to close a private chat, removing it from the sidebar.

apps/ssb/tf-app.js

@@ -21,6 +21,7 @@ class TfElement extends LitElement {
 			channels_latest: {type: Object},
 			guest: {type: Boolean},
 			url: {type: String},
+			private_closed: {type: Object},
 			private_messages: {type: Array},
 			grouped_private_messages: {type: Object},
 			recent_reactions: {type: Array},
@@ -49,6 +50,7 @@ class TfElement extends LitElement {
 		this.loading_latest = 0;
 		this.loading_latest_scheduled = 0;
 		this.recent_reactions = [];
+		this.private_closed = {};
 		tfrpc.rpc.getBroadcasts().then((b) => {
 			self.broadcasts = b || [];
 		});
@@ -86,9 +88,23 @@ class TfElement extends LitElement {
 		this.whoami = whoami ?? (ids.length ? ids[0] : undefined);
 		this.guest = !this.whoami?.length;
 		this.ids = ids;
+		let private_closed =
+			(await tfrpc.rpc.databaseGet('private_closed')) ?? '{}';
+		this.private_closed = JSON.parse(private_closed);
 		await this.load_channels();
 	}
 
+	async close_private_chat(event) {
+		let update = {};
+		update[event.detail.key] = true;
+		this.private_closed = Object.assign(update, this.private_closed);
+		console.log(this.private_closed);
+		await tfrpc.rpc.databaseSet(
+			'private_closed',
+			JSON.stringify(this.private_closed)
+		);
+	}
+
 	async load_channels() {
 		let channels = await tfrpc.rpc.query(
 			`
@@ -136,12 +152,30 @@ class TfElement extends LitElement {
 		}
 	}
 
+	visible_private() {
+		if (!this.grouped_private_messages || !this.private_closed) {
+			return [];
+		}
+		let self = this;
+		return Object.fromEntries(
+			Object.entries(this.grouped_private_messages).filter(([key, value]) => {
+				let channel = '🔐' + [...new Set(JSON.parse(key))].sort().join(',');
+				let grouped_latest = Math.max(...value.map((x) => x.rowid));
+				return (
+					!self.private_closed[key] ||
+					self.channels_unread[channel] === undefined ||
+					grouped_latest > self.channels_unread[channel]
+				);
+			})
+		);
+	}
+
 	next_channel(delta) {
 		let channel_names = [
 			'',
 			'@',
 			'👍',
-			...Object.keys(this.grouped_private_messages)
+			...Object.keys(this.visible_private())
 				.sort()
 				.map((x) => '🔐' + JSON.parse(x).join(',')),
 			...this.channels.map((x) => '#' + x),
@@ -385,7 +419,11 @@ class TfElement extends LitElement {
 		);
 		for (let message of result) {
 			let key = JSON.stringify(
-				message?.decrypted?.recps?.filter((x) => x != this.whoami)?.sort() ?? []
+				[
+					...new Set(
+						message?.decrypted?.recps?.filter((x) => x != this.whoami)
+					),
+				].sort() ?? []
 			);
 			if (!groups[key]) {
 				groups[key] = [];
@@ -660,9 +698,10 @@ class TfElement extends LitElement {
 					@refresh=${this.refresh}
 					@toggle_stay_connected=${this.toggle_stay_connected}
 					@loadmessages=${this.reset_progress}
+					@closeprivatechat=${this.close_private_chat}
 					.connections=${this.connections}
 					.private_messages=${this.private_messages}
-					.grouped_private_messages=${this.grouped_private_messages}
+					.grouped_private_messages=${this.visible_private()}
 					.recent_reactions=${this.recent_reactions}
 					?is_administrator=${this.is_administrator}
 					?stay_connected=${this.stay_connected}

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

@@ -433,6 +433,31 @@ class TfTabNewsFeedElement extends LitElement {
 		}
 	}
 
+	close_private_chat() {
+		this.mark_all_read();
+		this.dispatchEvent(
+			new CustomEvent('closeprivatechat', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					key: JSON.stringify(this.hash.substring('#🔐'.length).split(',')),
+				},
+			})
+		);
+	}
+
+	render_close_chat_button() {
+		if (this.hash.startsWith('#🔐')) {
+			return html`
+				<button class="w3-button w3-theme-d1" @click=${this.close_private_chat}>
+					Close Chat
+				</button>
+			`;
+		} else {
+			return html`${this.hash}`;
+		}
+	}
+
 	render() {
 		if (
 			!this.messages ||
@@ -500,6 +525,7 @@ class TfTabNewsFeedElement extends LitElement {
 						Mark All Read
 					</button>`
 				: undefined}
+			${this.render_close_chat_button()}
 			<tf-news
 				id="news"
 				whoami=${this.whoami}