refactor: finish UX refactor and move events storage

public/tabs/chat/chat.css

@@ -60,15 +60,8 @@
 }
 
 #chat #topic-chat-entry-container form textarea {
-	width: 100%;
 	flex-grow: 1;
-	background: inherit;
-	color: inherit;
-	border-radius: var(--border-radius);
-	border: 1px solid rgba(128, 128, 128, 0.2);
 	resize: none;
-	background: rgba(0, 0, 0, 0.1);
-	padding: 0.4rem;
 }
 
 #chat .message-container {
@@ -84,8 +77,9 @@
 #chat .message-container.user-tick.time-tock + .message-container.user-tick.time-tock,
 #chat .message-container.user-tock.time-tick + .message-container.user-tock.time-tick,
 #chat .message-container.user-tock.time-tock + .message-container.user-tock.time-tock {
+	padding-top: 0;
+	padding-bottom: 0;
 	margin-top: 0;
-	padding: 0 2px;
 }
 
 #chat

public/tabs/essays/README.md

@@ -1,3 +1,4 @@
 # Essays
 
-Essays are long-form, authored posts intended to be effectively, a broadcast.
+Essays are long-form, authored posts intended to be less a conversation
+and more a broadcast.

public/tabs/forum/forum.html

@@ -16,8 +16,165 @@
 		<div class="label">Forum</div></label
 	>
 	<div class="tab-content forum-container">
-		<button>
-			<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New Thread
-		</button>
+		<div id="forum-thread-list"></div>
+
+		<div id="thread-creation-container" data-requires-permission="topics.threads.write">
+			<button
+				onclick="(() => { document.querySelector( '#thread-creation' ).classList.toggle( 'collapsed' ); })()"
+				class="mockup"
+			>
+				<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New
+				Thread
+			</button>
+			<form
+				id="thread-creation"
+				data-smart="true"
+				action="/api/topics"
+				method="POST"
+				class="collapsed mockup"
+				style="
+					margin-top: 1rem;
+					width: 100%;
+					overflow: hidden;
+					overflow: hidden;
+					transition: all 0.5s;
+				"
+			>
+				<input
+					id="new-thread-subject"
+					type="text"
+					name="data.subject"
+					value=""
+					placeholder="Thread subject..."
+					style="margin-bottom: 1rem"
+					class="mockup"
+				/>
+
+				<input
+					id="file-upload-and-share-input-for-thread"
+					aria-label="Upload and share file"
+					type="file"
+					multiple
+				/>
+				<label for="file-upload-and-share-input-for-thread" class="mockup">
+					<div class="icon attachment"></div>
+				</label>
+
+				<textarea
+					id="new-thread-content"
+					type="text"
+					name="data.content"
+					value=""
+					placeholder=" ... "
+					class="mockup"
+				></textarea>
+
+				<input type="submit" hidden />
+				<script>
+					{
+						const form = document.currentScript.closest("form");
+						const file_input = document.querySelector('input[type="file"]');
+						const subject_input = document.getElementById('input[name="subject"]');
+						const content_input = document.getElementById('input[name="content"]');
+
+						const parent_id_input = document.getElementById("parent-id");
+
+						const forum_thread_list = document.getElementById("forum-thread-list");
+
+						let threads_in_flight = {};
+
+						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.action = `/api/topics/${topic_id}/events`;
+						};
+
+						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>
+		</div>
 	</div>
 </div>

public/tabs/resources/README.md

@@ -1,3 +1,3 @@
 # Resources
 
-Resources should be a wiki for organizing community knowledge.
+Resources should be a wiki for organizing community knowledge on a topic.