New room list: video room and video call decoration (#29693)

* feat: add video call and EC call to room list item vm

* feat: add video call notification decoration to notification decoration component

* feat: add video call support to room list item view

* feat: add new RoomAvatarView component

* feat: deprecate `DecoratedRoomAvatar`

* feat: use `RoomAvatarView` in room list item

* feat: allow custom class for `RoomAvatar`

* test: update notification decoration

* test: update room list item view

* test: update room list snapshot

* test: add tests for room avatar vm

* test: add tests for room avatar view

* test(e2e): update snapshots

* fix: video room creation rights

* test: e2e add test for public and video room

res/css/_components.pcss

@@ -116,6 +116,7 @@
 @import "./views/auth/_Welcome.pcss";
 @import "./views/avatars/_BaseAvatar.pcss";
 @import "./views/avatars/_DecoratedRoomAvatar.pcss";
+@import "./views/avatars/_RoomAvatarView.pcss";
 @import "./views/avatars/_WidgetAvatar.pcss";
 @import "./views/avatars/_WithPresenceIndicator.pcss";
 @import "./views/beta/_BetaCard.pcss";

res/css/views/avatars/_RoomAvatarView.pcss

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_RoomAvatarView {
+    --room-avatar-size: 32px;
+
+    position: relative;
+
+    /* Keep the container to the same size than the avatar */
+    inline-size: var(--room-avatar-size);
+    block-size: var(--room-avatar-size);
+
+    .mx_RoomAvatarView_RoomAvatar {
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+    }
+
+    .mx_RoomAvatarView_RoomAvatar_icon {
+        mask-image: url("$(res)/img/element-icons/roomlist/room-avatar-view-icon-mask.svg");
+    }
+
+    .mx_RoomAvatarView_RoomAvatar_presence {
+        mask-image: url("$(res)/img/element-icons/roomlist/room-avatar-view-presence-mask.svg");
+    }
+
+    .mx_RoomAvatarView_icon {
+        position: absolute;
+
+        /* Place half the icon inside the avatar */
+        /* Avatar size - (icon size (16px) / 2) */
+        left: calc((var(--room-avatar-size) - 8px));
+        bottom: var(--cpd-space-0-5x);
+    }
+
+    .mx_RoomAvatarView_PresenceDecoration {
+        position: absolute;
+
+        /* Place half the icon inside the avatar */
+        /* Avatar size - (icon size (8px) / 2) */
+        left: calc((var(--room-avatar-size) - 4px));
+        bottom: var(--cpd-space-0-5x);
+    }
+}

res/img/element-icons/roomlist/room-avatar-view-icon-mask.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M32 0H0V32H32C26.4772 32 22 27.5228 22 22C22 16.4772 26.4772 12 32 12V0Z"/>
+</svg>

res/img/element-icons/roomlist/room-avatar-view-presence-mask.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M36 -4H-4V36H36V30.4722C34.9385 31.4223 33.5367 32 32 32C28.6863 32 26 29.3137 26 26C26 22.6863 28.6863 20 32 20C33.5367 20 34.9385 20.5777 36 21.5278V-4Z" />
+</svg>