ssb: Make a message % context menu with some new options to begin to declutter the message view itself.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&BNj/9Tct9Iw03fAx0TSjCI5Cm1EizcmTj6JZm3bZpB4=.sha256"
+	"previous": "&R0bGxjJq3G2eJzuKfUrQP4ioSn75QlwvaS39Q9LzMto=.sha256"
 }

apps/ssb/tf-message.js

@@ -371,62 +371,34 @@ class TfMessageElement extends LitElement {
 		return content;
 	}
 
-	render_raw_button() {
+	copy_id(event) {
+		navigator.clipboard.writeText(this.message?.id);
+	}
+
+	render_menu() {
 		let content = this.get_content();
-		let raw_button;
-		switch (this.format) {
-			case 'raw':
-				if (content?.type == 'post' || content?.type == 'blog') {
-					raw_button = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => (this.format = 'md')}
-					>
-						Markdown
-					</button>`;
-				} else {
-					raw_button = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => (this.format = 'message')}
-					>
-						Message
-					</button>`;
-				}
-				break;
-			case 'md':
-				raw_button = html`<button
-					class="w3-button w3-theme-d1"
-					@click=${() => (this.format = 'message')}
-				>
-					Message
-				</button>`;
-				break;
-			case 'decrypted':
-				raw_button = html`<button
-					class="w3-button w3-theme-d1"
-					@click=${() => (this.format = 'raw')}
-				>
-					Raw
-				</button>`;
-				break;
-			default:
-				if (this.message.decrypted) {
-					raw_button = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => (this.format = 'decrypted')}
-					>
-						Decrypted
-					</button>`;
-				} else {
-					raw_button = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => (this.format = 'raw')}
-					>
-						Raw
-					</button>`;
-				}
-				break;
+		let formats = [
+			['message', 'Message'],
+		];
+		if (content?.type == 'post' || content?.type == 'blog') {
+			formats.push(['md', 'Markdown']);
 		}
-		return raw_button;
+		if (this.message?.decrypted) {
+			formats.push(['decrypted', 'Decrypted']);
+		}
+		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-dropdown-content w3-bar-block w3-card-4 w3-theme-l1" style="right: 48px">
+					<a target="_top" class="w3-button w3-bar-item" href=${'#' + encodeURIComponent(this.message?.id)}>${this.message?.id}</a>
+					<button class="w3-button w3-bar-item w3-border-bottom" @click=${this.copy_id}>Copy ID</button>
+					${formats.map(([format, name]) => (html`
+						<button class="w3-button w3-bar-item" style=${format == this.format ? 'font-weight: bold' : ''} @click=${() => (this.format = format)}>${name}</button>
+					`))}
+				</div>
+			</div>
+		`;
 	}
 
 	render_header() {
@@ -441,11 +413,8 @@ class TfMessageElement extends LitElement {
 					<tf-user id=${this.message.author} .users=${this.users}></tf-user>
 				</span>
 				${is_encrypted}
-				<span class="w3-bar-item w3-right">${this.render_raw_button()}</span>
+				${this.render_menu()}
 				<span class="w3-bar-item w3-right" style="text-wrap: nowrap"
-					><a target="_top" href=${'#' + encodeURIComponent(this.message.id)}
-						>%</a
-					>
 					${new Date(this.message.timestamp).toLocaleString()}</span
 				>
 			</header>

apps/ssb/tf-tab-news.js

@@ -285,7 +285,7 @@ class TfTabNewsElement extends LitElement {
 		return cache(html`
 			${this.render_sidebar()}
 			<div
-				style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: auto"
+				style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: auto; contain: layout"
 				id="main"
 				class="w3-main"
 			>