feature: the beginnings of chat working

public/tabs/user.html

@@ -0,0 +1,57 @@
+<script>
+	new MutationObserver((mutations, observer) => {
+		mutations.forEach((mutation) => {
+			const user_json = document.body.dataset.user;
+			const user = user_json
+				? JSON.parse(user_json)
+				: {
+						username: "",
+						meta: {
+							avatar: "/images/default_avatar.gif",
+						},
+					};
+
+			const avatars = document.querySelectorAll("[data-bind-user_meta_avatar]");
+			for (const avatar of avatars) {
+				const bound_to = avatar.dataset["bind-user_meta_avatar"] ?? "innerHTML";
+				avatar[bound_to] = user.meta?.avatar ?? "/images/default_avatar.gif";
+			}
+
+			const usernames = document.querySelectorAll("[data-bind-user_username]");
+			for (const username of usernames) {
+				const bound_to = username.dataset["bind-user_username"] ?? "innerHTML";
+				username[bound_to] = user.username;
+			}
+		});
+	}).observe(document.body, {
+		attributes: true,
+		attributeFilter: ["data-user"],
+	});
+</script>
+<div id="user" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="user-tab-input"
+		class="tab-switch"
+		data-hash="/profile"
+	/>
+	<label for="user-tab-input" class="tab-label"
+		><div class="icon user"></div>
+		<div class="label">Profile</div></label
+	>
+	<div class="tab-content">
+		<div class="avatar-container">
+			<img
+				id="user-avatar"
+				src="/images/default_avatar.gif"
+				alt="User Avatar"
+				data-bind-user_meta_avatar="src"
+			/>
+		</div>
+
+		<div class="username-container">
+			<span class="username" data-bind-user_username></span>
+		</div>
+	</div>
+</div>