Move new search experience to a Beta

res/css/structures/_RoomSearch.scss

@@ -35,6 +35,7 @@ limitations under the License.
         mask-repeat: no-repeat;
         background-color: $secondary-content;
         margin-left: 7px;
+        margin-bottom: 2px;
     }
 
     .mx_RoomSearch_input {
@@ -44,14 +45,18 @@ limitations under the License.
         padding: 0;
         height: 100%;
         width: 100%;
-        font-size: $font-12px;
-        line-height: $font-16px;
 
         &:not(.mx_RoomSearch_inputExpanded)::placeholder {
             color: $tertiary-content !important; // !important to override default app-wide styles
         }
     }
 
+    .mx_RoomSearch_input,
+    .mx_RoomSearch_spotlightTriggerText {
+        font-size: $font-12px;
+        line-height: $font-16px;
+    }
+
     &.mx_RoomSearch_hasQuery {
         border-color: $secondary-content;
     }
@@ -108,4 +113,36 @@ limitations under the License.
             }
         }
     }
+
+    &.mx_RoomSearch_spotlightTrigger {
+        cursor: pointer;
+        min-width: 0;
+
+        .mx_RoomSearch_spotlightTriggerText {
+            color: $tertiary-content;
+            flex: 1;
+            min-width: 0;
+            // the following rules are to match that of a real input field
+            overflow: hidden;
+            margin: 9px;
+            font-weight: $font-semi-bold;
+        }
+
+        &:hover {
+            background-color: $tertiary-content;
+
+            .mx_RoomSearch_spotlightTriggerText {
+                color: $background;
+            }
+
+            .mx_RoomSearch_shortcutPrompt {
+                background-color: $background;
+                color: $secondary-content;
+            }
+
+            .mx_RoomSearch_icon {
+                background-color: $background;
+            }
+        }
+    }
 }

res/css/views/beta/_BetaCard.scss

@@ -56,6 +56,14 @@ limitations under the License.
                 line-height: $font-15px;
                 color: $secondary-content;
                 margin-top: 20px;
+
+                > h4 {
+                    margin: 0;
+                }
+
+                > p {
+                    margin-top: 0;
+                }
             }
         }
 
@@ -64,6 +72,7 @@ limitations under the License.
             width: 300px;
             object-fit: contain;
             height: 100%;
+            border-radius: 4px;
         }
     }
 
@@ -90,6 +99,7 @@ limitations under the License.
     border-radius: 8px;
     text-transform: uppercase;
     font-size: 12px;
+    font-weight: $font-semi-bold;
     line-height: 15px;
     color: #FFFFFF;
     display: inline-block;

res/css/views/dialogs/_SpotlightDialog.scss

@@ -223,18 +223,13 @@ limitations under the License.
             text-overflow: ellipsis;
         }
 
