Did some routing for the search tab.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3984 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/ssblit.json

@@ -1 +1 @@
-{"type":"tildefriends-app","files":{"app.js":"&viCT+Sz8weP/j5V47w0wA4sk46HM4uy6lajX5NtoqHE=.sha256","lit-all.min.js":"&N4A12AsifdQgwdpII0SFtG513BfoLpmPjdJ9VTDftpg=.sha256","index.html":"&WH8A5tF25xlfPDGei2TCQc2/HJFJf5DuRN1GRSYQhhk=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&oFY9wO4MnujgfGNGv4VggHc5V5JwX4C8csqKZ6KJYbE=.sha256","tf-id-picker.js":"&pg1gLK150HFai73TcmAe5E/dMpMqmbhyre/+/J4XmHo=.sha256","tf-app.js":"&Thhwiobap0GeGxpH9r7lJAPM8r+v72Ra6xyDM/RlVnA=.sha256","tf-message.js":"&RaNXP146n6Q4wLqlf8YYaL1vIxhKT3k5RCQ6G0k5VXs=.sha256","tf-user.js":"&L6+7BnBq+UOoTMO6o8+u5JFTl0UBtCPDw8bb8ppDrkA=.sha256","tf-utils.js":"&N2yKZwFnb2GbPeipgQtu6xFvezENNOgud9G7EhCQ/K0=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&oo0iWvT+c2rU91zWpBIfPePRzmU8qmSnVOm+QCQqG/I=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&pqYLDE/13PyEt2ceeFqvnwZ8NqWfPfpDBt4vP8SeHbs=.sha256","tf-styles.js":"&Ab+SjsySJ74kwK3EQD/j72yXYJlFAhkJ5EqyJfYpJEk=.sha256","tf-profile.js":"&vRKjsnYvOiHCQahzEfznCvP5YDwUPtltlpWf+pxwZ1Y=.sha256","commonmark-linkify.js":"&X+hNNkmSRvKY86khyAun+cXksquXbMakZdINbGbx30g=.sha256","tf-tab-search.js":"&NUGpMnLR3eYwrdjZaJAd8s4Rj+WPazJhWWX5jkMdNRI=.sha256","tf-tab-news.js":"&ehXkzOR+kQmiTHRtu5GPDMwrB4a4Z9vVsTo4ldhdu/E=.sha256","tf-tab-connections.js":"&jSnF/5NmgqxRze1XQAEGOW5mPzOV1/8aCyrDRZu34IQ=.sha256","tf-news.js":"&C1dKe98kQOkClnAbGvcreC15IdlTrD9J4RFohspnsSE=.sha256"}}
+{"type":"tildefriends-app","files":{"app.js":"&XCpiJOtpMzQz5Zo+Hu9f3ppQON9PxFdV4XnS2Ae+Ye8=.sha256","lit-all.min.js":"&N4A12AsifdQgwdpII0SFtG513BfoLpmPjdJ9VTDftpg=.sha256","index.html":"&WH8A5tF25xlfPDGei2TCQc2/HJFJf5DuRN1GRSYQhhk=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&oFY9wO4MnujgfGNGv4VggHc5V5JwX4C8csqKZ6KJYbE=.sha256","tf-id-picker.js":"&pg1gLK150HFai73TcmAe5E/dMpMqmbhyre/+/J4XmHo=.sha256","tf-app.js":"&JloBYWTWVuz5ibCXOv+tLdlr6BF266R/iZ/iOL19/pw=.sha256","tf-message.js":"&LZA/ehDrUQj4YBXKXjYKQfG7UCmdnWeor34QkfJYIpo=.sha256","tf-user.js":"&L6+7BnBq+UOoTMO6o8+u5JFTl0UBtCPDw8bb8ppDrkA=.sha256","tf-utils.js":"&N2yKZwFnb2GbPeipgQtu6xFvezENNOgud9G7EhCQ/K0=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&oo0iWvT+c2rU91zWpBIfPePRzmU8qmSnVOm+QCQqG/I=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&pqYLDE/13PyEt2ceeFqvnwZ8NqWfPfpDBt4vP8SeHbs=.sha256","tf-styles.js":"&Ab+SjsySJ74kwK3EQD/j72yXYJlFAhkJ5EqyJfYpJEk=.sha256","tf-profile.js":"&vRKjsnYvOiHCQahzEfznCvP5YDwUPtltlpWf+pxwZ1Y=.sha256","commonmark-linkify.js":"&X+hNNkmSRvKY86khyAun+cXksquXbMakZdINbGbx30g=.sha256","tf-tab-search.js":"&ESt2vMG19sH5j6ungKua/ZuvIGslyuWyb3juXdOCecg=.sha256","tf-tab-news.js":"&ehXkzOR+kQmiTHRtu5GPDMwrB4a4Z9vVsTo4ldhdu/E=.sha256","tf-tab-connections.js":"&jSnF/5NmgqxRze1XQAEGOW5mPzOV1/8aCyrDRZu34IQ=.sha256","tf-news.js":"&C1dKe98kQOkClnAbGvcreC15IdlTrD9J4RFohspnsSE=.sha256"}}

apps/cory/ssblit/app.js

