ssb: Show flags on more message type.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&sMLjk8uV7zNIV2JxHMw6TAYb92hvOafL0+kKWc1Tqt0=.sha256"
+	"previous": "&E7oElXjP2g+Xb8dhrRyTVdv8EJArjJRvgmfl1prtciw=.sha256"
 }

apps/ssb/tf-message.js

@@ -601,9 +601,11 @@ class TfMessageElement extends LitElement {
 		let self = this;
 		return this.render_frame(html`
 			${self.render_header()}
+			<div class="w3-container">
 				${self.format == 'raw'
-				? html`<div class="w3-container">${self.render_raw()}</div>`
+					? html`${self.render_raw()}`
-				: inner}
+					: self.render_flagged(inner)}
+			</div>
 			${self.render_votes()}
 			${(self.message.child_messages || []).map(
 				(x) => html`
@@ -729,6 +731,38 @@ class TfMessageElement extends LitElement {
 			: undefined;
 	}
 
+	render_flagged(inner) {
+		if (this.message.flags) {
+			return html`
+				<div
+					class="w3-panel w3-round-xlarge w3-theme-l4 w3"
+					style="cursor: pointer"
+					@click=${(x) => this.toggle_expanded(':cw')}
+				>
+					<p>
+						${this.message.flags
+							? html`<p>
+									Caution: This message has been flagged
+									${this.message.flags.length}
+									time${this.message.flags.length == 1 ? '' : 's'}.
+								</p>`
+							: undefined}
+					</p>
+					<p class="w3-small">
+						${inner !== undefined
+							? this.is_expanded(':cw')
+								? 'Show less'
+								: 'Show more'
+							: undefined}
+					</p>
+				</div>
+				${this.is_expanded(':cw') ? inner : undefined}
+			`;
+		} else {
+			return inner;
+		}
+	}
+
 	_render() {
 		let content = this.message?.content;
 		if (this.message?.decrypted?.type == 'post') {
@@ -876,6 +910,7 @@ class TfMessageElement extends LitElement {
 							</div>
 						</div>
 					</div>
+					<div class="w3-container">${this.render_flagged(undefined)}</div>
 					<div>${this.render_votes()}</div>
 					${(this.message.child_messages || []).map(
 						(x) => html`