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-lock.json

@@ -13,6 +13,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",
@@ -37,6 +38,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",
@@ -1106,6 +1108,30 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.0.0-beta.54",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.54.tgz",
+      "integrity": "sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.0.0-beta.54"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.0.0-beta.54",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.54.tgz",
+      "integrity": "sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tippyjs/react": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
@@ -1669,7 +1695,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2058,6 +2083,19 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3349,6 +3387,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
@@ -3771,6 +3817,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -4286,6 +4340,17 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/millify": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/millify/-/millify-6.1.0.tgz",
+      "integrity": "sha512-H/E3J6t+DQs/F2YgfDhxUVZz/dF8JXPPKTLHL/yHCcLZLtCXJDUaqvhJXQwqOVBvbyNn4T0WjLpIHd7PAw7fBA==",
+      "dependencies": {
+        "yargs": "^17.0.1"
+      },
+      "bin": {
+        "millify": "bin/millify"
+      }
+    },
     "node_modules/mini-svg-data-uri": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
@@ -4965,6 +5030,14 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-like": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
@@ -5256,6 +5329,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
@@ -5307,7 +5398,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -6166,12 +6256,66 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -6186,6 +6330,31 @@
         "node": ">= 6"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

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);
+    if (query.text) search(query.text);
-  }, [query.text, search]);
+    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);
+    if (query.text) search(query.text);
-  }, [query.text, search]);
+    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);
+    if (query.text) search(query.text);
-  }, [query.text, search]);
+    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 }
   );

src/app/hooks/useAsyncSearch.ts

@@ -25,11 +25,13 @@ export type UseAsyncSearchResult<TSearchItem extends object | string | number> =
   items: TSearchItem[];
 };
 
