public/client.js

@@ -159,37 +159,29 @@
 			});
 	}
 
-	function translateText(el) {
-		if (window.require) {
-			window.require(['translator'], function (translator) {
-				translator.translate(el.textContent, (translated) => {
-					el.textContent = translated;
-				});
-			});
-		}
-	}
-
 	function renderUnreadMenu(menuEl, topics) {
 		if (!menuEl) {
 			return;
 		}
 
-		menuEl.textContent = '';
 		const relativePath = (window.config && window.config.relative_path) || '';
 
-		function addItem(node) {
-			const li = document.createElement('li');
-			li.appendChild(node);
-			menuEl.appendChild(li);
+		// remove the loading row and any previously injected topic rows;
+		// the empty-state and footer/divider rows are server-rendered and stay put
+		const loading = menuEl.querySelector('[data-wg-unread-loading]');
+		if (loading) {
+			loading.remove();
 		}
+		toArray(menuEl.querySelectorAll('.wg-unread-topic')).forEach((li) => {
+			li.remove();
+		});
+
+		const emptyEl = menuEl.querySelector('[data-wg-unread-empty]');
+		const footerEl = menuEl.querySelector('[data-wg-unread-footer]');
 
 		const list = (topics || []).slice(0, 10);
-		if (!list.length) {
-			const empty = document.createElement('span');
-			empty.className = 'dropdown-item disabled';
-			empty.textContent = '[[unread:no-unread-topics]]';
-			addItem(empty);
-			translateText(empty);
+		if (emptyEl) {
+			emptyEl.classList.toggle('hidden', list.length > 0);
 		}
 
 		list.forEach((topic) => {
@@ -203,19 +195,17 @@
 				category.textContent = topic.category.name;
 				link.appendChild(category);
 			}
-			addItem(link);
+
+			const li = document.createElement('li');
+			li.className = 'wg-unread-topic';
+			li.appendChild(link);
+
+			if (footerEl) {
+				menuEl.insertBefore(li, footerEl);
+			} else {
+				menuEl.appendChild(li);
+			}
 		});
-
-		const divider = document.createElement('hr');
-		divider.className = 'dropdown-divider';
-		addItem(divider);
-
-		const seeAll = document.createElement('a');
-		seeAll.className = 'dropdown-item wg-unread-item--all';
-		seeAll.href = `${relativePath}/unread`;
-		seeAll.textContent = '[[unread:title]]';
-		addItem(seeAll);
-		translateText(seeAll);
 	}
 
 	function getWestgateTopbar() {

templates/partials/header/unread-drawer.tpl

@@ -3,5 +3,7 @@
 	<span component="unread/count" class="badge rounded-1 bg-primary {{{ if !unreadCount.topic }}}hidden{{{ end }}}">{unreadCount.topic}</span>
 </a>
 <ul class="dropdown-menu wg-topbar__dropdown unread-dropdown p-1 shadow" role="menu" data-wg-unread-menu>
-	<li class="dropdown-item disabled"><i class="fa fa-fw fa-spinner fa-spin" aria-hidden="true"></i> [[unread:title]]</li>
+	<li data-wg-unread-loading class="dropdown-item disabled"><i class="fa fa-fw fa-spinner fa-spin" aria-hidden="true"></i> [[unread:title]]</li>
+	<li data-wg-unread-empty class="hidden"><span class="dropdown-item disabled">[[unread:no-unread-topics]]</span></li>
+	<li data-wg-unread-footer><hr class="dropdown-divider"><a class="dropdown-item wg-unread-item--all" href="{relative_path}/unread">[[unread:title]]</a></li>
 </ul>