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

src/hooks/useProfileInfo.ts

@@ -0,0 +1,70 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useCallback, useState } from "react";
+
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import { useLatestResult } from "./useLatestResult";
+
+export interface IProfileInfoOpts {
+    query?: string;
+}
+
+export interface IProfileInfo {
+    user_id: string;
+    avatar_url?: string;
+    display_name?: string;
+}
+
+export const useProfileInfo = () => {
+    const [profile, setProfile] = useState<IProfileInfo | null>(null);
+
+    const [loading, setLoading] = useState(false);
+
+    const [updateQuery, updateResult] = useLatestResult<string, IProfileInfo | null>(setProfile);
+
+    const search = useCallback(async ({ query: term }: IProfileInfoOpts): Promise<boolean> => {
+        updateQuery(term);
+        if (!term?.length || !term.startsWith('@') || !term.includes(':')) {
+            setProfile(null);
+            return true;
+        }
+
+        setLoading(true);
+        try {
+            const result = await MatrixClientPeg.get().getProfileInfo(term);
+            updateResult(term, {
+                user_id: term,
+                avatar_url: result.avatar_url,
+                display_name: result.displayname,
+            });
+            return true;
+        } catch (e) {
+            console.error("Could not fetch profile info for params", { term }, e);
+            updateResult(term, null);
+            return false;
+        } finally {
+            setLoading(false);
+        }
+    }, [updateQuery, updateResult]);
+
+    return {
+        ready: true,
+        loading,
+        profile,
+        search,
+    } as const;
+};