autonomous.contact/public/tabs/blurbs/blurbs.html

<style>
	#blurbs-container {
		padding: 1rem;
		max-width: 40rem;
		margin: 0 auto;
	}

	.blurb-container {
		position: relative;
		display: grid;
		grid-template-rows: auto auto auto auto 1fr;
		grid-template-columns: 1fr;
		grid-template-areas:
			"preview"
			"info"
			"content"
			"newblurb"
			"replies";
		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;
		max-height: 600px;
		width: 100%;
		overflow: hidden;
	}

	.blurb-container .media-preview-container img {
		min-width: 100%;
		min-height: 100%;
	}

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

	.blurb-container .info-container .username-container {
		display: block;
		margin: 0 0.5rem;
		font-weight: bold;
		align-content: center;
	}

	.blurb-container .info-container .datetime-container {
		display: block;
		margin: 0 0.5rem;
		align-content: center;
	}

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

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

	.blurb-container .content-container {
		grid-area: content;
		padding-left: 1rem;
		margin: 1rem 0;
	}

	.blurb-container button[commandfor="eventactionspopover"] {
		position: absolute;
		bottom: 0.25rem;
		right: 0.25rem;
		border: none;
	}

	.blurb-container .new-blurb-container {
		grid-area: newblurb;
		display: none;
	}

	.blurb-container .replies-container {
		grid-area: replies;
	}

	.blurb-container .html-from-markdown {
		padding: 0;
	}
</style>

<div id="blurbs" class="tab">
	<input
		type="radio"
		name="top-level-tabs"
		id="blurb-tab-input"
		class="tab-switch"
		data-view="blurbs"
	/>
	<label for="blurb-tab-input" class="tab-label"
		><div class="icon blurb"></div>
		<div class="label">Blurbs</div>
	</label>
	<div class="tab-content">
		<div id="blurbs-container" class="container">
			<!-- #include file="./README.md" -->

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

			<div
				id="blurbs-list"
				data-feed
				data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'topics.blurbs.read' ) !== -1"
				data-source="/api/topics/${ document.body.dataset.topic }/events?type=blurb,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? '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]");

					APP.on("topic_changed", () => { feed.__reset && feed.__reset(); });
					APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });

					feed.__target_element = (item) => {
						return (
							document.querySelector(
								`.blurb-container[data-blurb_id='${item.parent_id}'] > .replies-container`,
							) ?? feed
						);
					};
					feed.__target_element = (item) => {
						let target = feed;
						switch (item.type) {
							case "reaction":
								target = document.querySelector(
									`.blurb-container[data-event_id='${item.parent_id}'] > .reactions-container`,
								);
								break;
							case "blurb":
							default:
								target =
									document.querySelector(
										`.blurb-container[data-event_id='${item.parent_id}'] > .replies-container`,
									) ?? feed;
								break;
						}

						return target;
					};

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

						return {
							event: item,
							blurb: item,
							creator: await APP.USERS.get(item.creator_id),
							blurb_datetime
						};
					};
				}
				</script>
				<template data-for_type="blurb">
					<div
						id="${ context.blurb.id }"
						class="blurb-container"
						data-event_id="${context.blurb.id}"
						data-creator_id="${context.creator.id}"
						data-blurb_id="${context.blurb.id}"
						data-temp_id="${context.blurb.meta?.temp_id ?? ""}">
						<div class="media-preview-container">
							${context.blurb.data?.media?.length ? context.blurb.data.media.map(function(url) { return `<img src='${url}' />`; }).join('\n') : ''}
						</div>

						<div class="info-container">
							<div class="avatar-container inline">
								<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.blurb_datetime.long}</span>
								<span class="short">${context.blurb_datetime.short}</span>
							</div>
						</div>
						<div class="content-container">${htmlify(md_to_html(context.blurb.data.blurb))}</div>
						<div class="reactions-container"></div>
						<button class="icon more" commandfor="eventactionspopover"></button>
						<!-- #include file="./new_blurb.html" -->
						<div class="replies-container"></div>
					</div>
				</template>
				<template data-for_type="reaction">
					<div
						id="${context.event.id}"
						class="reaction-container"
						data-event_id="${context.event.id}"
						data-creator_id="${context.creator.id}"
						data-temp_id="${context.event.meta?.temp_id ?? ''}"
					>
						<span class="reaction">${ context.event.data.reaction }</span>
					</div>
				</template>
			</div>
		</div>
	</div>
</div>