From 2408e076ffc24c651b3181e94a7e9744474e2ceb Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 31 May 2025 11:28:09 -0400
Subject: [PATCH] ssb: Indicate connection status with some colors in the
 connections list in the sidebar. #122

---
 apps/ssb.json           |  2 +-
 apps/ssb/tf-tab-news.js | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 6c89e06f..130cbbf7 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&F7YXac7Ds65INEMv9txEFoRALIuQzhu03Ke+ZrTt9A8=.sha256"
+	"previous": "&Or8fTzbrcxzdGAtSI3AZNQbS97+mJ/zVkGJx+uIzBeY=.sha256"
 }
diff --git a/apps/ssb/tf-tab-news.js b/apps/ssb/tf-tab-news.js
index 0586c0e0..69bb2978 100644
--- a/apps/ssb/tf-tab-news.js
+++ b/apps/ssb/tf-tab-news.js
@@ -235,12 +235,18 @@ class TfTabNewsElement extends LitElement {
 					<h4 style="margin: 0">Connections</h4>
 				</a>
 				${this.connections
-					.filter((x) => x.id && !x.destroy_reason)
+					.filter((x) => x.id)
 					.map(
 						(x) => html`
 							<tf-user
 								class="w3-bar-item"
-								style="max-width: 100%"
+								style=${x.destroy_reason
+									? 'border-left: 4px solid red; border-right: 4px solid red'
+									: x.connected
+										? x.flags?.one_shot
+											? 'border-left: 4px solid blue; border-right: 4px solid blue'
+											: 'border-left: 4px solid green; border-right: 4px solid green'
+										: ''}
 								id=${x.id}
 								fallback_name=${x.host}
 								.users=${this.users}