From 6ed2c702d820df06375c63e9e138dad92e139c6d Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 9 Aug 2023 23:39:17 +0000
Subject: [PATCH] Hide too-new messages, and cycle between message, raw, and
 markdown views of messages.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4394 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/ssb/tf-message.js       | 56 ++++++++++++++++++++++++++++--------
 apps/ssb/tf-tab-news-feed.js |  7 ++++-
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index 135e5875..d829fec7 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -11,7 +11,7 @@ class TfMessageElement extends LitElement {
 			message: {type: Object},
 			users: {type: Object},
 			drafts: {type: Object},
-			raw: {type: Boolean},
+			format: {type: String},
 			blog_data: {type: String},
 			expanded: {type: Object},
 			decrypted: {type: Object},
@@ -27,7 +27,7 @@ class TfMessageElement extends LitElement {
 		this.message = {};
 		this.users = {};
 		this.drafts = {};
-		this.raw = false;
+		this.format = 'message';
 		this.expanded = {};
 		this.decrypted = undefined;
 	}
@@ -255,16 +255,30 @@ class TfMessageElement extends LitElement {
 			content = this.decrypted;
 		}
 		let self = this;
-		let raw_button = this.raw ?
-				html`<input type="button" value="Message" @click=${() => self.raw = false}></input>` :
-				html`<input type="button" value="Raw" @click=${() => self.raw = true}></input>`;
+		let raw_button;
+		switch (this.format) {
+			case 'raw':
+				if (content?.type == 'post' || content?.type == 'blog') {
+					raw_button = html`<input type="button" value="Markdown" @click=${() => self.format = 'md'}></input>`;
+				} else {
+					raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`; 
+				}
+				break;
+			case 'md':
+				raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`;
+				break;
+			default:
+				raw_button = html`<input type="button" value="Raw" @click=${() => self.format = 'raw'}></input>`;
+				break;
+		}
 		function small_frame(inner) {
+			let body;
 			return html`
 				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere">
 					<tf-user id=${self.message.author} .users=${self.users}></tf-user>
 					<span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span>
 					${raw_button}
-					${self.raw ? self.render_raw() : inner}
+					${self.format == 'raw' ? self.render_raw() : inner}
 					${self.render_votes()}
 				</div>
 			`;
@@ -342,9 +356,18 @@ class TfMessageElement extends LitElement {
 					<input type="button" value="Reply" @click=${this.show_reply}></input>
 				`;
 				let self = this;
-				let body = this.raw ?
-					this.render_raw() :
-					unsafeHTML(tfutils.markdown(content.text));
+				let body;
+				switch (this.format) {
+					case 'raw':
+						body = this.render_raw();
+						break;
+					case 'md':
+						body = html`<code style="white-space: pre-wrap; overflow-wrap: anywhere">${content.text}</code>`;
+						break;
+					case 'message':
+						body = unsafeHTML(tfutils.markdown(content.text));
+						break;
+				}
 				let content_warning = html`
 					<div class="content_warning" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div>
 					`;
@@ -406,9 +429,16 @@ class TfMessageElement extends LitElement {
 						this.expanded[(this.message.id || '') + ':blog'] ?
 						html`<div>${this.blog_data ? unsafeHTML(tfutils.markdown(this.blog_data)) : 'Loading...'}</div>` :
 						undefined;
-				let body = this.raw ?
-						this.render_raw() :
-						html`
+				let body;
+				switch (this.format) {
+					case 'raw':
+						body = this.render_raw();
+						break;
+					case 'md':
+						body = content.summary;
+						break;
+					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')}>
@@ -420,6 +450,8 @@ class TfMessageElement extends LitElement {
 							</div>
 							${payload}
 						`;
+						break;
+				}
 				return html`
 					<style>
 						code {
diff --git a/apps/ssb/tf-tab-news-feed.js b/apps/ssb/tf-tab-news-feed.js
index ce7e8dfa..9964523b 100644
--- a/apps/ssb/tf-tab-news-feed.js
+++ b/apps/ssb/tf-tab-news-feed.js
@@ -70,7 +70,7 @@ class TfTabNewsFeedElement extends LitElement {
 					WITH news AS (SELECT messages.*
 					FROM messages
 					JOIN json_each(?) AS following ON messages.author = following.value
-					WHERE messages.timestamp > ?
+					WHERE messages.timestamp > ? AND messages.timestamp < ?
 					ORDER BY messages.timestamp DESC)
 					SELECT messages.*
 						FROM news
@@ -87,6 +87,11 @@ class TfTabNewsFeedElement extends LitElement {
 				[
 					JSON.stringify(this.following),
 					this.start_time,
+					/*
+					** Don't show messages more than a day into the future to prevent
+					** messages with far-future timestamps from staying at the top forever.
+					*/
+					new Date().valueOf() + 24 * 60 * 60 * 1000,
 				]);
 		}
 	}