ssb: Move the search to an ever-present textbox on the menu bar.

apps/ssb/tf-app.js

@@ -752,6 +752,16 @@ class TfElement extends LitElement {
 		input.click();
 	}
 
+	search() {
+		this.set_hash('#q=' + this.renderRoot.getElementById('search_text').value);
+	}
+
+	search_keydown(event) {
+		if (event.keyCode == 13) {
+			this.search();
+		}
+	}
+
 	render() {
 		let self = this;
 
@@ -765,7 +775,6 @@ class TfElement extends LitElement {
 		const k_tabs = {
 			'📰': 'news',
 			'📡': 'connections',
-			'🔍': 'search',
 		};
 
 		let tabs = html`
@@ -773,25 +782,27 @@ class TfElement extends LitElement {
 				class="w3-bar w3-theme-l1"
 				style="position: static; top: 0; z-index: 10"
 			>
-				${this.is_administrator
-					? html`
-							<button
-								class=${'w3-bar-item w3-button w3-circle w3-ripple' +
-								(this.connections?.some((x) => x.flags.one_shot)
-									? ' w3-spin'
-									: '')}
-								@click=${this.refresh}
-							>
-								↻
-							</button>
-							<button
-								class="w3-bar-item w3-button w3-ripple"
-								@click=${this.toggle_stay_connected}
-							>
-								${this.stay_connected ? '🔗' : '⛓️‍💥'}
-							</button>
-						`
-					: undefined}
+				${
+					this.is_administrator
+						? html`
+								<button
+									class=${'w3-bar-item w3-button w3-circle w3-ripple' +
+									(this.connections?.some((x) => x.flags.one_shot)
+										? ' w3-spin'
+										: '')}
+									@click=${this.refresh}
+								>
+									↻
+								</button>
+								<button
+									class="w3-bar-item w3-button w3-ripple"
+									@click=${this.toggle_stay_connected}
+								>
+									${this.stay_connected ? '🔗' : '⛓️‍💥'}
+								</button>
+							`
+						: undefined
+				}
 				${Object.entries(k_tabs).map(
 					([k, v]) => html`
 						<button
@@ -814,6 +825,8 @@ class TfElement extends LitElement {
 				>
 					🎨<span class="w3-hide-small">Color</span>
 				</button>
+				<button class="w3-bar-item w3-button w3-right" @click=${this.search}>Search</button>
+				<input type="text" class="w3-input w3-bar-item w3-right w3-theme-d1" placeholder="keywords, @id, #channel" id="search_text" @keydown=${this.search_keydown}></input>
 			</div>
 		`;
 		let contents = this.guest