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

apps/ssb/script.js

@@ -12,4 +12,5 @@ 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';
+import * as tf_tag from './tf-tag.js';

apps/ssb/tf-app.js

@@ -16,6 +16,7 @@ class TfElement extends LitElement {
 			following: {type: Array},
 			users: {type: Object},
 			ids: {type: Array},
+			tags: {type: Array},
 		};
 	}
 
@@ -32,6 +33,7 @@ class TfElement extends LitElement {
 		this.following = [];
 		this.users = {};
 		this.loaded = false;
+		this.tags = [];
 		tfrpc.rpc.getBroadcasts().then(b => { self.broadcasts = b || []; });
 		tfrpc.rpc.getConnections().then(c => { self.connections = c || []; });
 		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() {
 		let whoami = this.whoami;
+		let tags = this.load_recent_tags();
 		let [following, users] = await this.following_deep([whoami], 2, {});
 		users = await this.fetch_about(following.sort(), users);
 		this.following = following;
 		this.users = users;
+		await tags;
 		console.log(`load finished ${whoami} => ${this.whoami}`);
 		this.whoami = whoami;
 		this.loaded = whoami;
@@ -325,6 +339,7 @@ class TfElement extends LitElement {
 		return html`
 			${this.render_id_picker()}
 			${tabs}
+			${this.tags.map(x => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`)}
 			${contents}
 		`;
 	}

apps/ssb/tf-compose.js

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

apps/ssb/tf-message.js

@@ -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) {
 		let result = await tfrpc.rpc.try_decrypt(this.whoami, content);
 		if (result) {
@@ -330,6 +350,7 @@ class TfMessageElement extends LitElement {
 					`;
 				let content_html =
 					html`
+						${this.render_channels()}
 						<div @click=${this.body_click}>${body}</div>
 						${this.render_mentions()}
 					`;

apps/ssb/tf-tag.js

@@ -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);