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/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('&') &&
-			mention.type?.startsWith('image/')) {
+		if (!mention?.link || typeof(mention.link) != 'string') {
+			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) {
-		let query = this.renderRoot.getElementById('search').value;
+	async search(query) {
 		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>
-			<input type="button" value="Search" @click=${this.search}></input>
+			<div style="display: flex; flex-direction: row">
+				<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>
 		`;
 	}