Refactor UnreadNotificationBadge to shared MVVM view (#33672)

* Refactor notification badge to shared MVVM view

* Bage icons Images

* Narrow unread notification badge refactor scope

* Align unread badge MVVM pattern

* Reduce unread badge viewmodel duplication

* Document unread badge viewmodel props

* Remove legacy badge classes from shared view

* Update css for knocked door

* Update thread badge e2e selector

* Update read receipt badge e2e selectors

apps/web/playwright/e2e/read-receipts/index.ts

@@ -557,7 +557,7 @@ class Helpers {
      */
     async assertReadThread(rootMessage: string) {
         const tile = await this.getThreadListTile(rootMessage);
-        await expect(tile.locator(".mx_NotificationBadge")).not.toBeVisible();
+        await expect(tile.getByTestId("notification-badge")).not.toBeVisible();
     }
 
     /**
@@ -566,7 +566,7 @@ class Helpers {
      */
     async assertUnreadThread(rootMessage: string) {
         const tile = await this.getThreadListTile(rootMessage);
-        await expect(tile.locator(".mx_NotificationBadge")).toBeVisible();
+        await expect(tile.getByTestId("notification-badge")).toBeVisible();
     }
 
     /**

apps/web/playwright/e2e/threads/threads.spec.ts

@@ -269,7 +269,9 @@ test.describe("Threads", () => {
         // Check the number of the replies
         await expect(locator.locator(".mx_ThreadPanel_replies_amount").getByText("2")).toBeAttached();
         // Make sure the notification dot is visible
-        await expect(locator.locator(".mx_NotificationBadge_visible")).toBeVisible();
+        const notificationBadge = locator.getByTestId("notification-badge");
+        await expect(notificationBadge).toBeVisible();
+        await expect(notificationBadge).toHaveAttribute("data-badge-type", "dot");
         // User opens thread via threads list
         await locator.locator(".mx_EventTile_line").click();