@@ -49,6 +49,9 @@ core.register('message', async function message_handler(message) {
 tfrpc.register(function getHash(id, message) {
 	return g_hash;
 });
+tfrpc.register(function setHash(hash) {
+	return app.setHash(hash);
+});
 ssb.addEventListener('message', async function(id) {
 	await tfrpc.rpc.notifyNewMessage(id);
 });

apps/cory/ssblit/tf-app.js

@@ -33,9 +33,9 @@ class TfElement extends LitElement {
 		this.loaded = false;
 		tfrpc.rpc.getBroadcasts().then(b => { self.broadcasts = b || [] });
 		tfrpc.rpc.getConnections().then(c => { self.connections = c || [] });
-		tfrpc.rpc.getHash().then(hash => self.hash = hash || '#');
+		tfrpc.rpc.getHash().then(hash => self.set_hash(hash));
 		tfrpc.register(function hashChanged(hash) {
-			self.hash = hash;
+			self.set_hash(hash);
 		});
 		tfrpc.register(async function notifyNewMessage(id) {
 			await self.fetch_new_message(id);
@@ -50,6 +50,15 @@ class TfElement extends LitElement {
 		tfrpc.rpc.localStorageGet('whoami').then(whoami => self.whoami = whoami);
 	}
 
+	set_hash(hash) {
+		this.hash = hash || '#';
+		if (this.hash.startsWith('#q=')) {
+			this.tab = 'search';
+		} else {
+			this.tab = 'news';
+		}
+	}
+
 	async contacts_internal(id, last_row_id, following, max_row_id) {
 		let result = Object.assign({}, following[id] || {});
 		result.following = result.following || {};
@@ -246,7 +255,7 @@ class TfElement extends LitElement {
 			`;
 		} else if (this.tab === 'search') {
 			return html`
-				<tf-tab-search .following=${this.following} whoami=${this.whoami} .users=${this.users}></tf-tab-search>
+				<tf-tab-search .following=${this.following} whoami=${this.whoami} .users=${this.users} query=${this.hash?.startsWith('#q=') ? decodeURIComponent(this.hash.substring(3)) : null}></tf-tab-search>
 			`;
 		}
 	}

apps/cory/ssblit/tf-message.js

@@ -102,8 +102,10 @@ class TfMessageElement extends LitElement {
 	}
 
 	render_mention(mention) {
-		if (mention.link?.startsWith('&') &&
+		if (!mention?.link || typeof(mention.link) != 'string') {
-			mention.type?.startsWith('image/')) {
+			return html`<pre>${JSON.stringify(mention)}</pre>`;
+		} else if (mention?.link?.startsWith('&') &&
+			mention?.type?.startsWith('image/')) {
 			return html`
 				<img src=${'/' + mention.link + '/view'} style="max-width: 128px; max-height: 128px" title=${mention.name} @click=${() => this.show_image('/' + mention.link + '/view')}>
 			`;

apps/cory/ssblit/tf-tab-search.js

@@ -8,6 +8,7 @@ class TfTabSearchElement extends LitElement {
 			whoami: {type: String},
 			users: {type: Object},
 			following: {type: Array},
+			query: {type: String},
 		}
 	}
 
@@ -21,9 +22,15 @@ class TfTabSearchElement extends LitElement {
 		this.following = [];
 	}
 
-	async search(event) {
+	async search(query) {
-		let query = this.renderRoot.getElementById('search').value;
 		console.log('Searching...', this.whoami, query);
+		let search = this.renderRoot.getElementById('search');
+		if (search ) {
+			search.value = query;
+			search.focus();
+			search.select();
+		}
+		await tfrpc.rpc.setHash('#q=' + encodeURIComponent(query));
 		let results = await tfrpc.rpc.query(`
 				SELECT messages.*
 				FROM messages_fts(?)
@@ -33,20 +40,31 @@ class TfTabSearchElement extends LitElement {
 			`,
 			['"' + query.replace('"', '""') + '"', JSON.stringify(this.following)]);
 		console.log('Done.');
-		this.renderRoot.getElementById('search').value = '';
+		search = this.renderRoot.getElementById('search');
+		if (search ) {
+			search.value = query;
+			search.focus();
+			search.select();
+		}
 		this.renderRoot.getElementById('news').messages = results;
 	}
 
 	search_keydown(event) {
 		if (event.keyCode == 13) {
-			this.search();
+			this.query = this.renderRoot.getElementById('search').value;
 		}
 	}
 
 	render() {
+		if (this.query !== this.last_query) {
+			this.search(this.query);
+		}
+		let self = this;
 		return html`
-			<input type="text" id="search" @keydown=${this.search_keydown}></input>
+			<div style="display: flex; flex-direction: row">
-			<input type="button" value="Search" @click=${this.search}></input>
+				<input type="text" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>
+				<input type="button" value="Search" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}></input>
+			</div>
 			<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users}></tf-news>
 		`;
 	}

core/client.js

@@ -26,6 +26,7 @@ const k_api = {
 	localStorageGet: {args: ['key'], func: api_localStorageGet},
 	requestPermission: {args: ['permission', 'id'], func: api_requestPermission},
 	print: {args: ['...'], func: api_print},
+	setHash: {args: ['hash'], func: api_setHash},
 };
 
 window.addEventListener("keydown", function(event) {
@@ -505,6 +506,10 @@ function api_print() {
 	console.log('app>', ...arguments);
 }
 
+function api_setHash(hash) {
+	window.location.hash = hash;
+}
+
 function hidePermissions() {
 	let permissions = document.getElementById('permissions_settings');
 	while (permissions.firstChild) {