+export type SearchResetHandler = () => void;
+
 export const useAsyncSearch = <TSearchItem extends object | string | number>(
   list: TSearchItem[],
   getItemStr: SearchItemStrGetter<TSearchItem>,
   options?: UseAsyncSearchOptions
-): [UseAsyncSearchResult<TSearchItem> | undefined, AsyncSearchHandler] => {
+): [UseAsyncSearchResult<TSearchItem> | undefined, AsyncSearchHandler, SearchResetHandler] => {
   const [result, setResult] = useState<UseAsyncSearchResult<TSearchItem>>();
 
   const [searchCallback, terminateSearch] = useMemo(() => {
@@ -51,7 +53,7 @@ export const useAsyncSearch = <TSearchItem extends object | string | number>(
     const handleResult: ResultHandler<TSearchItem> = (results, query) =>
       setResult({
         query,
-        items: results,
+        items: [...results],
       });
 
     return AsyncSearch(list, handleMatch, handleResult, options);
@@ -60,15 +62,16 @@ export const useAsyncSearch = <TSearchItem extends object | string | number>(
   const searchHandler: AsyncSearchHandler = useCallback(
     (query) => {
       const normalizedQuery = normalize(query, options?.normalizeOptions);
-      if (!normalizedQuery) {
-        setResult(undefined);
-        return;
-      }
       searchCallback(normalizedQuery);
     },
     [searchCallback, options?.normalizeOptions]
   );
 
+  const resetHandler: SearchResetHandler = useCallback(() => {
+    terminateSearch();
+    setResult(undefined);
+  }, [terminateSearch]);
+
   useEffect(
     () => () => {
       // terminate any ongoing search request on unmount.
@@ -77,5 +80,5 @@ export const useAsyncSearch = <TSearchItem extends object | string | number>(
     [terminateSearch]
   );
 
-  return [result, searchHandler];
+  return [result, searchHandler, resetHandler];
 };

src/app/hooks/useIntersectionObserver.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+export type OnIntersectionCallback = (entries: IntersectionObserverEntry[]) => void;
+
+export type IntersectionObserverOpts = {
+  root?: Element | Document | null;
+  rootMargin?: string;
+  threshold?: number | number[];
+};
+
+export const getIntersectionObserverEntry = (
+  target: Element | Document,
+  entries: IntersectionObserverEntry[]
+): IntersectionObserverEntry | undefined => entries.find((entry) => entry.target === target);
+
+export const useIntersectionObserver = (
+  onIntersectionCallback: OnIntersectionCallback,
+  opts?: IntersectionObserverOpts | (() => IntersectionObserverOpts),
+  observeElement?: Element | null | (() => Element | null)
+): IntersectionObserver | undefined => {
+  const [intersectionObserver, setIntersectionObserver] = useState<IntersectionObserver>();
+
+  useEffect(() => {
+    const initOpts = typeof opts === 'function' ? opts() : opts;
+    setIntersectionObserver(new IntersectionObserver(onIntersectionCallback, initOpts));
+  }, [onIntersectionCallback, opts]);
+
+  useEffect(() => {
+    const element = typeof observeElement === 'function' ? observeElement() : observeElement;
+    if (element) intersectionObserver?.observe(element);
+    return () => {
+      if (element) intersectionObserver?.unobserve(element);
+    };
+  }, [intersectionObserver, observeElement]);
+
+  return intersectionObserver;
+};

src/app/hooks/usePowerLevelTags.ts

@@ -0,0 +1,38 @@
+import { useCallback, useMemo } from 'react';
+
+export type PowerLevelTag = {
+  name: string;
+};
+export const usePowerLevelTags = () => {
+  const powerLevelTags = useMemo(
+    () => ({
+      9000: {
+        name: 'Goku',
+      },
+      101: {
+        name: 'Founder',
+      },
+      100: {
+        name: 'Admin',
+      },
+      50: {
+        name: 'Moderator',
+      },
+      0: {
+        name: 'Default',
+      },
+    }),
+    []
+  );
+
+  return useCallback(
+    (powerLevel: number): PowerLevelTag => {
+      if (powerLevel >= 9000) return powerLevelTags[9000];
+      if (powerLevel >= 101) return powerLevelTags[101];
+      if (powerLevel === 100) return powerLevelTags[100];
+      if (powerLevel >= 50) return powerLevelTags[50];
+      return powerLevelTags[0];
+    },
+    [powerLevelTags]
+  );
+};

src/app/hooks/useResizeObserver.ts

@@ -8,17 +8,18 @@ export const getResizeObserverEntry = (
 ): ResizeObserverEntry | undefined => entries.find((entry) => entry.target === target);
 
 export const useResizeObserver = (
-  element: Element | null,
+  onResizeCallback: OnResizeCallback,
-  onResizeCallback: OnResizeCallback
+  observeElement?: Element | null | (() => Element | null)
 ): ResizeObserver => {
   const resizeObserver = useMemo(() => new ResizeObserver(onResizeCallback), [onResizeCallback]);
 
   useEffect(() => {
+    const element = typeof observeElement === 'function' ? observeElement() : observeElement;
     if (element) resizeObserver.observe(element);
     return () => {
       if (element) resizeObserver.unobserve(element);
     };
-  }, [resizeObserver, element]);
+  }, [resizeObserver, observeElement]);
 
   return resizeObserver;
 };

src/app/hooks/useRoomMembers.ts

@@ -1,23 +1,25 @@
 import { MatrixClient, MatrixEvent, RoomMember, RoomMemberEvent } from 'matrix-js-sdk';
 import { useEffect, useState } from 'react';
-import { useAlive } from './useAlive';
 
 export const useRoomMembers = (mx: MatrixClient, roomId: string): RoomMember[] => {
   const [members, setMembers] = useState<RoomMember[]>([]);
-  const alive = useAlive();
 
   useEffect(() => {
     const room = mx.getRoom(roomId);
+    let loadingMembers = true;
+    let disposed = false;
 
     const updateMemberList = (event?: MatrixEvent) => {
-      if (!room || !alive || (event && event.getRoomId() !== roomId)) return;
+      if (!room || disposed || (event && event.getRoomId() !== roomId)) return;
+      if (loadingMembers) return;
       setMembers(room.getMembers());
     };
 
     if (room) {
-      updateMemberList();
+      setMembers(room.getMembers());
       room.loadMembersIfNeeded().then(() => {
-        if (!alive) return;
+        loadingMembers = false;
+        if (disposed) return;
         updateMemberList();
       });
     }
@@ -25,10 +27,11 @@ export const useRoomMembers = (mx: MatrixClient, roomId: string): RoomMember[] =
     mx.on(RoomMemberEvent.Membership, updateMemberList);
     mx.on(RoomMemberEvent.PowerLevel, updateMemberList);
     return () => {
+      disposed = true;
       mx.removeListener(RoomMemberEvent.Membership, updateMemberList);
       mx.removeListener(RoomMemberEvent.PowerLevel, updateMemberList);
     };
-  }, [mx, roomId, alive]);
+  }, [mx, roomId]);
 
   return members;
 };

src/app/hooks/useScreenSize.ts

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react';
+import { getResizeObserverEntry, useResizeObserver } from './useResizeObserver';
+
+export const TABLET_BREAKPOINT = 1124;
+export const MOBILE_BREAKPOINT = 750;
+
+export enum ScreenSize {
+  Desktop = 'Desktop',
+  Tablet = 'Tablet',
+  Mobile = 'Mobile',
+}
+
+export const getScreenSize = (width: number): ScreenSize => {
+  if (width > TABLET_BREAKPOINT) return ScreenSize.Desktop;
+  if (width > MOBILE_BREAKPOINT) return ScreenSize.Tablet;
+  return ScreenSize.Mobile;
+};
+
+export const useScreenSize = (): [ScreenSize, number] => {
+  const [size, setSize] = useState<[ScreenSize, number]>([
+    getScreenSize(document.body.clientWidth),
+    document.body.clientWidth,
+  ]);
+  useResizeObserver(
+    useCallback((entries) => {
+      const bodyEntry = getResizeObserverEntry(document.body, entries);
+      if (bodyEntry) {
+        const bWidth = bodyEntry.contentRect.width;
+        setSize([getScreenSize(bWidth), bWidth]);
+      }
+    }, []),
+    document.body
+  );
+
+  return size;
+};

src/app/organisms/room/MembersDrawer.css.ts

@@ -0,0 +1,64 @@
+import { keyframes, style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const MembersDrawer = style({
+  width: toRem(266),
+  backgroundColor: color.Background.Container,
+  color: color.Background.OnContainer,
+});
+
+export const MembersDrawerHeader = style({
+  flexShrink: 0,
+  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
+  borderBottomWidth: config.borderWidth.B300,
+});
+
+export const MemberDrawerContentBase = style({
+  position: 'relative',
+  overflow: 'hidden',
+});
+
+export const MemberDrawerContent = style({
+  padding: `${config.space.S300} 0`,
+});
+
+const ScrollBtnAnime = keyframes({
+  '0%': {
+    transform: `translate(-50%, -100%) scale(0)`,
+  },
+  '100%': {
+    transform: `translate(-50%, 0) scale(1)`,
+  },
+});
+
+export const DrawerScrollTop = style({
+  position: 'absolute',
+  top: config.space.S200,
+  left: '50%',
+  transform: 'translateX(-50%)',
+  zIndex: 1,
+  animation: `${ScrollBtnAnime} 100ms`,
+});
+
+export const DrawerGroup = style({
+  padding: `0 ${config.space.S100} 0 ${config.space.S300}`,
+});
+
+export const MembersGroup = style({
+  paddingLeft: config.space.S200,
+});
+export const MembersGroupLabel = style({
+  padding: config.space.S200,
+  selectors: {
+    '&:not(:first-child)': {
+      paddingTop: config.space.S500,
+    },
+  },
+});
+
+export const DrawerVirtualItem = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+});

src/app/organisms/room/MembersDrawer.tsx

@@ -0,0 +1,528 @@
+import React, {
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Box,
+  Chip,
+  ContainerColor,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Menu,
+  MenuItem,
+  PopOut,
+  Scroll,
+  Spinner,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  config,
+} from 'folds';
+import { Room, RoomMember } from 'matrix-js-sdk';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import FocusTrap from 'focus-trap-react';
+import millify from 'millify';
+import classNames from 'classnames';
+
+import { openInviteUser, openProfileViewer } from '../../../client/action/navigation';
+import * as css from './MembersDrawer.css';
+import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import {
+  getIntersectionObserverEntry,
+  useIntersectionObserver,
+} from '../../hooks/useIntersectionObserver';
+import { Membership } from '../../../types/matrix/room';
+import { UseStateProvider } from '../../components/UseStateProvider';
+import { UseAsyncSearchOptions, useAsyncSearch } from '../../hooks/useAsyncSearch';
+import { useDebounce } from '../../hooks/useDebounce';
+import colorMXID from '../../../util/colorMXID';
+import { usePowerLevelTags, PowerLevelTag } from '../../hooks/usePowerLevelTags';
+
+export const MembershipFilters = {
+  filterJoined: (m: RoomMember) => m.membership === Membership.Join,
+  filterInvited: (m: RoomMember) => m.membership === Membership.Invite,
+  filterLeaved: (m: RoomMember) =>
+    m.membership === Membership.Leave &&
+    m.events.member?.getStateKey() === m.events.member?.getSender(),
+  filterKicked: (m: RoomMember) =>
+    m.membership === Membership.Leave &&
+    m.events.member?.getStateKey() !== m.events.member?.getSender(),
+  filterBanned: (m: RoomMember) => m.membership === Membership.Ban,
+};
+
+export type MembershipFilterFn = (m: RoomMember) => boolean;
+
+export type MembershipFilter = {
+  name: string;
+  filterFn: MembershipFilterFn;
+  color: ContainerColor;
+};
+
+const useMembershipFilterMenu = (): MembershipFilter[] =>
+  useMemo(
+    () => [
+      {
+        name: 'Joined',
+        filterFn: MembershipFilters.filterJoined,
+        color: 'Surface',
+      },
+      {
+        name: 'Invited',
+        filterFn: MembershipFilters.filterInvited,
+        color: 'Success',
+      },
+      {
+        name: 'Left',
+        filterFn: MembershipFilters.filterLeaved,
+        color: 'Secondary',
+      },
+      {
+        name: 'Kicked',
+        filterFn: MembershipFilters.filterKicked,
+        color: 'Warning',
+      },
+      {
+        name: 'Banned',
+        filterFn: MembershipFilters.filterBanned,
+        color: 'Critical',
+      },
+    ],
+    []
+  );
+
+export const SortFilters = {
+  filterAscending: (a: RoomMember, b: RoomMember) =>
+    a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1,
+  filterDescending: (a: RoomMember, b: RoomMember) =>
+    a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1,
+  filterNewestFirst: (a: RoomMember, b: RoomMember) =>
+    (b.events.member?.getTs() ?? 0) - (a.events.member?.getTs() ?? 0),
+  filterOldest: (a: RoomMember, b: RoomMember) =>
+    (a.events.member?.getTs() ?? 0) - (b.events.member?.getTs() ?? 0),
+};
+
+export type SortFilterFn = (a: RoomMember, b: RoomMember) => number;
+
+export type SortFilter = {
+  name: string;
+  filterFn: SortFilterFn;
+};
+
+const useSortFilterMenu = (): SortFilter[] =>
+  useMemo(
+    () => [
+      {
+        name: 'A to Z',
+        filterFn: SortFilters.filterAscending,
+      },
+      {
+        name: 'Z to A',
+        filterFn: SortFilters.filterDescending,
+      },
+      {
+        name: 'Newest First',
+        filterFn: SortFilters.filterNewestFirst,
+      },
+      {
+        name: 'Oldest First',
+        filterFn: SortFilters.filterOldest,
+      },
+    ],
+    []
+  );
+
+export type MembersFilterOptions = {
+  membershipFilter: MembershipFilter;
+  sortFilter: SortFilter;
+};
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 100,
+  matchOptions: {
+    contain: true,
+  },
+};
+const getMemberItemStr = (m: RoomMember) => [m.name, m.userId];
+
+type MembersDrawerProps = {
+  room: Room;
+};
+export function MembersDrawer({ room }: MembersDrawerProps) {
+  const mx = useMatrixClient();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const members = useRoomMembers(mx, room.roomId);
+  const getPowerLevelTag = usePowerLevelTags();
+  const fetchingMembers = members.length < room.getJoinedMemberCount();
+
+  const membershipFilterMenu = useMembershipFilterMenu();
+  const sortFilterMenu = useSortFilterMenu();
+  const [filter, setFilter] = useState<MembersFilterOptions>({
+    membershipFilter: membershipFilterMenu[0],
+    sortFilter: sortFilterMenu[0],
+  });
+  const [onTop, setOnTop] = useState(true);
+
+  const filteredMembers = useMemo(
+    () =>
+      members
+        .filter(filter.membershipFilter.filterFn)
+        .sort(filter.sortFilter.filterFn)
+        .sort((a, b) => b.powerLevel - a.powerLevel),
+    [members, filter]
+  );
+
+  const [result, search, resetSearch] = useAsyncSearch(
+    filteredMembers,
+    getMemberItemStr,
+    SEARCH_OPTIONS
+  );
+  if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
+
+  const processMembers = result ? result.items : filteredMembers;
+
+  const PLTagOrRoomMember = useMemo(() => {
+    let prevTag: PowerLevelTag | undefined;
+    const tagOrMember: Array<PowerLevelTag | RoomMember> = [];
+    processMembers.forEach((m) => {
+      const plTag = getPowerLevelTag(m.powerLevel);
+      if (plTag !== prevTag) {
+        prevTag = plTag;
+        tagOrMember.push(plTag);
+      }
+      tagOrMember.push(m);
+    });
+    return tagOrMember;
+  }, [processMembers, getPowerLevelTag]);
+
+  const virtualizer = useVirtualizer({
+    count: PLTagOrRoomMember.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 40,
+    overscan: 10,
+  });
+
+  useIntersectionObserver(
+    useCallback((intersectionEntries) => {
+      if (!scrollTopAnchorRef.current) return;
+      const entry = getIntersectionObserverEntry(scrollTopAnchorRef.current, intersectionEntries);
+      if (entry) setOnTop(entry.isIntersecting);
+    }, []),
+    useCallback(() => ({ root: scrollRef.current }), []),
+    useCallback(() => scrollTopAnchorRef.current, [])
+  );
+
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
+    useCallback(
+      (evt) => {
+        if (evt.target.value) search(evt.target.value);
+        else resetSearch();
+      },
+      [search, resetSearch]
+    ),
+    { wait: 200 }
+  );
+
+  const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const btn = evt.currentTarget as HTMLButtonElement;
+    const userId = btn.getAttribute('data-user-id');
+    openProfileViewer(userId, room.roomId);
+  };
+
+  return (
+    <Box className={css.MembersDrawer} direction="Column">
+      <Header className={css.MembersDrawerHeader} variant="Background" size="600">
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H5" truncate>
+              {`${millify(room.getJoinedMemberCount(), { precision: 1 })} Members`}
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center">
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              tooltip={
+                <Tooltip>
+                  <Text>Invite Member</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  ref={triggerRef}
+                  variant="Background"
+                  onClick={() => openInviteUser(room.roomId)}
+                >
+                  <Icon src={Icons.UserPlus} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
+        </Box>
+      </Header>
+      <Box className={css.MemberDrawerContentBase} grow="Yes">
+        <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover">
+          <Box className={css.MemberDrawerContent} direction="Column" gap="400">
+            <Box className={css.DrawerGroup} direction="Column" gap="100">
+              <Text size="L400">Filter</Text>
+              <Box alignItems="Center" gap="100" wrap="Wrap">
+                <UseStateProvider initial={false}>
+                  {(open, setOpen) => (
+                    <PopOut
+                      open={open}
+                      position="Bottom"
+                      align="Start"
+                      content={
+                        <FocusTrap
+                          focusTrapOptions={{
+                            initialFocus: false,
+                            onDeactivate: () => setOpen(false),
+                            clickOutsideDeactivates: true,
+                            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                          }}
+                        >
+                          <Menu style={{ padding: config.space.S100 }}>
+                            {membershipFilterMenu.map((menuItem) => (
+                              <MenuItem
+                                key={menuItem.name}
+                                variant={
+                                  menuItem.name === filter.membershipFilter.name
+                                    ? menuItem.color
+                                    : 'Surface'
+                                }
+                                radii="300"
+                                onClick={() => {
+                                  setFilter((f) => ({ ...f, membershipFilter: menuItem }));
+                                  setOpen(false);
+                                }}
+                              >
+                                <Text>{menuItem.name}</Text>
+                              </MenuItem>
+                            ))}
+                          </Menu>
+                        </FocusTrap>
+                      }
+                    >
+                      {(anchorRef) => (
+                        <Chip
+                          ref={anchorRef}
+                          onClick={() => setOpen(!open)}
+                          variant={filter.membershipFilter.color}
+                          radii="400"
+                          outlined
+                          after={<Icon src={Icons.ChevronBottom} size="50" />}
+                        >
+                          <Text size="T200">{filter.membershipFilter.name}</Text>
+                        </Chip>
+                      )}
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+                <UseStateProvider initial={false}>
+                  {(open, setOpen) => (
+                    <PopOut
+                      open={open}
+                      position="Bottom"
+                      align="Start"
+                      content={
+                        <FocusTrap
+                          focusTrapOptions={{
+                            initialFocus: false,
+                            onDeactivate: () => setOpen(false),
+                            clickOutsideDeactivates: true,
+                            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                          }}
+                        >
+                          <Menu style={{ padding: config.space.S100 }}>
+                            {sortFilterMenu.map((menuItem) => (
+                              <MenuItem
+                                key={menuItem.name}
+                                variant="Surface"
+                                aria-pressed={menuItem.name === filter.sortFilter.name}
+                                radii="300"
+                                onClick={() => {
+                                  setFilter((f) => ({ ...f, sortFilter: menuItem }));
+                                  setOpen(false);
+                                }}
+                              >
+                                <Text>{menuItem.name}</Text>
+                              </MenuItem>
+                            ))}
+                          </Menu>
+                        </FocusTrap>
+                      }
+                    >
+                      {(anchorRef) => (
+                        <Chip
+                          ref={anchorRef}
+                          onClick={() => setOpen(!open)}
+                          variant="Surface"
+                          radii="400"
+                          outlined
+                          after={<Icon src={Icons.ChevronBottom} size="50" />}
+                        >
+                          <Text size="T200">{`Order: ${filter.sortFilter.name}`}</Text>
+                        </Chip>
+                      )}
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+              </Box>
+            </Box>
+
+            <Box ref={scrollTopAnchorRef} className={css.DrawerGroup} direction="Column" gap="100">
+              <Text size="L400">Search</Text>
+              <Input
+                ref={searchInputRef}
+                onChange={handleSearchChange}
+                style={{ paddingRight: config.space.S200 }}
+                placeholder="Type name..."
+                variant="Surface"
+                size="400"
+                outlined
+                radii="400"
+                before={<Icon size="50" src={Icons.Search} />}
+                after={
+                  result && (
+                    <Chip
+                      variant={result.items.length > 0 ? 'Success' : 'Critical'}
+                      size="400"
+                      radii="Pill"
+                      onClick={() => {
+                        if (searchInputRef.current) searchInputRef.current.value = '';
+                        resetSearch();
+                      }}
+                      after={<Icon size="50" src={Icons.Cross} />}
+                    >
+                      <Text size="B300">{`${result.items.length || 'No'} ${
+                        result.items.length === 1 ? 'Result' : 'Results'
+                      }`}</Text>
+                    </Chip>
+                  )
+                }
+              />
+            </Box>
+
+            {!onTop && (
+              <Box className={css.DrawerScrollTop}>
+                <IconButton
+                  onClick={() => virtualizer.scrollToOffset(0)}
+                  variant="Surface"
+                  radii="Pill"
+                  outlined
+                  size="300"
+                  aria-label="Scroll to Top"
+                >
+                  <Icon src={Icons.ChevronTop} size="300" />
+                </IconButton>
+              </Box>
+            )}
+
+            {!fetchingMembers && !result && processMembers.length === 0 && (
+              <Text style={{ padding: config.space.S300 }} align="Center">
+                {`No "${filter.membershipFilter.name}" Members`}
+              </Text>
+            )}
+
+            <Box className={css.MembersGroup} direction="Column" gap="100">
+              <div
+                style={{
+                  position: 'relative',
+                  height: virtualizer.getTotalSize(),
+                }}
+              >
+                {virtualizer.getVirtualItems().map((vItem) => {
+                  const tagOrMember = PLTagOrRoomMember[vItem.index];
+                  if (!('userId' in tagOrMember)) {
+                    return (
+                      <Text
+                        style={{
+                          transform: `translateY(${vItem.start}px)`,
+                        }}
+                        data-index={vItem.index}
+                        ref={virtualizer.measureElement}
+                        key={`${room.roomId}-${vItem.index}`}
+                        className={classNames(css.MembersGroupLabel, css.DrawerVirtualItem)}
+                        size="O400"
+                      >
+                        {tagOrMember.name}
+                      </Text>
+                    );
+                  }
+
+                  const member = tagOrMember;
+                  const avatarUrl = member.getAvatarUrl(
+                    mx.baseUrl,
+                    100,
+                    100,
+                    'crop',
+                    undefined,
+                    false
+                  );
+
+                  return (
+                    <MenuItem
+                      style={{
+                        padding: config.space.S200,
+                        transform: `translateY(${vItem.start}px)`,
+                      }}
+                      data-index={vItem.index}
+                      data-user-id={member.userId}
+                      ref={virtualizer.measureElement}
+                      key={`${room.roomId}-${member.userId}`}
+                      className={css.DrawerVirtualItem}
+                      variant="Background"
+                      radii="400"
+                      onClick={handleMemberClick}
+                      before={
+                        <Avatar size="200">
+                          {avatarUrl ? (
+                            <AvatarImage src={avatarUrl} />
+                          ) : (
+                            <AvatarFallback
+                              style={{
+                                background: colorMXID(member.userId),
+                                color: 'white',
+                              }}
+                            >
+                              <Text size="T200">{member.name[0]}</Text>
+                            </AvatarFallback>
+                          )}
+                        </Avatar>
+                      }
+                    >
+                      <Text size="T400" truncate>
+                        {member.name}
+                      </Text>
+                    </MenuItem>
+                  );
+                })}
+              </div>
+            </Box>
+
+            {fetchingMembers && (
+              <Box justifyContent="Center">
+                <Spinner />
+              </Box>
+            )}
+          </Box>
+        </Scroll>
+      </Box>
+    </Box>
+  );
+}

src/app/organisms/room/Room.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import './Room.scss';
+import { Line } from 'folds';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import settings from '../../../client/state/settings';
 import RoomTimeline from '../../../client/state/RoomTimeline';
 import navigation from '../../../client/state/navigation';
 import { openNavigation } from '../../../client/action/navigation';
@@ -11,7 +11,10 @@ import { openNavigation } from '../../../client/action/navigation';
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
 import RoomSettings from './RoomSettings';
-import PeopleDrawer from './PeopleDrawer';
+import { MembersDrawer } from './MembersDrawer';
+import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 function Room() {
   const [roomInfo, setRoomInfo] = useState({
@@ -19,7 +22,8 @@ function Room() {
     roomTimeline: null,
     eventId: null,
   });
-  const [isDrawer, setIsDrawer] = useState(settings.isPeopleDrawer);
+  const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+  const [screenSize] = useScreenSize();
 
   const mx = initMatrix.matrixClient;
 
@@ -49,14 +53,6 @@ function Room() {
     };
   }, [roomInfo, mx]);
 
-  useEffect(() => {
-    const handleDrawerToggling = (visiblity) => setIsDrawer(visiblity);
-    settings.on(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
-    return () => {
-      settings.removeListener(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
-    };
-  }, []);
-
   const { room, roomTimeline, eventId } = roomInfo;
   if (roomTimeline === null) {
     setTimeout(() => openNavigation());
@@ -69,7 +65,13 @@ function Room() {
         <RoomSettings roomId={roomTimeline.roomId} />
         <RoomView room={room} roomTimeline={roomTimeline} eventId={eventId} />
       </div>
-      {isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
+
+      {screenSize === ScreenSize.Desktop && isDrawer && (
+        <>
+          <Line variant="Background" direction="Vertical" size="300" />
+          <MembersDrawer room={room} />
+        </>
+      )}
     </div>
   );
 }

src/app/organisms/room/RoomInput.tsx

@@ -97,7 +97,7 @@ import { MessageReply } from '../../molecules/message/Message';
 import colorMXID from '../../../util/colorMXID';
 import { parseReplyBody, parseReplyFormattedBody } from '../../utils/room';
 import { sanitizeText } from '../../utils/sanitize';
-import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
+import { useScreenSize } from '../../hooks/useScreenSize';
 
 interface RoomInputProps {
   roomViewRef: RefObject<HTMLElement>;
@@ -161,15 +161,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const handlePaste = useFilePasteHandler(handleFiles);
     const dropZoneVisible = useFileDropZone(roomViewRef, handleFiles);
 
-    const [mobile, setMobile] = useState(document.body.clientWidth < 500);
+    const [, screenWidth] = useScreenSize();
-    useResizeObserver(
+    const hideStickerBtn = screenWidth < 500;
-      document.body,
-      useCallback((entries) => {
-        const bodyEntry = getResizeObserverEntry(document.body, entries);
-        if (bodyEntry && bodyEntry.contentRect.width < 500) setMobile(true);
-        else setMobile(false);
-      }, [])
-    );
 
     useEffect(() => {
       Transforms.insertFragment(editor, msgDraft);
@@ -515,7 +508,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     {(anchorRef) => (
                       <>
-                        {!mobile && (
+                        {!hideStickerBtn && (
                           <IconButton
                             aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
                             onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
@@ -532,7 +525,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                         <IconButton
                           ref={anchorRef}
                           aria-pressed={
-                            mobile ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
+                            hideStickerBtn ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
                           }
                           onClick={() => setEmojiBoardTab(EmojiBoardTab.Emoji)}
                           variant="SurfaceVariant"
@@ -542,7 +535,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                           <Icon
                             src={Icons.Smile}
                             filled={
-                              mobile ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
+                              hideStickerBtn
+                                ? !!emojiBoardTab
+                                : emojiBoardTab === EmojiBoardTab.Emoji
                             }
                           />
                         </IconButton>

src/app/organisms/room/RoomViewContent.jsx

@@ -486,7 +486,6 @@ function RoomViewContent({ roomInputRef, eventId, roomTimeline }) {
   }, [newEvent]);
 
   useResizeObserver(
-    roomInputRef.current,
     useCallback((entries) => {
       if (!roomInputRef.current) return;
       const editorBaseEntry = getResizeObserverEntry(roomInputRef.current, entries);
@@ -497,7 +496,8 @@ function RoomViewContent({ roomInputRef, eventId, roomTimeline }) {
       if (timelineScroll.bottom < 40 && !roomTimeline.canPaginateForward() && document.visibilityState === 'visible') {
         timelineScroll.scrollToBottom();
       }
-    }, [roomInputRef])
+    }, [roomInputRef]),
+    useCallback(() => roomInputRef.current, [roomInputRef]),
   );
   
   const listenKeyboard = useCallback((event) => {

src/app/organisms/room/RoomViewHeader.jsx

@@ -8,8 +8,11 @@ import { blurOnBubbling } from '../../atoms/button/script';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { toggleRoomSettings, openReusableContextMenu, openNavigation } from '../../../client/action/navigation';
+import {
-import { togglePeopleDrawer } from '../../../client/action/settings';
+  toggleRoomSettings,
+  openReusableContextMenu,
+  openNavigation,
+} from '../../../client/action/navigation';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 
@@ -28,23 +31,26 @@ import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg
 import BackArrowIC from '../../../../public/res/ic/outlined/chevron-left.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { useSetSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 function RoomViewHeader({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
   const room = mx.getRoom(roomId);
+  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
   let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  avatarSrc = isDM
+    ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop')
+    : avatarSrc;
   const roomName = room.name;
 
   const roomHeaderBtnRef = useRef(null);
   useEffect(() => {
     const settingsToggle = (isVisibile) => {
       const rawIcon = roomHeaderBtnRef.current.lastElementChild;
-      rawIcon.style.transform = isVisibile
+      rawIcon.style.transform = isVisibile ? 'rotateX(180deg)' : 'rotateX(0deg)';
-        ? 'rotateX(180deg)'
-        : 'rotateX(0deg)';
     };
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {
@@ -66,11 +72,9 @@ function RoomViewHeader({ roomId }) {
   }, [roomId]);
 
   const openRoomOptions = (e) => {
-    openReusableContextMenu(
+    openReusableContextMenu('bottom', getEventCords(e, '.ic-btn'), (closeMenu) => (
-      'bottom',
+      <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />
-      getEventCords(e, '.ic-btn'),
+    ));
-      (closeMenu) => <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />,
-    );
   };
 
   return (
@@ -90,18 +94,34 @@ function RoomViewHeader({ roomId }) {
       >
         <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
         <TitleWrapper>
-          <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
+          <Text variant="h2" weight="medium" primary>
+            {twemojify(roomName)}
+          </Text>
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
-      {mx.isRoomEncrypted(roomId) === false && <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />}
+      {mx.isRoomEncrypted(roomId) === false && (
-      <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
-      <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />
         <IconButton
-        onClick={openRoomOptions}
+          onClick={() => toggleRoomSettings(tabText.SEARCH)}
-        tooltip="Options"
+          tooltip="Search"
-        src={VerticalMenuIC}
+          src={SearchIC}
         />
+      )}
+      <IconButton
+        className="room-header__drawer-btn"
+        onClick={() => {
+          setPeopleDrawer((t) => !t);
+        }}
+        tooltip="People"
+        src={UserIC}
+      />
+      <IconButton
+        className="room-header__members-btn"
+        onClick={() => toggleRoomSettings(tabText.MEMBERS)}
+        tooltip="Members"
+        src={UserIC}
+      />
+      <IconButton onClick={openRoomOptions} tooltip="Options" src={VerticalMenuIC} />
     </Header>
   );
 }

src/app/state/hooks/settings.ts

@@ -10,9 +10,9 @@ export const useSetSetting = <K extends keyof Settings>(
 ) => {
   const setterAtom = useMemo(
     () =>
-      atom<null, Settings[K]>(null, (get, set, value) => {
+      atom<null, Settings[K] | ((s: Settings[K]) => Settings[K])>(null, (get, set, value) => {
         const s = { ...get(settingsAtom) };
-        s[key] = value;
+        s[key] = typeof value === 'function' ? value(s[key]) : value;
         set(settingsAtom, s);
       }),
     [settingsAtom, key]
@@ -24,11 +24,10 @@ export const useSetSetting = <K extends keyof Settings>(
 export const useSetting = <K extends keyof Settings>(
   settingsAtom: WritableAtom<Settings, Settings>,
   key: K
-): [Settings[K], SetAtom<Settings[K], void>] => {
+): [Settings[K], SetAtom<Settings[K] | ((s: Settings[K]) => Settings[K]), void>] => {
   const selector = useMemo(() => (s: Settings) => s[key], [key]);
   const setting = useAtomValue(selectAtom(settingsAtom, selector));
 
   const setter = useSetSetting(settingsAtom, key);
-
   return [setting, setter];
 };