From 591fd3808879661885023783f1218f04d507b36c Mon Sep 17 00:00:00 2001
From: Andy Burke <andy.burke@mailbox.earth>
Date: Sun, 21 Sep 2025 18:29:37 -0700
Subject: [PATCH] feature: forum replies feature: blurbs

---
 deno.json                                   |   2 +-
 deno.lock                                   |   8 +-
 public/api/topics/:topic_id/events/index.ts |   4 +
 public/api/users/index.ts                   |   3 +
 public/base.css                             |   5 +-
 public/js/smartforms.js                     |  10 +-
 public/tabs/blurbs/README.md                |   2 +-
 public/tabs/blurbs/blurbs.html              | 307 +++++++++++++++++-
 public/tabs/blurbs/new_blurb.html           |  80 +++++
 public/tabs/chat/chat.html                  | 342 ++++++++++++++------
 public/tabs/chat/chat.js                    | 163 ----------
 public/tabs/forum/README.md                 |   2 +-
 public/tabs/forum/forum.html                |   2 +
 public/tabs/forum/new_post.html             |  11 +-
 14 files changed, 651 insertions(+), 290 deletions(-)
 create mode 100644 public/tabs/blurbs/new_blurb.html
 delete mode 100644 public/tabs/chat/chat.js

diff --git a/deno.json b/deno.json
index 04fc917..4bef967 100644
--- a/deno.json
+++ b/deno.json
@@ -31,7 +31,7 @@
 		}
 	},
 	"imports": {
-		"@andyburke/fsdb": "jsr:@andyburke/fsdb@^1.0.2",
+		"@andyburke/fsdb": "jsr:@andyburke/fsdb@^1.0.3",
 		"@andyburke/lurid": "jsr:@andyburke/lurid@^0.2.0",
 		"@andyburke/serverus": "jsr:@andyburke/serverus@^0.13.0",
 		"@da/bcrypt": "jsr:@da/bcrypt@^1.0.1",
diff --git a/deno.lock b/deno.lock
index 3c409a2..8ac8a98 100644
--- a/deno.lock
+++ b/deno.lock
@@ -1,7 +1,7 @@
 {
   "version": "5",
   "specifiers": {
-    "jsr:@andyburke/fsdb@^1.0.2": "1.0.2",
+    "jsr:@andyburke/fsdb@^1.0.3": "1.0.3",
     "jsr:@andyburke/lurid@0.2": "0.2.0",
     "jsr:@andyburke/serverus@0.13": "0.13.0",
     "jsr:@da/bcrypt@*": "1.0.1",
@@ -28,8 +28,8 @@
     "npm:@types/node@*": "22.15.15"
   },
   "jsr": {
-    "@andyburke/fsdb@1.0.2": {
-      "integrity": "f12315b63f534df0f1638828f3b7551ced9b507618f98c6c5dfbd8adf5b96d6f",
+    "@andyburke/fsdb@1.0.3": {
+      "integrity": "e80d831bf173948cb98f6687d17d098f5f44d016cf04a2d851dc1b58ee327263",
       "dependencies": [
         "jsr:@std/cli@^1.0.20",
         "jsr:@std/fs@^1.0.18",
@@ -130,7 +130,7 @@
   },
   "workspace": {
     "dependencies": [
-      "jsr:@andyburke/fsdb@^1.0.2",
+      "jsr:@andyburke/fsdb@^1.0.3",
       "jsr:@andyburke/lurid@0.2",
       "jsr:@andyburke/serverus@0.13",
       "jsr:@da/bcrypt@^1.0.1",
diff --git a/public/api/topics/:topic_id/events/index.ts b/public/api/topics/:topic_id/events/index.ts
index 22db3f1..e01655a 100644
--- a/public/api/topics/:topic_id/events/index.ts
+++ b/public/api/topics/:topic_id/events/index.ts
@@ -181,6 +181,10 @@ export async function POST(req: Request, meta: Record<string, any>): Promise<Res
 			});
 		}
 
+		console.dir({
+			event
+		});
+
 		await events.create(event);
 
 		return Response.json(event, {
diff --git a/public/api/users/index.ts b/public/api/users/index.ts
index c71188e..0af20b5 100644
--- a/public/api/users/index.ts
+++ b/public/api/users/index.ts
@@ -14,6 +14,9 @@ const DEFAULT_USER_PERMISSIONS: string[] = [
 	'self.read',
 	'self.write',
 	'topics.read',
+	'topics.blurbs.create',
+	'topics.blurbs.read',
+	'topics.blurbs.write',
 	'topics.chat.write',
 	'topics.chat.read',
 	'topics.posts.create',
diff --git a/public/base.css b/public/base.css
index f8d2875..e65ea4c 100644
--- a/public/base.css
+++ b/public/base.css
@@ -217,7 +217,7 @@ input[collapse-toggle] {
 
 label:has(input[collapse-toggle]) {
 	display: block;
-	max-width: 8rem;
+	max-width: fit-content;
 	cursor: pointer;
 	border: 1px solid var(--text);
 	border-radius: var(--border-radius);
@@ -307,6 +307,9 @@ body[data-perms*="self.write"] [data-requires-permission="self.write"],
 body[data-perms*="topics.create"] [data-requires-permission="topics.create"],
 body[data-perms*="topics.read"] [data-requires-permission="topics.read"],
 body[data-perms*="topics.write"] [data-requires-permission="topics.write"],
+body[data-perms*="topics.blurbs.create"] [data-requires-permission="topics.blurbs.create"],
+body[data-perms*="topics.blurbs.read"] [data-requires-permission="topics.blurbs.read"],
+body[data-perms*="topics.blurbs.write"] [data-requires-permission="topics.blurbs.write"],
 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"],
diff --git a/public/js/smartforms.js b/public/js/smartforms.js
index e37f385..ed34255 100644
--- a/public/js/smartforms.js
+++ b/public/js/smartforms.js
@@ -22,10 +22,6 @@ function smarten_forms() {
 
 			const form_data = new FormData(form);
 			for (const [key, value] of form_data.entries()) {
-				if (key.length === 0) {
-					continue;
-				}
-
 				const input = form.querySelector(`[name="${key}"]`);
 
 				if (input.type === "file") {
@@ -73,6 +69,10 @@ function smarten_forms() {
 					}
 				}
 
+				if (key.length === 0) {
+					continue;
+				}
+
 				const generator = input.getAttribute("generator");
 				const generated_value =
 					typeof generator === "string" && generator.length
@@ -153,7 +153,7 @@ function smarten_forms() {
 					await on_reply(response_body);
 				}
 
-				const inputs_for_reset = form.querySelectorAll("input[reset-on-submit]");
+				const inputs_for_reset = form.querySelectorAll("[reset-on-submit]");
 				for (const input of inputs_for_reset) {
 					const reset_value = input.getAttribute("reset-on-submit");
 					input.value = reset_value ?? "";
diff --git a/public/tabs/blurbs/README.md b/public/tabs/blurbs/README.md
index 4b78a6d..c87d277 100644
--- a/public/tabs/blurbs/README.md
+++ b/public/tabs/blurbs/README.md
@@ -1,3 +1,3 @@
 # Blurbs
 
-Blurbs are going to be short (128? 256? character thoughts)
+Blurbs are short thoughts - 256 characters max.
diff --git a/public/tabs/blurbs/blurbs.html b/public/tabs/blurbs/blurbs.html
index 701264a..1ccb159 100644
--- a/public/tabs/blurbs/blurbs.html
+++ b/public/tabs/blurbs/blurbs.html
@@ -1,4 +1,139 @@
-<div id="blurb" class="tab">
+<style>
+	.blurbs-container {
+		padding: 1rem;
+	}
+
+	.blurb-container {
+		position: relative;
+		display: grid;
+		grid-template-rows: auto auto auto auto 1fr;
+		grid-template-columns: auto auto 1fr;
+		grid-template-areas:
+			"expander	preview	info"
+			"expander	preview	subject"
+			".			.		content"
+			".			.		newblurb"
+			".			.		replies";
+		max-height: 6rem;
+		padding: 1rem;
+		border: 1px solid var(--border-subtle);
+		overflow-y: hidden;
+		transition: all ease-in-out 0.33s;
+		margin-bottom: 2rem;
+	}
+
+	.blurb-container:has(> div > label > input[name="expanded"]:checked) {
+		max-height: unset;
+	}
+
+	.expand-toggle-container input[name="expanded"] {
+		display: none;
+		visibility: hidden;
+		opacity: 0;
+	}
+
+	.blurb-container:has(> div > label > input[name="expanded"]) .icon.minus,
+	.blurb-container:has(> div > label > input[name="expanded"]:checked) .icon.plus {
+		display: block;
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.blurb-container:has(> div > label > input[name="expanded"]) .icon.plus,
+	.blurb-container:has(> div > label > input[name="expanded"]:checked) .icon.minus {
+		display: none;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.blurb-container .expand-toggle-container {
+		grid-area: expander;
+		margin-right: 0.5rem;
+	}
+
+	.blurb-container .expand-toggle-container label {
+		display: flex;
+		align-items: center;
+		width: 22px;
+		height: 22px;
+	}
+
+	.blurb-container .media-preview-container {
+		grid-area: preview;
+		width: 6rem;
+		height: 4rem;
+		margin-right: 1rem;
+	}
+
+	.blurb-container .media-preview-container img {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	.blurb-container .info-container {
+		grid-area: info;
+		display: flex;
+	}
+
+	.blurb-container .info-container .avatar-container {
+		display: block;
+		margin: 0.5rem;
+		width: 3rem;
+		height: 3rem;
+		border-radius: 16%;
+		overflow: hidden;
+	}
+
+	.blurb-container .info-container .avatar-container img {
+		width: 100%;
+	}
+
+	.blurb-container .info-container .username-container {
+		display: block;
+		margin: 0 0.5rem;
+		font-weight: bold;
+	}
+
+	.blurb-container .info-container .datetime-container {
+		display: block;
+		margin: 0 0.5rem;
+	}
+
+	.blurb-container .info-container .datetime-container .long {
+		font-size: x-small;
+		text-transform: uppercase;
+		visibility: hidden;
+		display: none;
+	}
+
+	.blurb-container .info-container .datetime-container .short {
+		font-size: xx-small;
+	}
+
+	.blurb-container .subject-container {
+		grid-area: subject;
+		padding-left: 5rem;
+		margin-top: -2.5rem;
+		font-size: larger;
+		font-weight: bold;
+	}
+
+	.blurb-container .content-container {
+		grid-area: content;
+		padding-left: 5rem;
+		margin-top: 2rem;
+	}
+
+	.blurb-container .new-blurb-container {
+		grid-area: newblurb;
+	}
+
+	.blurb-container .replies-container {
+		grid-area: replies;
+	}
+</style>
+
+<div id="blurbs" class="tab">
 	<input
 		type="radio"
 		name="top-level-tabs"
@@ -6,11 +141,173 @@
 		class="tab-switch"
 		data-view="blurb"
 	/>
-	<label for="blurb-tab-input" class="tab-label mockup"
+	<label for="blurb-tab-input" class="tab-label"
 		><div class="icon blurb"></div>
-		<div class="label">Blurbs</div></label
-	>
-	<div class="tab-content">
+		<div class="label">Blurbs</div>
+	</label>
+	<div class="tab-content blurbs-container">
 		<!-- #include file="./README.md" -->
+
+		<div id="blurbs" class="container">
+			<div id="blurbs-list"></div>
+			<script>
+				const blurbs_list = document.getElementById("blurbs-list");
+
+				async function render_blurb(blurb) {
+					const creator = await USERS.get(blurb.creator_id);
+					const existing_element =
+						document.getElementById(blurb.id) ??
+						document.getElementById(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}">
+						<div class="expand-toggle-container">
+							<label>
+								<input type="checkbox" name="expanded"/><i class="icon plus"></i><i class="icon minus"></i>
+							</label>
+						</div>
+
+						<div class="media-preview-container">
+							<img src="/images/placeholders/${String(blurb_datetime.ms % 10).padStart(2, "0")}.svg" />
+						</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">${blurb_datetime.long}</span>
+								<span class="short">${blurb_datetime.short}</span>
+							</div>
+						</div>
+						<div class="content-container">${blurb.data.blurb}</div>
+						<!-- #include file="./new_blurb.html" -->
+						<div class="replies-container"></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(
+								`.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);
+					}
+
+					const new_blurb_forms = document.querySelectorAll(".blurb-creation-form");
+					for (const new_blurb_form of new_blurb_forms) {
+						new_blurb_form.action =
+							"/api/topics/" + document.body.dataset?.topic + "/events";
+					}
+
+					blurbs_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 blurb_polling_abort_controller = null;
+				async function poll_for_new_blurbs() {
+					const blurbs_list = document.getElementById("blurbs-list");
+					const topic_id = document.body.dataset.topic;
+					const last_blurb_id = blurbs_list.dataset.last_blurb_id;
+
+					if (!topic_id) {
+						return;
+					}
+
+					const message_polling_url = `/api/topics/${topic_id}/events?type=blurb&limit=100&sort=newest&wait=true${last_blurb_id ? `&after_id=${last_blurb_id}` : ""}`;
+
+					blurb_polling_abort_controller =
+						blurb_polling_abort_controller || new AbortController();
+
+					api.fetch(message_polling_url, {
+						signal: blurb_polling_abort_controller.signal,
+					})
+						.then(async (new_events_response) => {
+							const new_events = (await new_events_response.json()) ?? [];
+							await append_blurbs(new_events.reverse());
+							poll_for_new_blurbs(topic_id);
+						})
+						.catch((error) => {
+							// TODO: poll again? back off?
+							console.error(error);
+						});
+				}
+
+				async function load_active_topic_for_blurbs() {
+					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 blurbs_list = document.getElementById("blurbs-list");
+
+					if (blurb_polling_abort_controller) {
+						blurb_polling_abort_controller.abort();
+						blurb_polling_abort_controller = null;
+						delete blurbs_list.dataset.last_blurb_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();
+
+					blurbs_list.innerHTML = "";
+
+					const events_response = await api.fetch(
+						`/api/topics/${topic_id}/events?type=blurb&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_blurbs(events.reverse());
+					poll_for_new_blurbs();
+				}
+				document.addEventListener("topic_changed", load_active_topic_for_blurbs);
+				document.addEventListener("user_logged_in", load_active_topic_for_blurbs);
+			</script>
+		</div>
+
+		<!-- #include file="./new_blurb.html" -->
 	</div>
 </div>
diff --git a/public/tabs/blurbs/new_blurb.html b/public/tabs/blurbs/new_blurb.html
new file mode 100644
index 0000000..30f004a
--- /dev/null
+++ b/public/tabs/blurbs/new_blurb.html
@@ -0,0 +1,80 @@
+<div class="new-blurb-container" data-requires-permission="topics.blurbs.create">
+	<label>
+		<input type="checkbox" collapse-toggle />
+		<i class="icon plus" style="display: inline-block; margin-right: 0.5rem"></i>
+		<span>New Blurb</span>
+	</label>
+	<form
+		data-smart="true"
+		method="POST"
+		class="blurb-creation-form collapsible"
+		style="
+			margin-top: 1rem
+			width: 100%;
+			transition: all 0.5s;
+		"
+		on_reply="async (blurb) => { await append_blurbs([blurb]); }"
+		on_parsed="async (blurb) => { await render_blurb(blurb); document.getElementById(blurb.id)?.classList.add('sending'); }"
+	>
+		<input type="hidden" name="type" value="blurb" />
+
+		<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) => { debugger; const parent_blurb = form.closest( '.blurb-container' ); return parent_blurb?.dataset?.blurb_id; }"
+		/>
+
+		<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>
+		<textarea
+			type="text"
+			name="data.blurb"
+			value=""
+			maxlength="256"
+			placeholder=" ... "
+			reset-on-submit
+		></textarea>
+		<input type="submit" value="Blurb" />
+	</form>
+</div>
diff --git a/public/tabs/chat/chat.html b/public/tabs/chat/chat.html
index eb70377..cf1ff7c 100644
--- a/public/tabs/chat/chat.html
+++ b/public/tabs/chat/chat.html
@@ -1,3 +1,176 @@
+<script>
+	const time_tick_tock_timeout = 60 * 1000; // 1 minute
+	let last_event_datetime_value = 0;
+	let time_tick_tock_class = "time-tock";
+
+	let last_creator_id = null;
+	let user_tick_tock_class = "user-tock";
+	async function render_chat_event(event) {
+		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);
+
+		const event_datetime = datetime_to_local(event.timestamps.created);
+
+		if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
+			time_tick_tock_class = time_tick_tock_class === "time-tick" ? "time-tock" : "time-tick";
+		}
+		last_event_datetime_value = event_datetime.value;
+
+		if (last_creator_id !== creator.id) {
+			user_tick_tock_class = user_tick_tock_class === "user-tick" ? "user-tock" : "user-tick";
+			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}">
+	<div class="message-actions-container">
+		<input
+			type="checkbox"
+			id="show_message_actions-${event.id}"
+			class="message-actions-display-toggle"
+		/>
+		<label class="message-actions-display-toggle-label" for="show_message_actions-${event.id}">
+			<div class="icon more-borderless"></div>
+		</label>
+
+		<button class="message-action mockup" data-action="react"><i class="icon circle"></i><span class="action-name">React</span></button>
+		<button class="message-action" data-action="reply" onclick="document.getElementById( 'parent-id' ).value = '${event.id}';"><i class="icon reply"></i><span class="action-name">Reply</span></button>
+		<button class="message-action mockup" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Copy Link</span></button>
+		<button class="message-action mockup" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></button>
+	</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 ?? "unknown"}</span>
+		</div>
+		<div class="datetime-container">
+			<span class="long">${event_datetime.long}</span>
+			<span class="short">${event_datetime.short}</span>
+		</div>
+	</div>
+	<div class="message-content-container">${htmlify(event.data.content)}</div>
+	<div class="message-media-container">${htmlify(event.data.media?.join("\n") ?? "")}</div>
+</div>`;
+
+		if (existing_element) {
+			const template = document.createElement("template");
+			template.innerHTML = html_content;
+			existing_element.replaceWith(template.content.firstChild);
+		} else {
+			// TODO: threading
+			document
+				.getElementById("topic-chat-content")
+				?.insertAdjacentHTML("beforeend", html_content);
+		}
+	}
+
+	async function append_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;
+			}
+
+			await render_chat_event(event);
+		}
+
+		setTimeout(() => {
+			topic_chat_content.scrollTop = topic_chat_content.scrollHeight;
+			console.dir({
+				scrollHeight: topic_chat_content.scrollHeight,
+				scrollTop: topic_chat_content.scrollTop,
+			});
+		}, 50);
+	}
+
+	// TODO: we need some abortcontroller handling here or something
+	// similar for when we change topics, this is the most basic
+	// first pass outline
+	let topic_polling_request_abort_controller = null;
+	async function poll_for_new_chat_events() {
+		const topic_chat_content = document.getElementById("topic-chat-content");
+		const topic_id = document.body.dataset.topic;
+		const last_message_id = topic_chat_content.dataset.last_message_id;
+
+		if (!topic_id) {
+			return;
+		}
+
+		const message_polling_url = `/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
+
+		topic_polling_request_abort_controller =
+			topic_polling_request_abort_controller || new AbortController();
+
+		api.fetch(message_polling_url, {
+			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);
+				poll_for_new_chat_events(topic_id);
+			})
+			.catch((error) => {
+				// TODO: poll again? back off?
+				console.error(error);
+			});
+	}
+
+	async function load_active_topic_for_chat() {
+		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 topic_chat_content = document.getElementById("topic-chat-content");
+
+		if (topic_polling_request_abort_controller) {
+			topic_polling_request_abort_controller.abort();
+			topic_polling_request_abort_controller = null;
+			delete topic_chat_content.dataset.last_message_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();
+
+		topic_chat_content.innerHTML = "";
+
+		const events_response = await api.fetch(
+			`/api/topics/${topic_id}/events?type=chat&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()).reverse();
+
+		await append_chat_events(events);
+		poll_for_new_chat_events();
+	}
+	document.addEventListener("topic_changed", load_active_topic_for_chat);
+	document.addEventListener("user_logged_in", load_active_topic_for_chat);
+</script>
 <div id="chat" class="tab">
 	<input
 		type="radio"
@@ -16,43 +189,88 @@
 		</style>
 		<script src="/js/external/mimetypes.js" type="text/javascript"></script>
 		<script src="/js/external/punycode.js" type="text/javascript"></script>
-		<script src="/tabs/chat/chat.js" type="text/javascript"></script>
+
 		<div id="topic-chat-container">
 			<div id="topic-chat-content"></div>
 			<div id="topic-chat-entry-container">
-				<form id="topic-chat-entry" action="" data-smart="true" data-method="POST">
-					<input id="parent-id" type="hidden" name="parent_id" value="" />
+				<form
+					id="topic-chat-entry"
+					data-smart="true"
+					data-requires-permission="topics.posts.create"
+					method="POST"
+					class="post-creation-form collapsible"
+					style="
+						margin-top: 1rem
+						width: 100%;
+						transition: all 0.5s;
+					"
+					on_reply="async (event) => { await append_chat_events([event]); 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" />
+
 					<input
-						id="file-upload-and-share-input"
-						aria-label="Upload and share file"
-						type="file"
-						multiple
+						type="hidden"
+						name="id"
+						generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
+						reset-on-submit
 					/>
-					<label for="file-upload-and-share-input">
+					<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" reset-on-submit />
+
+					<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>
+
 					<textarea
 						id="topic-chat-input"
 						class="topic-chat-input"
 						rows="1"
 						name="data.content"
+						reset-on-submit
 					></textarea>
+
 					<button id="topic-chat-send" class="primary" aria-label="Send a message">
 						<i class="icon send"></i>
 					</button>
+
 					<script>
 						{
 							const form = document.currentScript.closest("form");
-							const file_input = form.querySelector('input[type="file"]');
 							const chat_input = form.querySelector('textarea[name="data.content"]');
-							const parent_id_input = form.querySelector('input[name="parent_id"]');
-
-							const topic_chat_container =
-								document.getElementById("topic-chat-container");
-							const topic_chat_content =
-								document.getElementById("topic-chat-content");
-
-							let messages_in_flight = {};
 
 							document.addEventListener(
 								"topic_changed",
@@ -66,96 +284,6 @@
 									form.requestSubmit();
 								}
 							});
-
-							form.on_submit = async (event) => {
-								const user = JSON.parse(document.body.dataset.user);
-								const topic_id = document.body.dataset.topic;
-								if (!topic_id) {
-									alert("Failed to get topic_id!");
-									return false;
-								}
-
-								form.uploaded_urls = [];
-								form.errors = [];
-								for await (const file of file_input.files) {
-									const body = new FormData();
-									body.append("file", file, encodeURIComponent(file.name));
-
-									const file_path = `/files/users/${user.id}/${encodeURIComponent(file.name)}`;
-
-									const file_upload_response = await api.fetch(file_path, {
-										method: "PUT",
-										body,
-									});
-
-									if (!file_upload_response.ok) {
-										const error = await file_upload_response.json();
-										form.errors.push(error?.error?.message ?? "Unknown error.");
-										continue;
-									}
-
-									const file_url = `${window.location.protocol}//${window.location.host}${file_path}`;
-									form.uploaded_urls.push(file_url);
-								}
-
-								if (form.errors.length) {
-									const errors = form.errors.join("\n\n");
-									alert(errors);
-									return false;
-								}
-
-								const message = chat_input.value.trim();
-								if (form.uploaded_urls.length === 0 && message.length === 0) {
-									return false;
-								}
-							};
-
-							form.on_parsed = (json) => {
-								const now = new Date().toISOString();
-
-								const temp_id = `TEMP-${now}`;
-								json.id = temp_id;
-								json.type = "chat";
-								json.meta = {
-									temp_id,
-								};
-								json.timestamps = {
-									created: now,
-									updated: now,
-								};
-
-								if (form.uploaded_urls.length) {
-									json.data = json.data ?? {};
-									json.data.content =
-										(typeof json.data.content === "string" &&
-										json.data.content.trim().length
-											? json.data.content.trim() + "\n"
-											: "") + form.uploaded_urls.join("\n");
-								}
-
-								const user = JSON.parse(document.body.dataset.user);
-								render_text_event(topic_chat_content, json, user);
-								document
-									.getElementById(`chat-${temp_id}`)
-									?.classList.add("sending");
-							};
-
-							form.on_error = (error) => {
-								// TODO: mark the temporary message element with the failed class?
-								alert(error);
-								chat_input.focus();
-							};
-
-							form.on_reply = (sent_message) => {
-								document
-									.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`)
-									?.classList.remove("sending");
-
-								append_topic_events([sent_message]);
-								parent_id_input.value = "";
-								chat_input.value = "";
-								chat_input.focus();
-							};
 						}
 					</script>
 				</form>
diff --git a/public/tabs/chat/chat.js b/public/tabs/chat/chat.js
deleted file mode 100644
index e8147fb..0000000
--- a/public/tabs/chat/chat.js
+++ /dev/null
@@ -1,163 +0,0 @@
-const time_tick_tock_timeout = 60 * 1000; // 1 minute
-let last_event_datetime_value = 0;
-let time_tick_tock_class = "time-tock";
-
-let last_creator_id = null;
-let user_tick_tock_class = "user-tock";
-function render_chat_message(topic_chat_content, event, creator, existing_element) {
-	const event_datetime = datetime_to_local(event.timestamps.created);
-
-	if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
-		time_tick_tock_class = time_tick_tock_class === "time-tick" ? "time-tock" : "time-tick";
-	}
-	last_event_datetime_value = event_datetime.value;
-
-	if (last_creator_id !== creator.id) {
-		user_tick_tock_class = user_tick_tock_class === "user-tick" ? "user-tock" : "user-tick";
-		last_creator_id = creator.id;
-	}
-
-	const message_id = event.id.substring(0, 49);
-	const html_content = `<div id="chat-${message_id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
-	<div class="message-actions-container">
-		<input
-			type="checkbox"
-			id="show_message_actions-${message_id}"
-			class="message-actions-display-toggle"
-		/>
-		<label class="message-actions-display-toggle-label" for="show_message_actions-${message_id}">
-			<div class="icon more-borderless"></div>
-		</label>
-
-		<button class="message-action mockup" data-action="react"><i class="icon circle"></i><span class="action-name">React</span></button>
-		<button class="message-action" data-action="reply" onclick="document.getElementById( 'parent-id' ).value = '${message_id}';"><i class="icon reply"></i><span class="action-name">Reply</span></button>
-		<button class="message-action mockup" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Copy Link</span></button>
-		<button class="message-action mockup" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></button>
-	</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 ?? "unknown"}</span>
-		</div>
-		<div class="datetime-container">
-			<span class="long">${event_datetime.long}</span>
-			<span class="short">${event_datetime.short}</span>
-		</div>
-	</div>
-	<div class="message-content-container">${htmlify(event.data.content)}</div>
-</div>`;
-
-	if (existing_element) {
-		const template = document.createElement("template");
-		template.innerHTML = html_content;
-		existing_element.replaceWith(template.content.firstChild);
-	} else {
-		topic_chat_content.insertAdjacentHTML("beforeend", html_content);
-	}
-}
-
-async function append_chat_events(events) {
-	const topic_chat_content = document.getElementById("topic-chat-content");
-	let last_message_id = topic_chat_content.dataset.last_message_id ?? "";
-	for (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 creator = await USERS.get(event.creator_id);
-
-		const existing_element =
-			document.getElementById(`chat-${event.id.substring(0, 49)}`) ??
-			(event.meta?.temp_id
-				? document.getElementById(`chat-${event.meta.temp_id}`)
-				: undefined);
-		render_chat_message(topic_chat_content, event, creator, existing_element);
-	}
-
-	topic_chat_content.scrollTop = topic_chat_content.scrollHeight;
-}
-
-// TODO: we need some abortcontroller handling here or something
-// similar for when we change topics, this is the most basic
-// first pass outline
-let topic_polling_request_abort_controller = null;
-async function poll_for_new_chat_events() {
-	const topic_chat_content = document.getElementById("topic-chat-content");
-	const topic_id = document.body.dataset.topic;
-	const last_message_id = topic_chat_content.dataset.last_message_id;
-
-	if (!topic_id) {
-		return;
-	}
-
-	const message_polling_url = `/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
-
-	topic_polling_request_abort_controller =
-		topic_polling_request_abort_controller || new AbortController();
-
-	api.fetch(message_polling_url, {
-		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.toReversed());
-			poll_for_new_chat_events(topic_id);
-		})
-		.catch((error) => {
-			// TODO: poll again? back off?
-			console.error(error);
-		});
-}
-
-async function load_active_topic_for_chat() {
-	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 topic_chat_content = document.getElementById("topic-chat-content");
-
-	if (topic_polling_request_abort_controller) {
-		topic_polling_request_abort_controller.abort();
-		topic_polling_request_abort_controller = null;
-		delete topic_chat_content.dataset.last_message_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();
-
-	topic_chat_content.innerHTML = "";
-
-	const events_response = await api.fetch(
-		`/api/topics/${topic_id}/events?type=chat&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()).reverse();
-
-	await append_chat_events(events);
-	poll_for_new_chat_events();
-}
-document.addEventListener("topic_changed", load_active_topic_for_chat);
-document.addEventListener("user_logged_in", load_active_topic_for_chat);
diff --git a/public/tabs/forum/README.md b/public/tabs/forum/README.md
index 3ec2e1d..d02d5d3 100644
--- a/public/tabs/forum/README.md
+++ b/public/tabs/forum/README.md
@@ -1,3 +1,3 @@
 # Forum
 
-Forums are for more thoughtful and long form discussion.
+This is the place for thoughtful and long form discussion.
diff --git a/public/tabs/forum/forum.html b/public/tabs/forum/forum.html
index 0b29fc5..91f0c9b 100644
--- a/public/tabs/forum/forum.html
+++ b/public/tabs/forum/forum.html
@@ -146,6 +146,8 @@
 		<div class="label">Forum</div></label
 	>
 	<div class="tab-content forum-container">
+		<!-- #include file="./README.md" -->
+
 		<div id="forum-posts" class="container">
 			<div id="forum-posts-list"></div>
 			<script>
diff --git a/public/tabs/forum/new_post.html b/public/tabs/forum/new_post.html
index 0443980..04896e5 100644
--- a/public/tabs/forum/new_post.html
+++ b/public/tabs/forum/new_post.html
@@ -14,8 +14,8 @@
 			width: 100%;
 			transition: all 0.5s;
 		"
-		on_reply="(post) => { append_posts([post]); }"
-		on_parsed="(post) => { render_post(post); document.getElementById('post-' + post.id)?.classList.add('sending'); }"
+		on_reply="async (post) => { await append_posts([post]); }"
+		on_parsed="async (post) => { await render_post(post); document.getElementById('post-' + post.id)?.classList.add('sending'); }"
 	>
 		<input type="hidden" name="type" value="post" />
 
@@ -32,6 +32,12 @@
 			reset-on-submit
 		/>
 
+		<input
+			type="hidden"
+			name="creator_id"
+			generator="() => { return JSON.parse( document.body.dataset.user ?? '{}' ).id; }"
+		/>
+
 		<input
 			type="hidden"
 			name="timestamps.created"
@@ -66,6 +72,7 @@
 				type="file"
 				multiple
 				data-smartforms-save-to-home="true"
+				name="data.media"
 				reset-on-submit
 			/>
 			<div class="icon attachment"></div>