From 64bbd383de64c07a48fca9b769f54a68eaa1cf6b Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 13 Apr 2024 16:52:30 -0400
Subject: [PATCH] Trying to make the navigation bar fit again with a new
 dropdown.  Good grief, CSS.

---
 core/client.js | 63 +++++++++++++++++++++++++-------------------------
 src/httpd.js.c |  4 ++--
 2 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/core/client.js b/core/client.js
index bcb0ffdf..522c786e 100644
--- a/core/client.js
+++ b/core/client.js
@@ -100,10 +100,10 @@ class TfNavigationElement extends LitElement {
 	get_spark_line(key, options) {
 		if (!this.spark_lines[key]) {
 			let spark_line = document.createElement('tf-sparkline');
-			spark_line.style.display = 'flex';
-			spark_line.style.flexDirection = 'row';
-			spark_line.style.flex = '0 50 5em';
 			spark_line.title = key;
+			spark_line.classList.add('w3-bar-item');
+			spark_line.classList.add('w3-hide-small');
+			spark_line.style.paddingRight = '0';
 			if (options) {
 				if (options.max) {
 					spark_line.max = options.max;
@@ -121,11 +121,11 @@ class TfNavigationElement extends LitElement {
 	 */
 	render_login() {
 		if (this?.credentials?.session?.name) {
-			return html`<a id="login" href="/login/logout?return=${url() + hash()}"
+			return html`<a class="w3-bar-item w3-right" id="login" href="/login/logout?return=${url() + hash()}"
 				>logout ${this.credentials.session.name}</a
 			>`;
 		} else {
-			return html`<a id="login" href="/login?return=${url() + hash()}"
+			return html`<a class="w3-bar-item w3-right" id="login" href="/login?return=${url() + hash()}"
 				>login</a
 			>`;
 		}
@@ -145,8 +145,8 @@ class TfNavigationElement extends LitElement {
 				<link type="text/css" rel="stylesheet" href="/static/w3.css" />
 				<select
 					@change=${this.set_active_identity}
-					class="w3-input w3-cyan"
-					style="flex: 0 1 auto; width: auto; display: inline-blocktext-overflow: ellipsis; overflow: hidden; white-space: nowrap">
+					class="w3-button w3-cyan w3-bar-item w3-right"
+					style="max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap">
 					${this.identities.map(x => html`<option ?selected=${x === this.identity}>${x}</option>`)}
 				</select>
 			`;
@@ -155,7 +155,7 @@ class TfNavigationElement extends LitElement {
 				<link type="text/css" rel="stylesheet" href="/static/w3.css" />
 				<button
 					@click=${this.create_identity}
-					class="w3-button w3-blue">
+					class="w3-button w3-blue w3-right">
 					Create an Identity
 				</button>
 			`;
@@ -210,6 +210,7 @@ class TfNavigationElement extends LitElement {
 	render() {
 		let self = this;
 		return html`
+			<link type="text/css" rel="stylesheet" href="/static/w3.css" />
 			<style>
 				${k_global_style} .tooltip {
 					position: absolute;
@@ -226,16 +227,17 @@ class TfNavigationElement extends LitElement {
 				}
 			</style>
 			<div
-				style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center"
+				class="w3-black w3-bar"
 			>
 				<span
+					class="w3-bar-item"
 					style="cursor: pointer"
 					@click=${() => (this.show_version = !this.show_version)}
 					>😎</span
 				>
 				<span
-					?hidden=${!this.show_version}
-					style="flex: 0 0; white-space: nowrap"
+					class="w3-bar-item"
+					style=${'white-space: nowrap' + (this.show_version ? '' : '; display: none')}
 					title=${this.version?.name +
 					' ' +
 					Object.entries(this.version || {})
@@ -244,6 +246,7 @@ class TfNavigationElement extends LitElement {
 					>${this.version?.number}</span
 				>
 				<a
+					class="w3-bar-item"
 					accesskey="h"
 					@mouseover=${set_access_key_title}
 					data-tip="Open home app."
@@ -252,6 +255,7 @@ class TfNavigationElement extends LitElement {
 					>TF</a
 				>
 				<a
+					class="w3-bar-item"
 					accesskey="a"
 					@mouseover=${set_access_key_title}
 					data-tip="Open apps list."
@@ -259,6 +263,7 @@ class TfNavigationElement extends LitElement {
 					>apps</a
 				>
 				<a
+					class="w3-bar-item"
 					accesskey="e"
 					@mouseover=${set_access_key_title}
 					data-tip="Toggle the app editor."
@@ -267,6 +272,7 @@ class TfNavigationElement extends LitElement {
 					>edit</a
 				>
 				<a
+					class="w3-bar-item"
 					accesskey="p"
 					@mouseover=${set_access_key_title}
 					data-tip="View and change permissions."
@@ -274,27 +280,20 @@ class TfNavigationElement extends LitElement {
 					@click=${() => (self.show_permissions = !self.show_permissions)}
 					>🎛️</a
 				>
-				<span
-					style="display: inline-block; vertical-align: top; white-space: pre; color: ${this
-						.status.color ?? kErrorColor}"
-					>${this.status.message}</span
-				>
-				<span id="requests"></span>
+				${status.message ? html`
+					<span
+						class="w3-bar-item"
+						style="vertical-align: top; white-space: pre; color: ${this
+							.status.color ?? kErrorColor}"
+						>${this.status.message}</span
+					>
+				` : undefined}
 				${this.render_permissions()}
-				<span
-					style="flex: 1 1; display: flex; flex-direction: row; white-space: nowrap; margin: 0; padding: 0"
-					>${Object.keys(this.spark_lines)
-						.sort()
-						.map((x) => this.spark_lines[x])
-						.map((x) => [
-							html`<span style="font-size: xx-small">${x.dataset.emoji}</span>`,
-							x,
-						])}</span
-				>
+				${Object.keys(this.spark_lines)
+					.sort()
+					.map((x) => this.spark_lines[x])}
+				${this.render_login()}
 				${this.render_identity()}
-				<span style="flex: 0 0; white-space: nowrap"
-					>${this.render_login()}</span
-				>
 			</div>
 		`;
 	}
@@ -619,13 +618,13 @@ class TfSparkLineElement extends LitElement {
 			) / 10.0;
 		return html`
 			<svg
-				style="max-width: 7.5em; max-height: 1.5em; margin: 0; padding: 0; background: #000"
+				style="max-width: 7.5em; margin: 0; padding: 0; background: #000; height: 1em"
 				viewBox="0 0 50 10"
 				xmlns="http://www.w3.org/2000/svg"
 			>
 				${this.lines.map((x) => this.render_line(x))}
 				<text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">
-					${max}
+					${this.dataset.emoji}${max}
 				</text>
 			</svg>
 		`;
diff --git a/src/httpd.js.c b/src/httpd.js.c
index 4b764e84..aabb5cf1 100644
--- a/src/httpd.js.c
+++ b/src/httpd.js.c
@@ -328,8 +328,8 @@ static JSValue _httpd_websocket_upgrade(JSContext* context, JSValueConst this_va
 		const char* session = tf_http_get_cookie(tf_http_request_get_header(request, "cookie"), "session");
 		JSValue jwt = _authenticate_jwt(context, session);
 		tf_free((void*)session);
-		JSValue name = JS_GetPropertyStr(context, jwt, "name");
-		const char* name_string = JS_ToCString(context, name);
+		JSValue name = !JS_IsUndefined(jwt) ? JS_GetPropertyStr(context, jwt, "name") : JS_UNDEFINED;
+		const char* name_string = !JS_IsUndefined(name) ? JS_ToCString(context, name) : NULL;
 		const char* session_token = _make_session_jwt(ssb, name_string);
 		const char* cookie = _make_set_session_cookie_header(request, session_token);
 		tf_free((void*)session_token);