render badge on room

src/domain/session/roomlist/RoomTileViewModel.js

@@ -110,4 +110,12 @@ export class RoomTileViewModel extends ViewModel {
     get avatarTitle() {
         return this.name;
     }
+
+    get badgeCount() {
+        return this._room.notificationCount;
+    }
+
+    get isHighlighted() {
+        return this._room.highlightCount !== 0;
+    }
 }

src/ui/web/css/left-panel.css

@@ -31,18 +31,16 @@ limitations under the License.
     align-items: center;
 }
 
-.LeftPanel .name.unread {
-    font-weight: 600;
-}
-
 .LeftPanel div.description {
     margin: 0;
     flex: 1 1 0;
     min-width: 0;
+    display: flex;
 }
 
-.LeftPanel .description > * {
+.LeftPanel .description > .name {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    flex: 1;
 }

src/ui/web/css/themes/element/theme.css

@@ -164,8 +164,30 @@ button.styled {
     margin-right: 10px;
 }
 
-.LeftPanel .description .last-message {
+.LeftPanel .description {
-    font-size: 0.8em;
+    align-items: baseline;
+}
+
+.LeftPanel .name.unread {
+    font-weight: 600;
+}
+
+.LeftPanel .badge {
+    min-width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 1.6rem;
+    box-sizing: border-box;
+    padding: 0.1rem 0.3rem;
+    background-color: #61708b;
+    color: white;
+    font-weight: bold;
+    font-size: 1rem;
+    line-height: 1.4rem;
+    text-align: center;
+}
+
+.LeftPanel .badge.highlighted {
+    background-color: #ff4b55;
 }
 
 a {

src/ui/web/session/RoomTile.js

@@ -21,7 +21,10 @@ export class RoomTile extends TemplateView {
     render(t, vm) {
         return t.li({"className": {"active": vm => vm.isOpen}}, [
             renderAvatar(t, vm, 32),
-            t.div({className: "description"}, t.div({className: {"name": true, unread: vm => vm.isUnread}}, vm => vm.name))
+            t.div({className: "description"}, [
+                t.div({className: {"name": true, unread: vm => vm.isUnread}}, vm => vm.name),
+                t.div({className: {"badge": true, highlighted: vm => vm.isHighlighted, hidden: vm => !vm.badgeCount}}, vm => vm.badgeCount),
+            ])
         ]);
     }