diff --git a/apps/ssb.json b/apps/ssb.json index 3a42be4b..126fd878 100644 --- a/apps/ssb.json +++ b/apps/ssb.json @@ -1,5 +1,5 @@ { "type": "tildefriends-app", "emoji": "🦀", - "previous": "&08aLuFwq4TPRG2yO11MDX+2tdKcv1rgc2zLaBCB9fiE=.sha256" + "previous": "&klcMVQ9g0ielAoM3WjHRnyWQs4rs8fxmy6PbXIaK2ZU=.sha256" } diff --git a/apps/ssb/tf-profile.js b/apps/ssb/tf-profile.js index 1da3f4c7..cb4f7587 100644 --- a/apps/ssb/tf-profile.js +++ b/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}