From b6f661c6ec7b242f2e4ac9cf1a839adf717e71d4 Mon Sep 17 00:00:00 2001
From: Andy Burke <andy.burke@mailbox.earth>
Date: Wed, 24 Sep 2025 13:21:39 -0700
Subject: [PATCH] feature: essays fix: multiple rendering of things when
 sending

---
 models/event.ts                       |  12 +-
 public/api/users/index.ts             |   3 +
 public/base.css                       |   3 +
 public/index.html                     |   2 +
 public/{tabs/chat => js}/emojis/en.js |   0
 public/js/external/md_to_html.js      |  86 ++++++++
 public/tabs/blurbs/blurbs.html        |  50 ++---
 public/tabs/chat/chat.html            |  52 +++--
 public/tabs/essays/essays.html        | 271 +++++++++++++++++++++++++-
 public/tabs/essays/new_essay.html     | 118 +++++++++++
 10 files changed, 537 insertions(+), 60 deletions(-)
 rename public/{tabs/chat => js}/emojis/en.js (100%)
 create mode 100644 public/js/external/md_to_html.js
 create mode 100644 public/tabs/essays/new_essay.html

diff --git a/models/event.ts b/models/event.ts
index f60d2b4..be904aa 100644
--- a/models/event.ts
+++ b/models/event.ts
@@ -93,7 +93,17 @@ export function VALIDATE_EVENT(event: EVENT) {
 			}
 			break;
 		case 'essay':
