ssb: Slight improvements to blog header display.

apps/ssb/tf-message.js

@@ -196,26 +196,6 @@ 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;
@@ -519,14 +499,11 @@ class TfMessageElement extends LitElement {
 								</button>
 							`
 						: undefined}
-					<button class="w3-button w3-bar-item" @click=${this.react}>
-						👍 React
-					</button>
 					<button
 						class="w3-button w3-bar-item w3-border-bottom"
-						@click=${this.flag}
+						@click=${this.react}
 					>
-						⚠️ Flag
+						👍 React
 					</button>
 					${formats.map(
 						([format, name]) => html`
@@ -988,11 +965,7 @@ class TfMessageElement extends LitElement {
 						style="cursor: pointer"
 						@click=${(x) => this.toggle_expanded(':cw')}
 					>
-						<p>
-							${this.message.flags
-								? `Caution: This message has been flagged ${this.message.flags.length} time${this.message.flags.length == 1 ? '' : 's'}.`
-								: content.contentWarning}
-						</p>
+						<p>${content.contentWarning}</p>
 						<p class="w3-small">
 							${this.is_expanded(':cw') ? 'Show less' : 'Show more'}
 						</p>
@@ -1003,12 +976,11 @@ class TfMessageElement extends LitElement {
 					<div @click=${this.body_click}>${body}</div>
 					${this.render_mentions()}
 				`;
-				let payload =
-					this.message.flags || content.contentWarning
-						? self.expanded[(this.message.id || '') + ':cw']
-							? html` ${content_warning} ${content_html} `
-							: content_warning
-						: content_html;
+				let payload = content.contentWarning
+					? self.expanded[(this.message.id || '') + ':cw']
+						? html` ${content_warning} ${content_html} `
+						: content_warning
+					: content_html;
 				return this.render_frame(html`
 					${this.render_header()}
 					<div class="w3-container">${payload}</div>
@@ -1048,11 +1020,15 @@ class TfMessageElement extends LitElement {
 					case 'message':
 						body = html`
 							<div
-								style="border: 1px solid #fff; border-radius: 1em; padding: 8px; margin: 4px; cursor: pointer"
-								@click=${(x) => self.toggle_expanded(':blog')}>
+								class="w3-border w3-theme-d4 w3-round"
+								style="padding: 8px; margin: 4px; cursor: pointer"
+								@click=${(x) => self.toggle_expanded(':blog')}
+							>
 								<h2>${content.title}</h2>
-								<div style="display: flex; flex-direction: row">
-									<img src=/${content.thumbnail}/view></img>
+								<div style="display: flex; flex-direction: row; gap: 8px">
+									${content.thumbnail
+										? html`<img src=/${content.thumbnail}/view style="max-width: 25vw; max-height: 25vw"></img>`
+										: undefined}
 									<span>${content.summary}</span>
 								</div>
 							</div>