Primitive display of recent channels/tags and the same on messages.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4329 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-06-22 00:27:27 +00:00
parent f018c367ed
commit 6022001d66
5 changed files with 62 additions and 7 deletions

View File

@ -13,3 +13,4 @@ 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_news_feed from './tf-tab-news-feed.js';
import * as tf_tab_search from './tf-tab-search.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';
import * as tf_tag from './tf-tag.js';

View File

@ -16,6 +16,7 @@ class TfElement extends LitElement {
following: {type: Array}, following: {type: Array},
users: {type: Object}, users: {type: Object},
ids: {type: Array}, ids: {type: Array},
tags: {type: Array},
}; };
} }
@ -32,6 +33,7 @@ class TfElement extends LitElement {
this.following = []; this.following = [];
this.users = {}; this.users = {};
this.loaded = false; this.loaded = false;
this.tags = [];
tfrpc.rpc.getBroadcasts().then(b => { self.broadcasts = b || []; }); tfrpc.rpc.getBroadcasts().then(b => { self.broadcasts = b || []; });
tfrpc.rpc.getConnections().then(c => { self.connections = c || []; }); tfrpc.rpc.getConnections().then(c => { self.connections = c || []; });
tfrpc.rpc.getHash().then(hash => self.set_hash(hash)); tfrpc.rpc.getHash().then(hash => self.set_hash(hash));
@ -253,12 +255,24 @@ class TfElement extends LitElement {
`; `;
} }
async load_recent_tags() {
this.tags = await tfrpc.rpc.query(`
WITH recent AS (SELECT '#' || json_extract(content, '$.channel') AS tag
FROM messages
WHERE json_extract(content, '$.channel') IS NOT NULL
ORDER BY timestamp DESC LIMIT 100)
SELECT tag, COUNT(*) AS count FROM recent GROUP BY tag ORDER BY count DESC LIMIT 10
`, []);
}
async load() { async load() {
let whoami = this.whoami; let whoami = this.whoami;
let tags = this.load_recent_tags();
let [following, users] = await this.following_deep([whoami], 2, {}); let [following, users] = await this.following_deep([whoami], 2, {});
users = await this.fetch_about(following.sort(), users); users = await this.fetch_about(following.sort(), users);
this.following = following; this.following = following;
this.users = users; this.users = users;
await tags;
console.log(`load finished ${whoami} => ${this.whoami}`); console.log(`load finished ${whoami} => ${this.whoami}`);
this.whoami = whoami; this.whoami = whoami;
this.loaded = whoami; this.loaded = whoami;
@ -325,6 +339,7 @@ class TfElement extends LitElement {
return html` return html`
${this.render_id_picker()} ${this.render_id_picker()}
${tabs} ${tabs}
${this.tags.map(x => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`)}
${contents} ${contents}
`; `;
} }

View File

@ -37,11 +37,6 @@ class TfComposeElement extends LitElement {
for (let match of text.matchAll(/\[([^\[]+)]\(([@&%][^\)]+)/g)) { for (let match of text.matchAll(/\[([^\[]+)]\(([@&%][^\)]+)/g)) {
let name = match[1]; let name = match[1];
let link = match[2]; let link = match[2];
if ((link.startsWith('&') && link.length != 52) ||
(link.startsWith('@') && link.length != 53) ||
(link.startsWith('%') && link.length != 52)) {
continue;
}
let balance = 0; let balance = 0;
let bracket_end = match.index + match[1].length + '[]'.length - 1; let bracket_end = match.index + match[1].length + '[]'.length - 1;
for (let i = bracket_end; i >= 0; i--) { for (let i = bracket_end; i >= 0; i--) {
@ -159,7 +154,6 @@ class TfComposeElement extends LitElement {
size: buffer.length ?? buffer.byteLength, size: buffer.length ?? buffer.byteLength,
}; };
let edit = self.renderRoot.getElementById('edit'); let edit = self.renderRoot.getElementById('edit');
self.notify(draft);
edit.value += `\n![${name}](${id})`; edit.value += `\n![${name}](${id})`;
self.change(); self.change();
self.input(); self.input();

View File

@ -220,6 +220,26 @@ class TfMessageElement extends LitElement {
} }
} }
render_channels() {
let content = this.message?.content;
if (this.decrypted?.type == 'post') {
content = this.decrypted;
}
let channels = [];
if (typeof content.channel === 'string') {
channels.push(`#${content.channel}`);
}
if (Array.isArray(content.mentions)) {
for (let mention of content.mentions) {
if (typeof mention?.link === 'string' &&
mention.link.startsWith('#')) {
channels.push(mention.link);
}
}
}
return channels.map(x => html`<tf-tag tag=${x}></tf-tag>`);
}
async try_decrypt(content) { async try_decrypt(content) {
let result = await tfrpc.rpc.try_decrypt(this.whoami, content); let result = await tfrpc.rpc.try_decrypt(this.whoami, content);
if (result) { if (result) {
@ -330,6 +350,7 @@ class TfMessageElement extends LitElement {
`; `;
let content_html = let content_html =
html` html`
${this.render_channels()}
<div @click=${this.body_click}>${body}</div> <div @click=${this.body_click}>${body}</div>
${this.render_mentions()} ${this.render_mentions()}
`; `;

24
apps/ssb/tf-tag.js Normal file
View File

@ -0,0 +1,24 @@
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import {styles} from './tf-styles.js';
class TfTagElement extends LitElement {
static get properties() {
return {
tag: {type: String},
count: {type: Number},
};
}
static styles = styles;
constructor() {
super();
}
render() {
let number = this.count ? html` (${this.count})` : undefined;
return html`<a href="#q=${this.tag}" style="display: inline-block; margin: 3px; border: 1px solid black; background-color: #444; padding: 4px; border-radius: 3px">${this.tag}${number}</a>`;
}
}
customElements.define('tf-tag', TfTagElement);