Move new search experience to a Beta (#7718)

Author: t3chguy

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,21 @@ 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;
+            height: min-content;
+            align-self: center;
+        }
+
         > 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;
             }
         }
 

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -54,7 +54,7 @@ limitations under the License.
 }
 
 .mx_UserSettingsDialog_labsIcon::before {
-    mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
+    mask-image: url('$(res)/img/element-icons/settings/flask.svg');
 }
 
 .mx_UserSettingsDialog_mjolnirIcon::before {

res/img/betas/new_search_experience.gif

@@ -158,6 +158,20 @@ function guessDMRoomTargetId(room: Room, myUserId: string): string {
     return oldestUser.userId;
 }
 
+export function spaceContextDetailsText(space: Room): string {
+    if (!space.isSpaceRoom()) return undefined;
+
+    const [parent, ...otherParents] = SpaceStore.instance.getKnownParents(space.roomId);
+    if (parent) {
+        return _t("%(spaceName)s and %(count)s others", {
+            spaceName: space.client.getRoom(parent).name,
+            count: otherParents.length,
+        });
+    }
+
+    return space.getCanonicalAlias();
+}
+
 export function roomContextDetailsText(room: Room): string {
     if (room.isSpaceRoom()) return undefined;
 

res/img/element-icons/settings/flask.svg

@@ -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,42 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 showNotificationsToast(false);
             }
 
+            if (!localStorage.getItem("mx_seen_feature_spotlight_toast")) {
+                setTimeout(() => {
+                    // Skip the toast if the beta is already enabled or the user has changed the setting from default
+                    if (SettingsStore.getValue("feature_spotlight") ||
+                        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,