ssb: Show some suggested accounts to follow.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&N69/NfCoe/HmdG5Hl/ulq/CDYLhDYzi50jbg2h3VPuc=.sha256"
+	"previous": "&ywgXrIlVu5chLPseAwTXdpzaxGep+rjs1ZPeV4tj3wM=.sha256"
 }

apps/ssb/tf-tab-news.js

@@ -128,6 +128,23 @@ class TfTabNewsElement extends LitElement {
 		return this.hash.startsWith('##') ? this.hash.substring(2) : undefined;
 	}
 
+	compare_follows(a, b) {
+		return a[1].followed - b[1].followed;
+	}
+
+	suggested_follows() {
+		let self = this;
+		return Object.entries(this.users).filter(
+			(x) => (x[1].follow_depth > 1)
+		).sort(
+			self.compare_follows
+		).slice(
+			0, 8
+		).map(
+			(x) => (x[0])
+		);
+	}
+
 	render_sidebar() {
 		return html`
 			<div
@@ -153,7 +170,7 @@ class TfTabNewsElement extends LitElement {
 							>
 						`
 					: undefined}
-				<div class="w3-bar-item w3-theme-d2">Channels</div>
+				<h4 class="w3-bar-item w3-theme-d2">Channels</h4>
 				<a
 					href="#"
 					class="w3-bar-item w3-button"
@@ -195,7 +212,7 @@ class TfTabNewsElement extends LitElement {
 					`
 				)}
 
-				<div class="w3-bar-item w3-theme-d2">Connections</div>
+				<h4 class="w3-bar-item w3-theme-d2">Connections</h4>
 				${this.connections.map(
 					(x) => html`
 						<tf-user
@@ -206,6 +223,17 @@ class TfTabNewsElement extends LitElement {
 						></tf-user>
 					`
 				)}
+				<h4 class="w3-bar-item w3-theme-d2">Suggested Follows</h4>
+				${this.suggested_follows().map(
+					(x) => html`
+						<tf-user
+							class="w3-bar-item"
+							style="max-width: 100%"
+							id=${x}
+							.users=${this.users}
+						></tf-user>
+					`
+				)}
 			</div>
 			<div
 				class="w3-overlay"