Allow jumping to message search from spotlight

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -412,7 +412,8 @@ Please see LICENSE files in the repository root for full details.
             .mx_SpotlightDialog_joinRoomAlias,
             .mx_SpotlightDialog_explorePublicRooms,
             .mx_SpotlightDialog_explorePublicSpaces,
-            .mx_SpotlightDialog_startGroupChat {
+            .mx_SpotlightDialog_startGroupChat,
+            .mx_SpotlightDialog_searchMessages {
                 padding-left: $spacing-32;
                 position: relative;
 
@@ -451,22 +452,14 @@ Please see LICENSE files in the repository root for full details.
                 mask-image: url("$(res)/img/element-icons/group-members.svg");
             }
 
+            .mx_SpotlightDialog_searchMessages::before {
+                mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
+            }
+
             .mx_SpotlightDialog_otherSearches_messageSearchText {
                 font-size: $font-15px;
                 line-height: $font-24px;
             }
-
-            .mx_SpotlightDialog_otherSearches_messageSearchIcon {
-                display: inline-block;
-                width: 24px;
-                height: 24px;
-                background-color: $secondary-content;
-                vertical-align: text-bottom;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-                mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
-            }
         }
 
         .mx_SpotlightDialog_result_details {

res/themes/light-high-contrast/css/_light-high-contrast.pcss

@@ -163,7 +163,8 @@ $accent-1400: var(--cpd-color-green-1400);
                     &.mx_SpotlightDialog_startChat::before,
                     &.mx_SpotlightDialog_joinRoomAlias::before,
                     &.mx_SpotlightDialog_explorePublicRooms::before,
-                    &.mx_SpotlightDialog_startGroupChat::before {
+                    &.mx_SpotlightDialog_startGroupChat::before,
+                    &.mx_SpotlightDialog_searchMessages::before {
                         background-color: $background !important;
                     }
 

src/components/structures/RightPanel.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ChangeEvent } from "react";
+import React from "react";
 import { type Room, type RoomState, RoomStateEvent, RoomMember, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { throttle } from "lodash";
 
@@ -49,8 +49,9 @@ interface RoomlessProps extends BaseProps {
 interface RoomProps extends BaseProps {
     room: Room;
     permalinkCreator: RoomPermalinkCreator;
-    onSearchChange?: (e: ChangeEvent) => void;
+    onSearchChange?: (term: string) => void;
     onSearchCancel?: () => void;
+    searchTerm?: string;
 }
 
 type Props = XOR<RoomlessProps, RoomProps>;
@@ -260,6 +261,7 @@ export default class RightPanel extends React.Component<Props, IState> {
                             permalinkCreator={this.props.permalinkCreator!}
                             onSearchChange={this.props.onSearchChange}
                             onSearchCancel={this.props.onSearchCancel}
+                            searchTerm={this.props.searchTerm}
                             focusRoomSearch={cardState?.focusRoomSearch}
                         />
                     );

src/components/structures/RoomView.tsx

@@ -10,7 +10,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, {
-    type ChangeEvent,
     type ComponentProps,
     createRef,
     type ReactElement,
@@ -133,6 +132,7 @@ import RoomSearchAuxPanel from "../views/rooms/RoomSearchAuxPanel";
 import { PinnedMessageBanner } from "../views/rooms/PinnedMessageBanner";
 import { ScopedRoomContextProvider, useScopedRoomContext } from "../../contexts/ScopedRoomContext";
 import { DeclineAndBlockInviteDialog } from "../views/dialogs/DeclineAndBlockInviteDialog";
+import { type FocusMessageSearchPayload } from "../../dispatcher/payloads/FocusMessageSearchPayload.ts";
 
 const DEBUG = false;
 const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
@@ -1244,6 +1244,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             case Action.View3pidInvite:
                 onView3pidInvite(payload, RightPanelStore.instance);
                 break;
+            case Action.FocusMessageSearch:
+                if ((payload as FocusMessageSearchPayload).initialText) {
+                    this.onSearch(payload.initialText);
+                }
+                break;
         }
     };
 
@@ -1806,8 +1811,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         defaultDispatcher.fire(Action.ViewRoomDirectory);
     };
 
-    private onSearchChange = debounce((e: ChangeEvent): void => {
-        const term = (e.target as HTMLInputElement).value;
+    private onSearchChange = debounce((term: string): void => {
         this.onSearch(term);
     }, 300);
 
@@ -2487,6 +2491,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 e2eStatus={this.state.e2eStatus}
                 onSearchChange={this.onSearchChange}
                 onSearchCancel={this.onCancelSearchClick}
+                searchTerm={this.state.search?.term ?? ""}
             />
         ) : undefined;
 

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -608,6 +608,21 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                             {filterToLabel(Filter.People)}
                         </Option>
                     )}
+                    {filter === null && (
+                        <Option
+                            id="mx_SpotlightDialog_button_searchMessages"
+                            className="mx_SpotlightDialog_searchMessages"
+                            onClick={() => {
+                                defaultDispatcher.dispatch({
+                                    action: Action.FocusMessageSearch,
+                                    initialText: trimmedQuery,
+                                });
+                                onFinished();
+                            }}
+                        >
+                            {_t("spotlight_dialog|messages_label")}
+                        </Option>
+                    )}
                 </div>
             </div>
         );
@@ -997,28 +1012,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
             );
         }
 
