Iterate Spotlight

Author: t3chguy

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -39,6 +39,7 @@ limitations under the License.
         content: '';
         width: 8px;
         height: 8px;
+        right: 0;
         position: absolute;
         border-radius: 8px;
     }

res/css/views/dialogs/_SpotlightDialog.scss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_SpotlightDialog_wrapper .mx_Dialog {
-    border-radius: 16px;
+    border-radius: 8px;
     overflow-y: initial;
     position: relative;
     height: 60%;
@@ -54,12 +54,19 @@ limitations under the License.
         margin-bottom: 0;
     }
 
-    .mx_SearchBox {
+    .mx_SpotlightDialog_searchBox {
         margin: 0;
         border: none;
+        padding: 12px 16px;
         border-bottom: 1px solid $system;
 
         > input {
+            display: block;
+            box-sizing: border-box;
+            background-color: transparent;
+            width: 100%;
+            height: 32px;
+            padding: 0;
             color: $tertiary-content;
             font-weight: normal;
             font-size: $font-15px;
@@ -86,30 +93,39 @@ limitations under the License.
             }
         }
 
+        .mx_SpotlightDialog_otherSearches {
+            .mx_AccessibleButton + .mx_AccessibleButton {
+                margin-left: 12px;
+            }
+        }
+
         .mx_SpotlightDialog_recentlyViewed {
             > div {
                 display: flex;
                 white-space: nowrap;
-                overflow-x: auto;
+                overflow-x: hidden;
             }
 
             .mx_AccessibleButton {
-                border: 1px solid $quinary-content;
                 border-radius: 8px;
-                padding: 6px 8px 4px 6px;
+                padding: 4px;
                 color: $primary-content;
-                font-size: $font-15px;
-                line-height: $font-20px;
+                font-size: $font-12px;
+                line-height: $font-15px;
                 display: inline-block;
-
-                .mx_BaseAvatar {
-                    margin-right: 8px;
-                    display: inline-block;
-                    height: 20px;
+                width: 50px;
+                min-width: 50px;
+                box-sizing: border-box;
+                text-align: center;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                .mx_DecoratedRoomAvatar {
+                    margin: 0 5px; // maintain centering
                 }
 
                 & + .mx_AccessibleButton {
-                    margin-left: 12px;
+                    margin-left: 16px;
                 }
 
                 &:hover, &[aria-selected=true] {
@@ -156,24 +172,6 @@ limitations under the License.
         .mx_SpotlightDialog_recentSearches {
             overflow-y: hidden;
             height: calc(100% - 100px);
-
-            > h4 {
-                padding-left: 20px;
-                position: relative;
-
-                &::before {
-                    position: absolute;
-                    content: "";
-                    width: 16px;
-                    height: 16px;
-                    left: 0;
-                    mask-repeat: no-repeat;
-                    mask-size: contain;
-                    mask-position: center;
-                    background-color: $secondary-content;
-                    mask-image: url("$(res)/img/element-icons/recent.svg");
-                }
-            }
         }
 
         .mx_SpotlightDialog_enterPrompt {

src/components/structures/RoomView.tsx

@@ -931,6 +931,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     this.messagePanel?.jumpToLiveTimeline();
                 }
                 break;
+
+            case Action.SearchRoomTimeline:
+                this.setState({
+                    searching: true,
+                });
+                break;
         }
     };
 

src/components/views/dialogs/SpotlightDialog.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, {
+    ChangeEvent,
     ComponentProps,
     KeyboardEvent,
     useCallback,
@@ -31,7 +32,6 @@ import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
 import { IDialogProps } from "./IDialogProps";
 import { _t } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
-import SearchBox from "../../structures/SearchBox";
 import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
 import RoomAvatar from "../avatars/RoomAvatar";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
@@ -53,6 +53,8 @@ import { mediaFromMxc } from "../../../customisations/Media";
 import BaseAvatar from "../avatars/BaseAvatar";
 import Spinner from "../elements/Spinner";
 import { roomContextDetailsText } from "../../../Rooms";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import { Action } from "../../../dispatcher/actions";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50;
@@ -147,7 +149,7 @@ const useSpaceResults = (space?: Room, query?: string): [IHierarchyRoom[], boole
 const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) => {
     const cli = MatrixClientPeg.get();
     const rovingContext = useContext(RovingTabIndexContext);
-    const [query, _setQuery] = useState("");
+    const [query, _setQuery] = useState(initialText);
     const recentSearches = useRecentSearches();
 
     const results = useMemo<Room[] | null>(() => {
@@ -165,7 +167,8 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
     const activeSpace = SpaceStore.instance.activeSpaceRoom;
     const [spaceResults, spaceResultsLoading] = useSpaceResults(activeSpace, query);
 
-    const setQuery = (newQuery: string): void => {
+    const setQuery = (e: ChangeEvent<HTMLInputElement>): void => {
+        const newQuery = e.currentTarget.value;
         _setQuery(newQuery);
         if (!query !== !newQuery) {
             setImmediate(() => {
@@ -285,18 +288,37 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
         </>;
     } else {
         content = <>
+            <div className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches" role="group">
+                <h4>{ _t("Search for") }</h4>
+                <div>
+                    <AccessibleButton kind="primary_outline" onClick={() => {
+                        // TODO does not work when user is on Home, or a Space.
+                        defaultDispatcher.fire(Action.SearchRoomTimeline);
+                        onFinished();
+                    }}>
+                        { _t("Messages") }
+                    </AccessibleButton>
+                    <AccessibleButton kind="primary_outline" onClick={() => {
+                        defaultDispatcher.fire(Action.ViewRoomDirectory);
+                        onFinished();
+                    }}>
+                        { _t("Public Rooms") }
+                    </AccessibleButton>
+                </div>
+            </div>
+
             <div className="mx_SpotlightDialog_section mx_SpotlightDialog_recentlyViewed" role="group">
                 <h4>{ _t("Recently viewed") }</h4>
                 <div>
-                    { BreadcrumbsStore.instance.rooms.map(room => (
+                    { BreadcrumbsStore.instance.rooms.slice(0, 10).map(room => (
                         <Option
                             id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`}
                             key={room.roomId}
                             onClick={() => {
                                 viewRoom(room.roomId);
                             }}
                         >
-                            <RoomAvatar room={room} width={20} height={20} />
+                            <DecoratedRoomAvatar room={room} avatarSize={32} />
                             { room.name }
                         </Option>
                     )) }
@@ -383,15 +405,19 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
             hasCancel={false}
             onKeyDown={onDialogKeyDown}
         >
-            <SearchBox
-                autoFocus
-                placeholder={_t("Search for anything")}
-                initialValue={initialText}
-                onSearch={setQuery}
-                onKeyDown={onKeyDown}
-                aria-owns="mx_SpotlightDialog_content"
-                aria-activedescendant={activeDescendant}
-            />
+            <div className="mx_SpotlightDialog_searchBox mx_textinput">
+                <input
+                    autoFocus
+                    type="text"
+                    autoComplete="off"
+                    placeholder={_t("Search for anything")}
+                    value={query}
+                    onChange={setQuery}
+                    onKeyDown={onKeyDown}
+                    aria-owns="mx_SpotlightDialog_content"
+                    aria-activedescendant={activeDescendant}
+                />
+            </div>
 
             <div id="mx_SpotlightDialog_content" role="listbox" aria-activedescendant={activeDescendant}>
                 { content }

src/dispatcher/actions.ts

@@ -188,7 +188,7 @@ export enum Action {
     SwitchSpace = "switch_space",
 
     /**
-     * Signals to the visible space hierarchy that a change has occurred an that it should refresh.
+     * Signals to the visible space hierarchy that a change has occurred and that it should refresh.
      */
     UpdateSpaceHierarchy = "update_space_hierarchy",
 
@@ -203,4 +203,9 @@ export enum Action {
      * Fires when a user starts to edit event (e.g. up arrow in compositor)
      */
     EditEvent = "edit_event",
+
+    /**
+     * Searches the currently open room. No additional payload information required.
+     */
+    SearchRoomTimeline = "search_room_timeline",
 }

src/i18n/strings/en_EN.json

@@ -851,6 +851,7 @@
     "New layout switcher (with message bubbles)": "New layout switcher (with message bubbles)",
     "Meta Spaces": "Meta Spaces",
     "Use new room breadcrumbs": "Use new room breadcrumbs",
+    "New spotlight search experience": "New spotlight search experience",
     "Don't send read receipts": "Don't send read receipts",
     "Font size": "Font size",
     "Use custom size": "Use custom size",
@@ -2681,6 +2682,12 @@
     "Command Help": "Command Help",
     "Space settings": "Space settings",
     "Settings - %(spaceName)s": "Settings - %(spaceName)s",
+    "Other rooms in %(spaceName)s": "Other rooms in %(spaceName)s",
+    "Search for": "Search for",
+    "Public Rooms": "Public Rooms",
+    "Recent searches": "Recent searches",
+    "Use <arrows/> to scroll results": "Use <arrows/> to scroll results",
+    "Search for anything": "Search for anything",
     "To help us prevent this in future, please <a>send us logs</a>.": "To help us prevent this in future, please <a>send us logs</a>.",
     "Missing session data": "Missing session data",
     "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.",