Improve invite dialog ui - Part 1 (#30764)

* refactor: move `humanize` in shared components

* feat: add `RichItem` component

* feat: add `RichList` component

* refactor: use `RichList` and `RichItem` in `InviteDialog`

* fix: exclude `InviteDialog` button to css override

* test: update selector in invite dialog

* test(e2e): update crypto test to use correct selector

* test(e2e): update invite dialog

* test: add test for `humanize.ts`

* fix: add space between the list and the input when the list is scrollable

* test(e2e): update screenshots

Author: florianduros

playwright/e2e/crypto/crypto.spec.ts

@@ -24,7 +24,7 @@ const startDMWithBob = async (page: Page, bob: Bot) => {
     await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
     await page.getByRole("menuitem", { name: "Start chat" }).click();
     await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
-    await page.locator(".mx_InviteDialog_tile_nameStack_name").getByText("Bob").click();
+    await page.getByRole("option", { name: bob.credentials.displayName }).click();
     await expect(
         page.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText("Bob"),
     ).toBeVisible();

playwright/e2e/invite/invite-dialog.spec.ts

@@ -50,11 +50,9 @@ test.describe("Invite dialog", function () {
         await expect(other.locator(".mx_InviteDialog_identityServer")).toBeVisible();
 
         // Assert that the bot id is rendered properly
-        await expect(
-            other.locator(".mx_InviteDialog_tile_nameStack_userId").getByText(bot.credentials.userId),
-        ).toBeVisible();
+        await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
 
-        await other.locator(".mx_InviteDialog_tile_nameStack_name").getByText(botName).click();
+        await other.getByRole("option", { name: botName }).click();
 
         await expect(
             other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
@@ -94,10 +92,8 @@ test.describe("Invite dialog", function () {
 
             await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
 
-            await expect(
-                other.locator(".mx_InviteDialog_tile_nameStack").getByText(bot.credentials.userId),
-            ).toBeVisible();
-            await other.locator(".mx_InviteDialog_tile_nameStack").getByText(botName).click();
+            await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
+            await other.getByRole("option", { name: botName }).click();
 
             await expect(
                 other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),