[NEW] Unread bars on sidebar (#16862)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

app/theme/client/imports/components/sidebar/sidebar.css

@@ -64,7 +64,9 @@
 	}
 
 	& .unread-rooms {
-		display: none;
+		padding: calc(var(--sidebar-small-default-padding) - 8px);
+
+		text-align: center;
 	}
 }
 

app/ui-utils/client/lib/RoomManager.js

@@ -9,6 +9,7 @@ import _ from 'underscore';
 import { fireGlobalEvent } from './fireGlobalEvent';
 import { upsertMessage, RoomHistoryManager } from './RoomHistoryManager';
 import { mainReady } from './mainReady';
+import { menu } from './menu';
 import { roomTypes } from '../../../utils';
 import { callbacks } from '../../../callbacks';
 import { Notifications } from '../../../notifications';
@@ -86,6 +87,7 @@ export const RoomManager = new function() {
 										name,
 									};
 									if (isNew) {
+										menu.updateUnreadBars();
 										callbacks.run('streamNewMessage', msg);
 									}
 								}

app/ui-utils/client/lib/menu.js

@@ -20,7 +20,7 @@ export const menu = new class extends EventEmitter {
 			const listHeight = this.list.height();
 			let showTop = false;
 			let showBottom = false;
-			$('li.has-alert').each(function() {
+			$('li.sidebar-item--unread').each(function() {
 				if ($(this).offset().top < listOffset.top - $(this).height()) {
 					showTop = true;
 				}