Toggle posts only & mark all mail as read.

css/styles.css

@@ -208,13 +208,19 @@ button.nav > img.icon {
 	font-weight: 800;
 	display: block;
 }
-#view > div > header > .pfp {
-	width: 32px;
-	height: 32px;
+#header-tools {
+	display: flex;
 	position: absolute;
 	top: 15px;
 	right: 15px;
 }
+#header-tools > * {
+	margin-left: 15px;
+}
+#header-tools .pfp {
+	width: 32px;
+	height: 32px;
+}
 
 /* Events & Content */
 .events {
@@ -328,21 +334,19 @@ button.nav > img.icon {
 .comment {
 	word-break: break-word;
 }
-
 .inline-img {
 	width: 100%;
 	max-height: 300px;
 	object-fit: contain;
 }
-
 .action-bar > button {
 	margin-right: 25px;
 	opacity: 0.5;
 }
+
 .reactions {
 	margin-bottom: 15px;
 }
-
 .reaction-group {
 	display: inline-flex;
 	align-items: center;

css/utils.css

@@ -16,7 +16,7 @@
 
 button.action:disabled {
 	cursor: default;
-	background-color: var(--clrTextLight);
+	opacity: 0.5;
 }
 button {
 	background: #171717;
@@ -38,10 +38,19 @@ button.action {
 	border-radius: 50px;
 	background: var(--clrBgAction);
 	padding: 10px 15px;
-	font-size: 16px;
+	font-size: var(--fsNormal); 
 	color: var(--clrTextAction);
 	font-weight: 800;
 }
+button.action.small {
+	padding: 5px 15px;
+	font-size: var(--fsReduced);
+}
+button.action.bordered {
+	background: transparent;
+	border: solid 2px var(--clrBgAction);
+	color: var(--clrBgAction);
+}
 
 img.icon {
 	width: var(--iconSize);

css/vars.css

@@ -24,8 +24,8 @@
 
 	/* Font Sizes */
 	--fsSmall:    12px;
-	--fsNormal:   16px;
 	--fsReduced:  14px;
+	--fsNormal:   16px;
 	--fsEnlarged: 18px;
 
 	/* Font Families */

index.html

@@ -118,10 +118,20 @@
 				<div>
 					<header>
 						<label>Home</label>
-						<img class="pfp" role="their-pfp" data-pubkey=""
+						<div id="header-tools">
+							<button class="action small bordered"
+							action="toggle-hide-replys">
+								Show Replys
+							</button>
+							<button class="action small bordered hide"
+							disabled action="mark-all-read">
+								Mark All Read
+							</button>
+							<img class="pfp hide" role="their-pfp" data-pubkey=""
 							src="icon/no-user.svg"/>
-						<img class="pfp" role="my-pfp" data-pubkey=""
+							<img class="pfp hide" role="my-pfp" data-pubkey=""
 							src="icon/no-user.svg"/>
+						</div>
 					</header>
 					<div id="newpost">
 						<textarea placeholder="What's up?" 

js/event.js

@@ -155,3 +155,14 @@ function event_parse_reaction(ev) {
 	}
 }
 
+function event_is_dm(ev, mykey) {
+	if (ev.kind != KIND_DM)
+		return false;
+	if (ev.pubkey != mykey && event_tags_pubkey(ev, mykey))
+		return true;
+	return ev.pubkey == mykey;
+}
+
+function event_is_reply(ev) {
+	return !!ev.refs.reply;
+}

js/main.js

@@ -106,7 +106,7 @@ async function webapp_init() {
 
 	// Update our view and apply timer methods once all data is ready to go.
 	view_timeline_update(model);*/
-	view_timeline_apply_mode(model, VM_FRIENDS);
+	view_timeline_apply_mode(model, VM_FRIENDS, {hide_replys: true});
 	on_timer_timestamps();
 	on_timer_invalidations();
 	on_timer_save();

js/model.js

@@ -153,14 +153,6 @@ function model_process_event_following(model, ev, update_view) {
 //	load_our_relays(model.pubkey, model.pool, ev)
 }
 
-function event_is_dm(ev, mykey) {
-	if (ev.kind != KIND_DM)
-		return false;
-	if (ev.pubkey != mykey && event_tags_pubkey(ev, mykey))
-		return true;
-	return ev.pubkey == mykey;
-}
-
 /* model_process_event_dm updates the internal dms hash map based on dms
  * targeted at the user.
  */
@@ -240,6 +232,8 @@ function model_set_dms_seen(model, obj={}) {
 
 function model_dm_seen(model, target) {
 	const dm = model_get_dm(model, target);
+	if (!dm.events[0])
+		return;
 	dm.last_viewed = dm.events[0].created_at;
 	dm.new_count = 0;
 	dm.needs_redraw = true;

js/ui/state.js

@@ -29,6 +29,11 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
 	// Don't do anything if we are already here
 	if (el.dataset.mode == mode) {
 		switch (mode) {
+			case VM_FRIENDS:
+				if ((el.dataset.hideReplys == "true") == opts.hide_replys)
+					return;
+				push_state = false;
+				break;
 			case VM_DM_THREAD:
 			case VM_USER:
 				if (el.dataset.pubkey == opts.pubkey)
@@ -75,7 +80,11 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
 	el.dataset.mode = mode;
 	delete el.dataset.threadId;
 	delete el.dataset.pubkey;
+	delete el.dataset.hideReplys;
 	switch(mode) {
+		case VM_FRIENDS:
+			el.dataset.hideReplys = opts.hide_replys;
+			break;
 		case VM_THREAD:
 			el.dataset.threadId = thread_id;
 			break;
@@ -100,11 +109,15 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
 	find_node("#dms-not-available")
 		.classList.toggle("hide", mode == VM_DM_THREAD || mode == VM_DM ? 
 			dms_available() : true);
+	find_node("#header-tools button[action='mark-all-read']")
+		.classList.toggle("hide", mode != VM_DM);
+	find_node("#header-tools button[action='toggle-hide-replys']")
+		.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 = find_node("#view header img.pfp[role='their-pfp']");
 	el_their_pfp.classList.toggle("hide", mode != VM_DM_THREAD);
-	find_node("#view header > img.pfp[role='my-pfp']")
+	find_node("#view header img.pfp[role='my-pfp']")
 		.classList.toggle("hide", mode == VM_DM_THREAD);
 
 	view_timeline_refresh(model, mode, opts);
@@ -138,6 +151,7 @@ function view_timeline_refresh(model, mode, opts={}) {
 		mode = el.dataset.mode;
 		opts.thread_id = el.dataset.threadId;
 		opts.pubkey = el.dataset.pubkey;
+		opts.hide_replys = el.dataset.hideReplys == "true";
 	}
 	// Remove all 
 	// This is faster than removing one by one
@@ -410,6 +424,8 @@ function view_mode_contains_event(model, ev, mode, opts={}) {
 		case VM_USER:
 			return opts.pubkey && ev.pubkey == opts.pubkey;
 		case VM_FRIENDS:
+			if (opts.hide_replys && event_is_reply(ev))
+				return false;
 			return ev.pubkey == model.pubkey || contact_is_friend(model.contacts, ev.pubkey);
 		case VM_THREAD:
 			if (ev.kind == KIND_SHARE) return false;
@@ -456,6 +472,12 @@ function switch_view(mode, opts) {
 	close_gnav();
 }
 
+function toggle_hide_replys(el) {
+	const hide = el.innerText == "Hide Replys";
+	switch_view(VM_FRIENDS, {hide_replys: hide});
+	el.innerText = hide ? "Show Replys" : "Hide Replys";
+}
+
 function reset_notifications(model) {
 	model.notifications.count = 0;
 	model.notifications.last_viewed = new_creation_time();
@@ -627,5 +649,12 @@ function onclick_any(ev) {
 		case "confirm-delete":
 			delete_post_confirm(el.dataset.evid);
 			break;
+		case "mark-all-read":
+			model_mark_dms_seen(DAMUS);
+			break;
+		case "toggle-hide-replys":
+			toggle_hide_replys(el);
+			break;
 	}
 }
+

js/ui/util.js

@@ -141,6 +141,9 @@ function update_notifications(model) {
 	//update_favicon(has_notes ? "img/damus_notif.svg" : "img/damus.svg");
 	update_notification_markers(count, "activity");
 	update_notification_markers(dm_count, "dm");
+	// slight hack :)
+	find_node("#header-tools button[action='mark-all-read']")
+		.disabled = dm_count == 0;
 }
 
 async function get_pubkey(use_prompt=true) {

js/util.js

@@ -284,6 +284,7 @@ async function decrypt_dms(model) {
 				str = await window.nostr.nip04.decrypt(dm.pubkey, ev.content);
 			} catch (err) {
 				log_error("unable to decrypt dm", ev.id, err);
+				str = "(Unable to decrypt)"
 			}
 			if (!str)
 				continue;