New room list: change icon and label of menu item for to start a DM (#30470)

* feat: change `New message` to `Start chat` and change icon

* feat: update the room list empty states

* test: update existing tests

* test(e2e): update playwright tests

src/components/views/rooms/RoomListPanel/EmptyRoomList.tsx

@@ -7,7 +7,7 @@
 
 import React, { type JSX, type PropsWithChildren } from "react";
 import { Button } from "@vector-im/compound-web";
-import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
+import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
 
 import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
@@ -148,8 +148,8 @@ function DefaultPlaceholder({ vm }: DefaultPlaceholderProps): JSX.Element {
                 direction="column"
                 gap="var(--cpd-space-4x)"
             >
-                <Button size="sm" kind="secondary" Icon={UserAddIcon} onClick={vm.createChatRoom}>
-                    {_t("action|new_message")}
+                <Button size="sm" kind="secondary" Icon={ChatIcon} onClick={vm.createChatRoom}>
+                    {_t("action|start_chat")}
                 </Button>
                 {vm.canCreateRoom && (
                     <Button size="sm" kind="secondary" Icon={RoomIcon} onClick={vm.createRoom}>

src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx

@@ -14,6 +14,7 @@ import HomeIcon from "@vector-im/compound-design-tokens/assets/web/icons/home";
 import PreferencesIcon from "@vector-im/compound-design-tokens/assets/web/icons/preferences";
 import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
+import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 
 import { _t } from "../../../../languageHandler";
 import { Flex } from "../../../../shared-components/utils/Flex";
@@ -49,7 +50,7 @@ export function RoomListHeaderView(): JSX.Element {
                 {vm.displayComposeMenu ? (
                     <ComposeMenu vm={vm} />
                 ) : (
-                    <IconButton aria-label={_t("action|new_message")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
+                    <IconButton aria-label={_t("action|start_chat")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
                         <ComposeIcon color="var(--cpd-color-icon-secondary)" />
                     </IconButton>
                 )}
@@ -143,12 +144,7 @@ function ComposeMenu({ vm }: ComposeMenuProps): JSX.Element {
                 </IconButton>
             }
         >
-            <MenuItem
-                Icon={UserAddIcon}
-                label={_t("action|new_message")}
-                onSelect={vm.createChatRoom}
-                hideChevron={true}
-            />
+            <MenuItem Icon={ChatIcon} label={_t("action|start_chat")} onSelect={vm.createChatRoom} hideChevron={true} />
             {vm.canCreateRoom && (
                 <MenuItem Icon={RoomIcon} label={_t("action|new_room")} onSelect={vm.createRoom} hideChevron={true} />
             )}

src/i18n/strings/en_EN.json

@@ -93,7 +93,6 @@
         "maximise": "Maximise",
         "mention": "Mention",
         "minimise": "Minimise",
-        "new_message": "New message",
         "new_room": "New room",
         "new_video_room": "New video room",
         "next": "Next",