From b4236d0ec072853abebc67c6916c46dcee4d5ffd Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 8 Nov 2023 23:51:54 +0000
Subject: [PATCH] Show names in the id picker.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4623 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/ssb.json            | 2 +-
 apps/ssb/tf-app.js       | 2 +-
 apps/ssb/tf-id-picker.js | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 5c4dddc2..71365afb 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
   "type": "tildefriends-app",
   "emoji": "🐌",
-  "previous": "&eHrt88ylDUCaDFIj3DTdUaHPYQRe81K//O80CHp+pyk=.sha256"
+  "previous": "&dc3Eovh35uB024L4dyFX+n8N37ove9STsKmkKlO/pcQ=.sha256"
 }
\ No newline at end of file
diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js
index 118a13ac..efb6e6b8 100644
--- a/apps/ssb/tf-app.js
+++ b/apps/ssb/tf-app.js
@@ -183,7 +183,7 @@ class TfElement extends LitElement {
 
 	render_id_picker() {
 		return html`
-			<tf-id-picker id="picker" selected=${this.whoami} .ids=${this.ids} @change=${this._handle_whoami_changed}></tf-id-picker>
+			<tf-id-picker id="picker" selected=${this.whoami} .ids=${this.ids} .users=${this.users} @change=${this._handle_whoami_changed}></tf-id-picker>
 			<button @click=${this.create_identity} id="create_identity">Create Identity</button>
 		`;
 	}
diff --git a/apps/ssb/tf-id-picker.js b/apps/ssb/tf-id-picker.js
index 1b9516cb..e45c2679 100644
--- a/apps/ssb/tf-id-picker.js
+++ b/apps/ssb/tf-id-picker.js
@@ -9,12 +9,14 @@ class TfIdentityPickerElement extends LitElement {
 		return {
 			ids: {type: Array},
 			selected: {type: String},
+			users: {type: Object},
 		};
 	}
 
 	constructor() {
 		super();
 		this.ids = [];
+		this.users = {};
 	}
 
 	changed(event) {
@@ -27,7 +29,7 @@ class TfIdentityPickerElement extends LitElement {
 	render() {
 		return html`
 			<select @change=${this.changed} style="max-width: 100%">
-				${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
+				${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${this.users[id]?.name ? (this.users[id]?.name + ' - ') : undefined}<small>${id}</small></option>`)}
 			</select>
 		`;
 	}