Notifications work with dms now

css/styles.css

@@ -566,9 +566,9 @@ code {
 	font-size: var(--fsSmall);
 }
 .dm-group .count.active {
-	border: var(--clrNotification) solid 2px;
+	background: var(--clrChatBlue);
 	font-weight: bold;
-	background: transparent;
+	color: white;
 }
 .event.dm {
 	padding-bottom: 0;
@@ -585,7 +585,7 @@ code {
 	padding: 10px;
 }
 .event.dm.mine .wrap {
-	background: #0058ff;
+	background: var(--clrChatBlue);
 	margin-left: auto;
 }
 .event.dm.mine .timestamp {

css/vars.css

@@ -13,7 +13,8 @@
 	--clrWarn:         #fbc560;
 	--clrLink:         blue;
 	--clrLinkVisited:  purple;
-	--clrNotification: #20ff00;
+	--clrNotification: #0058ff;
+	--clrChatBlue:     #0058ff; 
 	
 	/* TODO I don't like these and simply did it for dark mode. To rename. */
 	--clrEvMsg:       #f4f4f4; 

index.html

@@ -73,10 +73,11 @@
 			</button>
 			<button class="icon" role="dm" title="Direct Messages" onclick="switch_view('dm')">
 				<img class="icon svg invert" src="icon/messages.svg"/>
+				<div class="new-notifications hide" role="dm"></div>
 			</button>
 			<button class="icon" role="notifications" title="Notifications" onclick="switch_view('notifications')">
 				<img class="icon svg invert" src="icon/notifications.svg"/>
-				<div class="new-notifications hide"></div>
+				<div class="new-notifications hide" role="activity"></div>
 			</button>
 			<button class="icon" role="settings" title="Settings" onclick="switch_view('settings')">
 				<img class="icon svg invert" src="icon/settings.svg"/>
@@ -102,12 +103,13 @@
 						title="Direct Messages" onclick="switch_view('dm')">
 						<img class="icon svg inactive" src="icon/messages.svg"/>
 						<img class="icon svg active" src="icon/messages-active.svg"/>
+						<div class="new-notifications hide" role="dm"></div>
 					</button>
 					<button role="notifications" class="nav icon" 
 						title="Notifications" onclick="switch_view('notifications')">
 						<img class="icon svg inactive" src="icon/notifications.svg"/>
 						<img class="icon svg active" src="icon/notifications-active.svg"/>
-						<div class="new-notifications hide"></div>
+						<div class="new-notifications hide" role="activity"></div>
 					</button>
 					<button role="settings" title="Settings" class="nav icon"
 						onclick="switch_view('settings')">

js/main.js

@@ -138,10 +138,17 @@ function on_timer_save() {
 }
 
 function on_timer_tick() {
-	//return;
-	setTimeout(() => {
-		DAMUS.relay_que.forEach((que, relay) => {
-			model_fetch_next_profile(DAMUS, relay);
+	const model = DAMUS;
+	setTimeout(async () => {
+		if (model.dms_need_redraw && view_get_timeline_el().dataset.mode == VM_DM) {
+			// if needs decryption do it
+			await decrypt_dms(model);
+			view_dm_update(model);
+			model.dms_need_redraw = false;
+		}
+		update_notifications(model);
+		model.relay_que.forEach((que, relay) => {
+			model_fetch_next_profile(model, relay);
 		});
 		on_timer_tick();
 	}, 1 * 1000);

js/model.js

@@ -197,10 +197,11 @@ function model_process_event_dm(model, ev, update_view) {
 	dm.events.splice(i, 0, ev);
 
 	// Check if DM is new
-	const b = model.all_events[dm.last_seen];
+	const b = model.all_events[dm.last_viewed];
 	if (!b || b.created_at < ev.created_at) {
-		// TODO update notification UI 
 		dm.new_count++;
+		// dirty hack
+		model.dms_need_redraw = true;
 	}
 }
 
@@ -213,7 +214,7 @@ function model_get_dm(model, target) {
 			// all_events. It should not be a copy to reduce memory.
 			events: [], 
 			// Last read event by the client/user
-			last_seen: "", 
+			last_viewed: "", 
 			new_count: 0,
 			// Notifies the renderer that this dm is out of date
 			needs_redraw: false,
@@ -223,6 +224,20 @@ function model_get_dm(model, target) {
 	return model.dms.get(target);
 }
 
+function model_dm_seen(model, target) {
+	const dm = model_get_dm(model, target);
+	dm.last_viewed = dm.events[0];
+	dm.new_count = 0;
+	dm.needs_redraw = true;
+}
+
+function model_mark_dms_seen(model) {
+	model.dms.forEach((dm) => {
+		model_dm_seen(model, dm.pubkey);
+	});
+	model.dms_need_redraw = true;
+}
+
 /* model_process_event_reaction updates the reactions dictionary
  */
 function model_process_event_reaction(model, ev, update_view) {

js/ui/dm.js

@@ -1,6 +1,7 @@
 function view_dm_update(model) {
 	const el = find_node("#dms");
 	const order = [];
+	let reorder = false;
 	model.dms.forEach((dm, pubkey, m) => {
 		if (!dm.events.length)
 			return;
@@ -16,6 +17,7 @@ function view_dm_update(model) {
 		}
 		update_el_dmgroup(model, dm, gel);
 		dm.needs_redraw = false;
+		reorder = true;
 	});
 
 	// I'm not sure what is faster, doing a frag update all at once OR just
@@ -23,6 +25,7 @@ function view_dm_update(model) {
 	// chances of them all updating is is small and only garuenteed when it 
 	// draws the first time.
 	//const frag = new DocumentFragment();
+	if (!reorder) return;
 	for (let i = 0; i < order.length; i++) {
 		let dm = order[i];
 		let xel = el.children[i];
@@ -51,7 +54,7 @@ function update_el_dmgroup(model, dm, el) {
 	const message = ev.decrypted || ev.content || "No Message.";
 	const time = fmt_datetime(new Date(ev.created_at * 1000));
 	const cel = find_node(".count", el)
-	cel.innerText = dm.new_count;
+	cel.innerText = dm.new_count || dm.events.length;
 	cel.classList.toggle("active", dm.new_count > 0);
 	find_node(".time", el).innerText = time;
 	find_node(".message", el).innerText = message;

js/ui/state.js

@@ -112,6 +112,7 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
 	switch (mode) {
 		case VM_DM_THREAD:
 			decrypt_dms(model);
+			model_dm_seen(model, pubkey);
 			el_their_pfp.src = get_profile_pic(profile);
 			el_their_pfp.dataset.pubkey = pubkey;
 			break;
@@ -234,16 +235,19 @@ function view_timeline_update(model) {
 
 	// If there are new things to show on our current view lets do it
 	if (count > 0) {
-		if (!latest_ev) {
+		if (!latest_ev || mode == VM_DM_THREAD) {
 			view_timeline_show_new(model);
 		}
+		if (mode == VM_DM_THREAD) {
+			model_mark_dms_seen(model, opts.pubkey);
+			view_dm_update(model);
+		}
 		view_set_show_count(count, true, false);
 	}
 	// Update notification markers and count
 	if (ncount > 0) {
-		log_debug(`new notis ${ncount}`);
+		//log_debug(`new notis ${ncount}`);
 		model.notifications.count += ncount;
-		update_notifications(model);
 	}
 	// Update the dms list view
 	if (decrypted) {

js/ui/util.js

@@ -28,8 +28,8 @@ function init_message_textareas() {
 // update_notification_markers will find all markers and hide or show them
 // based on the passed in state of 'active'. This applies to the navigation 
 // icons.
-function update_notification_markers(active) {
-	let els = document.querySelectorAll(".new-notifications")
+function update_notification_markers(active, type) {
+	let els = document.querySelectorAll(`.new-notifications[role='${type}']`)
 	for (const el of els) {
 		el.classList.toggle("hide", !active)
 	}
@@ -142,12 +142,20 @@ function update_favicon(path) {
 // update_notifications updates the document title & visual indicators based on if the
 // number of notifications that are unseen by the user.
 function update_notifications(model) {
+	let dm_count = 0;
+	for (const item of model.dms) {
+		if (item[1].new_count)
+			dm_count += item[1].new_count;
+	}
+	
 	const { count } = model.notifications;
 	const suffix = "Yo Sup";
-	document.title = count ? `(${count}) ${suffix}` : suffix;
-	// TODO I broke the favicons. I will fix with notications update
+	const total = count + dm_count;
+	document.title = total ? `(${total}) ${suffix}` : suffix;
+	// TODO I broke the favicons; I will fix with later.
 	//update_favicon(has_notes ? "img/damus_notif.svg" : "img/damus.svg");
-	update_notification_markers(count);
+	update_notification_markers(count, "activity");
+	update_notification_markers(dm_count, "dm");
 }
 
 async function get_pubkey(use_prompt=true) {