From 3d2c88c201764977dafd914b6d0840e1d3b24087 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 19 Mar 2023 23:31:08 +0000
Subject: [PATCH] Group contact messages, and try to fix some messages
 overflowing width.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4238 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/ssb/tf-app.js     | 15 ++-------------
 apps/ssb/tf-message.js | 18 +++++++++++++-----
 apps/ssb/tf-news.js    | 22 +++++++++++++++++++++-
 apps/ssb/tf-user.js    | 13 +++++++++----
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js
index e444ef93..de05b58a 100644
--- a/apps/ssb/tf-app.js
+++ b/apps/ssb/tf-app.js
@@ -135,9 +135,9 @@ class TfElement extends LitElement {
 		cache.last_row_id = max_row_id;
 		let store = JSON.stringify(cache);
 		/* 2023-02-20: Exceeding message size. */
-		if (store.length < 512 * 1024) {
+		//if (store.length < 512 * 1024) {
 			await tfrpc.rpc.databaseSet('following', store);
-		}
+		//}
 		return [result, cache.following];
 	}
 
@@ -280,16 +280,6 @@ class TfElement extends LitElement {
 		}
 	}
 
-	add_fake_news() {
-		this.unread = [{
-			author: this.whoami,
-			placeholder: true,
-			id: '%fake_id',
-			text: 'text',
-			content: 'hello',
-		}, ...this.unread];
-	}
-
 	async set_tab(tab) {
 		this.tab = tab;
 		if (tab === 'news') {
@@ -326,7 +316,6 @@ class TfElement extends LitElement {
 		return html`
 			${this.render_id_picker()}
 			${tabs}
-			<!-- <input type="button" value="Fake News" @click=${this.add_fake_news}></input> -->
 			${contents}
 		`;
 	}
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index ae9551c8..54e2096c 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -148,7 +148,7 @@ class TfMessageElement extends LitElement {
 		} else if (mention.link?.startsWith('&') &&
 			mention.name?.startsWith('video:')) {
 			return html`
-				<video controls style="max-height: 240px">
+				<video controls style="max-height: 240px; max-width: 128px">
 					<source src=${'/' + mention.link + '/view'}></source>
 				</video>
 			`;
@@ -222,7 +222,7 @@ class TfMessageElement extends LitElement {
 				html`<input type="button" value="Raw" @click=${() => self.raw = true}></input>`;
 		function small_frame(inner) {
 			return html`
-				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block">
+				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere">
 					<tf-user id=${self.message.author} .users=${self.users}></tf-user>
 					<span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span>
 					${raw_button}
@@ -231,7 +231,14 @@ class TfMessageElement extends LitElement {
 				</div>
 			`
 		}
-		if (this.message.placeholder) {
+		if (this.message?.type === 'contact_group') {
+			return html`
+				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
+					${this.message.messages.map(x => 
+						html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`
+					)}
+				</div>`;
+		} else if (this.message.placeholder) {
 			return html`
 				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
 					<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a> (placeholder)
@@ -270,8 +277,9 @@ class TfMessageElement extends LitElement {
 					${description}
 				`);
 			} else if (content.type == 'contact') {
-				return small_frame(html`
+				return html`
 					<div>
+						<tf-user id=${this.message.author} .users=${this.users}></tf-user>
 						is
 						${
 							content.blocking === true ? 'blocking' :
@@ -282,7 +290,7 @@ class TfMessageElement extends LitElement {
 						}
 						<tf-user id=${this.message.content.contact} .users=${this.users}></tf-user>
 					</div>
-				`);
+				`;
 			} else if (content.type == 'post') {
 				let reply = (this.drafts[this.message?.id] !== undefined) ? html`
 					<tf-compose
diff --git a/apps/ssb/tf-news.js b/apps/ssb/tf-news.js
index e05fbcfe..a9b00eb4 100644
--- a/apps/ssb/tf-news.js
+++ b/apps/ssb/tf-news.js
@@ -145,9 +145,29 @@ class TfNewsElement extends LitElement {
 		return recursive_sort(roots, true);
 	}
 
+	group_following(messages) {
+		let result = [];
+		let group = [];
+		for (let message of messages) {
+			if (message?.content?.type === 'contact') {
+				group.push(message);
+			} else {
+				if (group.length > 0) {
+					result.push({
+						type: 'contact_group',
+						messages: group,
+					});
+					group = [];
+				}
+				result.push(message);
+			}
+		}
+		return result;
+	}
+
 	load_and_render(messages) {
 		let messages_by_id = this.process_messages(messages);
-		let final_messages = this.finalize_messages(messages_by_id);
+		let final_messages = this.group_following(this.finalize_messages(messages_by_id));
 		return html`
 			<div style="display: flex; flex-direction: column">
 				${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded} collapsed=true></tf-message>`)}
diff --git a/apps/ssb/tf-user.js b/apps/ssb/tf-user.js
index f4d0bc40..99d87637 100644
--- a/apps/ssb/tf-user.js
+++ b/apps/ssb/tf-user.js
@@ -19,18 +19,23 @@ class TfUserElement extends LitElement {
 	}
 
 	render() {
+		let name = this.users?.[this.id]?.name;
+		name = name !== undefined ?
+			html`<a target="_top" href=${'#' + this.id}>${name}</a>` :
+			html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
+
 		if (this.users[this.id]) {
 			let image = this.users[this.id].image;
 			image = typeof(image) == 'string' ? image : image?.link;
 			return html`
 				<div style="display: inline-block; font-weight: bold">
-					<img style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%" ?hidden=${image === undefined} src="${image ? '/' + image + '/view' : undefined}">
-					<a target="_top" href=${'#' + this.id}>${this.users[this.id].name ?? this.id}</a>
+						<img style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%" ?hidden=${image === undefined} src="${image ? '/' + image + '/view' : undefined}">
+						${name}
 				</div>`;
 		} else {
 			return html`
-				<div style="display: inline-block; font-weight: bold; word-wrap: anywhere">
-					<a target="_top" href=${'#' + this.id}>${this.id}</a>
+				<div style="display: inline-block; font-weight: bold">
+					${name}
 				</div>`;
 		}
 	}