apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&wA6sLaDxtYeFdVCCu8jyhPsGYtGZEjbWQHeGOn0Yifg=.sha256"
+	"previous": "&6dwXL1RKL8t/RSV0UHBflkMnM8f8SV9VFvBZFqhW6LI=.sha256"
 }

apps/ssb/tf-user.js

@@ -19,10 +19,6 @@ class TfUserElement extends LitElement {
 	}
 
 	render() {
-		let image = html`<span
-			class="w3-theme-light w3-circle"
-			style="display: inline-block; width: 2em; height: 2em; text-align: center; line-height: 2em"
-		>?</span>`;
 		let name = this.users?.[this.id]?.name;
 		name =
 			name !== undefined
@@ -30,20 +26,21 @@ class TfUserElement extends LitElement {
 				: html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
 
 		if (this.users[this.id]) {
-			let image_link = this.users[this.id].image;
-			image_link = typeof image_link == 'string' ? image_link : image_link?.link;
-			if (image_link !== undefined) {
-				image = html`<img
-					class="w3-circle"
-					style="width: 2em; height: 2em; vertical-align: middle"
-					src="/${image_link}/view"
-				/>`;
-			}
+			let image = this.users[this.id].image;
+			image = typeof image == 'string' ? image : image?.link;
+			return html` <div style="display: inline-block; font-weight: bold">
+				<img
+					style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%"
+					?hidden=${image === undefined}
+					src="${image ? '/' + image + '/view' : undefined}"
+				/>
+				${name}
+			</div>`;
+		} else {
+			return html` <div style="display: inline-block; font-weight: bold">
+				${name}
+			</div>`;
 		}
-		return html` <div style="display: inline-block; font-weight: bold">
-			${image}
-			${name}
-		</div>`;
 	}
 }