feathermost/js/view/sidebar.js

function populateServerSelectionList() {
	const servers = localstorage_credentials.getServers();

	let nodes = [];
	for (let server of servers) {
		const li = document.createElement("li");
		const endpoint = humanReadableEndpoint(server.endpoint);
		li.innerText = `${server.login_id}@${endpoint} `;

		const logoutButton = document.createElement("button");
		logoutButton.className = "logout";
		logoutButton.innerText = "Log out";
		logoutButton.addEventListener("click", e => logOut(server.endpoint, e.currentTarget));

		li.appendChild(logoutButton);
		nodes.push(li);
	}
	byId("server_selection_list").innerHTML = "";
	byId("server_selection_list").append(...nodes);
}

function populateChannelList() {
	async function addChannelItems(client) {
		const teams = await client.myTeams();

		for (let team of teams) {
			let nodes = [];
			const [channels, unreadsList] = await Promise.all([
				client.myChannels(team.id),
				client.getUnread(team.id)
			]);

			const unreads = arrayToHashmap(unreadsList, "channel_id");

			for (let channel of channels) {
				const chanUnreads = channel["total_msg_count"] - unreads[channel.id]["msg_count"];
				const chanMentions = unreads[channel.id]["mention_count"];

				const li = document.createElement("li");
				const a = document.createElement("a");
				a.href = "javascript:void(0)";
				const titleAndElements = channelNameElements(team, channel);
				if (!titleAndElements) continue;
				a.title = titleAndElements[0];
				a.append(...titleAndElements[1]);

				a.append(document.createTextNode(" "));
				const msgCountGem = document.createElement("span");
				msgCountGem.className = "msg_count_gem";
				msgCountGem.innerText = chanMentions;
				if (chanMentions > 0) msgCountGem.style.display = "inline-block";
				a.append(msgCountGem);

				a.addEventListener("click", () => switchToChannel(client, team, channel));

				li.appendChild(a);
				li.dataset["id"] = channel.id;
				li.dataset["server"] = client.endpoint;
				li.dataset["unreads"] = chanUnreads;
				li.dataset["mentions"] = chanMentions;

				if (chanUnreads > 0) li.className = "unread";
				nodes.push(li);
			}
			byId("channel_list").append(...nodes);
		}
	}

	byId("channel_list").innerHTML = "";
	const endpoints = localstorage_credentials.getServers().map(server => server.endpoint);
	for (let client of mm_client.getOrCreateMultiple(endpoints)) {
		addChannelItems(client);
	}
}

function increaseUnreadCount(el, post) {
	// TODO Check if post is mention and increase mentions counter if it is
	setUnreadCount(
		el,
		el.dataset["unreads"] * 1 + 1,
		el.dataset["mentions"] * 1
	);
}

function setUnreadCount(el, unreads, mentions) {
	el.dataset["unreads"] = unreads;
	el.dataset["mentions"] = mentions;
	let msgCountGem = el.querySelector('.msg_count_gem');
	if (mentions > 0) {
		msgCountGem.style.display = "inline-block";
		msgCountGem.innerText = mentions;
	} else {
		msgCountGem.style.display = "none";
	}
	if (unreads > 0) {
		addClass(el, "unread");
	} else {
		removeClass(el, "unread");
	}
}


pubsub.subscribe("MESSAGES_NEW", post => {
	const curChan = currentChannel();
	if (!(post.endpoint === curChan.endpoint && post.channel_id === curChan.channel_id)) {
		for (let el of byId("channel_list").childNodes) {
			if (el.dataset["server"] == post.endpoint && el.dataset["id"] == post.channel_id) {
				increaseUnreadCount(el, post);
			}
		}
	}
});

pubsub.subscribe("CHANNEL_READ", channel => {
	for (let el of byId("channel_list").childNodes) {
		if (el.dataset["server"] == channel.endpoint && el.dataset["id"] == channel.channel_id) {
			setUnreadCount(el, 0, 0);
		}
	}
});