-			if (event.data?.essay?.length <= 0) {
+			if (event.data?.title?.length <= 0) {
+				errors.push({
+					cause: 'essay_title_missing',
+					message: 'An essay must have a title.'
+				});
+			} else if (event.data?.title?.length > 2 ** 7) {
+				errors.push({
+					cause: 'essay_title_length_limit_exceeded',
+					message: 'An essay title cannot be longer than 128 characters.'
+				});
+			} else if (event.data?.essay?.length <= 0) {
 				errors.push({
 					cause: 'essay_missing',
 					message: 'An essay cannot be empty.'
diff --git a/public/api/users/index.ts b/public/api/users/index.ts
index 0af20b5..6ac6b9c 100644
--- a/public/api/users/index.ts
+++ b/public/api/users/index.ts
@@ -19,6 +19,9 @@ const DEFAULT_USER_PERMISSIONS: string[] = [
 	'topics.blurbs.write',
 	'topics.chat.write',
 	'topics.chat.read',
+	'topics.essays.create',
+	'topics.essays.read',
+	'topics.essays.write',
 	'topics.posts.create',
 	'topics.posts.write',
 	'topics.posts.read',
diff --git a/public/base.css b/public/base.css
index e65ea4c..7e49cce 100644
--- a/public/base.css
+++ b/public/base.css
@@ -313,6 +313,9 @@ body[data-perms*="topics.blurbs.write"] [data-requires-permission="topics.blurbs
 body[data-perms*="topics.chat.create"] [data-requires-permission="topics.chat.create"],
 body[data-perms*="topics.chat.read"] [data-requires-permission="topics.chat.read"],
 body[data-perms*="topics.chat.write"] [data-requires-permission="topics.chat.write"],
+body[data-perms*="topics.essays.create"] [data-requires-permission="topics.essays.create"],
+body[data-perms*="topics.essays.read"] [data-requires-permission="topics.essays.read"],
+body[data-perms*="topics.essays.write"] [data-requires-permission="topics.essays.write"],
 body[data-perms*="topics.posts.create"] [data-requires-permission="topics.posts.create"],
 body[data-perms*="topics.posts.read"] [data-requires-permission="topics.posts.read"],
 body[data-perms*="topics.posts.write"] [data-requires-permission="topics.posts.write"],
diff --git a/public/index.html b/public/index.html
index 57ea98a..a55c9f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,6 +24,8 @@
 		<script src="./js/embeds/vimeo.js" type="text/javascript"></script>
 		<script src="./js/embeds/youtube.js" type="text/javascript"></script>
 
+		<script src="./js/external/md_to_html.js" type="text/javascript"></script>
+
 		<script src="./js/htmlify.js" type="text/javascript"></script>
 
 		<script src="./js/locationchange.js" type="text/javascript"></script>
diff --git a/public/tabs/chat/emojis/en.js b/public/js/emojis/en.js
similarity index 100%
rename from public/tabs/chat/emojis/en.js
rename to public/js/emojis/en.js
diff --git a/public/js/external/md_to_html.js b/public/js/external/md_to_html.js
new file mode 100644
index 0000000..c3b7911
--- /dev/null
+++ b/public/js/external/md_to_html.js
@@ -0,0 +1,86 @@
+// see: https://andyburke.dev/andyburke/serverus/src/branch/dev/handlers/markdown.ts
+
+/* MARKDOWN TO HTML */
+
+/* order of these transforms matters, so we list them here in an array and build type from it after. */
+const MD_TRANSFORM_NAMES = [
+	"characters",
+	"headings",
+	"horizontal_rules",
+	"list_items",
+	"bold",
+	"italic",
+	"strikethrough",
+	"code",
+	"images",
+	"links",
+	"breaks",
+];
+const MD_TRANSFORMS = {
+	characters: [
+		[/&/g, "&amp;"],
+		[/</g, "&lt;"],
+		[/>/g, "&gt;"],
+		[/"/g, "&quot;"],
+		[/'/g, "&#39;"],
+	],
+
+	headings: [
+		[/^#\s(.+)$/gm, "<h1>$1</h1>\n"],
+		[/^##\s(.+)$/gm, "<h2>$1</h2>\n"],
+		[/^###\s(.+)$/gm, "<h3>$1</h3>\n"],
+		[/^####\s(.+)$/gm, "<h4>$1</h4>\n"],
+		[/^#####\s(.+)$/gm, "<h5>$1</h5>\n"],
+	],
+
+	horizontal_rules: [[/^----*$/gm, "<hr>\n"]],
+
+	list_items: [
+		[/\n\n([ \t]*)([-\*\.].*?)\n\n/gs, "\n\n<ul>\n$1$2\n</ul>\n\n\n"],
+		[/^([ \t]*)[-\*\.](\s+.*)$/gm, "<li>$1$2</li>\n"],
+	],
+
+	bold: [[/\*([^\*]+)\*/gm, "<strong>$1</strong>"]],
+
+	italic: [[/_([^_]+)_/gm, "<i>$1</i>"]],
+
+	strikethrough: [[/~([^~]+)~/gm, "<s>$1</s>"]],
+
+	code: [
+		[/```\n([^`]+)\n```/gm, "<pre><code>$1</code></pre>"],
+		[/```([^`]+)```/gm, "<code>$1</code>"],
+	],
+
+	images: [[/!\[([^\]]+)\]\(([^\)]+)\)/g, '<img src="$2" alt="$1">']],
+
+	links: [[/\[([^\]]+)\]\(([^\)]+)\)/g, '<a href="$2">$1</a>']],
+
+	breaks: [
+		[/\s\s\n/g, "\n<br>\n"],
+		[/\n\n/g, "\n<br>\n"],
+	],
+};
+
+/**
+ * Convert markdown to HTML.
+ * @param markdown The markdown string.
+ * @param options _(Optional)_ A record of transforms to disable.
+ * @returns The generated HTML string.
+ */
+function md_to_html(markdown, transform_config) {
+	let html = markdown;
+	for (const transform_name of MD_TRANSFORM_NAMES) {
+		const enabled =
+			typeof transform_config === "undefined" || transform_config[transform_name] !== false;
+		if (!enabled) {
+			continue;
+		}
+
+		const transforms = MD_TRANSFORMS[transform_name] ?? [];
+		for (const markdown_transformer of transforms) {
+			html = html.replace(...markdown_transformer);
+		}
+	}
+
+	return `<div class="html-from-markdown">${html}</div>`;
+}
diff --git a/public/tabs/blurbs/blurbs.html b/public/tabs/blurbs/blurbs.html
index 444e547..1ccb4d6 100644
--- a/public/tabs/blurbs/blurbs.html
+++ b/public/tabs/blurbs/blurbs.html
@@ -148,14 +148,15 @@
 			<script>
 				const blurbs_list = document.getElementById("blurbs-list");
 
-				async function render_blurb(blurb) {
+				async function render_blurb(blurb, position = "afterbegin") {
 					const creator = await USERS.get(blurb.creator_id);
 					const existing_element =
 						document.getElementById(blurb.id) ??
-						document.getElementById(blurb.meta?.temp_id ?? "");
+						document.getElementById(blurb.meta?.temp_id ?? "") ??
+						document.querySelector(`[data-temp_id="${blurb.meta?.temp_id ?? ""}"]`);
 					const blurb_datetime = datetime_to_local(blurb.timestamps.created);
 
-					const html_content = `<div class="blurb-container" data-creator_id="${creator.id}" data-blurb_id="${blurb.id}">
+					const html_content = `<div class="blurb-container" data-creator_id="${creator.id}" data-blurb_id="${blurb.id}" data-temp_id="${blurb.meta?.temp_id ?? ""}">
 						<div class="media-preview-container">
 							${blurb.data?.media?.length ? blurb.data.media.map((url) => `<img src="${url}" />`).join("\n") : ""}
 						</div>
@@ -187,26 +188,7 @@
 							document.querySelector(
 								`.blurb-container[data-blurb_id='${blurb.parent_id}'] > .replies-container`,
 							) ?? blurbs_list;
-						target_container.insertAdjacentHTML("beforeend", html_content);
-					}
-				}
-
-				async function append_blurbs(blurbs) {
-					let last_blurb_id = blurbs_list.dataset.last_blurb_id ?? "";
-					for await (const blurb of blurbs) {
-						// if the last blurb is undefined, it becomes this event, otherwise, if this event's id is newer,
-						// it becomes the latest blurb
-						last_blurb_id =
-							blurb.id > last_blurb_id && blurb.id.indexOf("TEMP") !== 0
-								? blurb.id
-								: last_blurb_id;
-
-						// if the last blurb has been updated, update the content's dataset to reflect that
-						if (last_blurb_id !== blurbs_list.dataset.last_blurb_id) {
-							blurbs_list.dataset.last_blurb_id = last_blurb_id;
-						}
-
-						await render_blurb(blurb);
+						target_container.insertAdjacentHTML(position, html_content);
 					}
 
 					const new_blurb_forms = document.querySelectorAll(".blurb-creation-form");
@@ -241,7 +223,22 @@
 					})
 						.then(async (new_events_response) => {
 							const new_events = (await new_events_response.json()) ?? [];
-							await append_blurbs(new_events.reverse());
+
+							for await (const blurb of new_events.reverse()) {
+								await render_blurb(blurb);
+							}
+
+							const last_blurb_id = new_events.reduce((_last_blurb_id, blurb) => {
+								return blurb.id > _last_blurb_id && blurb.id.indexOf("TEMP") < 0
+									? blurb.id
+									: _last_blurb_id;
+							}, blurb_list.dataset.last_blurb_id ?? "");
+
+							// if the last blurb has been updated, update the content's dataset to reflect that
+							if (last_blurb_id !== blurbs_list.dataset.last_blurb_id) {
+								blurbs_list.dataset.last_blurb_id = last_blurb_id;
+							}
+
 							poll_for_new_blurbs(topic_id);
 						})
 						.catch((error) => {
@@ -289,7 +286,10 @@
 
 					const events = await events_response.json();
 
-					await append_blurbs(events.reverse());
+					for await (const blurb of events.reverse()) {
+						await render_blurb(blurb, "afterbegin");
+					}
+
 					poll_for_new_blurbs();
 				}
 				document.addEventListener("topic_changed", load_active_topic_for_blurbs);
diff --git a/public/tabs/chat/chat.html b/public/tabs/chat/chat.html
index cf1ff7c..cc10045 100644
--- a/public/tabs/chat/chat.html
+++ b/public/tabs/chat/chat.html
@@ -5,12 +5,13 @@
 
 	let last_creator_id = null;
 	let user_tick_tock_class = "user-tock";
-	async function render_chat_event(event) {
+	async function render_chat_event(event, position = "beforeend") {
 		const creator = await USERS.get(event.creator_id);
 
 		const existing_element =
 			document.getElementById(event.id) ??
-			(event.meta?.temp_id ? document.getElementById(event.meta?.temp_id ?? "") : undefined);
+			document.getElementById(event.meta?.temp_id ?? "") ??
+			document.querySelector(`[data-temp_id="${event.meta?.temp_id ?? ""}" ]`);
 
 		const event_datetime = datetime_to_local(event.timestamps.created);
 
@@ -24,7 +25,7 @@
 			last_creator_id = creator.id;
 		}
 
-		const html_content = `<div id="${event.id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
+		const html_content = `<div id="${event.id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}" data-temp_id="${event.meta?.temp_id ?? ""}">
 	<div class="message-actions-container">
 		<input
 			type="checkbox"
@@ -64,35 +65,31 @@
 			// TODO: threading
 			document
 				.getElementById("topic-chat-content")
-				?.insertAdjacentHTML("beforeend", html_content);
+				?.insertAdjacentHTML(position, html_content);
 		}
 	}
 
-	async function append_chat_events(events) {
+	async function handle_chat_events(events) {
 		const topic_chat_content = document.getElementById("topic-chat-content");
-		let last_message_id = topic_chat_content.dataset.last_message_id ?? "";
-		for await (const event of events) {
-			// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
-			// it becomes the latest message
-			last_message_id =
-				event.id > last_message_id && event.id.indexOf("TEMP") !== 0
-					? event.id
-					: last_message_id;
-
-			// if the last message has been updated, update the content's dataset to reflect that
-			if (last_message_id !== topic_chat_content.dataset.last_message_id) {
-				topic_chat_content.dataset.last_message_id = last_message_id;
-			}
 
+		const sorted = events.sort((lhs, rhs) => lhs.id.localeCompare(rhs.id));
+		for await (const event of sorted) {
 			await render_chat_event(event);
 		}
 
+		const last_message_id = sorted.reduce((_last_message_id, event) => {
+			return event.id > _last_message_id && event.id.indexOf("TEMP") < 0
+				? event.id
+				: _last_message_id;
+		}, topic_chat_content.dataset.last_message_id ?? "");
+
+		// if the last blurb has been updated, update the content's dataset to reflect that
+		if (last_message_id !== topic_chat_content.dataset.last_message_id) {
+			topic_chat_content.dataset.last_message_id = last_message_id;
+		}
+
 		setTimeout(() => {
 			topic_chat_content.scrollTop = topic_chat_content.scrollHeight;
-			console.dir({
-				scrollHeight: topic_chat_content.scrollHeight,
-				scrollTop: topic_chat_content.scrollTop,
-			});
 		}, 50);
 	}
 
@@ -118,8 +115,8 @@
 			signal: topic_polling_request_abort_controller.signal,
 		})
 			.then(async (new_events_response) => {
-				const new_events = ((await new_events_response.json()) ?? []).reverse();
-				await append_chat_events(new_events);
+				const new_events = await new_events_response.json();
+				handle_chat_events(new_events);
 				poll_for_new_chat_events(topic_id);
 			})
 			.catch((error) => {
@@ -163,9 +160,8 @@
 			return;
 		}
 
-		const events = (await events_response.json()).reverse();
-
-		await append_chat_events(events);
+		const events = await events_response.json();
+		handle_chat_events(events);
 		poll_for_new_chat_events();
 	}
 	document.addEventListener("topic_changed", load_active_topic_for_chat);
@@ -204,7 +200,7 @@
 						width: 100%;
 						transition: all 0.5s;
 					"
-					on_reply="async (event) => { await append_chat_events([event]); document.getElementById( 'chat-input' )?.focus(); }"
+					on_reply="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.remove('sending'); document.getElementById( 'chat-input' )?.focus(); }"
 					on_parsed="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.add('sending'); }"
 				>
 					<input type="hidden" name="type" value="chat" />
diff --git a/public/tabs/essays/essays.html b/public/tabs/essays/essays.html
index 67cea53..19f73c2 100644
--- a/public/tabs/essays/essays.html
+++ b/public/tabs/essays/essays.html
@@ -1,16 +1,275 @@
+<style>
+	#essays-container {
+		padding: 1rem;
+		max-width: 60rem;
+		margin: 0 auto;
+	}
+
+	.essay-container {
+		position: relative;
+		display: grid;
+		grid-template-rows: auto auto auto auto 1fr;
+		grid-template-columns: 1fr;
+		grid-template-areas:
+			"preview"
+			"title"
+			"info"
+			"content"
+			"newessay"
+			"replies";
+		padding: 1rem;
+		border: 1px solid var(--border-subtle);
+		overflow-y: hidden;
+		transition: all ease-in-out 0.33s;
+		margin-bottom: 2rem;
+	}
+
+	.essay-container .media-preview-container {
+		grid-area: preview;
+		max-height: 600px;
+	}
+
+	.essay-container .media-preview-container img {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	.essay-container .info-container {
+		grid-area: info;
+		display: flex;
+		margin-left: 1.8rem;
+	}
+
+	.essay-container .info-container .avatar-container {
+		display: block;
+		margin: 0.5rem;
+		width: 3rem;
+		height: 3rem;
+		border-radius: 20%;
+		overflow: hidden;
+	}
+
+	.essay-container .info-container .avatar-container img {
+		min-width: 100%;
+		min-height: 100%;
+	}
+
+	.essay-container .info-container .username-container {
+		display: block;
+		margin: 0 0.5rem;
+		font-weight: bold;
+		align-content: center;
+	}
+
+	.essay-container .info-container .datetime-container {
+		display: block;
+		margin: 0 0.5rem;
+		align-content: center;
+	}
+
+	.essay-container .info-container .datetime-container .long {
+		font-size: x-small;
+		text-transform: uppercase;
+	}
+
+	.essay-container .info-container .datetime-container .short {
+		font-size: xx-small;
+		visibility: hidden;
+		display: none;
+	}
+
+	.essay-container .title-container {
+		grid-area: title;
+		padding-left: 1rem;
+		margin: 1rem 0;
+		font-size: xx-large;
+	}
+
+	.essay-container .content-container {
+		grid-area: content;
+		padding-left: 0.25rem;
+		margin: 1rem 0;
+		font-size: large;
+	}
+
+	.essay-container .new-essay-container {
+		grid-area: newessay;
+		display: none;
+	}
+
+	.essay-container .replies-container {
+		grid-area: replies;
+	}
+</style>
+
 <div id="essays" class="tab">
 	<input
 		type="radio"
 		name="top-level-tabs"
-		id="essays-tab-input"
+		id="essay-tab-input"
 		class="tab-switch"
-		data-view="essays"
+		data-view="essay"
 	/>
-	<label for="essays-tab-input" class="tab-label mockup"
+	<label for="essay-tab-input" class="tab-label"
 		><div class="icon essay"></div>
-		<div class="label">Essays</div></label
-	>
+		<div class="label">Essays</div>
+	</label>
 	<div class="tab-content">
-		<!-- #include file="./README.md" -->
+		<div id="essays-container" class="container">
+			<!-- #include file="./README.md" -->
+			<!-- #include file="./new_essay.html" -->
+
+			<div id="essays-list"></div>
+			<script>
+				const essays_list = document.getElementById("essays-list");
+
+				async function render_essay(essay, position = "beforeend") {
+					const creator = await USERS.get(essay.creator_id);
+					const existing_element =
+						document.getElementById(essay.id) ??
+						document.getElementById(essay.meta?.temp_id ?? "") ??
+						document.querySelector(`[data-temp_id="${essay.meta?.temp_id ?? ""}"]`);
+					const essay_datetime = datetime_to_local(essay.timestamps.created);
+
+					const html_content = `<div class="essay-container" data-creator_id="${creator.id}" data-essay_id="${essay.id}" data-temp_id="${essay.meta?.temp_id ?? ""}">
+						<div class="media-preview-container">
+							${essay.data?.media?.length ? essay.data.media.map((url) => `<img src="${url}" />`).join("\n") : ""}
+						</div>
+
+						<div class="info-container">
+							<div class="avatar-container">
+								<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
+							</div>
+							<div class="username-container">
+								<span class="username">${creator.username}</span>
+							</div>
+							<div class="datetime-container">
+								<span class="long">${essay_datetime.long}</span>
+								<span class="short">${essay_datetime.short}</span>
+							</div>
+						</div>
+						<div class="title-container">${essay.data.title}</div>
+						<div class="content-container">${htmlify(md_to_html(essay.data.essay))}</div>
+					</div>`;
+
+					if (existing_element) {
+						const template = document.createElement("template");
+						template.innerHTML = html_content;
+						existing_element.replaceWith(template.content.firstChild);
+						existing_element.classList.remove("sending");
+					} else {
+						const target_container =
+							document.querySelector(
+								`.essay-container[data-essay_id='${essay.parent_id}'] > .replies-container`,
+							) ?? essays_list;
+						target_container.insertAdjacentHTML(position, html_content);
+					}
+				}
+
+				async function append_essays(essays) {
+					let last_essay_id = essays_list.dataset.last_essay_id ?? "";
+					for await (const essay of essays) {
+						// if the last essay is undefined, it becomes this event, otherwise, if this event's id is newer,
+						// it becomes the latest essay
+						last_essay_id =
+							essay.id > last_essay_id && essay.id.indexOf("TEMP") !== 0
+								? essay.id
+								: last_essay_id;
+
+						// if the last essay has been updated, update the content's dataset to reflect that
+						if (last_essay_id !== essays_list.dataset.last_essay_id) {
+							essays_list.dataset.last_essay_id = last_essay_id;
+						}
+
+						await render_essay(essay);
+					}
+
+					const new_essay_forms = document.querySelectorAll(".essay-creation-form");
+					for (const new_essay_form of new_essay_forms) {
+						new_essay_form.action =
+							"/api/topics/" + document.body.dataset?.topic + "/events";
+					}
+
+					essays_list.scrollTop = 0;
+				}
+
+				// TODO: we need some abortcontroller handling here or something
+				// similar for when we change topics, this is the most basic
+				// first pass outline
+				let essay_polling_abort_controller = null;
+				async function poll_for_new_essays() {
+					const essays_list = document.getElementById("essays-list");
+					const topic_id = document.body.dataset.topic;
+					const last_essay_id = essays_list.dataset.last_essay_id;
+
+					if (!topic_id) {
+						return;
+					}
+
+					const message_polling_url = `/api/topics/${topic_id}/events?type=essay&limit=100&sort=newest&wait=true${last_essay_id ? `&after_id=${last_essay_id}` : ""}`;
+
+					essay_polling_abort_controller =
+						essay_polling_abort_controller || new AbortController();
+
+					api.fetch(message_polling_url, {
+						signal: essay_polling_abort_controller.signal,
+					})
+						.then(async (new_events_response) => {
+							const new_events = (await new_events_response.json()) ?? [];
+							await append_essays(new_events.reverse(), "afterbegin");
+							poll_for_new_essays(topic_id);
+						})
+						.catch((error) => {
+							// TODO: poll again? back off?
+							console.error(error);
+						});
+				}
+
+				async function load_active_topic_for_essays() {
+					const topic_id = document.body.dataset.topic;
+					if (!topic_id) return;
+
+					const user = document.body.dataset.user
+						? JSON.parse(document.body.dataset.user)
+						: null;
+					if (!user) return;
+
+					const essays_list = document.getElementById("essays-list");
+
+					if (essay_polling_abort_controller) {
+						essay_polling_abort_controller.abort();
+						essay_polling_abort_controller = null;
+						delete essays_list.dataset.last_essay_id;
+					}
+
+					const topic_response = await api.fetch(`/api/topics/${topic_id}`);
+					if (!topic_response.ok) {
+						const error = await topic_response.json();
+						alert(error.message ?? JSON.stringify(error));
+						return;
+					}
+
+					const topic = await topic_response.json();
+
+					essays_list.innerHTML = "";
+
+					const events_response = await api.fetch(
+						`/api/topics/${topic_id}/events?type=essay&limit=100&sort=newest`,
+					);
+					if (!events_response.ok) {
+						const error = await events_response.json();
+						alert(error.message ?? JSON.stringify(error));
+						return;
+					}
+
+					const events = await events_response.json();
+
+					await append_essays(events);
+					poll_for_new_essays();
+				}
+				document.addEventListener("topic_changed", load_active_topic_for_essays);
+				document.addEventListener("user_logged_in", load_active_topic_for_essays);
+			</script>
+		</div>
 	</div>
 </div>
diff --git a/public/tabs/essays/new_essay.html b/public/tabs/essays/new_essay.html
new file mode 100644
index 0000000..d116a7d
--- /dev/null
+++ b/public/tabs/essays/new_essay.html
@@ -0,0 +1,118 @@
+<style>
+	.new-essay-container input[type="file"] {
+		display: none;
+		visibility: hidden;
+		opacity: 0;
+	}
+
+	.new-essay-container .essay-title-limit-counter,
+	.new-essay-container .essay-limit-counter {
+		font-size: smaller;
+		margin-left: 0.5rem;
+	}
+
+	.new-essay-container .file-attach-label {
+		display: block;
+		text-align: right;
+		margin-top: -2.5rem;
+		padding: 0.5rem;
+	}
+
+	.new-essay-container .file-attach-label .icon {
+		display: inline-block;
+	}
+</style>
+<div class="new-essay-container" data-requires-permission="topics.essays.create">
+	<label>
+		<input type="checkbox" collapse-toggle />
+		<i class="icon plus" style="display: inline-block; margin-right: 0.5rem"></i>
+		<span>New Essay</span>
+	</label>
+	<form
+		data-smart="true"
+		method="POST"
+		class="essay-creation-form collapsible"
+		style="
+			margin-top: 1rem
+			width: 100%;
+			transition: all 0.5s;
+		"
+		on_reply="async (essay) => { await render_essay(essay, 'afterbegin'); document.getElementById(essay.id)?.classList.remove('sending'); }"
+		on_parsed="async (essay) => { await render_essay(essay, 'afterbegin'); document.getElementById(essay.id)?.classList.add('sending'); }"
+	>
+		<input type="hidden" name="type" value="essay" />
+
+		<input
+			type="hidden"
+			name="id"
+			generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
+			reset-on-submit
+		/>
+		<input
+			type="hidden"
+			name="meta.temp_id"
+			generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
+			reset-on-submit
+		/>
+
+		<input
+			type="hidden"
+			name="creator_id"
+			generator="() => { return JSON.parse( document.body.dataset.user ?? '{}' ).id; }"
+		/>
+
+		<input
+			type="hidden"
+			name="timestamps.created"
+			generator="(_input, form) => form.__submitted_at.toISOString()"
+			reset-on-submit
+		/>
+		<input
+			type="hidden"
+			name="timestamps.updated"
+			generator="(_input, form) => form.__submitted_at.toISOString()"
+			reset-on-submit
+		/>
+
+		<input
+			type="hidden"
+			name="parent_id"
+			generator="(_input, form) => { const parent_essay = form.closest( '.essay-container' ); return parent_essay?.dataset?.essay_id; }"
+		/>
+
+		<textarea
+			type="text"
+			name="data.title"
+			value=""
+			maxlength="128"
+			rows="2"
+			placeholder="Essay title..."
+			reset-on-submit
+		></textarea>
+		<div class="essay-title-limit-counter" data-limit-counter-for="data.title">0 / 128</div>
+
+		<textarea
+			type="text"
+			name="data.essay"
+			value=""
+			maxlength="65536"
+			rows="16"
+			placeholder="		Compose your thoughts here."
+			reset-on-submit
+		></textarea>
+		<div class="essay-limit-counter" data-limit-counter-for="data.essay">0 / 65536</div>
+
+		<label class="file-attach-label">
+			<input
+				aria-label="Upload and share file"
+				type="file"
+				multiple
+				data-smartforms-save-to-home="true"
+				name="data.media"
+				reset-on-submit
+			/>
+			<div class="icon attachment"></div>
+		</label>
+		<input type="submit" value="Publish It!" />
+	</form>
+</div>