Improve Members Right Panel (#1286)

* fix room members hook

* fix resize observer hook

* add intersection observer hook

* install react-virtual lib

* improve right panel - WIP

* add filters for members

* fix bug in async search

* categories members and add search

* show spinner on room member fetch

* make invite member btn clickable

* so no member text

* add line between room view and member drawer

* fix imports

* add screen size hook

* fix set setting hook

* make member drawer responsive

* extract power level tags hook

* fix room members hook

* fix use async search api

* produce search result on filter change

package.json

@@ -23,6 +23,7 @@
     "@fontsource/roboto": "4.5.8",
     "@khanacademy/simple-markdown": "0.8.6",
     "@matrix-org/olm": "3.2.14",
+    "@tanstack/react-virtual": "3.0.0-beta.54",
     "@tippyjs/react": "4.2.6",
     "@vanilla-extract/css": "1.9.3",
     "@vanilla-extract/recipes": "0.3.0",
@@ -47,6 +48,7 @@
     "linkify-html": "4.0.2",
     "linkifyjs": "4.0.2",
     "matrix-js-sdk": "24.1.0",
+    "millify": "6.1.0",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-autosize-textarea": "7.1.0",

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -60,12 +60,13 @@ export function EmoticonAutocomplete({
     );
   }, [imagePacks]);
 
-  const [result, search] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
+  const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
   const autoCompleteEmoticon = result ? result.items : recentEmoji;
 
   useEffect(() => {
-    search(query.text);
-  }, [query.text, search]);
+    if (query.text) search(query.text);
+    else resetSearch();
+  }, [query.text, search, resetSearch]);
 
   const handleAutocomplete: EmoticonCompleteHandler = (key, shortcode) => {
     const emoticonEl = createEmoticonElement(key, shortcode);

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -81,7 +81,7 @@ export function RoomMentionAutocomplete({
     return [...spaces, ...rooms, ...directs].sort(roomIdByActivity);
   }, []);
 
-  const [result, search] = useAsyncSearch(
+  const [result, search, resetSearch] = useAsyncSearch(
     allRoomId,
     useCallback(
       (rId) => {
@@ -99,8 +99,9 @@ export function RoomMentionAutocomplete({
   const autoCompleteRoomIds = result ? result.items : allRoomId.slice(0, 20);
 
   useEffect(() => {
-    search(query.text);
-  }, [query.text, search]);
+    if (query.text) search(query.text);
+    else resetSearch();
+  }, [query.text, search, resetSearch]);
 
   const handleAutocomplete: MentionAutoCompleteHandler = (roomAliasOrId, name) => {
     const mentionEl = createMentionElement(

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -94,12 +94,13 @@ export function UserMentionAutocomplete({
   const roomAliasOrId = room?.getCanonicalAlias() || roomId;
   const members = useRoomMembers(mx, roomId);
 
-  const [result, search] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
+  const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
   const autoCompleteMembers = result ? result.items : members.slice(0, 20);
 
   useEffect(() => {
-    search(query.text);
-  }, [query.text, search]);
+    if (query.text) search(query.text);
+    else resetSearch();
+  }, [query.text, search, resetSearch]);
 
   const handleAutocomplete: MentionAutoCompleteHandler = (uId, name) => {
     const mentionEl = createMentionElement(

src/app/components/emoji-board/EmojiBoard.tsx

@@ -647,15 +647,20 @@ export function EmojiBoard({
     return list;
   }, [emojiTab, usage, imagePacks]);
 
-  const [result, search] = useAsyncSearch(searchList, getSearchListItemStr, SEARCH_OPTIONS);
+  const [result, search, resetSearch] = useAsyncSearch(
+    searchList,
+    getSearchListItemStr,
+    SEARCH_OPTIONS
+  );
 
   const handleOnChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
     useCallback(
       (evt) => {
         const term = evt.target.value;
-        search(term);
+        if (term) search(term);
+        else resetSearch();
       },
-      [search]
+      [search, resetSearch]
     ),
     { wait: 200 }
   );