ssb: Un-clobber the flagged message UI. Whoops.

apps/ssb.json

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

apps/ssb/tf-message.js

@@ -196,6 +196,26 @@ class TfMessageElement extends LitElement {
 		);
 	}
 
+	flag(event) {
+		let reason = prompt(
+			'What is the reason for reporting this content (spam, nsfw, ...)?',
+			'offensive'
+		);
+		if (reason !== undefined) {
+			tfrpc.rpc
+				.appendMessage(this.whoami, {
+					type: 'flag',
+					flag: {
+						link: this.message.id,
+						reason: reason.length ? reason : undefined,
+					},
+				})
+				.catch(function (error) {
+					alert(error?.message);
+				});
+		}
+	}
+
 	show_image(link) {
 		let div = document.createElement('div');
 		div.style.left = 0;
@@ -505,6 +525,12 @@ class TfMessageElement extends LitElement {
 					>
 						👍 React
 					</button>
+					<button
+						class="w3-button w3-bar-item w3-border-bottom"
+						@click=${this.flag}
+					>
+						⚠️ Flag
+					</button>
 					${formats.map(
 						([format, name]) => html`
 							<button
@@ -965,7 +991,19 @@ class TfMessageElement extends LitElement {
 						style="cursor: pointer"
 						@click=${(x) => this.toggle_expanded(':cw')}
 					>
-						<p>${content.contentWarning}</p>
+						<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}
+							${content.contentWarning
+								? html`<p>${content.contentWarning}</p>`
+								: undefined}
+						</p>
+
 						<p class="w3-small">
 							${this.is_expanded(':cw') ? 'Show less' : 'Show more'}
 						</p>
@@ -976,11 +1014,12 @@ class TfMessageElement extends LitElement {
 					<div @click=${this.body_click}>${body}</div>
 					${this.render_mentions()}
 				`;
-				let payload = content.contentWarning
+				let payload =
-					? self.expanded[(this.message.id || '') + ':cw']
+					this.message.flags || content.contentWarning
-						? html` ${content_warning} ${content_html} `
+						? self.expanded[(this.message.id || '') + ':cw']
-						: content_warning
+							? html` ${content_warning} ${content_html} `
-					: content_html;
+							: content_warning
+						: content_html;
 				return this.render_frame(html`
 					${this.render_header()}
 					<div class="w3-container">${payload}</div>