ssb: Merge in the new very work in progress channels interface.

apps/ssb/tf-message.js

@@ -14,6 +14,8 @@ class TfMessageElement extends LitElement {
 			format: {type: String},
 			blog_data: {type: String},
 			expanded: {type: Object},
+			channel: {type: String},
+			channel_unread: {type: Number},
 		};
 	}
 
@@ -28,6 +30,7 @@ class TfMessageElement extends LitElement {
 		this.drafts = {};
 		this.format = 'message';
 		this.expanded = {};
+		this.channel_unread = -1;
 	}
 
 	show_reply() {
@@ -312,12 +315,25 @@ ${JSON.stringify(mention, null, 2)}</pre
 								.users=${this.users}
 								.drafts=${this.drafts}
 								.expanded=${this.expanded}
+								channel=${this.channel}
+								channel_unread=${this.channel_unread}
 							></tf-message>`
 					)}`;
 			}
 		}
 	}
 
+	mark_read() {
+		this.dispatchEvent(new CustomEvent('channelsetunread', {
+			bubbles: true,
+			composed: true,
+			detail: {
+				channel: this.channel,
+				unread: this.message.rowid + 1,
+			},
+		}));
+	}
+
 	render_channels() {
 		let content = this.message?.content;
 		if (this?.messsage?.decrypted?.type == 'post') {
@@ -344,7 +360,7 @@ ${JSON.stringify(mention, null, 2)}</pre
 		}
 		let class_background = this.message?.decrypted
 			? 'w3-pale-red'
-			: 'w3-theme-d4';
+			: (this.message?.rowid >= this.channel_unread ? 'w3-theme-d2' : 'w3-theme-d4');
 		let self = this;
 		let raw_button;
 		switch (this.format) {
@@ -423,6 +439,8 @@ ${JSON.stringify(mention, null, 2)}</pre
 								.users=${self.users}
 								.drafts=${self.drafts}
 								.expanded=${self.expanded}
+								channel=${this.channel}
+								channel_unread=${this.channel_unread}
 							></tf-message>
 						`
 					)}
@@ -442,6 +460,8 @@ ${JSON.stringify(mention, null, 2)}</pre
 							.users=${this.users}
 							.drafts=${this.drafts}
 							.expanded=${this.expanded}
+							channel=${this.channel}
+							channel_unread=${this.channel_unread}
 						></tf-message>`
 				)}
 			</div>`;
@@ -463,6 +483,8 @@ ${JSON.stringify(mention, null, 2)}</pre
 							.users=${this.users}
 							.drafts=${this.drafts}
 							.expanded=${this.expanded}
+							channel=${this.channel}
+							channel_unread=${this.channel_unread}
 						></tf-message>
 					`
 				)}
@@ -618,6 +640,11 @@ ${JSON.stringify(content, null, 2)}</pre
 							<button class="w3-button w3-theme-d1" @click=${this.react}>
 								React
 							</button>
+							${!content.root ?
+								html`
+									<button class="w3-button w3-theme-d1" @click=${this.mark_read}>Set Read Here</button>
+								` :
+								undefined}
 						</p>
 						${this.render_children()}
 					</div>