ssb: Trying to untangle some message formatting ugliness. First step: some minor refactoring.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&bBoMW+AjErDfa483Mg3+h1L25xfDDeVSpcfD9WAwL3U=.sha256"
+	"previous": "&sPU6rF2WYaSdq1SBw5XyxOjiahAxtGUbeg0LOpkQ6Eg=.sha256"
 }

apps/ssb/tf-message.js

@@ -97,6 +97,13 @@ class TfMessageElement extends LitElement {
 		}
 	}
 
+	render_json(value) {
+		let json = JSON.stringify(value, null, 2);
+		return html`
+			<pre style="white-space: pre-wrap; overflow-wrap: anywhere">${json}</pre>
+		`;
+	}
+
 	render_raw() {
 		let raw = {
 			id: this.message?.id,
@@ -108,9 +115,7 @@ class TfMessageElement extends LitElement {
 			content: this.message?.content,
 			signature: this.message?.signature,
 		};
-		return html`<div style="white-space: pre-wrap">
+		return this.render_json(raw);
-			${JSON.stringify(raw, null, 2)}
-		</div>`;
 	}
 
 	vote(emoji) {
@@ -190,7 +195,7 @@ class TfMessageElement extends LitElement {
 
 	render_mention(mention) {
 		if (!mention?.link || typeof mention.link != 'string') {
-			return html` <pre>${JSON.stringify(mention)}</pre>`;
+			return this.render_json(mention);
 		} else if (
 			mention?.link?.startsWith('&') &&
 			mention?.type?.startsWith('image/')
@@ -241,9 +246,7 @@ class TfMessageElement extends LitElement {
 		) {
 			return html` <a href=${`/${mention.link}/view`}>${mention.name}</a>`;
 		} else {
-			return html` <pre style="white-space: pre-wrap">
+			return this.render_json(mention);
-${JSON.stringify(mention, null, 2)}</pre
-			>`;
 		}
 	}
 
@@ -357,16 +360,83 @@ ${JSON.stringify(mention, null, 2)}</pre
 		return channels.map((x) => html`<tf-tag tag=${x}></tf-tag>`);
 	}
 
+	class_background() {
+		return this.message?.decrypted
+			? 'w3-pale-red'
+			: this.message?.rowid >= this.channel_unread
+				? 'w3-theme-d2'
+				: 'w3-theme-d4';
+	}
+
+	render_small_frame(inner) {
+		let self = this;
+		return html`
+			<div
+				class="w3-card-4 ${this.class_background()} w3-border-theme"
+				style="margin-top: 8px; padding: 16px; display: inline-block; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
+			>
+				<tf-user id=${self.message.author} .users=${self.users}></tf-user>
+				<span style="padding-right: 8px; text-wrap: nowrap"
+					><a tfarget="_top" href=${'#' + encodeURIComponent(self.message.id)}
+						>%</a
+					>
+					${new Date(self.message.timestamp).toLocaleString()}</span
+				>
+				${raw_button} ${self.format == 'raw' ? self.render_raw() : inner}
+				${self.render_votes()}
+				${(self.message.child_messages || []).map(
+					(x) => html`
+						<tf-message
+							.message=${x}
+							whoami=${self.whoami}
+							.users=${self.users}
+							.drafts=${self.drafts}
+							.expanded=${self.expanded}
+							channel=${self.channel}
+							channel_unread=${self.channel_unread}
+						></tf-message>
+					`
+				)}
+			</div>
+		`;
+	}
+
+	render_actions() {
+		let reply =
+			this.drafts[this.message?.id] !== undefined
+				? html`
+						<tf-compose
+							whoami=${this.whoami}
+							.users=${this.users}
+							root=${content.root || this.message.id}
+							branch=${this.message.id}
+							.drafts=${this.drafts}
+							@tf-discard=${this.discard_reply}
+							author=${this.message.author}
+						></tf-compose>
+					`
+				: html`
+						<button class="w3-button w3-theme-d1" @click=${this.show_reply}>
+							Reply
+						</button>
+					`;
+		return html`
+			<div class="w3-section">
+				${reply}
+				<button class="w3-button w3-theme-d1" @click=${this.react}>
+					React
+				</button>
+				${this.render_children()}
+			</div>
+		`;
+	}
+
 	render() {
 		let content = this.message?.content;
 		if (this.message?.decrypted?.type == 'post') {
 			content = this.message.decrypted;
 		}
-		let class_background = this.message?.decrypted
+		let class_background = this.class_background();
-			? 'w3-pale-red'
-			: this.message?.rowid >= this.channel_unread
-				? 'w3-theme-d2'
-				: 'w3-theme-d4';
 		let self = this;
 		let raw_button;
 		switch (this.format) {
@@ -421,38 +491,6 @@ ${JSON.stringify(mention, null, 2)}</pre
 				}
 				break;
 		}
-		function small_frame(inner) {
-			let body;
-			return html`
-				<div
-					class="w3-card-4 ${class_background} w3-border-theme"
-					style="margin-top: 8px; padding: 16px; display: inline-block; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
-				>
-					<tf-user id=${self.message.author} .users=${self.users}></tf-user>
-					<span style="padding-right: 8px; text-wrap: nowrap"
-						><a tfarget="_top" href=${'#' + encodeURIComponent(self.message.id)}
-							>%</a
-						>
-						${new Date(self.message.timestamp).toLocaleString()}</span
-					>
-					${raw_button} ${self.format == 'raw' ? self.render_raw() : inner}
-					${self.render_votes()}
-					${(self.message.child_messages || []).map(
-						(x) => html`
-							<tf-message
-								.message=${x}
-								whoami=${self.whoami}
-								.users=${self.users}
-								.drafts=${self.drafts}
-								.expanded=${self.expanded}
-								channel=${self.channel}
-								channel_unread=${self.channel_unread}
-							></tf-message>
-						`
-					)}
-				</div>
-			`;
-		}
 		if (this.message?.type === 'contact_group') {
 			return html` <div
 				class="w3-card-4 ${class_background} w3-border-theme"
@@ -522,7 +560,9 @@ ${JSON.stringify(mention, null, 2)}</pre
 								Updated profile for
 								<tf-user id=${content.about} .users=${this.users}></tf-user>.
 							</div>`;
-				return small_frame(html` ${update} ${name} ${image} ${description} `);
+				return this.render_small_frame(html`
+					${update} ${name} ${image} ${description}
+				`);
 			} else if (content.type == 'contact') {
 				return html`
 					<div>
@@ -544,24 +584,6 @@ ${JSON.stringify(mention, null, 2)}</pre
 					</div>
 				`;
 			} else if (content.type == 'post') {
-				let reply =
-					this.drafts[this.message?.id] !== undefined
-						? html`
-								<tf-compose
-									whoami=${this.whoami}
-									.users=${this.users}
-									root=${content.root || this.message.id}
-									branch=${this.message.id}
-									.drafts=${this.drafts}
-									@tf-discard=${this.discard_reply}
-									author=${this.message.author}
-								></tf-compose>
-							`
-						: html`
-								<button class="w3-button w3-theme-d1" @click=${this.show_reply}>
-									Reply
-								</button>
-							`;
 				let self = this;
 				let body;
 				switch (this.format) {
@@ -578,11 +600,7 @@ ${JSON.stringify(mention, null, 2)}</pre
 						body = unsafeHTML(tfutils.markdown(content.text));
 						break;
 					case 'decrypted':
-						body = html`<pre
+						body = this.render_json(content);
-							style="white-space: pre-wrap; overflow-wrap: anywhere"
-						>
-${JSON.stringify(content, null, 2)}</pre
-						>`;
 						break;
 				}
 				let content_warning = html`
@@ -640,24 +658,7 @@ ${JSON.stringify(content, null, 2)}</pre
 							>
 							<span>${raw_button}</span>
 						</div>
-						${payload} ${this.render_votes()}
+						${payload} ${this.render_votes()} ${this.render_actions()}
-						<footer class="w3-container">
-							${reply}
-							<button class="w3-button w3-theme-d1" @click=${this.react}>
-								React
-							</button>
-							${!content.root && this.message.rowid < this.channel_unread
-								? html`
-										<button
-											class="w3-button w3-theme-d1"
-											@click=${this.mark_unread}
-										>
-											Mark Unread
-										</button>
-									`
-								: undefined}
-							${this.render_children()}
-						</footer>
 					</div>
 				`;
 			} else if (content.type === 'issue') {
@@ -741,24 +742,6 @@ ${JSON.stringify(content, null, 2)}</pre
 						`;
 						break;
 				}
-				let reply =
-					this.drafts[this.message?.id] !== undefined
-						? html`
-								<tf-compose
-									whoami=${this.whoami}
-									.users=${this.users}
-									root=${content.root || this.message.id}
-									branch=${this.message.id}
-									.drafts=${this.drafts}
-									@tf-discard=${this.discard_reply}
-									author=${this.message.author}
-								></tf-compose>
-							`
-						: html`
-								<button class="w3-button w3-theme-d1" @click=${this.show_reply}>
-									Reply
-								</button>
-							`;
 				return html`
 					<style>
 						code {
@@ -793,19 +776,12 @@ ${JSON.stringify(content, null, 2)}</pre
 						</div>
 
 						<div>${body}</div>
-						${this.render_mentions()}
+						${this.render_mentions()} ${this.render_votes()}
-						${this.render_votes()}
+						${this.render_actions()}
-						<footer class="w3-content">
-							${reply}
-							<button class="w3-button w3-theme-d1" @click=${this.react}>
-								React
-							</button>
-							${this.render_children()}
-						</footer>
 					</div>
 				`;
 			} else if (content.type === 'pub') {
-				return small_frame(
+				return this.render_small_frame(
 					html` <style>
 							span {
 								overflow-wrap: anywhere;
@@ -823,7 +799,7 @@ ${JSON.stringify(content, null, 2)}</pre
 						</span>`
 				);
 			} else if (content.type === 'channel') {
-				return small_frame(html`
+				return this.render_small_frame(html`
 					<div>
 						${content.subscribed ? 'subscribed to' : 'unsubscribed from'}
 						<a href=${'#' + encodeURIComponent('#' + content.channel)}
@@ -834,24 +810,25 @@ ${JSON.stringify(content, null, 2)}</pre
 			} else if (typeof this.message.content == 'string') {
 				if (this.message?.decrypted) {
 					if (this.format == 'decrypted') {
-						return small_frame(
+						return this.render_small_frame(
-							html`<span>🔓</span>
+							html`<span>🔓</span> ${this.render_json(this.message.decrypted)}`
-								<pre>${JSON.stringify(this.message.decrypted, null, 2)}</pre>`
 						);
 					} else {
-						return small_frame(
+						return this.render_small_frame(
 							html`<span>🔓</span>
 								<div>${this.message.decrypted.type}</div>`
 						);
 					}
 				} else {
-					return small_frame(html`<span>🔒</span>`);
+					return this.render_small_frame(html`<span>🔒</span>`);
 				}
 			} else {
-				return small_frame(html`<div><b>type</b>: ${content.type}</div>`);
+				return this.render_small_frame(
+					html`<div><b>type</b>: ${content.type}</div>`
+				);
 			}
 		} else {
-			return small_frame(this.render_raw());
+			return this.render_small_frame(this.render_raw());
 		}
 	}
 }