Add way to join room address via new search dialog (#7830)

res/css/views/dialogs/_SpotlightDialog.scss

@@ -174,6 +174,7 @@ limitations under the License.
 
         .mx_SpotlightDialog_otherSearches {
             .mx_SpotlightDialog_startChat,
+            .mx_SpotlightDialog_joinRoomAlias,
             .mx_SpotlightDialog_explorePublicRooms {
                 padding-left: 32px;
                 position: relative;
@@ -197,6 +198,10 @@ limitations under the License.
                 mask-image: url('$(res)/img/element-icons/room/members.svg');
             }
 
+            .mx_SpotlightDialog_joinRoomAlias::before {
+                mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
+            }
+
             .mx_SpotlightDialog_explorePublicRooms::before {
                 mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
             }

src/components/views/dialogs/SpotlightDialog.tsx

@@ -72,6 +72,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { getMetaSpaceName } from "../../../stores/spaces";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import { getCachedRoomIDForAlias } from "../../../RoomAliasCache";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
@@ -413,11 +414,42 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
             </div>;
         }
 
+        let joinRoomSection: JSX.Element;
+        if (trimmedQuery.startsWith("#") &&
+            trimmedQuery.includes(":") &&
+            (!getCachedRoomIDForAlias(trimmedQuery) || !cli.getRoom(getCachedRoomIDForAlias(trimmedQuery)))
+        ) {
+            joinRoomSection = <div className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches" role="group">
+                <div>
+                    <Option
+                        id="mx_SpotlightDialog_button_joinRoomAlias"
+                        className="mx_SpotlightDialog_joinRoomAlias"
+                        onClick={(ev) => {
+                            defaultDispatcher.dispatch<ViewRoomPayload>({
+                                action: Action.ViewRoom,
+                                room_alias: trimmedQuery,
+                                auto_join: true,
+                                _trigger: "WebUnifiedSearch",
+                                _viaKeyboard: ev.type !== "click",
+                            });
+                            onFinished();
+                        }}
+                    >
+                        { _t("Join %(roomAddress)s", {
+                            roomAddress: trimmedQuery,
+                        }) }
+                        <div className="mx_SpotlightDialog_enterPrompt">↵</div>
+                    </Option>
+                </div>
+            </div>;
+        }
+
         content = <>
             { peopleSection }
             { roomsSection }
             { spacesSection }
             { spaceRoomsSection }
+            { joinRoomSection }
             <div className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches" role="group">
                 <h4>{ _t('Use "%(query)s" to search', { query }) }</h4>
                 <div>

src/i18n/strings/en_EN.json

@@ -2794,6 +2794,7 @@
     "Settings - %(spaceName)s": "Settings - %(spaceName)s",
     "Spaces you're in": "Spaces you're in",
     "Other rooms in %(spaceName)s": "Other rooms in %(spaceName)s",
+    "Join %(roomAddress)s": "Join %(roomAddress)s",
     "Use \"%(query)s\" to search": "Use \"%(query)s\" to search",
     "Public rooms": "Public rooms",
     "Other searches": "Other searches",