autonomous.contact/public/tabs/chat/channel_sidebar.html

<script>
	APP.on("channels_updated", ({ channels }) => {
		const channel_list = document.getElementById("channel-list");
		channel_list.innerHTML = "";
		for (const channel of channels.sort((lhs, rhs) => lhs.name.localeCompare(rhs.name))) {
			channel_list.insertAdjacentHTML(
				"beforeend",
				`<li id="channel-selector-${channel.id}" class="channel" data-channel-selector-for="${channel.id}"><a href="#/channel/${channel.id}/chat">${channel.name}</a></li>`,
			);
		}
	});

	function update_channel_indicators(event) {
		document
			.querySelectorAll("[data-channel-selector-for]")
			.forEach((element) => element.classList.remove("active"));

		const new_channel_id = event?.detail?.channel_id ?? document.body.dataset.channel;
		if (new_channel_id) {
			document
				.querySelectorAll(`[data-channel-selector-for="${new_channel_id}"]`)
				.forEach((element) => element.classList.add("active"));
		}

		for ( const watch of APP.user_watches ) {
			// find the channel indicator for this watch
			// if there is new stuff - TODO implement a HEAD for getting latest event id?
			// 	add a class of 'new-content'
		}
	}

	APP.on("channels_updated", update_channel_indicators);
	APP.on("channel_changed", update_channel_indicators);
	APP.on("user_logged_in", update_channel_indicators);

	document.addEventListener(
		"contextmenu",
		(event) => {
			if (!event.target?.closest("#sidebar")) {
				return;
			}

			const channel_selector = event.target.closest("li.channel");
			if (!channel_selector) {
				return;
			}

			event.preventDefault();

			const context_menu = document.getElementById("sidebar-context-menu");
			context_menu.dataset.prepare = true;

			const position = get_best_coords_for_popup({
				target_element: channel_selector,
				popup: {
					width: context_menu.getBoundingClientRect().width,
					height: context_menu.getBoundingClientRect().height,
				},
				offset: {
					x: 4,
					y: 4,
				},
			});

			context_menu.style.left = position.x + "px";
			context_menu.style.top = position.y + "px";
			context_menu.dataset.show = true;
		},
		false,
	);

	document.addEventListener("click", (event) => {
		if (!event.target?.closest("#sidebar-context-menu")) {
			const context_menu = document.getElementById("sidebar-context-menu");
			delete context_menu.dataset.show;
			delete context_menu.dataset.prepare;
		}
	});

	APP.on( 'view_changed', ( {view} ) => {
		if ( !view === 'chat' ) {
			return;
		}

		const sidebar_dynamic_container = document.getElementById( 'sidebar-dynamic-container');
		if ( !sidebar_dynamic_container ) {
			console.error( 'could not get #sidebar-dynamic-container' );
			return;
		}

		const template = document.getElementById( 'channel-list-template');
		sidebar_dynamic_container.innerHTML = template.innerHTML.trim();
		APP.CHANNELS.update();
	});
</script>
<style>
	#channel-list-container #channel-creation-container {
		margin-top: 0.5rem;
	}

	#channel-list-container #channel-creation-container #toggle-channel-creation-form-button {
		transform: scale(0.8);
	}

	#channel-list-container .channel-list {
		list-style-type: none;
		margin-left: 1rem;
	}

	#channel-list-container .channel-list > li.channel a:before {
		position: absolute;
		left: -1.75rem;
		top: 0;
		font-weight: bold;
		font-size: x-large;
		content: "#";
		color: var(--text);
	}

	#channel-list-container .channel-list > li.channel a {
		position: relative;
		display: block;
		width: 100%;
		min-height: 1.5rem;
		line-height: 1.5rem;
		font-weight: bold;
		font-size: large;
		margin-left: 1.75rem;
		text-decoration: none;
		margin-bottom: 0.75rem;
	}

	#channel-list-container .channel-list > li.channel.active a {
		color: var(--accent);
	}
</style>
<template id="channel-list-template">
	<div id="channel-list-container">
		<div style="margin-bottom: 1rem">
			<span class="title">channels</span>
		</div>
		<ul id="channel-list" class="channel-list"></ul>

		<div id="channel-creation-container" data-requires-permission="channels.create">
			<button
				id="toggle-channel-creation-form-button"
				onclick="((event) => {
					event.preventDefault();
				 	const channel_create_form = document.getElementById( 'channel-create' );
						channel_create_form.style[ 'height' ] = channel_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
				})(event)"
			>
				<div class="icon plus"></div>
			</button>
			<form
				id="channel-create"
				data-smart="true"
				action="/api/channels"
				method="POST"
				style="
					margin-top: 1rem;
					width: 100%;
					overflow: hidden;
					height: 0;
					overflow: hidden;
					transition: all 0.5s;
				"
				on_reply="(new_channel) => {
					APP.CHANNELS.update(true);
					document.getElementById('new-channel-name-input').value = '';
					document.getElementById('channel-create').style['height'] = '0';
					window.location.hash = `/chat/channel/${new_channel.id}`;
				}"
			>
				<input
					id="new-channel-name-input"
					type="text"
					name="name"
					value=""
					placeholder="new channel"
				/>

				<input type="submit" hidden />
			</form>
		</div>
	</div>
</template>