-        let messageSearchSection: JSX.Element | undefined;
-        if (filter === null) {
-            messageSearchSection = (
-                <div
-                    className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
-                    role="group"
-                    aria-labelledby="mx_SpotlightDialog_section_messageSearch"
-                >
-                    <h4 id="mx_SpotlightDialog_section_messageSearch">
-                        {_t("spotlight_dialog|message_search_section_title")}
-                    </h4>
-                    <div className="mx_SpotlightDialog_otherSearches_messageSearchText">
-                        {_t(
-                            "spotlight_dialog|search_messages_hint",
-                            {},
-                            { icon: () => <div className="mx_SpotlightDialog_otherSearches_messageSearchIcon" /> },
-                        )}
-                    </div>
-                </div>
-            );
-        }
-
         content = (
             <>
                 {peopleSection}
@@ -1031,7 +1024,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                 {hiddenResultsSection}
                 {otherSearchesSection}
                 {groupChatSection}
-                {messageSearchSection}
             </>
         );
     } else {

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ChangeEvent, useContext, useEffect, useRef, useState } from "react";
+import React, { type JSX, useContext, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import {
     MenuItem,
@@ -52,7 +52,6 @@ import { ShareDialog } from "../dialogs/ShareDialog";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import { TimelineRenderingType } from "../../../contexts/RoomContext";
 import RoomName from "../elements/RoomName";
 import ExportDialog from "../dialogs/ExportDialog";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
@@ -71,7 +70,6 @@ import { Box } from "../../utils/Box";
 import { useDispatcher } from "../../../hooks/useDispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { Key } from "../../../Keyboard";
-import { useTransition } from "../../../hooks/useTransition";
 import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
 import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
 import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
@@ -82,9 +80,10 @@ import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryC
 interface IProps {
     room: Room;
     permalinkCreator: RoomPermalinkCreator;
-    onSearchChange?: (e: ChangeEvent) => void;
+    onSearchChange?: (term: string) => void;
     onSearchCancel?: () => void;
     focusRoomSearch?: boolean;
+    searchTerm?: string;
 }
 
 const onRoomMembersClick = (): void => {
@@ -180,6 +179,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
     onSearchChange,
     onSearchCancel,
     focusRoomSearch,
+    searchTerm,
 }) => {
     const cli = useContext(MatrixClientContext);
 
@@ -244,19 +244,6 @@ const RoomSummaryCard: React.FC<IProps> = ({
             searchInputRef.current?.focus();
         }
     });
-    // Clear the search field when the user leaves the search view
-    useTransition(
-        (prevTimelineRenderingType) => {
-            if (
-                prevTimelineRenderingType === TimelineRenderingType.Search &&
-                roomContext.timelineRenderingType !== TimelineRenderingType.Search &&
-                searchInputRef.current
-            ) {
-                searchInputRef.current.value = "";
-            }
-        },
-        [roomContext.timelineRenderingType],
-    );
 
     const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
     const roomInfo = (
@@ -332,7 +319,10 @@ const RoomSummaryCard: React.FC<IProps> = ({
             <Search
                 placeholder={_t("room|search|placeholder")}
                 name="room_message_search"
-                onChange={onSearchChange}
+                onChange={(e) => {
+                    onSearchChange(e.currentTarget.value);
+                }}
+                value={searchTerm}
                 className="mx_no_textinput"
                 ref={searchInputRef}
                 autoFocus={focusRoomSearch}

src/dispatcher/actions.ts

@@ -362,7 +362,7 @@ export enum Action {
     View3pidInvite = "view_3pid_invite",
 
     /**
-     * Opens right panel room summary and focuses the search input
+     * Opens right panel room summary and focuses the search input. Use with a FocusMessageSearchPayload.
      */
     FocusMessageSearch = "focus_search",
 

src/dispatcher/payloads/FocusMessageSearchPayload.ts

@@ -0,0 +1,15 @@
+/*
+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.
+*/
+
+import { type Action } from "../actions";
+import { type ActionPayload } from "../payloads";
+
+export interface FocusMessageSearchPayload extends ActionPayload {
+    action: Action.FocusMessageSearch;
+
+    initialText?: string;
+}

src/i18n/strings/en_EN.json

@@ -3226,7 +3226,7 @@
         "heading_without_query": "Search for",
         "join_button_text": "Join %(roomAddress)s",
         "keyboard_scroll_hint": "Use <arrows/> to scroll",
-        "message_search_section_title": "Other searches",
+        "messages_label": "Messages",
         "other_rooms_in_space": "Other rooms in %(spaceName)s",
         "public_rooms_label": "Public rooms",
         "public_spaces_label": "Public spaces",
@@ -3236,7 +3236,6 @@
         "result_may_be_hidden_privacy_warning": "Some results may be hidden for privacy",
         "result_may_be_hidden_warning": "Some results may be hidden",
         "search_dialog": "Search Dialog",
-        "search_messages_hint": "To search messages, look for this icon at the top of a room <icon/>",
         "spaces_title": "Spaces you're in",
         "start_group_chat_button": "Start a group chat"
     },

test/test-utils/test-utils.ts

@@ -309,6 +309,8 @@ export function createTestClient(): MatrixClient {
         pushProcessor: {
             getPushRuleById: jest.fn(),
         },
+        search: jest.fn().mockResolvedValue({}),
+        processRoomEventsSearch: jest.fn().mockResolvedValue({ highlights: [], results: [] }),
     } as unknown as MatrixClient;
 
     client.reEmitter = new ReEmitter(client);