Updates:

1. Fixed thread view, it didn't really seem to work before at all.
2. Removed excess buttons for notes, will extend into a drop down menu
   TODO.

css/styles.css

@@ -304,9 +304,12 @@ button.nav > img.icon {
 	max-height: 300px;
 	object-fit: contain;
 }
+.action-bar {
+	display: flex;
+}
 .action-bar > button {
-	margin-right: 25px;
 	opacity: 0.5;
+	flex: 1;
 }
 
 .reactions {
@@ -339,7 +342,6 @@ button.nav > img.icon {
 
 .action-bar button.icon {
 	transition:	opacity 0.3s linear;
-	padding: 5px;
 }
 .action-bar button.icon img.icon {
 	width: 16px;

icon/event-options.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 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="M64 368C90.51 368 112 389.5 112 416C112 442.5 90.51 464 64 464C37.49 464 16 442.5 16 416C16 389.5 37.49 368 64 368zM64 208C90.51 208 112 229.5 112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208zM64 144C37.49 144 16 122.5 16 96C16 69.49 37.49 48 64 48C90.51 48 112 69.49 112 96C112 122.5 90.51 144 64 144z"/></svg>

js/event.js

@@ -56,13 +56,11 @@ function event_calculate_pow(ev) {
 			const target = +tag[2]
 			if (isNaN(target))
 				return 0
-
 			// if our nonce target is smaller than the difficulty,
 			// then we use the nonce target as the actual difficulty
 			return min(target, id_bits)
 		}
 	}
-
 	// not a valid pow if we don't have a difficulty target
 	return 0
 }

js/main.js

@@ -13,6 +13,7 @@ const SID_DMS_IN        = "din";
 const SID_PROFILES      = "prof";
 const SID_THREAD        = "thrd";
 const SID_FRIENDS       = "frds";
+const SID_EVENT         = "evnt";
 
 // This is our main entry.
 // https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
@@ -235,6 +236,7 @@ async function on_pool_eose(relay, sub_id) {
 			}
 		case SID_NOTIFICATIONS:
 		case SID_PROFILES:
+		case SID_EVENT:
 			pool.unsubscribe(sub_id, relay);
 			break;
 		case SID_DMS_OUT:
@@ -284,8 +286,17 @@ function fetch_profile(pubkey, pool, relay) {
 	}], relay);
 }
 
