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

<style>
	.forum-container {
		padding: 1rem;
	}

	.post-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"
			".			.		newpost"
			".			.		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;
	}

	.post-container:has(> div > label > input[name="expanded"]:checked) {
		max-height: unset;
	}

	.expand-toggle-container input[name="expanded"] {
		display: none;
		visibility: hidden;
		opacity: 0;
	}

	.post-container:has(> div > label > input[name="expanded"]) .icon.minus,
	.post-container:has(> div > label > input[name="expanded"]:checked) .icon.plus {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	.post-container:has(> div > label > input[name="expanded"]) .icon.plus,
	.post-container:has(> div > label > input[name="expanded"]:checked) .icon.minus {
		display: none;
		opacity: 0;
		visibility: hidden;
	}

	.post-container .expand-toggle-container {
		grid-area: expander;
		margin-right: 0.5rem;
	}

	.post-container .expand-toggle-container label {
		display: flex;
		align-items: center;
		width: 22px;
		height: 22px;
	}

	.post-container .media-preview-container {
		grid-area: preview;
		width: 6rem;
		height: 4rem;
		margin-right: 1rem;
	}

	.post-container .media-preview-container img {
		max-width: 100%;
		max-height: 100%;
	}

	.post-container .info-container {
		grid-area: info;
		display: flex;
	}

	.post-container .info-container .avatar-container {
		display: block;
		margin: 0.5rem;
		width: 3rem;
		height: 3rem;
		border-radius: 16%;
		overflow: hidden;
	}

	.post-container .info-container .avatar-container img {
		min-width: 100%;
		min-height: 100%;
	}

	.post-container .info-container .username-container {
		display: block;
		margin: 0 0.5rem;
		font-weight: bold;
	}

	.post-container .info-container .datetime-container {
		display: block;
		margin: 0 0.5rem;
	}

	.post-container .info-container .datetime-container .long {
		font-size: x-small;
		text-transform: uppercase;
	}

	.post-container .info-container .datetime-container .short {
		font-size: xx-small;
		visibility: hidden;
		display: none;
	}

	.post-container .subject-container {
		grid-area: subject;
		padding-left: 5rem;
		margin-top: -2.5rem;
		font-size: larger;
		font-weight: bold;
	}

	.post-container .content-container {
		grid-area: content;
		padding-left: 5rem;
		margin-top: 2rem;
	}

	.post-container .new-post-container {
		grid-area: newpost;
	}

	.post-container .replies-container {
		grid-area: replies;
	}
</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"
		><div class="icon forum"></div>
		<div class="label">Forum</div></label
	>
	<div class="tab-content forum-container">
		<!-- #include file="./README.md" -->

		<div
			id="posts-list"
			data-feed
			data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'topics.essays.read' ) !== -1"
			data-source="/api/topics/${ document.body.dataset.topic }/events?type=post&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'post:able-able-able-able-able-able-able-able-able-able' }"
			data-longpolling="true"
			data-reverse="true"
			data-insert="prepend"
			data-autoscroll="true"
		>
			<script>
				{
					const feed = document.currentScript.closest("[data-feed]");

					document.addEventListener("topic_changed", () => {
						feed.__reset && feed.__reset();
					});
					document.addEventListener("user_logged_in", () => {
						feed.__reset && feed.__reset();
					});

					feed.__target_element = (item) => {
						return (
							document.querySelector(
								`.post-container[data-post_id='${item.parent_id}'] > .replies-container`,
							) ?? feed
						);
					};

					feed.__context = async (item) => {
						const post_datetime = datetime_to_local(item.timestamps.created);

						return {
							post: item,
							creator: await USERS.get(item.creator_id),
							post_datetime,
						};
					};
				}
			</script>
			<template>
				<div
					id="${context.post.id}"
					class="post-container"
					data-creator_id="${context.creator.id}"
					data-post_id="${context.post.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((context.post_datetime.ms % 9) + 1).padStart(2, '0')}.svg"
						/>
					</div>

					<div class="info-container">
						<div class="avatar-container">
							<img
								src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
								alt="user avatar"
							/>
						</div>
						<div class="username-container">
							<span class="username">${context.creator.username}</span>
						</div>
						<div class="datetime-container">
							<span class="long">${context.post_datetime.long}</span>
							<span class="short">${context.post_datetime.short}</span>
						</div>
					</div>
					<div class="subject-container">${context.post.data.subject}</div>
					<div class="content-container">
						${htmlify(md_to_html(context.post.data.content))}
					</div>
					<!-- #include file="./new_post.html" -->
					<div class="replies-container"></div>
				</div>
			</template>
		</div>

		<!-- #include file="./new_post.html" -->
	</div>
</div>