web: Add profile view.

Note that this is incomplete as I do not fetch the events for the user
and render them. I am also missing the state check for if you follow the
user.

web/js/ui/util.js

@@ -41,3 +41,67 @@ function init_message_textareas() {
 		post_input_changed(el);
 	}
 }
+
+// update_notification_markers will find all markers and hide or show them
+// based on the passed in state of 'active'.
+function update_notification_markers(active) {
+	let els = document.querySelectorAll(".new-notifications")
+	for (const el of els) {
+		el.classList.toggle("hide", !active)
+	}
+}
+
+/* show_profile updates the current view to the profile display and updates the
+ * information to the relevant profile based on the public key passed.
+ * TODO handle async waiting for relay not yet connected
+ */
+function show_profile(pk) {
+	switch_view("profile");
+	const profile = DAMUS.profiles[pk];
+	const el = find_node("#profile-view");
+	// TODO show loading indicator then render
+	
+	find_node("[role='profile-image']", el).src = get_picture(pk, profile); 
+	find_nodes("[role='profile-name']", el).forEach(el => {
+		el.innerText = render_name_plain(profile);
+	});
+	
+	const el_nip5 = find_node("[role='profile-nip5']", el)
+	el_nip5.innerText = profile.nip05;
+	el_nip5.classList.toggle("hide", !profile.nip05);
+	
+	const el_desc = find_node("[role='profile-desc']", el)
+	el_desc.innerHTML = newlines_to_br(profile.about);
+	el_desc.classList.toggle("hide", !profile.about);
+	
+	find_node("button[role='copy-pk']", el).dataset.pk = pk;
+	
+	const btn_follow = find_node("button[role='follow-user']", el)
+	btn_follow.dataset.pk = pk;
+	// TODO check follow status
+	btn_follow.innerText = 1 == 1 ? "Follow" : "Unfollow";
+	btn_follow.classList.toggle("hide", pk == DAMUS.pubkey);
+}
+
+/* newlines_to_br takes a string and converts all newlines to HTML 'br' tags.
+ */
+function newlines_to_br(str="") {
+	return str.split("\n").reduce((acc, part, index) => {
+		return acc + part + "<br/>";
+	}, "");
+}
+
+/* click_copy_pk writes the element's dataset.pk field to the users OS'
+ * clipboard. No we don't use fallback APIs, use a recent browser.
+ */
+function click_copy_pk(el) {
+	// TODO show toast
+	navigator.clipboard.writeText(el.dataset.pk);
+}
+
+/* click_follow_user sends the event to the relay to subscribe the active user
+ * to the target public key of the element's dataset.pk field.
+ */
+function click_toggle_follow_user(el) {
+	alert("sorry not implemented");
+}