ssb: Show connections in the sidebar. Fiddle with tf-user CSS to make it fit.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&Zm3zI6Q6mbGPnUNj1O07Fc5c71M7pME6AHk/a+pDIoA=.sha256"
+	"previous": "&Q5LSWQhvy1yI5rijBxN8xz9AOsDvGupiPlVVme7Rdm8=.sha256"
 }

apps/ssb/tf-app.js

@@ -366,6 +366,7 @@ class TfElement extends LitElement {
 	}
 
 	async load() {
+		let start_time = new Date();
 		let whoami = this.whoami;
 		let following = await tfrpc.rpc.following([whoami], 2);
 		let users = {};
@@ -383,7 +384,6 @@ class TfElement extends LitElement {
 		this.channels_unread = JSON.parse(
 			(await tfrpc.rpc.databaseGet('unread')) ?? '{}'
 		);
-		let start_time = new Date();
 		users = await this.fetch_about(Object.keys(following).sort(), users);
 		console.log(
 			'about took',
@@ -392,10 +392,9 @@ class TfElement extends LitElement {
 			Object.keys(users).length,
 			'users'
 		);
-		start_time = new Date();
 		this.following = Object.keys(following);
 		this.users = users;
-		console.log(`load finished ${whoami} => ${this.whoami}`);
+		console.log(`load finished ${whoami} => ${this.whoami} in ${(new Date() - start_time) / 1000}`);
 		this.whoami = whoami;
 		this.loaded = whoami;
 	}
@@ -448,6 +447,7 @@ class TfElement extends LitElement {
 					.channels_latest=${this.channels_latest}
 					.channels_unread=${this.channels_unread}
 					@channelsetunread=${this.channel_set_unread}
+					.connections=${this.connections}
 				></tf-tab-news>
 			`;
 		} else if (this.tab === 'connections') {

apps/ssb/tf-tab-news.js

@@ -15,6 +15,7 @@ class TfTabNewsElement extends LitElement {
 			channels: {type: Array},
 			channels_unread: {type: Object},
 			channels_latest: {type: Object},
+			connections: {type: Array},
 		};
 	}
 
@@ -33,6 +34,7 @@ class TfTabNewsElement extends LitElement {
 		this.channels_unread = {};
 		this.channels_latest = {};
 		this.channels = [];
+		this.connections = [];
 		tfrpc.rpc.localStorageGet('drafts').then(function (d) {
 			self.drafts = JSON.parse(d || '{}');
 		});
@@ -126,29 +128,7 @@ class TfTabNewsElement extends LitElement {
 		return this.hash.startsWith('##') ? this.hash.substring(2) : undefined;
 	}
 
-	render() {
-		let profile =
-			this.hash.startsWith('#@') && this.hash != '#@'
-				? html`<tf-profile
-						class="tf-profile"
-						id=${this.hash.substring(1)}
-						whoami=${this.whoami}
-						.users=${this.users}
-					></tf-profile>`
-				: undefined;
-		let edit_profile;
-		if (
-			!this.loading &&
-			this.users[this.whoami]?.name === undefined &&
-			this.hash.substring(1) != this.whoami
-		) {
-			edit_profile = html` <div
-				class="w3-panel w3-padding w3-round w3-card-4 w3-theme-l3"
-			>
-				ℹ️ Follow your identity link ☝️ above to edit your profile and set your
-				name.
-			</div>`;
-		}
+	render_sidebar() {
 		return html`
 			<div
 				class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left"
@@ -214,12 +194,45 @@ class TfTabNewsElement extends LitElement {
 						>
 					`
 				)}
+				
+				<div class="w3-bar-item w3-theme-d2">Connections</div>
+				${this.connections.map((x) => (html`
+					<tf-user class="w3-bar-item" style="max-width: 100%" id=${x.id} .users=${this.users}></tf-user>
+				`))}
 			</div>
 			<div
 				class="w3-overlay"
 				id="sidebar_overlay"
 				@click=${this.hide_sidebar}
 			></div>
+		`;
+	}
+
+	render() {
+		let profile =
+			this.hash.startsWith('#@') && this.hash != '#@'
+				? html`<tf-profile
+						class="tf-profile"
+						id=${this.hash.substring(1)}
+						whoami=${this.whoami}
+						.users=${this.users}
+					></tf-profile>`
+				: undefined;
+		let edit_profile;
+		if (
+			!this.loading &&
+			this.users[this.whoami]?.name === undefined &&
+			this.hash.substring(1) != this.whoami
+		) {
+			edit_profile = html` <div
+				class="w3-panel w3-padding w3-round w3-card-4 w3-theme-l3"
+			>
+				ℹ️ Follow your identity link ☝️ above to edit your profile and set your
+				name.
+			</div>`;
+		}
+		return html`
+			${this.render_sidebar()}
 			<div
 				style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: scroll"
 				id="main"

apps/ssb/tf-user.js

@@ -25,10 +25,7 @@ class TfUserElement extends LitElement {
 			>?</span
 		>`;
 		let name = this.users?.[this.id]?.name;
-		name =
-			name !== undefined
-				? html`<a target="_top" href=${'#' + this.id}>${name}</a>`
-				: html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
+		name = html`<a target="_top" href=${'#' + this.id}>${name !== undefined ? name : this.id}</a>`
 
 		if (this.users[this.id]) {
 			let image_link = this.users[this.id].image;
@@ -42,7 +39,7 @@ class TfUserElement extends LitElement {
 				/>`;
 			}
 		}
-		return html` <div style="display: inline-block; font-weight: bold">
+		return html` <div style="display: inline-block; font-weight: bold; text-wrap: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis">
 			${image} ${name}
 		</div>`;
 	}