Show recently used emojis in the emoji picker. #16

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&uSuRSjzMShdQllrt3gVYhWlixI6o6n0c1c/+pEhJCCI=.sha256"
+	"previous": "&W6OyIT7eLYsiAZ6BHEAsvF+OJXlVgFs1MH1eLf+EhkQ=.sha256"
 }

apps/ssb/emojis.js

@@ -1,3 +1,5 @@
+import * as tfrpc from '/static/tfrpc.js';
+
 let g_emojis;
 
 function get_emojis() {
@@ -10,8 +12,21 @@ function get_emojis() {
 	});
 }
 
-export function picker(callback, anchor) {
-	get_emojis().then(function (json) {
+async function get_recent(author) {
+	let recent = await tfrpc.rpc.query(`
+		SELECT DISTINCT content ->> '$.vote.expression' AS value
+		FROM messages
+		WHERE author = ? AND
+		content ->> '$.type' = 'vote'
+		ORDER BY timestamp DESC LIMIT 10
+	`, [author]);
+	return recent.map(x => x.value);
+}
+
+export async function picker(callback, anchor, author) {
+	let json = await get_emojis();
+	let recent = await get_recent(author);
+
 	let div = document.createElement('div');
 	div.id = 'emoji_picker';
 	div.style.color = '#000';
@@ -66,6 +81,40 @@ export function picker(callback, anchor) {
 		}
 		let search = input.value.toLowerCase();
 		let any_at_all = false;
+		if (recent) {
+			let emoji_to_name = {};
+			for (let row of Object.values(json)) {
+				for (let entry of Object.entries(row)) {
+					emoji_to_name[entry[1]] = entry[0];
+				}
+			}
+			let header = document.createElement('div');
+			header.appendChild(document.createTextNode('Recent'));
+			list.appendChild(header);
+			let any = false;
+			for (let entry of recent) {
+				if (
+					search &&
+					search.length &&
+					(emoji_to_name[entry] || '').toLowerCase().indexOf(search) == -1
+				) {
+					continue;
+				}
+				let emoji = document.createElement('span');
+				const k_size = '1.25em';
+				emoji.style.display = 'inline-block';
+				emoji.style.overflow = 'hidden';
+				emoji.style.cursor = 'pointer';
+				emoji.onclick = chosen;
+				emoji.title = emoji_to_name[entry] || entry;
+				emoji.appendChild(document.createTextNode(entry));
+				list.appendChild(emoji);
+				any = true;
+			}
+			if (!any) {
+				list.removeChild(header);
+			}
+		}
 		for (let row of Object.entries(json)) {
 			let header = document.createElement('div');
 			header.appendChild(document.createTextNode(row[0]));
@@ -110,5 +159,4 @@ export function picker(callback, anchor) {
 	console.log('adding click');
 	document.body.addEventListener('mousedown', cleanup);
 	window.addEventListener('keydown', key_down);
-	});
 }

apps/ssb/tf-message.js

@@ -125,7 +125,7 @@ class TfMessageElement extends LitElement {
 	}
 
 	react(event) {
-		emojis.picker((x) => this.vote(x));
+		emojis.picker((x) => this.vote(x), null, this.whoami);
 	}
 
 	show_image(link) {