From 46090d944a43c128535e2f92aba207f34fcd8d05 Mon Sep 17 00:00:00 2001
From: Andy Burke <andy.burke@mailbox.earth>
Date: Thu, 9 Oct 2025 12:50:23 -0700
Subject: [PATCH] fix: make sure chat entry is working correctly through some
 cleanup

---
 public/tabs/chat/chat.css  | 28 +++++++-------
 public/tabs/chat/chat.html | 77 +++++++++++++++++++++-----------------
 2 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/public/tabs/chat/chat.css b/public/tabs/chat/chat.css
index d868e9d..e6fd1f7 100644
--- a/public/tabs/chat/chat.css
+++ b/public/tabs/chat/chat.css
@@ -1,10 +1,10 @@
-#chat #topic-chat-container {
+#chat #chat-container {
 	position: relative;
 	width: 100%;
 	height: 100%;
 }
 
-#chat #topic-chat-content {
+#chat #chat-content {
 	overflow-y: scroll;
 	position: absolute;
 	top: 0;
@@ -14,12 +14,12 @@
 	padding: 1.5rem 1.5rem 0.75rem 1.5rem;
 }
 @media screen and (max-width: 1200px) {
-	#chat #topic-chat-content {
+	#chat #chat-content {
 		padding: 0.75rem;
 	}
 }
 
-#chat #topic-chat-entry-container {
+#chat #chat-entry-container {
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -28,7 +28,7 @@
 	padding: 1rem;
 }
 
-#chat #topic-chat-entry-container form {
+#chat #chat-entry-container form {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -39,13 +39,13 @@
 	padding: 0.75rem;
 }
 
-#chat #topic-chat-entry-container form input[type="file"] {
+#chat #chat-entry-container form input[type="file"] {
 	opacity: 0;
 	display: none;
 }
 
-#chat #topic-chat-entry-container form button,
-#chat #topic-chat-entry-container form label {
+#chat #chat-entry-container form button,
+#chat #chat-entry-container form label {
 	position: relative;
 	top: inherit;
 	font-size: inherit;
@@ -59,7 +59,7 @@
 	border: 1px solid rgba(128, 128, 128, 0.2);
 }
 
-#chat #topic-chat-entry-container form textarea {
+#chat #chat-entry-container form textarea {
 	flex-grow: 1;
 	resize: none;
 }
@@ -284,7 +284,7 @@
 }
 
 @media screen and (max-width: 1200px) {
-	#chat #topic-chat-container {
+	#chat #chat-container {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -292,13 +292,13 @@
 		bottom: 0;
 	}
 
-	#chat #topic-chat-container #topic-chat-entry-container,
-	#chat #topic-chat-container #topic-chat-entry-container form {
+	#chat #chat-container #chat-entry-container,
+	#chat #chat-container #chat-entry-container form {
 		padding: 0.25rem;
 	}
 
-	#chat #topic-chat-container #topic-chat-entry-container form button,
-	#chat #topic-chat-container #topic-chat-entry-container form label {
+	#chat #chat-container #chat-entry-container form button,
+	#chat #chat-container #chat-entry-container form label {
 		margin: 0 0.5rem;
 	}
 
diff --git a/public/tabs/chat/chat.html b/public/tabs/chat/chat.html
index 70670d9..a088412 100644
--- a/public/tabs/chat/chat.html
+++ b/public/tabs/chat/chat.html
@@ -63,14 +63,18 @@
 			existing_element.replaceWith(template.content.firstChild);
 		} else {
 			// TODO: threading
-			document
-				.getElementById("topic-chat-content")
-				?.insertAdjacentHTML(position, html_content);
+			document.getElementById("chat-content")?.insertAdjacentHTML(position, html_content);
 		}
 	}
 
 	async function handle_chat_events(events) {
-		const topic_chat_content = document.getElementById("topic-chat-content");
+		if (!Array.isArray(events)) {
+			debugger;
+			console.warn("got unexpected value for handle_chat_events `events` argument.");
+			return;
+		}
+
+		const topic_chat_content = document.getElementById("chat-content");
 
 		const sorted = events.sort((lhs, rhs) => lhs.id.localeCompare(rhs.id));
 		for await (const event of sorted) {
@@ -98,7 +102,7 @@
 	// 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_chat_content = document.getElementById("chat-content");
 		const topic_id = document.body.dataset.topic;
 		const last_message_id = topic_chat_content.dataset.last_message_id;
 
@@ -129,7 +133,7 @@
 		const topic_id = event?.detail?.topic_id ?? document.body.dataset.topic;
 		if (!topic_id) return;
 
-		const topic_chat_content = document.getElementById("topic-chat-content");
+		const topic_chat_content = document.getElementById("chat-content");
 		topic_chat_content.innerHTML = "";
 
 		const user = document.body.dataset.user ? JSON.parse(document.body.dataset.user) : null;
@@ -185,13 +189,13 @@
 		<script src="/js/external/mimetypes.js" type="text/javascript"></script>
 		<script src="/js/external/punycode.js" type="text/javascript"></script>
 
-		<div id="topic-chat-container">
-			<div id="topic-chat-content"></div>
-			<div id="topic-chat-entry-container">
+		<div id="chat-container">
+			<div id="chat-content"></div>
+			<div id="chat-entry-container">
 				<form
-					id="topic-chat-entry"
+					id="chat-entry"
 					data-smart="true"
-					data-requires-permission="topics.posts.create"
+					data-requires-permission="topics.chat.write"
 					method="POST"
 					class="post-creation-form collapsible"
 					style="
@@ -199,9 +203,32 @@
 						width: 100%;
 						transition: all 0.5s;
 					"
-					on_reply="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.remove('sending'); 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' ).value = ''; document.getElementById( 'chat-input' ).focus(); }"
 					on_parsed="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.add('sending'); }"
 				>
+					<script>
+						{
+							const form = document.currentScript.closest("form");
+							document.addEventListener("DOMContentLoaded", () => {
+								const chat_input = form.querySelector(
+									'textarea[name="data.content"]',
+								);
+								chat_input.addEventListener("keypress", (event) => {
+									if (event.key === "Enter" && !event.shiftKey) {
+										form.requestSubmit();
+									}
+								});
+							});
+
+							document.addEventListener(
+								"topic_changed",
+								({ detail: { topic_id } }) => {
+									form.action = topic_id ? `/api/topics/${topic_id}/events` : "";
+								},
+							);
+						}
+					</script>
+
 					<input type="hidden" name="type" value="chat" />
 
 					<input
@@ -251,36 +278,16 @@
 					</label>
 
 					<textarea
-						id="topic-chat-input"
-						class="topic-chat-input"
+						id="chat-input"
+						class="chat-input"
 						rows="1"
 						name="data.content"
 						reset-on-submit
 					></textarea>
 
-					<button id="topic-chat-send" class="primary" aria-label="Send a message">
+					<button id="chat-send" class="primary" aria-label="Send a message">
 						<i class="icon send"></i>
 					</button>
-
-					<script>
-						{
-							const form = document.currentScript.closest("form");
-							const chat_input = form.querySelector('textarea[name="data.content"]');
-
-							document.addEventListener(
-								"topic_changed",
-								({ detail: { topic_id } }) => {
-									form.action = topic_id ? `/api/topics/${topic_id}/events` : "";
-								},
-							);
-
-							chat_input.addEventListener("keypress", (event) => {
-								if (event.key === "Enter" && !event.shiftKey) {
-									form.requestSubmit();
-								}
-							});
-						}
-					</script>
 				</form>
 			</div>
 		</div>