ssb: Condense follows/blocks more, and support replies to them. #122

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&n2E4F4hnQe0dz+NvcMlKl5pcAZ3a1NM7/iNyWng9fRQ=.sha256"
+	"previous": "&Ky/Q/lCC3DIcqbsO9KAnfKzeBE/e9CB/8C5jACZ3UDI=.sha256"
 }

apps/ssb/tf-message.js

@@ -301,31 +301,35 @@ class TfMessageElement extends LitElement {
 		return total;
 	}
 
+	expanded_key() {
+		return this.message?.id || this.messages?.map((x) => x.id).join(':');
+	}
+
 	set_expanded(expanded, tag) {
+		let key = this.expanded_key();
 		this.dispatchEvent(
 			new CustomEvent('tf-expand', {
 				bubbles: true,
 				composed: true,
-				detail: {id: (this.message.id || '') + (tag || ''), expanded: expanded},
+				detail: {id: key + (tag || ''), expanded: expanded},
 			})
 		);
 	}
 
 	toggle_expanded(tag) {
-		this.set_expanded(
+		let key = this.expanded_key();
-			!this.expanded[(this.message.id || '') + (tag || '')],
+		this.set_expanded(!this.expanded[key + (tag || '')], tag);
-			tag
-		);
 	}
 
 	is_expanded(tag) {
-		return this.expanded[(this.message.id || '') + (tag || '')];
+		let key = this.expanded_key();
+		return this.expanded[key + (tag || '')];
 	}
 
 	render_children() {
 		let self = this;
 		if (this.message.child_messages?.length) {
-			if (!this.expanded[this.message.id]) {
+			if (!this.expanded[this.expanded_key()]) {
 				return html`
 					<button
 						class="w3-button w3-theme-d1 w3-block w3-bar"
@@ -578,6 +582,44 @@ class TfMessageElement extends LitElement {
 		`;
 	}
 
+	content_group_by_author() {
+		let sorted = this.message.messages
+			.map((x) => [
+				x.author,
+				x.content.blocking !== undefined
+					? x.content.blocking
+						? 'is blocking'
+						: 'is no longer blocking'
+					: x.content.following !== undefined
+						? x.content.following
+							? 'is following'
+							: 'is no longer following'
+						: '',
+				x.content.contact,
+				x,
+			])
+			.sort();
+		let result = [];
+		let last;
+		let group;
+		for (let row of sorted) {
+			if (last && last[0] == row[0] && last[1] == row[1]) {
+				group.push(row[2]);
+			} else {
+				if (group) {
+					result.push({author: last[0], action: last[1], users: group});
+				}
+				last = row;
+				group = [row[2]];
+			}
+		}
+		if (group) {
+			result.push({author: last[0], action: last[1], users: group});
+		}
+		console.log(this.message.messages, result);
+		return result;
+	}
+
 	render() {
 		let content = this.message?.content;
 		if (this.message?.decrypted?.type == 'post') {
@@ -586,20 +628,54 @@ class TfMessageElement extends LitElement {
 		let class_background = this.class_background();
 		let self = this;
 		if (this.message?.type === 'contact_group') {
-			return this.render_frame(
+			if (this.expanded[this.expanded_key()]) {
-				html` ${this.message.messages.map(
+				return this.render_frame(html`
-					(x) =>
+					<div class="w3-padding">
-						html`<tf-message
+						${this.message.messages.map(
-							.message=${x}
+							(x) =>
-							whoami=${this.whoami}
+								html`<tf-message
-							.users=${this.users}
+									.message=${x}
-							.drafts=${this.drafts}
+									whoami=${this.whoami}
-							.expanded=${this.expanded}
+									.users=${this.users}
-							channel=${this.channel}
+									.drafts=${this.drafts}
-							channel_unread=${this.channel_unread}
+									.expanded=${this.expanded}
-						></tf-message>`
+									channel=${this.channel}
-				)}`
+									channel_unread=${this.channel_unread}
-			);
+								></tf-message>`
+						)}
+					</div>
+					<button
+						class="w3-button w3-theme-d1 w3-block w3-bar"
+						style="box-sizing: border-box"
+						@click=${() => self.set_expanded(false)}
+					>
+						Collapse
+					</button>
+				`);
+			} else {
+				return this.render_frame(html`
+					<div class="w3-padding">
+						${this.content_group_by_author().map(
+							(x) => html`
+								<tf-user id=${x.author} .users=${this.users}></tf-user>
+								${x.action}
+								${x.users.map(
+									(y) => html`
+										<tf-user id=${y} .users=${this.users}></tf-user>
+									`
+								)}
+							`
+						)}
+					</div>
+					<button
+						class="w3-button w3-theme-d1 w3-block w3-bar"
+						style="box-sizing: border-box"
+						@click=${() => self.set_expanded(true)}
+					>
+						Expand
+					</button>
+				`);
+			}
 		} else if (this.message.placeholder) {
 			return this.render_frame(
 				html`<div class="w3-padding">
@@ -679,25 +755,60 @@ class TfMessageElement extends LitElement {
 					</div>
 				`);
 			} else if (content.type == 'contact') {
-				return html`
+				return this.render_frame(html`
-					<div class="w3-padding">
+					<div class="w3-bar">
-						<tf-user id=${this.message.author} .users=${this.users}></tf-user>
+						<div class="w3-bar-item">
-						is
+							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
-						${content.blocking === true
+							is
-							? 'blocking'
+							${content.blocking === true
-							: content.blocking === false
+								? 'blocking'
-								? 'no longer blocking'
+								: content.blocking === false
-								: content.following === true
+									? 'no longer blocking'
-									? 'following'
+									: content.following === true
-									: content.following === false
+										? 'following'
-										? 'no longer following'
+										: content.following === false
-										: '?'}
+											? 'no longer following'
-						<tf-user
+											: '?'}
-							id=${this.message.content.contact}
+							<tf-user
-							.users=${this.users}
+								id=${this.message.content.contact}
-						></tf-user>
+								.users=${this.users}
+							></tf-user>
+						</div>
+						<div class="w3-bar-item w3-right">
+							<button class="w3-button w3-theme-d1" @click=${this.toggle_menu}>
+								%
+							</button>
+							<div
+								class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-l1"
+								style="right: 48px"
+							>
+								<a
+									target="_top"
+									class="w3-button w3-bar-item"
+									href=${'#' + encodeURIComponent(this.message?.id)}
+									>View Message</a
+								>
+								<button
+									class="w3-button w3-bar-item w3-border-bottom"
+									@click=${this.copy_id}
+								>
+									Copy ID
+								</button>
+								${this.drafts[this.message?.id] === undefined
+									? html`
+											<button
+												class="w3-button w3-bar-item"
+												@click=${this.show_reply}
+											>
+												↩️ Reply
+											</button>
+										`
+									: undefined}
+							</div>
+						</div>
+						${this.render_votes()} ${this.render_actions()}
 					</div>
-				`;
+				`);
 			} else if (content.type == 'post') {
 				let self = this;
 				let body;

apps/ssb/tf-news.js

@@ -166,7 +166,10 @@ class TfNewsElement extends LitElement {
 			if (message?.content?.type === 'contact') {
 				group.push(message);
 			} else {
-				if (group.length > 0) {
+				if (group.length == 1) {
+					result.push(group[0]);
+					group = [];
+				} else if (group.length > 1) {
 					result.push({
 						rowid: Math.max(...group.map((x) => x.rowid)),
 						type: 'contact_group',
@@ -177,7 +180,10 @@ class TfNewsElement extends LitElement {
 				result.push(message);
 			}
 		}
-		if (group.length > 0) {
+		if (group.length == 1) {
+			result.push(group[0]);
+			group = [];
+		} else if (group.length > 1) {
 			result.push({
 				rowid: Math.max(...group.map((x) => x.rowid)),
 				type: 'contact_group',