Make the ssb app use the global identity picker.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&kHFHpwFhnRVEbFQxuKlOUXPs/eJ2cOvWgS8poXm8WNM=.sha256"
+	"previous": "&CEeuaRddTxMQkVqXi1GTN9AyqzdyWTAjs3mqSHVTBWY=.sha256"
 }

apps/ssb/app.js

@@ -100,6 +100,9 @@ tfrpc.register(async function try_decrypt(id, content) {
 tfrpc.register(async function encrypt(id, recipients, content) {
 	return await ssb.privateMessageEncrypt(id, recipients, content);
 });
+tfrpc.register(async function getActiveIdentity() {
+	return await ssb.getActiveIdentity();
+});
 ssb.addEventListener('broadcasts', async function () {
 	await tfrpc.rpc.set('broadcasts', await ssb.getBroadcasts());
 });
@@ -107,6 +110,9 @@ ssb.addEventListener('broadcasts', async function () {
 core.register('onConnectionsChanged', async function () {
 	await tfrpc.rpc.set('connections', await ssb.connections());
 });
+core.register('setActiveIdentity', async function (id) {
+	await tfrpc.rpc.set('identity', id);
+});
 
 async function main() {
 	if (typeof database !== 'undefined') {

apps/ssb/script.js

@@ -1,7 +1,6 @@
 import {LitElement, html} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 
-import * as tf_id_picker from './tf-id-picker.js';
 import * as tf_app from './tf-app.js';
 import * as tf_message from './tf-message.js';
 import * as tf_user from './tf-user.js';

apps/ssb/tf-app.js

@@ -52,13 +52,15 @@ class TfElement extends LitElement {
 				self.broadcasts = value;
 			} else if (name === 'connections') {
 				self.connections = value;
+			} else if (name === 'identity') {
+				self.whoami = value;
 			}
 		});
 		this.initial_load();
 	}
 
 	async initial_load() {
-		let whoami = await tfrpc.rpc.localStorageGet('whoami');
+		let whoami = await tfrpc.rpc.getActiveIdentity();
 		let ids = (await tfrpc.rpc.getIdentities()) || [];
 		this.whoami = whoami ?? (ids.length ? ids[0] : undefined);
 		this.ids = ids;
@@ -193,29 +195,6 @@ class TfElement extends LitElement {
 		}
 	}
 
-	render_id_picker() {
-		return html`
-			<div style="display: flex; gap: 8px">
-				<tf-id-picker
-					id="picker"
-					style="flex: 1 1 auto"
-					selected=${this.whoami}
-					.ids=${this.ids}
-					.users=${this.users}
-					@change=${this._handle_whoami_changed}
-				></tf-id-picker>
-				<button
-					class="w3-button w3-theme-d1 w3-border"
-					style="flex: 0 0 auto"
-					@click=${this.create_identity}
-					id="create_identity"
-				>
-					Create Identity
-				</button>
-			</div>
-		`;
-	}
-
 	async load_recent_tags() {
 		let start = new Date();
 		this.tags = await tfrpc.rpc.query(
@@ -380,7 +359,7 @@ class TfElement extends LitElement {
 				class="w3-theme-dark"
 			>
 				<div style="padding: 8px">
-					${this.render_id_picker()} ${tabs}
+					${tabs}
 					${this.tags.map(
 						(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
 					)}

apps/ssb/tf-id-picker.js

@@ -1,54 +0,0 @@
-import {LitElement, html} from './lit-all.min.js';
-import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
-
-/*
- ** Provide a list of IDs, and this lets the user pick one.
- */
-class TfIdentityPickerElement extends LitElement {
-	static get properties() {
-		return {
-			ids: {type: Array},
-			selected: {type: String},
-			users: {type: Object},
-		};
-	}
-
-	static styles = styles;
-
-	constructor() {
-		super();
-		this.ids = [];
-		this.users = {};
-	}
-
-	changed(event) {
-		this.selected = event.srcElement.value;
-		this.dispatchEvent(
-			new Event('change', {
-				srcElement: this,
-			})
-		);
-	}
-
-	render() {
-		return html`
-			<select
-				class="w3-select w3-theme-d1 w3-padding w3-border"
-				@change=${this.changed}
-				style="max-width: 100%; overflow: hidden"
-			>
-				${(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>
-		`;
-	}
-}
-
-customElements.define('tf-id-picker', TfIdentityPickerElement);

core/core.js

@@ -244,6 +244,7 @@ function broadcastEvent(eventName, argv) {
 	}
 	return Promise.all(promises);
 }
+
 /**
  * TODOC
  * @param {*} message
@@ -265,6 +266,28 @@ function broadcast(message) {
 	return Promise.all(promises);
 }
 
+/**
+ * TODOC
+ * @param {String} eventName
+ * @param {*} argv
+ * @returns
+ */
+function broadcastAppEventToUser(user, packageOwner, packageName, eventName, argv) {
+	let promises = [];
+	for (let process of Object.values(gProcesses)) {
+		if (
+			process.credentials?.session?.name === user &&
+			process.packageOwner == packageOwner &&
+			process.packageName == packageName
+		) {
+			if (process.eventHandlers[eventName]) {
+				promises.push(invoke(process.eventHandlers[eventName], argv));
+			}
+		}
+	}
+	return Promise.all(promises);
+}
+
 /**
  * TODOC
  * @param {*} caller
@@ -360,6 +383,8 @@ async function getProcessBlob(blobId, key, options) {
 			process.key = key;
 			process.credentials = options.credentials || {};
 			process.task = new Task();
+			process.packageOwner = options.packageOwner;
+			process.packageName = options.packageName;
 			process.eventHandlers = {};
 			if (!options?.script || options?.script === 'app.js') {
 				process.app = new app.App();
@@ -520,6 +545,7 @@ async function getProcessBlob(blobId, key, options) {
 					await new Database(process?.credentials?.session?.name).set(`id:${options.packageOwner}:${options.packageName}`, identity);
 				}
 				process.sendIdentities();
+				broadcastAppEventToUser(process?.credentials?.session?.name, options.packageOwner, options.packageName, 'setActiveIdentity', [identity]);
 			};
 			process.createIdentity = async function() {
 				if (