web: show profile picture in post box on desktop

web/css/responsive.css

@@ -1,5 +1,9 @@
 @media (max-width: 800px){
 	:root {
+		/* TODO font size should not be controlled by CSS:
+		 * Instead I would prefer user settings. The main reason is the font is
+		 * too small on my desktop when I use the app in column mode.
+		 */
 		--fsSmall:    10px;
 		--fsNormal:   14px;
 		--fsReduced:  12px;
@@ -26,9 +30,4 @@
 		height: 44px;
 		font-size: 2.2em;
 	}
-
-	/* Post Tools */
-	#newpost > :first-child {
-		width: 0;
-	}
 }

web/index.html

@@ -20,6 +20,7 @@
 		// This is our main entry.
 		// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
 		addEventListener('DOMContentLoaded', (ev) => {
+			// TODO fix race condition where profile doesn't load fast enough.
 			damus_web_init();
 		});
 		</script>

web/js/damus.js

@@ -129,7 +129,6 @@ async function damus_web_init()
 
 		if (!model.done_init) {
 			model.loading = false
-
 			send_initial_filters(ids.account, model.pubkey, relay)
 		} else {
 			send_home_filters(ids, model, relay)
@@ -514,8 +513,13 @@ function handle_profiles_loaded(profiles_id, model, relay) {
 	// stop asking for profiles
 	model.pool.unsubscribe(profiles_id, relay)
 	model.realtime = true
-
 	redraw_events(model)
+	redraw_my_pfp(model)
+}
+
+function redraw_my_pfp(model) {
+	const html = render_pfp(model.pubkey, model.profiles[model.pubkey]);
+	document.querySelector(".my-userpic").innerHTML = html;
 }
 
 function debounce(f, interval) {

web/js/ui/render.js

@@ -8,7 +8,7 @@ function render_home_view(model) {
 		<label>Home</label>
 	</header>
 	<div id="newpost">
-		<div><!-- empty to accomodate profile pic --></div>
+		<div class="my-userpic vertical-hide"><!-- To be loaded. --></div>
 		<div>
 			<textarea placeholder="What's up?" oninput="post_input_changed(this)" class="post-input" id="post-input"></textarea>
 			<div class="post-tools">
@@ -128,12 +128,6 @@ function render_boost(model, ev, opts) {
 		profile: model.profiles[ev.pubkey]
 	}
 	return render_event(model, ev.json_content, opts)
-	//return `
-	//<div class="boost">
-	//<div class="boost-text">Reposted by ${render_name_plain(ev.pubkey, profile)}</div>
-	//${render_event(model, ev.json_content, opts)}
-	//</div>
-	//`
 }
 
 function render_comment_body(model, ev, opts) {
@@ -228,7 +222,7 @@ function render_event(model, ev, opts={}) {
 	`
 }
 
-function render_pfp(pk, profile, size="normal") {
+function render_pfp(pk, profile) {
 	const name = render_name_plain(pk, profile)
 	return `<img class="pfp" title="${name}" onerror="this.onerror=null;this.src='${robohash(pk)}';" src="${get_picture(pk, profile)}">`
 }
@@ -263,7 +257,7 @@ function render_reaction(model, reaction) {
 	if (reaction.content === "+" || reaction.content === "")
 		emoji = "❤️"
 
-	return render_pfp(reaction.pubkey, profile, "small")
+	return render_pfp(reaction.pubkey, profile)
 }
 
 function render_action_bar(ev, can_delete) {