From abffac3f82d1284bc621e6dbe5c42054f8b24ef8 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 12 May 2024 10:40:06 -0400
Subject: [PATCH] Show missing profile images more deliberately.

---
 apps/ssb.json       |  2 +-
 apps/ssb/tf-user.js | 31 +++++++++++++++++--------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index d3ce9e5c..f03eb167 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&6dwXL1RKL8t/RSV0UHBflkMnM8f8SV9VFvBZFqhW6LI=.sha256"
+	"previous": "&wA6sLaDxtYeFdVCCu8jyhPsGYtGZEjbWQHeGOn0Yifg=.sha256"
 }
diff --git a/apps/ssb/tf-user.js b/apps/ssb/tf-user.js
index 581fb705..6ed97528 100644
--- a/apps/ssb/tf-user.js
+++ b/apps/ssb/tf-user.js
@@ -19,6 +19,10 @@ 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
@@ -26,21 +30,20 @@ class TfUserElement extends LitElement {
 				: html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
 
 		if (this.users[this.id]) {
-			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>`;
+			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"
+				/>`;
+			}
 		}
+		return html` <div style="display: inline-block; font-weight: bold">
+			${image}
+			${name}
+		</div>`;
 	}
 }