From 23b3c998bd5321985b531e2416db43a03b12aa08 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 14 Apr 2024 17:47:47 -0400
Subject: [PATCH] Re-CSS'd the identity dropdown.

---
 core/client.js | 41 ++++++++++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/core/client.js b/core/client.js
index f950fa90..e4d83a84 100644
--- a/core/client.js
+++ b/core/client.js
@@ -139,8 +139,9 @@ class TfNavigationElement extends LitElement {
 		}
 	}
 
-	set_active_identity(event) {
-		send({action: 'setActiveIdentity', identity: event.srcElement.value});
+	set_active_identity(id) {
+		send({action: 'setActiveIdentity', identity: id});
+		this.renderRoot.getElementById('id_dropdown').classList.remove('w3-show');
 	}
 
 	create_identity(event) {
@@ -149,20 +150,38 @@ class TfNavigationElement extends LitElement {
 		}
 	}
 
+	toggle_id_dropdown() {
+		this.renderRoot.getElementById('id_dropdown').classList.toggle('w3-show');
+	}
+
 	render_identity() {
 		let self = this;
 		if (this.identities?.length) {
 			return html`
 				<link type="text/css" rel="stylesheet" href="/static/w3.css" />
-				<select
-					@change=${this.set_active_identity}
-					class="w3-button w3-rest w3-cyan w3-bar-item w3-right"
-					style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%"
-				>
-					${this.identities.map(
-						(x) => html`<option ?selected=${x === this.identity} value=${x}>${self.names[x]}${self.names[x] === x ? '' : html` - ${x}`}</option>`
-					)}
-				</select>
+				<div class="w3-dropdown-click w3-right" style="max-width: 100%">
+					<button
+						class="w3-button w3-rest w3-cyan"
+						style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%"
+						@click=${self.toggle_id_dropdown}
+					>
+						${self.names[this.identity]}${self.names[this.identity] === this.identity ? '' : html` - ${this.identity}`} ▾
+					</button>
+					<div id="id_dropdown" class="w3-dropdown-content w3-bar-block w3-card-4" style="max-width: 100%">
+						<button class="w3-bar-item w3-button w3-border" @click=${() => window.location.href = "/~core/identity"}>Manage Identities...</button>
+						${this.identities.map(
+							(x) => html`
+								<button
+									class="w3-bar-item w3-button ${x === self.identity ? 'w3-cyan' : ''}"
+									@click=${() => self.set_active_identity(x)}
+									style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+								>
+									${self.names[x]}${self.names[x] === x ? '' : html` - ${x}`}
+								</button>
+							`
+						)}
+					</div>
+				</div>
 			`;
 		} else {
 			return html`