From dd3b2656adfc0c613149b7f8f79513f25605c308 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Mon, 7 Apr 2025 21:39:14 -0400
Subject: [PATCH] ssb: Message % menu tweaks.  Show on click.  Hide when
 clicking off.  Bury the message ID further.

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-message.js | 30 +++++++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index ec6045b4..7bf1a8dd 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&ErfmEIt3WboZp6PR3cC/i7XU/ZTI/2X5I9XvUN0GGMU=.sha256"
+	"previous": "&n4BDWGMwfagmlsWupwzKvYGLu6X6oYbtgdFvHP6JmZU=.sha256"
 }
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index fa653086..a6485f0e 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -33,6 +33,26 @@ class TfMessageElement extends LitElement {
 		this.channel_unread = -1;
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		this._click_callback = this.document_click.bind(this);
+		document.body.addEventListener('mousedown', this._click_callback);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.body.removeEventListener('mousedown', this._click_callback);
+	}
+
+	document_click(event) {
+		let content = this.renderRoot.querySelector('.w3-dropdown-content');
+		let target = event.originalTarget;
+		if (content && !content.contains(target))
+		{
+			content.classList.remove('w3-show');
+		}
+	}
+
 	show_reply() {
 		let event = new CustomEvent('tf-draft', {
 			bubbles: true,
@@ -375,6 +395,10 @@ class TfMessageElement extends LitElement {
 		navigator.clipboard.writeText(this.message?.id);
 	}
 
+	toggle_menu(event) {
+		event.srcElement.parentNode.querySelector('.w3-dropdown-content').classList.toggle('w3-show');
+	}
+
 	render_menu() {
 		let content = this.get_content();
 		let formats = [['message', 'Message']];
@@ -386,8 +410,8 @@ class TfMessageElement extends LitElement {
 		}
 		formats.push(['raw', 'Raw']);
 		return html`
-			<div class="w3-bar-item w3-right w3-dropdown-hover">
-				<button class="w3-button w3-theme-d1">%</button>
+			<div class="w3-bar-item w3-right">
+				<button class="w3-button w3-theme-d1" @click=${this.toggle_menu}>%</button>
 				<div
 					class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-l1"
 					style="right: 48px"
@@ -396,7 +420,7 @@ class TfMessageElement extends LitElement {
 						target="_top"
 						class="w3-button w3-bar-item"
 						href=${'#' + encodeURIComponent(this.message?.id)}
-						>${this.message?.id}</a
+						>View Message</a
 					>
 					<button
 						class="w3-button w3-bar-item w3-border-bottom"