ssb: Handful of URL encoding issues.

apps/intro.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "💡",
-	"previous": "&eN6DNPpQUNhGvxneLuLPgsOXR6qyFZ7u+MAz0b4fa7k=.sha256"
+	"previous": "&FGkkfFLaEID3V4lUjPbgCOwgEvNXkcVkzs0zzwD/gQ8=.sha256"
 }

apps/intro/index.html

@@ -34,6 +34,7 @@
 		class="w3-flex w3-dark-gray w3-center"
 	>
 		<div
+			id="scrollbox"
 			style="
 				flex: 1 1 auto;
 				overflow: auto;
@@ -251,6 +252,7 @@
 					index == 0 ? 'hidden' : 'visible';
 				document.getElementById('right').style.visibility =
 					index == slides.length - 1 ? 'hidden' : 'visible';
+				document.getElementById('scrollbox').scrollTo(0, 0);
 			}
 
 			let dots = [...document.getElementsByClassName('dot')];

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&/flKW9HptO5lHG19rMwc4GT9rGBFiRqVD87VDbWvsgc=.sha256"
+	"previous": "&KPnjURiuJa5b0ONjxz11bMm7yuhY9wlBTyB+fzl0zzk=.sha256"
 }

apps/ssb/tf-app.js

@@ -707,9 +707,7 @@ class TfElement extends LitElement {
 					.following=${this.following}
 					whoami=${this.whoami}
 					.users=${this.users}
-					query=${this.hash?.startsWith('#q=')
+					query=${this.search_text()}
-						? decodeURIComponent(this.hash.substring(3))
-						: null}
 				></tf-tab-search>
 			`;
 		}
@@ -758,7 +756,7 @@ class TfElement extends LitElement {
 			search_text.focus();
 			this.set_tab('search');
 		} else {
-			this.set_hash('#q=' + search_text.value);
+			this.set_hash('#q=' + encodeURIComponent(search_text.value));
 		}
 	}
 
@@ -768,6 +766,16 @@ class TfElement extends LitElement {
 		}
 	}
 
+	search_text() {
+		if (this.hash.startsWith('#q=')) {
+			try {
+				return decodeURIComponent(this.hash.substring('#q='.length));
+			} catch {
+				return this.hash.substring('#q='.length);
+			}
+		}
+	}
+
 	render() {
 		let self = this;
 
@@ -832,7 +840,7 @@ class TfElement extends LitElement {
 						: undefined
 				}
 				<button class="w3-bar-item w3-button w3-right" @click=${this.search}>🔍<span class="w3-hide-small">Search</span></button>
-				<input type="text" class=${'w3-input w3-bar-item w3-right w3-theme-d1' + (this.tab == 'search' ? ' w3-mobile' : ' w3-hide-small')} placeholder="keywords, @id, #channel" id="search_text" @keydown=${this.search_keydown}></input>
+				<input type="text" class=${'w3-input w3-bar-item w3-right w3-theme-d1' + (this.tab == 'search' ? ' w3-mobile' : ' w3-hide-small')} placeholder="keywords, @id, #channel" id="search_text" @keydown=${this.search_keydown} value=${this.search_text()}></input>
 			</div>
 		`;
 		let contents = this.guest

apps/ssb/tf-tab-news-feed.js

@@ -398,12 +398,19 @@ class TfTabNewsFeedElement extends LitElement {
 		);
 	}
 
