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/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%',
+});