ssb: Make the connections tab a bit less scary.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 30m46s

This commit is contained in:
Cory McWilliams 2025-02-27 20:04:38 -05:00
parent 8b47938238
commit f500e14aa3
2 changed files with 29 additions and 18 deletions

View File

@ -1,5 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "🦀",
"previous": "&jAAzd36Nmpw0sRA1Dx9wLiIwGX+q//+S/Han+RLlEOw=.sha256"
"previous": "&Qae0CxJGEH7OspuapuXX/GurmV+VBtQiMhHRmCBKCwU=.sha256"
}

View File

@ -206,6 +206,23 @@ class TfTabConnectionsElement extends LitElement {
});
}
toggle_accordian(id) {
let element = this.renderRoot.getElementById(id);
element.classList.toggle('w3-hide');
}
valid_connections() {
return this.connections.filter((x) => x.tunnel === undefined);
}
valid_broadcasts() {
return this.broadcasts
.filter((x) => x.address)
.filter(
(x) => this.connections.map((c) => c.id).indexOf(x.pubkey) == -1
);
}
render() {
let self = this;
return html`
@ -220,27 +237,21 @@ class TfTabConnectionsElement extends LitElement {
>
Connect
</button>
<h2>Broadcasts</h2>
<ul class="w3-ul w3-border">
${this.broadcasts
.filter((x) => x.address)
.filter(
(x) => self.connections.map((c) => c.id).indexOf(x.pubkey) == -1
)
.map((x) => self.render_broadcast(x))}
</ul>
<h2>Connections</h2>
<ul class="w3-ul w3-border">
${this.connections
.filter((x) => x.tunnel === undefined)
<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('connections')}>Connections (${this.valid_connections().length})</h2>
<ul class="w3-ul w3-border" id="connections">
${this.valid_connections()
.map(
(x) => html`
<li class="w3-bar">${this.render_connection(x)}</li>
`
)}
</ul>
<h2>Stored Connections</h2>
<ul class="w3-ul w3-border">
<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('broadcasts')}>Broadcasts (${this.valid_broadcasts().length})</h2>
<ul class="w3-ul w3-border w3-hide" id="broadcasts">
${this.valid_broadcasts().map((x) => self.render_broadcast(x))}
</ul>
<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('stored_connections')}>Stored Connections (${this.stored_connections.length})</h2>
<ul class="w3-ul w3-border w3-hide" id="stored_connections">
${this.stored_connections.map(
(x) => html`
<li>
@ -267,8 +278,8 @@ class TfTabConnectionsElement extends LitElement {
`
)}
</ul>
<h2>Local Accounts</h2>
<div class="w3-container">
<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('local_accounts')}>Local Accounts (${this.identities.length})</h2>
<div class="w3-container w3-hide" id="local_accounts">
${this.identities.map(
(x) =>
html`<div