Added ability to view more posts.

css/styles.css

@@ -261,9 +261,10 @@ button.nav > img.icon {
         transform: rotate(360deg); 
     } 
 }
-.show-new {
+.show-new, .show-more {
 	text-align: center;
 }
+.show-more > button,
 .show-new > button {
 	color: var(--clrText);
 	border: none;

index.html

@@ -197,6 +197,9 @@
 					<div id="dms" class="hide">
 					</div>
 					<div id="timeline" class="events" data-hide-replys="true"></div>
+					<div id="show-more" class="show-more">
+						<button action="show-timeline-more">Show More</button>
+					</div>
 					<div id="settings" class="hide">
 						<section>
 							<header>

js/main.js

@@ -219,7 +219,7 @@ function on_pool_open(relay) {
 	// explore views
 	relay.subscribe(SID_EXPLORE, [{
 		kinds: STANDARD_KINDS,
-		limit: 500,
+		limit: 5000,
 	}]);
 
 	// Grab our friends history so our default timeline looks loaded 

js/ui/state.js

@@ -183,11 +183,12 @@ function view_timeline_refresh(model, mode, opts={}) {
 	el.innerHTML = "";
 	// Build DOM fragment and render it 
 	let count = 0;
+	const limit = 200;
 	const evs = mode == VM_DM_THREAD ? 
 		model_get_dm(model, opts.pubkey).events.concat().reverse() : 
 		model_events_arr(model);
 	const fragment = new DocumentFragment();
-	for (let i = evs.length - 1; i >= 0 && count < 200; i--) {
+	for (let i = evs.length - 1; i >= 0 && count < limit; i--) {
 		const ev = evs[i];
 		if (!view_mode_contains_event(model, ev, mode, opts))
 			continue;
@@ -203,24 +204,33 @@ function view_timeline_refresh(model, mode, opts={}) {
 		view_timeline_update_timestamps();
 		view_show_spinner(false);
 	}
+	// If we reached the limit there is "probably" more to show so show
+	// the more button
+	if (count == limit) {
+		find_node("#show-more").classList.remove("hide");
+	}
 }
 
 function view_show_spinner(show=true) {
 	find_node("#view .loading-events").classList.toggle("hide", !show);
 }
 
+function view_get_el_opts(el) {
+	const mode = el.dataset.mode;
+	return {
+		thread_id: el.dataset.threadId,
+		pubkey: el.dataset.pubkey,
+		hide_replys: mode == VM_FRIENDS && el.dataset.hideReplys == "true",
+	};
+}
+
 /* view_timeline_update iterates through invalidated event ids and updates the
  * state of the timeline and other factors such as notifications, etc.
  */
 function view_timeline_update(model) {
 	const el = view_get_timeline_el();
 	const mode = el.dataset.mode;
-	const opts = {
-		thread_id: el.dataset.threadId,
-		pubkey: el.dataset.pubkey,
-		hide_replys: el.dataset.hideReplys == "true",
-	};
-
+	const opts = view_get_el_opts(el);
 	let count = 0;
 	let ncount = 0;
 	let decrypted = false;
@@ -309,10 +319,7 @@ function view_set_show_count(count, add=false, hide=false) {
 function view_timeline_show_new(model) {
 	const el = view_get_timeline_el();
 	const mode = el.dataset.mode;
-	const opts = {
-		thread_id: el.dataset.threadId,
-		pubkey: el.dataset.pubkey,
-	};
+	const opts = view_get_el_opts(el);
 	const latest_evid = el.firstChild ? el.firstChild.id.slice(2) : undefined;
 
 	let count = 0;
@@ -343,6 +350,43 @@ function view_timeline_show_new(model) {
 	if (mode == VM_DM_THREAD) decrypt_dms(model);
 }
 
+function view_timeline_show_more(model) {
+	const el = view_get_timeline_el();
+	const mode = el.dataset.mode;
+	const opts = view_get_el_opts(el);
+	const oldest_evid = el.lastElementChild ? el.lastElementChild.id.slice(2) : undefined;
+	const oldest = model.all_events[oldest_evid];
+	const evs = model_events_arr(model);
+	const fragment = new DocumentFragment();
+	let i = arr_bsearch(evs, oldest, (a, b) => {
+		if (a.id == b.id || a.created_at == b.created_at)
+			return 0;
+		if (a.created_at > b.created_at)
+			return 1;
+		return -1;
+	});
+	const limit = 200;
+	let count = 0;
+	for (; i >= 0 && count < limit; i--){
+		const ev = evs[i];
+		if (!view_mode_contains_event(model, ev, mode, opts))
+			continue;
+		let ev_el = model.elements[ev.id];
+		if (!ev_el || ev_el.parentElement)
+			continue;
+		fragment.appendChild(ev_el);
+		count++;
+	}
+	if (count > 0) {
+		el.append(fragment);
+	}
+	if (count < limit) {
+		// No more to show, hide the button
+		find_node("#show-more").classList.add("hide");
+	}
+	view_timeline_update_timestamps();
+}
+
 function view_render_event(model, ev, force=false) {
 	if (model.elements[ev.id] && !force)
 		return model.elements[ev.id];
@@ -648,6 +692,9 @@ function onclick_any(ev) {
 		case "show-timeline-new":
 			show_new();
 			break;
+		case "show-timeline-more":
+			view_timeline_show_more(DAMUS);
+			break;
 		case "open-thread":
 			open_thread(el.dataset.threadId);
 			break;

js/util.js

@@ -55,6 +55,22 @@ function shuffle(arr) {
 	return arr;
 }
 
+function arr_bsearch(arr, item, cmp) {
+	let start = 0;
+	let end = arr.length - 1;
+	while (start <= end) {
+		let middle = parseInt((start + end) / 2);
+		let x = cmp(item, arr[middle]);
+		if (x > 0)
+			start = middle + 1;
+		else if (x < 0)
+			end = middle - 1;
+		else
+			return middle;
+	}
+	return -1;
+}
+
 /* arr_bsearch_insert finds the point in the array that an item should be 
  * inserted at based on the 'cmp' function used. cmp function is same as sort
  * cmp function.