feat(glance-nav): unread indicator meta text

public/language/en-GB/topic.json

@@ -224,5 +224,6 @@
 	"no-more-next-post": "You don't have more posts in this topic",
 	"post-quick-reply": "Quick reply",
 
-	"navigator.index": "Post %1 of %2"
+	"navigator.index": "Post %1 of %2",
+	"navigator.unread": "%1 unread"
 }

public/src/client/topic.js

@@ -358,14 +358,16 @@ define('forum/topic', [
 			)
 		) {
 			if (app.user.uid) {
+				ajaxify.data.bookmark = index + 1;
+
 				socket.emit('topics.bookmark', {
 					tid: ajaxify.data.tid,
 					index: index,
 				}, function (err) {
 					if (err) {
+						ajaxify.data.bookmark = currentBookmark;
 						return alerts.error(err);
 					}
-					ajaxify.data.bookmark = index + 1;
 				});
 			} else {
 				storage.setItem(bookmarkKey, index);

public/src/client/topic/glance.js

@@ -91,15 +91,24 @@ function enableHandle() {
 	return { handleEl };
 }
 
-function updateUnreadIndicator(index) {
+async function updateUnreadIndicator() {
 	if (ajaxify.data.postcount < ajaxify.data.bookmarkThreshold) {
 		return;
 	}
 
+	const index = Math.max(navigator.getIndex(), ajaxify.data.bookmark);
 	const unreadEl = document.querySelector('[component="topic/navigator"] .unread');
-	const percentage = 1 - (Math.max(index, ajaxify.data.bookmark) / ajaxify.data.postcount);
-
+	const percentage = 1 - (index / ajaxify.data.postcount);
 	unreadEl.style.height = `${trackHeight * percentage}px`;
+
+	const metaEl = unreadEl.querySelector('.meta');
+	const remaining = ajaxify.data.postcount - index;
+	if (remaining > 0) {
+		const text = await translate(`[[topic:navigator.unread, ${remaining}]]`);
+		metaEl.innerText = text;
+	} else {
+		metaEl.innerText = '';
+	}
 }
 
 function repositionHandle(index) {
@@ -111,7 +120,7 @@ function repositionHandle(index) {
 	}
 
 	updateHandleText();
-	updateUnreadIndicator(index);
+	updateUnreadIndicator();
 
 	if (index === 0) {
 		handleEl.style.top = 0;