From 2f893494b09a581db144eddd37ea8b706495dfe4 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 9 Jul 2025 17:50:06 -0400
Subject: [PATCH] ssb: Show the number of accounts followed on the profile
 show/hide followed button.

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-profile.js | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 59497822..1db922be 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&lX0ik2WzwWTPa2xkziPbyRZJHP9far9epKqdVIIqFM8=.sha256"
+	"previous": "&bfTIcHq6RtCC3tRZhVpQ0obywbMBjABT2Mk02NLGZGk=.sha256"
 }
diff --git a/apps/ssb/tf-profile.js b/apps/ssb/tf-profile.js
index cb4f7587..04a33882 100644
--- a/apps/ssb/tf-profile.js
+++ b/apps/ssb/tf-profile.js
@@ -14,6 +14,7 @@ class TfProfileElement extends LitElement {
 			sequence: {type: Number},
 			following: {type: Boolean},
 			blocking: {type: Boolean},
+			show_followed: {type: Boolean},
 		};
 	}
 
@@ -202,11 +203,7 @@ 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';
-		}
+		this.show_followed = !this.show_followed;
 	}
 
 	async load_follows() {
@@ -214,12 +211,13 @@ class TfProfileElement extends LitElement {
 		return html`
 			<div class="w3-container">
 				<button
-					class="w3-button w3-block w3-theme-d1"
+					class="w3-button w3-block w3-theme-d1 followed_accounts"
 					@click=${this.toggle_account_list}
 				>
-					Show Followed Accounts
+					${this.show_followed ? 'Hide' : 'Show'} Followed Accounts
+					(${Object.keys(accounts).length})
 				</button>
-				<div class="w3-hide w3-card">
+				<div class=${'w3-card' + (this.show_followed ? '' : ' w3-hide')}>
 					<ul class="w3-ul w3-theme-d4 w3-border-theme">
 						${Object.keys(accounts).map(
 							(x) => html`