Update profile page for new fields

css/styles.css

@@ -482,8 +482,19 @@ input[type="text"].cw {
 	width: 128px;
 	height: 128px;
 }
-[role="profile-info"] {
+#profile-info > .profile-banner {
+	display: block;
+	padding: 0;
+	width: 100%;
+	height: 200px;
+	background-color: #1a1a1a;
+	background-size: cover;
+}
+#profile-info > div {
 	padding: 15px;
+	position: relative;
+}
+#profile-info > div:last-child {
 	padding-top: 0;
 }
 .profile-tools {
@@ -496,13 +507,13 @@ input[type="text"].cw {
 .profile-tools > button.icon {
 	margin-right: 20px;
 }
-p[role="profile-desc"] {
-	margin-bottom: 0;
+p[name="profile-about"] {
+	margin: 0;
 }
-label[role="profile-nip5"] {
-	margin-top: 15px;
+label[name="profile-nip05"] {
 	font-weight: 800;
 	display: block;
+	font-size: var(--fsEnlarged);
 }
 
 /* Profile Editor */

icon/profile-website.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM256 464C263.4 464 282.1 456.8 303.6 415.6C312.4 397.9 319.1 376.4 325.6 352H186.4C192 376.4 199.6 397.9 208.4 415.6C229 456.8 248.6 464 256 464zM178.5 304H333.5C335.1 288.7 336 272.6 336 256C336 239.4 335.1 223.3 333.5 208H178.5C176.9 223.3 176 239.4 176 256C176 272.6 176.9 288.7 178.5 304V304zM325.6 160C319.1 135.6 312.4 114.1 303.6 96.45C282.1 55.22 263.4 48 256 48C248.6 48 229 55.22 208.4 96.45C199.6 114.1 192 135.6 186.4 160H325.6zM381.8 208C383.2 223.5 384 239.6 384 256C384 272.4 383.2 288.5 381.8 304H458.4C462.1 288.6 464 272.5 464 256C464 239.5 462.1 223.4 458.4 208H381.8zM342.1 66.61C356.2 92.26 367.4 124.1 374.7 160H440.6C419.2 118.9 384.4 85.88 342.1 66.61zM169.9 66.61C127.6 85.88 92.84 118.9 71.43 160H137.3C144.6 124.1 155.8 92.26 169.9 66.61V66.61zM48 256C48 272.5 49.93 288.6 53.57 304H130.2C128.8 288.5 128 272.4 128 256C128 239.6 128.8 223.5 130.2 208H53.57C49.93 223.4 48 239.5 48 256zM440.6 352H374.7C367.4 387.9 356.2 419.7 342.1 445.4C384.4 426.1 419.2 393.1 440.6 352zM137.3 352H71.43C92.84 393.1 127.6 426.1 169.9 445.4C155.8 419.7 144.6 387.9 137.3 352V352z"/></svg>

icon/profile-zap.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M289.7 .0006C308.8 .0006 322.6 18.26 317.4 36.61L263.8 224H349.1C368.4 224 384 239.6 384 258.9C384 269.2 379.5 278.9 371.7 285.6L112.9 505.2C107.7 509.6 101.1 512 94.27 512C75.18 512 61.4 493.7 66.64 475.4L120.2 288H33.74C15.1 288 0 272.9 0 254.3C0 244.4 4.315 235 11.81 228.6L271.1 6.893C276.3 2.445 282.9 0 289.7 0V.0006zM253.6 84.99L72.36 240H152C159.5 240 166.6 243.5 171.2 249.5C175.7 255.6 177.1 263.4 175.1 270.6L130.3 427.5L313.5 272H232C224.5 272 217.4 268.5 212.8 262.5C208.3 256.4 206.9 248.6 208.9 241.4L253.6 84.99z"/></svg>

index.html

@@ -149,26 +149,35 @@
 						</div>
 					</div>
 					<div id="profile-info" role="profile-info" class="bottom-border hide">
+						<div class="profile-banner" name="profile-banner"></div>
 						<div class="flex">
-							<img role="profile-image" class="pfp jumbo"/>
+							<img name="profile-image" class="pfp jumbo hide"/>
+							<label name="profile-nip05"></label>
 							<div class="profile-tools">
-								<button class="icon" role="message-user"
+								<button class="icon link hide"
+								name="profile-website" action="open-link">
+									<img class="icon svg" src="/icon/profile-website.svg"/>
+								</button>
+								<button class="icon link hide"
+								name="profile-lud06" action="open-lud06">
+									<img class="icon svg" src="/icon/profile-zap.svg"/>
+								</button>
+								<button class="icon" name="message-user"
 								title="Directly Message">
 									<img class="icon svg" src="/icon/message-user.svg"/>
 								</button>
-								<button class="icon hide" role="edit-profile"
+								<button class="icon hide" name="edit-profile"
 								title="Edit Profile">
 									<img class="icon svg" src="/icon/edit-profile.svg"/></button>
-								<button class="icon" role="copy-pk"
+								<button class="icon" name="copy-pk"
 								data-pk="" title="Copy Public Key">
 									<img class="icon svg" src="/icon/pubkey.svg"/></button>
-								<button class="action" role="follow-user" 
+								<button class="action" name="follow-user" 
 								data-pk="">Follow</button>
 							</div>
 						</div>
 						<div>
-							<label role="profile-nip5"></label>
-							<p role="profile-desc"></p>
+							<p name="profile-about"></p>
 						</div>
 					</div>
 					<div class="loading-events">
@@ -284,7 +293,11 @@
 				</header>
 				<div>
 					<input type="text" class="block w100" name="name" placeholder="Name"/>
+					<input type="text" class="block w100" name="display_name" placeholder="Display Name"/>
 					<input type="text" class="block w100" name="picture" placeholder="Picture URL"/>
+					<input type="text" class="block w100" name="banner" placeholder="Banner URL"/>
+					<input type="text" class="block w100" name="website" placeholder="Website"/>
+					<input type="text" class="block w100" name="lud06" placeholder="lud06"/>
 					<input type="text" class="block w100" name="nip05" placeholder="nip05"/>
 					<textarea name="about" class="block w100" placeholder="A bit about you."></textarea>
 					<button class="action float-right" action="open-profile-editor">

js/ui/profile.js

@@ -1,27 +1,30 @@
 const PROFILE_FIELDS = [
 	'name', 
+	'display_name',
 	'picture', 
+	'banner', 
+	'website',
 	'nip05', 
+	'lud06', 
 	'about',
 ];
 
 function open_profile(pubkey) {
 	view_timeline_apply_mode(DAMUS, VM_USER, { pubkey });
-	view_update_profile(DAMUS, pubkey);
 }
 
 function init_profile() {
 	const el = find_node("#profile-info");
-	const el_pfp = find_node("[role='profile-image']", el);
+	const el_pfp = find_node("img[name='profile-image']", el);
 	el_pfp.addEventListener("error", onerror_pfp);
 	el_pfp.src = IMG_NO_USER;
-	find_node("[role='message-user']", el)
+	find_node("button[name='message-user']", el)
 		.addEventListener("click", onclick_message_user);
-	find_node("[role='edit-profile']", el)
+	find_node("button[name='edit-profile']", el)
 		.addEventListener("click", onclick_edit_profile);
-	find_node("[role='copy-pk']", el)
+	find_node("button[name='copy-pk']", el)
 		.addEventListener("click", onclick_copy_pubkey);
-	find_node("[role='follow-user']", el)
+	find_node("button[name='follow-user']", el)
 		.addEventListener("click", onclick_follow_user);
 }
 
@@ -39,6 +42,10 @@ function onclick_copy_pubkey(ev) {
 	// TODO show toast
 }
 
+function open_lud06(lud) {
+	navigator.clipboard.writeText(lud);
+}
+
 /* onclick_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.
  */
@@ -64,29 +71,44 @@ function view_update_profile(model, pubkey) {
 	const el = find_node("#profile-info");
 
 	const name = fmt_name(profile);
-	find_node("[role='profile-image']", el).src = get_profile_pic(profile); 
-	find_nodes("[role='profile-name']", el).forEach(el => {
+	find_node("[name='profile-image']", el).src = get_profile_pic(profile); 
+	find_nodes("[name='profile-name']", el).forEach(el => {
 		el.innerText = name;
 	});
 
-	const el_nip5 = find_node("[role='profile-nip5']", el)
-	el_nip5.innerText = profile.data.nip05;
-	el_nip5.classList.toggle("hide", !profile.data.nip05);
+	const el_banner = find_node("div[name='profile-banner']", el);
+	el_banner.style.backgroundImage = `url('${profile.data.banner}')`;
 
-	const el_desc = find_node("[role='profile-desc']", el)
+	["nip05"].forEach((field)=> {
+		const x = find_node(`[name='profile-${field}']`, el)
+		x.innerText = profile.data[field];
+		x.classList.toggle("hide", !profile.data[field]);
+	});
+
+	const el_lud = find_node(`button[name="profile-lud06"]`, el)
+	el_lud.dataset.lud06 = profile.data.lud06;
+	el_lud.classList.toggle("hide", !profile.data.lud06);
+	el_lud.title = profile.data.lud06;
+
+	const el_website = find_node(`button[name="profile-website"]`, el)
+	el_website.dataset.url = profile.data.website;
+	el_website.classList.toggle("hide", !profile.data.website);
+	el_website.title = profile.data.website;
+
+	const el_desc = find_node("[name='profile-about']", el)
 	el_desc.innerHTML = newlines_to_br(linkify(profile.data.about));
 	el_desc.classList.toggle("hide", !profile.data.about);
 	
-	find_node("button[role='copy-pk']", el).dataset.pk = pubkey;
-	find_node("button[role='edit-profile']", el)
+	find_node("button[name='copy-pk']", el).dataset.pk = pubkey;
+	find_node("button[name='edit-profile']", el)
 		.classList.toggle("hide", pubkey != model.pubkey);
 	
-	const btn_follow = find_node("button[role='follow-user']", el);
+	const btn_follow = find_node("button[name='follow-user']", el);
 	btn_follow.dataset.pk = pubkey;
 	btn_follow.innerText = contact_is_friend(model.contacts, pubkey) ? "Unfollow" : "Follow";
 	btn_follow.classList.toggle("hide", pubkey == model.pubkey);
 
-	const btn_message = find_node("button[role='message-user']", el);
+	const btn_message = find_node("button[name='message-user']", el);
 	btn_message.dataset.pubkey = pubkey;
 }
 
@@ -95,7 +117,7 @@ function onclick_edit_profile() {
 	const el = find_node("#profile-editor");
 	el.showModal();
 	for (const key of PROFILE_FIELDS) {
-		find_node(`[name='${key}']`, el).value = p.data[key];
+		find_node(`[name='${key}']`, el).value = p.data[key] || "";
 	}
 }
 
@@ -104,8 +126,12 @@ function click_update_profile() {
 	const btn = find_node("button.action", el);
 	const p = Object.assign({}, model_get_profile(DAMUS, DAMUS.pubkey).data, {
 		name: find_node("input[name='name']", el).value,
+		display_name: find_node("input[name='display_name']", el).value,
 		picture: find_node("input[name='picture']", el).value,
+		banner: find_node("input[name='banner']", el).value,
+		website: find_node("input[name='website']", el).value,
 		nip05: find_node("input[name='nip05']", el).value,
+		lud06: find_node("input[name='lud06']", el).value,
 		about: find_node("textarea[name='about']", el).value,
 	});
 	update_profile(p);

js/ui/state.js

@@ -134,10 +134,11 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
 		.classList.toggle("hide", mode != VM_FRIENDS);
 
 	// Show/hide different profile image in header
-	el_their_pfp = find_node("#view header img.pfp[role='their-pfp']");
-	el_their_pfp.classList.toggle("hide", mode != VM_DM_THREAD);
+	const show_mypfp = mode != VM_DM_THREAD && mode != VM_USER;
+	const el_their_pfp = find_node("#view header img.pfp[role='their-pfp']");
+	el_their_pfp.classList.toggle("hide", show_mypfp);
 	find_node("#view header img.pfp[role='my-pfp']")
-		.classList.toggle("hide", mode == VM_DM_THREAD);
+		.classList.toggle("hide", !show_mypfp);
 
 	view_timeline_refresh(model, mode, opts);
 
@@ -157,6 +158,11 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
 			view_show_spinner(false);
 			view_set_show_count(0, true, true);
 			break;
+		case VM_USER:
+			el_their_pfp.src = get_profile_pic(profile);
+			el_their_pfp.dataset.pubkey = pubkey;
+			view_update_profile(model, pubkey);
+			break;
 	}
 	
 	return mode;
@@ -666,6 +672,12 @@ function onclick_any(ev) {
 		case "open-media":
 			open_media_preview(el.src, el.dataset.type);
 			break;
+		case "open-link":
+			window.open(el.dataset.url, "_blank");
+			break;
+		case "open-lud06":
+			open_lud06(el.dataset.lud06);
+			break;
 		case "show-event-json":
 			on_click_show_event_details(el.dataset.evid);
 			break;