+	make_messages_key() {
+		return JSON.stringify([
+			this.hash,
+			Object.keys(this.channels_latest ?? {}).filter((x) => x != '🔐'),
+		]);
+	}
+
 	async load_messages() {
 		let start_time = new Date();
 		let self = this;
 		this.loading++;
 		let messages = [];
-		let original_key = JSON.stringify([this.hash, this.channels_latest ?? {}]);
+		let original_key = this.make_messages_key();
 		try {
 			if (this._messages_key !== original_key) {
 				this.messages = [];
@@ -429,7 +436,7 @@ class TfTabNewsFeedElement extends LitElement {
 		} finally {
 			this.loading--;
 		}
-		let current_key = JSON.stringify([this.hash, this.channels_latest ?? {}]);
+		let current_key = this.make_messages_key();
 		if (current_key === original_key) {
 			this.messages = this.merge_messages(this.messages, messages);
 		}
@@ -486,19 +493,18 @@ class TfTabNewsFeedElement extends LitElement {
 	render() {
 		if (
 			!this.messages ||
-			this._messages_key !==
+			this._messages_key !== this.make_messages_key() ||
-				JSON.stringify([this.hash, this.channels_latest ?? {}]) ||
 			this._messages_following !== JSON.stringify(this.following) ||
-			this._private_messages !==
+			(this.hash.startsWith('#🔐') &&
-				JSON.stringify([
+				this._private_messages !==
-					this.private_messages,
+					JSON.stringify([
-					this.grouped_private_messages,
+						this.private_messages,
-				]) ||
+						this.grouped_private_messages,
-			this._channels_latest !==
+					]))
-				JSON.stringify(Object.keys(this.channels_latest))
 		) {
+			console.log(this._messages_key, this.make_messages_key());
 			console.log(
-				`loading messages for ${this.whoami} (messages=${!this.messages},${this._messages_hash != this.hash} following=${this._messages_following !== JSON.stringify(this.following)}, channels=${this._channels_latest !== JSON.stringify(Object.keys(this.channels_latest))}, private=${this._private_messages !== JSON.stringify([this.private_messages, this.grouped_private_messages])},${this.private_messages?.length},${Object.keys(this.grouped_private_messages ?? {}).length})`
+				`loading messages for ${this.whoami} (messages=${!this.messages},${this._messages_key != this.make_messages_key()} following=${this._messages_following !== JSON.stringify(this.following)}, private=${this._private_messages !== JSON.stringify([this.private_messages, this.grouped_private_messages])},${this.private_messages?.length},${Object.keys(this.grouped_private_messages ?? {}).length})`
 			);
 			this.load_messages();
 		}

apps/ssb/tf-tab-news.js

@@ -428,18 +428,18 @@ class TfTabNewsElement extends LitElement {
 					</p>
 					<div>
 						<div
-							id="show_sidebar"
+							style="width: 100%; max-width: 100%; white-space: nowrap; overflow: hidden"
-							class="w3-button w3-hide-large"
-							@click=${this.show_sidebar}
-						>
-							${this.unread_status()}&#9776;
-						</div>
-						<span
-							style="display: inline-block; width: 100%; max-width: 100%; white-space: nowrap; overflow: hidden"
 						>
+							<button
+								id="show_sidebar"
+								class="w3-button w3-hide-large"
+								@click=${this.show_sidebar}
+							>
+								${this.unread_status()}&#9776;
+							</button>
 							Welcome,
 							<tf-user id=${this.whoami} .users=${this.users}></tf-user>!
-						</span>
+						</div>
 						${edit_profile}
 					</div>
 					<div>

apps/ssb/tf-tab-search.js

@@ -44,36 +44,37 @@ class TfTabSearchElement extends LitElement {
 		this.error = undefined;
 		this.results = [];
 		this.messages = [];
-		if (query.startsWith('sql:')) {
+		try {
-			this.messages = [];
+			if (query.startsWith('sql:')) {
-			try {
+				this.messages = [];
 				this.results = await tfrpc.rpc.query(
 					query.substring('sql:'.length),
 					[]
 				);
-			} catch (e) {
+			} else {
-				this.results = [];
+				let results = await tfrpc.rpc.query(
-				this.error = e;
+					`
+						SELECT messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+						FROM messages_fts(?)
+						JOIN messages ON messages.rowid = messages_fts.rowid
+						JOIN json_each(?) AS following ON messages.author = following.value
+						ORDER BY timestamp DESC limit 100
+					`,
+					['"' + query.replace('"', '""') + '"', JSON.stringify(this.following)]
+				);
+				search = this.renderRoot.getElementById('search');
+				if (search) {
+					search.value = query;
+					search.focus();
+					search.select();
+				}
+				this.messages = results;
 			}
-		} else {
+		} catch (e) {
-			let results = await tfrpc.rpc.query(
+			this.messages = [];
-				`
+			this.results = [];
-					SELECT messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+			this.error = e;
-					FROM messages_fts(?)
+			console.log(e);
-					JOIN messages ON messages.rowid = messages_fts.rowid
-					JOIN json_each(?) AS following ON messages.author = following.value
-					ORDER BY timestamp DESC limit 100
-				`,
-				['"' + query.replace('"', '""') + '"', JSON.stringify(this.following)]
-			);
-			console.log('Done.');
-			search = this.renderRoot.getElementById('search');
-			if (search) {
-				search.value = query;
-				search.focus();
-				search.select();
-			}
-			this.messages = results;
 		}
 	}
 

apps/ssb/tf-user.js

@@ -39,7 +39,9 @@ class TfUserElement extends LitElement {
 		name = this.icon_only
 			? undefined
 			: !this.nolink
-				? html`<a target="_top" href=${'#' + this.id}>${name_string}</a>`
+				? html`<a target="_top" href=${'#' + encodeURIComponent(this.id)}
+						>${name_string}</a
+					>`
 				: html`<span>${name_string}</span>`;
 
 		if (user) {