Integrate searching public rooms and people into the new search experience (#8707)

* Implement searching for public rooms and users in new search experience
* Implement loading indicator for spotlight results
* Moved spotlight dialog into own subfolder
* Extract search result avatar into separate component
* Build generic new dropdown menu component
* Build new network menu based on new network dropdown component
* Switch roomdirectory to use new network dropdown
* Replace old networkdropdown with new networkdropdown
* Added component for public room result details
* Extract hooks and subcomponents from SpotlightDialog
* Create new hook to get profile info based for an mxid
* Add hook to automatically re-request search results
* Add hook to prevent out-of-order search results
* Extract member sort algorithm from InviteDialog
* Keep sorting for non-room results stable
* Sort people suggestions using sort algorithm from InviteDialog
* Add copy/copied tooltip for invite link option in spotlight
* Clamp length of topic for public room results
* Add unit test for useDebouncedSearch
* Add unit test for useProfileInfo
* Create cypress test cases for spotlight dialog
* Add test for useLatestResult to prevent out-of-order results

res/css/views/directory/_NetworkDropdown.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,151 +14,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_NetworkDropdown {
-    height: 32px;
+.mx_NetworkDropdown_wrapper .mx_ContextualMenu {
+    min-width: 200px;
+}
+
+.mx_NetworkDropdown_addServer {
+    font-weight: normal;
+    font-size: $font-15px;
+}
+
+.mx_NetworkDropdown_removeServer {
     position: relative;
-    width: max-content;
-    padding-right: 32px;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background: $system;
+    border-radius: 8px;
+    text-align: center;
+    line-height: 16px;
+    color: $secondary-content;
     margin-left: auto;
-    margin-right: 9px;
-    margin-top: 12px;
-
-    .mx_AccessibleButton {
-        width: max-content;
-    }
-}
-
-.mx_NetworkDropdown_menu {
-    min-width: 204px;
-    margin: 0;
-    box-sizing: border-box;
-    border-radius: 4px;
-    border: 1px solid $dialog-close-fg-color;
-    background-color: $background;
-    max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
-    overflow-y: auto;
-}
-
-.mx_NetworkDropdown_menu_network {
-    font-weight: bold;
-}
-
-.mx_NetworkDropdown_server {
-    padding: 12px 0;
-    border-bottom: 1px solid $input-darker-fg-color;
-
-    .mx_NetworkDropdown_server_title {
-        padding: 0 10px;
-        font-size: $font-15px;
-        font-weight: 600;
-        line-height: $font-20px;
-        margin-bottom: 4px;
-        position: relative;
-
-        // remove server button
-        .mx_AccessibleButton {
-            position: absolute;
-            display: inline;
-            right: 10px;
-            height: 16px;
-            width: 16px;
-            margin-top: 2px;
-
-            &::after {
-                content: "";
-                position: absolute;
-                width: 16px;
-                height: 16px;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-                mask-image: url('$(res)/img/feather-customised/x.svg');
-                background-color: $alert;
-            }
-        }
-    }
-
-    .mx_NetworkDropdown_server_subtitle {
-        padding: 0 10px;
-        font-size: $font-10px;
-        line-height: $font-14px;
-        margin-top: -4px;
-        margin-bottom: 4px;
-        color: $muted-fg-color;
-    }
-
-    .mx_NetworkDropdown_server_network {
-        font-size: $font-12px;
-        line-height: $font-16px;
-        padding: 4px 10px;
-        cursor: pointer;
-        position: relative;
-
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        &[aria-checked=true]::after {
-            content: "";
-            position: absolute;
-            width: 16px;
-            height: 16px;
-            right: 10px;
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: contain;
-            mask-image: url('$(res)/img/feather-customised/check.svg');
-            background-color: $accent;
-        }
-    }
-}
-
-.mx_NetworkDropdown_server_add,
-.mx_NetworkDropdown_server_network {
-    &:hover {
-        background-color: $header-panel-bg-color;
-    }
-}
-
-.mx_NetworkDropdown_server_add {
-    padding: 16px 10px 16px 32px;
-    position: relative;
-    border-radius: 0 0 4px 4px;
 
     &::before {
+        background-color: $secondary-content;
         content: "";
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        left: 7px;
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: contain;
-        mask-image: url('$(res)/img/feather-customised/plus.svg');
-        background-color: $muted-fg-color;
-    }
-}
-
-.mx_NetworkDropdown_handle {
-    position: relative;
-
-    &::after {
-        content: "";
+        width: 8px;
+        height: 8px;
         position: absolute;
-        width: 26px;
-        height: 26px;
-        right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
-        top: -3px;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: contain;
-        mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
-        background-color: $primary-content;
-    }
-
-    .mx_NetworkDropdown_handle_server {
-        color: $muted-fg-color;
-        font-size: $font-12px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        mask-image: url("$(res)/img/cancel-small.svg");
     }
 }