From 8f84ff2611e64cb4befe6ffaf65765b08babcc95 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Fri, 27 Jun 2025 12:46:15 -0400
Subject: [PATCH] ssb: Collapse contact group users to only icons.

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

diff --git a/apps/ssb.json b/apps/ssb.json
index 264c6e4a..96e68d18 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&fVXd+mdbqIz9h7nKYnoFkCyfOKDeCUaAJG2/i7h/5hs=.sha256"
+	"previous": "&fHj5cygP9tDGnJRTFZes1kywnjetkTH9z74qFy8nhXg=.sha256"
 }
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index e50f5aa0..eebb8a47 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -686,7 +686,7 @@ class TfMessageElement extends LitElement {
 									${x.action}
 									${x.users.map(
 										(y) => html`
-											<tf-user id=${y} .users=${this.users}></tf-user>
+											<tf-user id=${y} .users=${this.users} icon_only=true></tf-user>
 										`
 									)}
 								</div>
diff --git a/apps/ssb/tf-user.js b/apps/ssb/tf-user.js
index 68459fb2..b2afbfd4 100644
--- a/apps/ssb/tf-user.js
+++ b/apps/ssb/tf-user.js
@@ -7,6 +7,7 @@ class TfUserElement extends LitElement {
 		return {
 			id: {type: String},
 			fallback_name: {type: String},
+			icon_only: {type: Boolean},
 			users: {type: Object},
 		};
 	}
@@ -17,6 +18,7 @@ class TfUserElement extends LitElement {
 		super();
 		this.id = null;
 		this.fallback_name = null;
+		this.icon_only = false;
 		this.users = {};
 	}
 
@@ -32,9 +34,11 @@ class TfUserElement extends LitElement {
 			>😎</span
 		>`;
 		let name = this.users?.[this.id]?.name;
-		name = html`<a target="_top" href=${'#' + this.id}
-			>${name ?? this.fallback_name ?? this.id}</a
-		>`;
+		name = this.icon_only
+			? undefined
+			: html`<a target="_top" href=${'#' + this.id}
+					>${name ?? this.fallback_name ?? this.id}</a
+				>`;
 
 		if (user) {
 			let image_link = user.image;
@@ -48,6 +52,7 @@ class TfUserElement extends LitElement {
 					class=${'w3-theme-l4 ' + shape}
 					style="width: 2em; height: 2em; vertical-align: middle; object-fit: cover"
 					src="/${image_link}/view"
+					alt=${name ?? this.fallback_name ?? this.id}
 				/>`;
 			}
 		}