ssb: The red border is too much and stacks poorly. Let's try the same unread icon from the sidebar.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&ePqnCcU373yUI01WtrFFKt+W/doAuMiN4g8qBt5p+rk=.sha256"
+	"previous": "&JfWdlllyfUCzLARI/4tNR1Xlfx8nN3ONBSCipVhGd6g=.sha256"
 }

apps/ssb/tf-message.js

@@ -27,14 +27,7 @@ class TfMessageElement extends LitElement {
 		};
 	}
 
-	static styles = [
+	static styles = styles;
-		...styles,
-		css`
-			.unread {
-				border-left: 2px solid red !important;
-			}
-		`,
-	];
 
 	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') {