From 7882fcbe8f845d27e8ae048c47b9c67bbde3fc4a Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 4 Jun 2025 12:24:04 -0400
Subject: [PATCH] ssb: The red border is too much and stacks poorly.  Let's try
 the same unread icon from the sidebar.

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

diff --git a/apps/ssb.json b/apps/ssb.json
index cb07b7b1..e4775875 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&ePqnCcU373yUI01WtrFFKt+W/doAuMiN4g8qBt5p+rk=.sha256"
+	"previous": "&JfWdlllyfUCzLARI/4tNR1Xlfx8nN3ONBSCipVhGd6g=.sha256"
 }
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index d370db43..80974385 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -27,14 +27,7 @@ class TfMessageElement extends LitElement {
 		};
 	}
 
-	static styles = [
-		...styles,
-		css`
-			.unread {
-				border-left: 2px solid red !important;
-			}
-		`,
-	];
+	static styles = styles;
 
 	constructor() {
 		super();
@@ -422,7 +415,7 @@ class TfMessageElement extends LitElement {
 		return this.message?.decrypted
 			? 'w3-pale-red'
 			: this.message?.rowid >= this.channel_unread
-				? 'w3-theme-d2 unread'
+				? 'w3-theme-d2'
 				: 'w3-theme-d4';
 	}
 
@@ -513,7 +506,10 @@ class TfMessageElement extends LitElement {
 		return html`
 			<header class="w3-bar">
 				<span class="w3-bar-item">
-					<tf-user id=${this.message.author} .users=${this.users}></tf-user>
+					${this.render_unread_icon()}<tf-user
+						id=${this.message.author}
+						.users=${this.users}
+					></tf-user>
 				</span>
 				${is_encrypted} ${this.render_menu()}
 				<div class="w3-bar-item w3-right" style="text-wrap: nowrap">
@@ -635,6 +631,10 @@ class TfMessageElement extends LitElement {
 		return result;
 	}
 
+	render_unread_icon() {
+		return this.message?.rowid >= this.channel_unread ? html`✉️` : undefined;
+	}
+
 	render() {
 		let content = this.message?.content;
 		if (this.message?.decrypted?.type == 'post') {