ssb: Working toward a more sensible unread indication and user interface for setting read/unread.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&NniJybtFHDaypdljDj1kbGIpwU8T5lX9m7+bA1YTu+M=.sha256"
+	"previous": "&Hnfvxu/+f8Z3qbbn/6M5+E7ju/Cj6fxg7SEBwlTy23g=.sha256"
 }

apps/ssb/tf-message.js

@@ -323,13 +323,13 @@ ${JSON.stringify(mention, null, 2)}</pre
 		}
 	}
 
-	mark_read() {
+	mark_unread() {
 		this.dispatchEvent(new CustomEvent('channelsetunread', {
 			bubbles: true,
 			composed: true,
 			detail: {
 				channel: this.channel,
-				unread: this.message.rowid + 1,
+				unread: this.message.rowid,
 			},
 		}));
 	}
@@ -640,9 +640,9 @@ ${JSON.stringify(content, null, 2)}</pre
 							<button class="w3-button w3-theme-d1" @click=${this.react}>
 								React
 							</button>
-							${!content.root ?
+							${(!content.root && this.message.rowid <= this.channel_unread) ?
 								html`
-									<button class="w3-button w3-theme-d1" @click=${this.mark_read}>Set Read Here</button>
+									<button class="w3-button w3-theme-d1" @click=${this.mark_unread}>Mark Unread</button>
 								` :
 								undefined}
 						</p>

apps/ssb/tf-news.js

@@ -181,11 +181,28 @@ class TfNewsElement extends LitElement {
 		let final_messages = this.group_following(
 			this.finalize_messages(messages_by_id)
 		);
+		let unread_rowid = -1;
+		for (let message of final_messages) {
+			if (message.rowid < this.channel_unread) {
+				console.log(message.rowid, this.channel_unread);
+				unread_rowid = message.rowid;
+				break;
+			}
+		}
+		console.log(unread_rowid);
 		return html`
 			<div>
 				${final_messages.map(
 					(x) =>
-						html`<tf-message
+						html`
+						${x.rowid == unread_rowid && x != final_messages[0] ?
+							html`<div style="display: flex; flex-direction: row">
+								<div style="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"></div>
+								<div style="color: #f00; padding: 8px">unread</div>
+								<div style="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"></div>
+							</div>` :
+							undefined}
+						<tf-message
 							.message=${x}
 							whoami=${this.whoami}
 							.users=${this.users}

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

@@ -267,6 +267,7 @@ class TfTabNewsFeedElement extends LitElement {
 			`;
 		}
 		return html`
+			<button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>Mark All Read</button>
 			<tf-news
 				id="news"
 				whoami=${this.whoami}