diff --git a/apps/ssb/script.js b/apps/ssb/script.js index b6c187211..d1696c011 100644 --- a/apps/ssb/script.js +++ b/apps/ssb/script.js @@ -8,7 +8,8 @@ import * as tf_user from './tf-user.js'; import * as tf_compose from './tf-compose.js'; import * as tf_news from './tf-news.js'; import * as tf_profile from './tf-profile.js'; +import * as tf_tab_mentions from './tf-tab-mentions.js'; import * as tf_tab_news from './tf-tab-news.js'; import * as tf_tab_news_feed from './tf-tab-news-feed.js'; import * as tf_tab_search from './tf-tab-search.js'; -import * as tf_tab_connections from './tf-tab-connections.js'; +import * as tf_tab_connections from './tf-tab-connections.js'; \ No newline at end of file diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js index 2be0bf5db..8cd38743b 100644 --- a/apps/ssb/tf-app.js +++ b/apps/ssb/tf-app.js @@ -64,6 +64,8 @@ class TfElement extends LitElement { this.tab = 'search'; } else if (this.hash === '#connections') { this.tab = 'connections'; + } else if (this.hash === '#mentions') { + this.tab = 'mentions'; } else { this.tab = 'news'; } @@ -273,6 +275,10 @@ class TfElement extends LitElement { return html` `; + } else if (this.tab === 'mentions') { + return html` + + `; } else if (this.tab === 'search') { return html` @@ -286,6 +292,8 @@ class TfElement extends LitElement { await tfrpc.rpc.setHash('#'); } else if (tab === 'connections') { await tfrpc.rpc.setHash('#connections'); + } else if (tab === 'mentions') { + await tfrpc.rpc.setHash('#mentions'); } } @@ -304,6 +312,7 @@ class TfElement extends LitElement {
self.set_tab('news')}> self.set_tab('connections')}> + self.set_tab('mentions')}> self.set_tab('search')}>
`; diff --git a/apps/ssb/tf-tab-mentions.js b/apps/ssb/tf-tab-mentions.js new file mode 100644 index 000000000..3d6924b20 --- /dev/null +++ b/apps/ssb/tf-tab-mentions.js @@ -0,0 +1,65 @@ +import {LitElement, html, unsafeHTML} from './lit-all.min.js'; +import * as tfrpc from '/static/tfrpc.js'; +import {styles} from './tf-styles.js'; + +class TfTabMentionsElement extends LitElement { + static get properties() { + return { + whoami: {type: String}, + users: {type: Object}, + following: {type: Array}, + expanded: {type: Object}, + messages: {type: Array}, + }; + } + + static styles = styles; + + constructor() { + super(); + let self = this; + this.whoami = null; + this.users = {}; + this.following = []; + this.expanded = {}; + this.messages = []; + } + + async load() { + console.log('Loading...', this.whoami); + let results = await tfrpc.rpc.query(` + SELECT messages.* + FROM messages_fts(?) + JOIN messages ON messages.rowid = messages_fts.rowid + JOIN json_each(?) AS following ON messages.author = following.value + WHERE messages.author != ? + ORDER BY timestamp DESC limit 20 + `, + ['"' + this.whoami.replace('"', '""') + '"', JSON.stringify(this.following), this.whoami]); + console.log('Done.'); + this.messages = results; + } + + on_expand(event) { + if (event.detail.expanded) { + let expand = {}; + expand[event.detail.id] = true; + this.expanded = Object.assign({}, this.expanded, expand); + } else { + delete this.expanded[event.detail.id]; + this.expanded = Object.assign({}, this.expanded); + } + } + + render() { + let self = this; + if (!this.loading) { + this.loading = true; + this.load(); + } + return html` + + `; + } +} +customElements.define('tf-tab-mentions', TfTabMentionsElement); \ No newline at end of file