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

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;
+};