From 8ae10dc80b399442bc3b75a26fe365e0614aa536 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Mon, 2 Jun 2025 21:24:03 -0400
Subject: [PATCH] ssb: Add some more visibility that you're above the unread
 line. #122

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-message.js | 20 +++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 126fd878..a733ec22 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&klcMVQ9g0ielAoM3WjHRnyWQs4rs8fxmy6PbXIaK2ZU=.sha256"
+	"previous": "&QGHSmapZNOzNQYbH9qUA5RPoqLhHZ1zFDMkOlKixrbQ=.sha256"
 }
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index 031b7c0d..d370db43 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -1,4 +1,11 @@
-import {LitElement, html, repeat, render, unsafeHTML} from './lit-all.min.js';
+import {
+	LitElement,
+	css,
+	html,
+	repeat,
+	render,
+	unsafeHTML,
+} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import * as tfutils from './tf-utils.js';
 import * as emojis from './emojis.js';
@@ -20,7 +27,14 @@ class TfMessageElement extends LitElement {
 		};
 	}
 
-	static styles = styles;
+	static styles = [
+		...styles,
+		css`
+			.unread {
+				border-left: 2px solid red !important;
+			}
+		`,
+	];
 
 	constructor() {
 		super();
@@ -408,7 +422,7 @@ class TfMessageElement extends LitElement {
 		return this.message?.decrypted
 			? 'w3-pale-red'
 			: this.message?.rowid >= this.channel_unread
-				? 'w3-theme-d2'
+				? 'w3-theme-d2 unread'
 				: 'w3-theme-d4';
 	}