autonomous.contact/public/tabs/forum/forum.html

<style>
	.forum-container {
		padding: 2rem;
	}
</style>
<div id="forum" class="tab">
	<input
		type="radio"
		name="top-level-tabs"
		id="forum-tab-input"
		class="tab-switch"
		data-view="forum"
	/>
	<label for="forum-tab-input" class="tab-label mockup"
		><div class="icon forum"></div>
		<div class="label">Forum</div></label
	>
	<div class="tab-content forum-container">
		<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>