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