Redesign room search interface

playwright/e2e/timeline/timeline.spec.ts

@@ -781,10 +781,10 @@ test.describe("Timeline", () => {
 
                 await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Search" }).click();
 
-                await expect(page.locator(".mx_SearchBar")).toMatchScreenshot("search-bar-on-timeline.png");
+                await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill("Message");
+                await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter");
 
-                await page.locator(".mx_SearchBar_input").getByRole("textbox").fill("Message");
-                await page.locator(".mx_SearchBar_input").getByRole("textbox").press("Enter");
+                await expect(page.locator(".mx_RoomSearchAuxPanel")).toMatchScreenshot("search-aux-panel.png");
 
                 for (const locator of await page
                     .locator(".mx_EventTile:not(.mx_EventTile_contextual) .mx_EventTile_searchHighlight")
@@ -822,8 +822,8 @@ test.describe("Timeline", () => {
                 await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Search" }).click();
 
                 // Search the string to display both the message and TextualEvent on search results panel
-                await page.locator(".mx_SearchBar").getByRole("textbox").fill(stringToSearch);
-                await page.locator(".mx_SearchBar").getByRole("textbox").press("Enter");
+                await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill(stringToSearch);
+                await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter");
 
                 // On search results panel
                 const resultsPanel = page.locator(".mx_RoomView_searchResultsPanel");

res/css/_common.pcss

@@ -177,9 +177,9 @@ a:visited {
     color: $accent-alt;
 }
 
-input[type="text"],
-input[type="search"],
-input[type="password"] {
+:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="text"],
+:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="search"],
+:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="password"] {
     padding: 9px;
     font: var(--cpd-font-body-md-semibold);
     font-weight: var(--cpd-font-weight-semibold);

res/css/_components.pcss

@@ -306,10 +306,10 @@
 @import "./views/rooms/_RoomListHeader.pcss";
 @import "./views/rooms/_RoomPreviewBar.pcss";
 @import "./views/rooms/_RoomPreviewCard.pcss";
+@import "./views/rooms/_RoomSearchAuxPanel.pcss";
 @import "./views/rooms/_RoomSublist.pcss";
 @import "./views/rooms/_RoomTile.pcss";
 @import "./views/rooms/_RoomUpgradeWarningBar.pcss";
-@import "./views/rooms/_SearchBar.pcss";
 @import "./views/rooms/_SendMessageComposer.pcss";
 @import "./views/rooms/_SpaceScopeHeader.pcss";
 @import "./views/rooms/_Stickers.pcss";

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -238,25 +238,12 @@ limitations under the License.
     padding: 15px 12px;
 }
 
-.mx_RoomSummaryCard_search input {
-    /* Overriding very broad CSS rules */
-    border: 0 !important;
-    margin: 0 !important;
-    cursor: pointer;
-}
+.mx_RoomSummaryCard_search {
+    flex-grow: 1;
+    min-width: 0;
 
-.mx_RoomSummaryCard_searchBtn {
-    background: var(--cpd-color-bg-canvas-default);
-    color: var(--cpd-color-icon-primary);
-    border: 1px solid var(--cpd-color-gray-400);
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    padding: var(--cpd-space-2x);
-    cursor: pointer;
-
-    &:hover {
-        background: var(--cpd-color-bg-subtle-primary);
+    input[type="search"]::-webkit-search-cancel-button {
+        display: unset; /* override _common.pcss which inhibits this */
     }
 }
 

res/css/views/rooms/_RoomSearchAuxPanel.pcss

@@ -0,0 +1,72 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomSearchAuxPanel {
+    /* use `min-height` rather than height, to allow room for the text to wrap if the window is narrow */
+    min-height: 84px;
+    display: flex;
+    align-items: center;
+    border-color: var(--cpd-color-bg-canvas-default);
+    border-style: solid;
+    border-width: 1px 0;
+    padding: var(--cpd-space-3x);
+    box-sizing: border-box;
+    gap: var(--cpd-space-2x);
+
+    .mx_RoomSearchAuxPanel_summary {
+        flex-grow: 1;
+        display: inherit; /* flex */
+        gap: var(--cpd-space-2x);
+        align-items: center;
+        overflow: hidden;
+
+        > svg {
+            padding: var(--cpd-space-2x);
+            border-radius: var(--cpd-space-2x);
+            background-color: var(--cpd-color-bg-subtle-secondary);
+            color: var(--cpd-color-icon-secondary);
+            flex-shrink: 0;
+        }
+
+        .mx_RoomSearchAuxPanel_summary_text {
+            display: flex;
+            flex-direction: column;
+            font-size: $font-15px;
+            line-height: $font-22px;
+            overflow: hidden;
+
+            span {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .mx_SearchWarning {
+            display: contents;
+            font-size: $font-13px;
+            line-height: $font-20px;
+            color: var(--cpd-color-text-secondary);
+        }
+    }
+
+    .mx_RoomSearchAuxPanel_buttons {
+        display: inherit; /* flex */
+        gap: var(--cpd-space-6x);
+        align-items: center;
+        flex-shrink: 0;
+    }
+}

src/components/structures/RightPanel.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ChangeEvent } from "react";
 import { Room, RoomState, RoomStateEvent, RoomMember, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { throttle } from "lodash";
 
@@ -57,7 +57,8 @@ interface RoomlessProps extends BaseProps {
 interface RoomProps extends BaseProps {
     room: Room;
     permalinkCreator: RoomPermalinkCreator;
-    onSearchClick?: () => void;
+    onSearchChange?: (e: ChangeEvent) => void;
+    onSearchCancel?: () => void;
 }
 
 type Props = XOR<RoomlessProps, RoomProps>;
@@ -296,7 +297,9 @@ export default class RightPanel extends React.Component<Props, IState> {
                             onClose={this.onClose}
                             // whenever RightPanel is passed a room it is passed a permalinkcreator
                             permalinkCreator={this.props.permalinkCreator!}
-                            onSearchClick={this.props.onSearchClick}
+                            onSearchChange={this.props.onSearchChange}
+                            onSearchCancel={this.props.onSearchCancel}
+                            focusRoomSearch={cardState?.focusRoomSearch}
                         />
                     );
                 }