+function fetch_event(evid, pool) {
+	const sid = `${SID_EVENT}:${evid}`;
+	pool.subscribe(sid, [{
+		ids: [evid]
+	}]);
+	log_debug(`fetching event ${sid}`);
+}
+
 function fetch_thread_history(evid, pool) {
 	// TODO look up referenced relays for thread history 
+	fetch_event(evid, pool);
 	const sid = `${SID_THREAD}:${evid}`
 	pool.subscribe(sid, [{
 		kinds: PUBLIC_KINDS,

js/ui/render.js

@@ -63,10 +63,12 @@ function render_event(model, ev, opts={}) {
 
 	const profile = model_get_profile(model, ev.pubkey);
 	const delta = fmt_since_str(new Date().getTime(), ev.created_at*1000)
+	const target_thread_id = ev.refs.root || ev.id;
 	let classes = "event"
 	if (!opts.is_composing)
 		classes += " bottom-border";
-	return html`<div id="ev${ev.id}" class="${classes}">
+	return html`<div id="ev${ev.id}" class="${classes}" action="open-thread"
+	data-thread-id="${target_thread_id}">
 		$${render_shared_by(ev, opts)}
 		<div class="flex">
 		<div class="userpic">
@@ -213,26 +215,9 @@ function render_action_bar(model, ev, opts={}) {
 		</button>`;
 	}
 	str += `
-	<button class="icon" title="View Thread" action="open-thread" 
+	<button class="icon" title="More Options" action="open-event-options">
-	data-thread-id="${thread_root}">
+		<img class="icon svg small" src="/icon/event-options.svg"/>
-		<img class="icon svg small" src="/icon/open-thread.svg"/>
-	</button>
-	<button class="icon" title="View Replies" action="open-thread" 
-	data-thread-id="${ev.id}">
-		<img class="icon svg small" src="/icon/open-thread-here.svg"/>
-	</button>
-	<button class="icon" title="View Event JSON" action="show-event-json"
-	data-evid="${ev.id}">
-		<img class="icon svg small" src="/icon/event-details.svg"/>
 	</button>`;
-	if (can_delete) {
-		const delete_id = shared ? shared.share_evid : ev.id;
-		str += html`
-	<button class="icon" title="Delete" action="confirm-delete" 
-	data-evid="${delete_id}">
-		<img class="icon svg small" src="/icon/event-delete.svg"/>
-	</button>` 
-	}
 	return str + "</div>";
 }
 

js/ui/state.js

@@ -119,7 +119,7 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
 	view_update_navs(mode);
 	find_node("#view [role='profile-info']").classList.toggle("hide", mode != VM_USER);
 	const timeline_el = find_node("#timeline");
-	timeline_el.classList.toggle("reverse", mode == VM_THREAD || mode == VM_DM_THREAD);
+	timeline_el.classList.toggle("reverse", mode == VM_DM_THREAD);
 	timeline_el.classList.toggle("hide", mode == VM_SETTINGS || mode == VM_DM);
 	find_node("#settings").classList.toggle("hide", mode != VM_SETTINGS);
 	find_node("#dms").classList.toggle("hide", mode != VM_DM);
@@ -181,9 +181,11 @@ function view_timeline_refresh(model, mode, opts={}) {
 	// Build DOM fragment and render it 
 	let count = 0;
 	const limit = 200;
-	const evs = mode == VM_DM_THREAD ? 
+	let evs = mode == VM_DM_THREAD ? 
 		model_get_dm(model, opts.pubkey).events.concat().reverse() : 
 		model_events_arr(model);
+	if (mode == VM_THREAD)
+		evs = evs.reverse();
 	const fragment = new DocumentFragment();
 	let show_more = true;
 	let i = evs.length - 1;
@@ -334,7 +336,10 @@ function view_timeline_show_new(model) {
 	const el = view_get_timeline_el();
 	const mode = el.dataset.mode;
 	const opts = view_get_el_opts(el);
-	const latest_evid = el.firstChild ? el.firstChild.id.slice(2) : undefined;
+	let latest_evid = el.firstChild ? el.firstChild.id.slice(2) : undefined;
+	if (mode == VM_THREAD) {
+		latest_evid = el.lastElementChild ? el.lastElementChild.id.slice(2) : undefined;
+	}
 
 	let count = 0;
 	const evs = model_events_arr(model)
@@ -353,7 +358,11 @@ function view_timeline_show_new(model) {
 		count++;
 	}
 	if (count > 0) {
-		el.prepend(fragment);
+		if (mode == VM_THREAD) {
+			el.appendChild(fragment);
+		} else {
+			el.prepend(fragment);
+		}
 		view_show_spinner(false);
 		if (mode == VM_NOTIFICATIONS) {
 			reset_notifications(model);
@@ -511,9 +520,8 @@ function view_mode_contains_event(model, ev, mode, opts={}) {
 			return ev.pubkey == model.pubkey || contact_is_friend(model.contacts, ev.pubkey);
 		case VM_THREAD:
 			if (ev.kind == KIND_SHARE) return false;
-			return ev.id == opts.thread_id || (ev.refs && ( 
+			return ev.id == opts.thread_id || 
-				ev.refs.root == opts.thread_id ||
+				event_refs_event(ev, {id:opts.thread_id});
-				ev.refs.reply == opts.thread_id));
 		case VM_NOTIFICATIONS:
 			return event_tags_pubkey(ev, model.pubkey);
 		case VM_DM_THREAD:
@@ -629,11 +637,6 @@ async function onclick_send(ev) {
 	el_input.value = "";
 	trigger_postbox_assess(el_input);
 	close_modal(el);
-
-	/*
-	const el_cw = document.querySelector("#content-warning-input");
-	//tags: el_cw.value ? [["content-warning", el_cw.value]] : [],
-	el_cw.value = "";*/
 }
 async function onclick_send_dm(ev) {
 	const pubkey = await get_pubkey();
@@ -679,8 +682,20 @@ function onclick_toggle_cw(ev) {
 }
 
 function onclick_any(ev) {
-	const el = ev.target;
+	let el = ev.target;
-	const action = el.getAttribute("action");
+	let action = el.getAttribute("action");
+	if (action == null && el.tagName != "A") {
+		const parent = find_parent(el, "[action]");
+		if (parent) {
+			const parent_action = parent.getAttribute("action")
+			// This is a quick hijack for propogating clicks; further extending
+			// this should be obvious.
+			if (parent_action == "open-thread") {
+				el = parent;
+				action = parent_action;
+			}
+		}
+	}
 	switch (action) {
 		case "sign-in":
 			signin();

js/util.js

@@ -133,6 +133,8 @@ function find_nodes(selector, parentEl) {
 function find_parent(el, selector) {
 	while (el && !el.matches(selector)) {
 		el = el.parentNode;
+		if (!el.matches)
+			return undefined;
 	}
 	return el;
 }