-        .mx_SpotlightDialog_recentSearches {
-            overflow-y: hidden;
-            height: calc(100% - 190px);
-
-            > h4 > .mx_AccessibleButton_kind_link {
-                padding: 0;
-                float: right;
-                font-weight: normal;
-                font-size: $font-12px;
-                line-height: $font-15px;
-                color: $secondary-content;
-            }
+        .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
+            padding: 0;
+            float: right;
+            font-weight: normal;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
         }
 
         .mx_SpotlightDialog_enterPrompt {
@@ -253,28 +248,19 @@ limitations under the License.
         font-size: $font-12px;
         line-height: $font-15px;
         color: $secondary-content;
-        padding: 16px 16px 20px;
+        padding: 12px 16px 16px;
         display: flex;
         border-top: 1px solid $quinary-content;
 
+        .mx_BetaCard_betaPill {
+            margin-right: 12px;
+        }
+
         > span {
-            position: relative;
-            padding-left: 20px;
             align-self: center;
 
-            &::before {
-                background-color: $secondary-content;
-                content: "";
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-                width: 16px;
-                height: 16px;
-                position: absolute;
-                left: 0;
-                top: 50%;
-                transform: translateY(-50%);
+            .mx_AccessibleButton_kind_link_inline {
+                padding: 0;
             }
         }
 

src/components/structures/MatrixChat.tsx

@@ -91,7 +91,7 @@ import { RoomUpdateCause } from "../../stores/room-list/models";
 import SecurityCustomisations from "../../customisations/Security";
 import Spinner from "../views/elements/Spinner";
 import QuestionDialog from "../views/dialogs/QuestionDialog";
-import UserSettingsDialog from '../views/dialogs/UserSettingsDialog';
+import UserSettingsDialog, { UserTab } from '../views/dialogs/UserSettingsDialog';
 import CreateGroupDialog from '../views/dialogs/CreateGroupDialog';
 import CreateRoomDialog from '../views/dialogs/CreateRoomDialog';
 import RoomDirectory from './RoomDirectory';
@@ -117,6 +117,7 @@ import { showSpaceInvite } from "../../utils/space";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { ActionPayload } from "../../dispatcher/payloads";
 import { SummarizedNotificationState } from "../../stores/notifications/SummarizedNotificationState";
+import GenericToast from '../views/toasts/GenericToast';
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -1551,6 +1552,38 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 showNotificationsToast(false);
             }
 
+            if (!localStorage.getItem("mx_seen_feature_spotlight_toast")) {
+                setTimeout(() => {
+                    if (SettingsStore.getValue("feature_spotlight", null, true) !== null) return;
+
+                    const key = "BETA_SPOTLIGHT_TOAST";
+                    ToastStore.sharedInstance().addOrReplaceToast({
+                        key,
+                        title: _t("New search beta available"),
+                        props: {
+                            description: _t("We're testing a new search to make finding what you want quicker.\n"),
+                            acceptLabel: _t("Learn more"),
+                            onAccept: () => {
+                                dis.dispatch({
+                                    action: Action.ViewUserSettings,
+                                    initialTabId: UserTab.Labs,
+                                });
+                                localStorage.setItem("mx_seen_feature_spotlight_toast", "true");
+                                ToastStore.sharedInstance().dismissToast(key);
+                            },
+                            rejectLabel: _t("Dismiss"),
+                            onReject: () => {
+                                localStorage.setItem("mx_seen_feature_spotlight_toast", "true");
+                                ToastStore.sharedInstance().dismissToast(key);
+                            },
+                        },
+                        icon: "labs",
+                        component: GenericToast,
+                        priority: 9,
+                    });
+                }, 5 * 60 * 1000); // show after 5 minutes to not overload user with toasts on launch
+            }
+
             dis.fire(Action.FocusSendMessageComposer);
             this.setState({
                 ready: true,

src/components/structures/RoomSearch.tsx

@@ -21,7 +21,7 @@ import classNames from "classnames";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import { ActionPayload } from "../../dispatcher/payloads";
-import AccessibleButton from "../views/elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
 import { Action } from "../../dispatcher/actions";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
@@ -34,6 +34,7 @@ import SettingsStore from "../../settings/SettingsStore";
 import Modal from "../../Modal";
 import SpotlightDialog from "../views/dialogs/SpotlightDialog";
 import { ALTERNATE_KEY_NAME, KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
+import ToastStore from "../../stores/ToastStore";
 
 interface IProps {
     isMinimized: boolean;
@@ -46,11 +47,13 @@ interface IProps {
 interface IState {
     query: string;
     focused: boolean;
+    spotlightBetaEnabled: boolean;
 }
 
 @replaceableComponent("structures.RoomSearch")
 export default class RoomSearch extends React.PureComponent<IProps, IState> {
     private readonly dispatcherRef: string;
+    private readonly betaRef: string;
     private inputRef: React.RefObject<HTMLInputElement> = createRef();
     private searchFilter: NameFilterCondition = new NameFilterCondition();
 
@@ -60,11 +63,13 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         this.state = {
             query: "",
             focused: false,
+            spotlightBetaEnabled: SettingsStore.getValue("feature_spotlight"),
         };
 
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         // clear filter when changing spaces, in future we may wish to maintain a filter per-space
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.clearInput);
+        this.betaRef = SettingsStore.watchSetting("feature_spotlight", null, this.onSpotlightChange);
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
@@ -85,8 +90,18 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
+        SettingsStore.unwatchSetting(this.betaRef);
     }
 
+    private onSpotlightChange = () => {
+        const spotlightBetaEnabled = SettingsStore.getValue("feature_spotlight");
+        if (this.state.spotlightBetaEnabled !== spotlightBetaEnabled) {
+            this.setState({ spotlightBetaEnabled });
+        }
+        // in case the user was in settings at the 5-minute mark, dismiss the toast
+        ToastStore.sharedInstance().dismissToast("BETA_SPOTLIGHT_TOAST");
+    };
+
     private openSpotlight() {
         Modal.createTrackedDialog("Spotlight", "", SpotlightDialog, {}, "mx_SpotlightDialog_wrapper", false, true);
     }
@@ -95,11 +110,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         if (payload.action === Action.ViewRoom && payload.clear_search) {
             this.clearInput();
         } else if (payload.action === 'focus_room_filter') {
-            if (SettingsStore.getValue("feature_spotlight")) {
-                this.openSpotlight();
-            } else {
-                this.inputRef.current?.focus();
-            }
+            this.focus();
         }
     };
 
@@ -110,10 +121,10 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     private openSearch = () => {
-        if (SettingsStore.getValue("feature_spotlight")) {
+        if (this.state.spotlightBetaEnabled) {
             this.openSpotlight();
         } else {
-            defaultDispatcher.dispatch({ action: "show_left_panel" });
+            // dispatched as it needs handling by MatrixChat too
             defaultDispatcher.dispatch({ action: "focus_room_filter" });
         }
     };
@@ -124,14 +135,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
-        if (SettingsStore.getValue("feature_spotlight")) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.openSpotlight();
-        } else {
-            this.setState({ focused: true });
-            ev.target.select();
-        }
+        this.setState({ focused: true });
+        ev.target.select();
     };
 
     private onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {
@@ -159,7 +164,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     public focus = (): void => {
-        if (SettingsStore.getValue("feature_spotlight")) {
+        if (this.state.spotlightBetaEnabled) {
             this.openSpotlight();
         } else {
             this.inputRef.current?.focus();
@@ -172,6 +177,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
             'mx_RoomSearch_hasQuery': this.state.query,
             'mx_RoomSearch_focused': this.state.focused,
             'mx_RoomSearch_minimized': this.props.isMinimized,
+            'mx_RoomSearch_spotlightTrigger': this.state.spotlightBetaEnabled,
         });
 
         const inputClasses = classNames({
@@ -180,8 +186,9 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         });
 
         let icon = (
-            <div className="mx_RoomSearch_icon" onClick={this.focus} />
+            <div className="mx_RoomSearch_icon" />
         );
+
         let input = (
             <input
                 type="text"
@@ -192,10 +199,11 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 onBlur={this.onBlur}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
-                placeholder={SettingsStore.getValue("feature_spotlight") ? _t("Search") : _t("Filter")}
+                placeholder={_t("Filter")}
                 autoComplete="off"
             />
         );
+
         let clearButton = (
             <AccessibleButton
                 tabIndex={-1}
@@ -204,7 +212,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 onClick={this.clearInput}
             />
         );
-        let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt" onClick={this.focus}>
+
+        let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt">
             { isMac ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K" }
         </div>;
 
@@ -221,8 +230,18 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
             shortcutPrompt = null;
         }
 
+        if (this.state.spotlightBetaEnabled) {
+            return <AccessibleButton onClick={this.openSpotlight} className={classes}>
+                { icon }
+                { input && <div className="mx_RoomSearch_spotlightTriggerText">
+                    { _t("Search") }
+                </div> }
+                { shortcutPrompt }
+            </AccessibleButton>;
+        }
+
         return (
-            <div className={classes}>
+            <div className={classes} onClick={this.focus}>
                 { icon }
                 { input }
                 { shortcutPrompt }