ssb: Expose a list of followed accounts on the profile page. #122

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&R6lVyXLYem8Qkuhok/USflvzqw/ZgGic1aUsE23yzR0=.sha256"
+	"previous": "&klcMVQ9g0ielAoM3WjHRnyWQs4rs8fxmy6PbXIaK2ZU=.sha256"
 }

apps/ssb/tf-message.js

@@ -94,7 +94,9 @@ class TfMessageElement extends LitElement {
 				return '👎';
 			} else if (expression === 'heart') {
 				return '❤️';
-			} else if ((expression ?? '').split('').every((x) => x.charCodeAt(0) < 256)) {
+			} else if (
+				(expression ?? '').split('').every((x) => x.charCodeAt(0) < 256)
+			) {
 				return '👍';
 			} else {
 				return expression;
@@ -656,6 +658,7 @@ class TfMessageElement extends LitElement {
 					<div class="w3-padding">
 						${this.content_group_by_author().map(
 							(x) => html`
+								<div>
 									<tf-user id=${x.author} .users=${this.users}></tf-user>
 									${x.action}
 									${x.users.map(
@@ -663,6 +666,7 @@ class TfMessageElement extends LitElement {
 											<tf-user id=${y} .users=${this.users}></tf-user>
 										`
 									)}
+								</div>
 							`
 						)}
 					</div>

apps/ssb/tf-profile.js

@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML} from './lit-all.min.js';
+import {LitElement, html, until, unsafeHTML} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import * as tfutils from './tf-utils.js';
 import {styles} from './tf-styles.js';
@@ -200,6 +200,40 @@ class TfProfileElement extends LitElement {
 		}
 	}
 
+	toggle_account_list(event) {
+		let content = event.srcElement.nextElementSibling;
+		if (content.classList.toggle('w3-hide')) {
+			event.srcElement.innerText = 'Show Followed Accounts';
+		} else {
+			event.srcElement.innerText = 'Hide Followed Accounts';
+		}
+	}
+
+	async load_follows() {
+		let accounts = await tfrpc.rpc.following([this.id], 1);
+		return html`
+			<div class="w3-container">
+				<button
+					class="w3-button w3-block w3-theme-d1"
+					@click=${this.toggle_account_list}
+				>
+					Show Followed Accounts
+				</button>
+				<div class="w3-hide w3-card">
+					<ul class="w3-ul w3-theme-d4 w3-border-theme">
+						${Object.keys(accounts).map(
+							(x) => html`
+								<li class="w3-border-theme">
+									<tf-user id=${x} .users=${this.users}></tf-user>
+								</li>
+							`
+						)}
+					</ul>
+				</div>
+			</div>
+		`;
+	}
+
 	render() {
 		this.load();
 		let self = this;
@@ -314,6 +348,7 @@ class TfProfileElement extends LitElement {
 					Blocked by ${profile.blocked} identities.
 				</div>
 			</div>
+			${until(this.load_follows(), html`<p>Loading accounts followed...</p>`)}
 			<footer class="w3-container">
 				<p>
 					${edit}