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