Only render NotificationBadge when needed (#9493)

Author: Germain

cypress/e2e/sliding-sync/sliding-sync.ts

@@ -235,7 +235,7 @@ describe("Sliding Sync", () => {
             "Test Room", "Dummy",
         ]);
 
-        cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.be.visible");
+        cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.exist");
     });
 
     it("should update user settings promptly", () => {

src/components/views/rooms/NotificationBadge.tsx

@@ -111,7 +111,12 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
     public render(): React.ReactElement {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { notification, showUnsentTooltip, onClick } = this.props;
+        const { notification, showUnsentTooltip, forceCount, onClick } = this.props;
+
+        if (notification.isIdle) return null;
+        if (forceCount) {
+            if (!notification.hasUnreadCount) return null; // Can't render a badge
+        }
 
         let label: string;
         let tooltip: JSX.Element;