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/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();