ssb: Collapse contact group users to only icons.

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>

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}
 				/>`;
 			}
 		}