New room settings, add customizable power levels and dev tools (#2222)

* WIP - add room settings dialog

* join rule setting - WIP

* show emojis & stickers in room settings - WIP

* restyle join rule switcher

* Merge branch 'dev' into new-room-settings

* add join rule hook

* open room settings from global state

* open new room settings from all places

* rearrange settings menu item

* add option for creating new image pack

* room devtools - WIP

* render room state events as list

* add option to open state event

* add option to edit state event

* refactor text area code editor into hook

* add option to send message and state event

* add cutout card component

* add hook for room account data

* display room account data - WIP

* refactor global account data editor component

* add account data editor in room

* fix font style in devtool

* show state events in compact form

* add option to delete room image pack

* add server badge component

* add member tile component

* render members in room settings

* add search in room settings member

* add option to reset member search

* add filter in room members

* fix member virtual item key

* remove color from serve badge in room members

* show room in settings

* fix loading indicator position

* power level tags in room setting - WIP

* generate fallback tag in backward compatible way

* add color picker

* add powers editor - WIP

* add props to stop adding emoji to recent usage

* add beta feature notice badge

* add types for power level tag icon

* refactor image pack rooms code to hook

* option for adding new power levels tags

* remove console log

* refactor power icon

* add option to edit power level tags

* remove power level from powers pill

* fix power level labels

* add option to delete power levels

* fix long power level name shrinks power integer

* room permissions - WIP

* add power level selector component

* add room permissions

* move user default permission setting to other group

* add power permission peek menu

* fix weigh of power switch text

* hide above for max power in permission switcher

* improve beta badge description

* render room profile in room settings

* add option to edit room profile

* make room topic input text area

* add option to enable room encryption in room settings

* add option to change message history visibility

* add option to change join rule

* add option for addresses in room settings

* close encryption dialog after enabling

src/app/state/hooks/roomSettings.ts

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { roomSettingsAtom, RoomSettingsPage, RoomSettingsState } from '../roomSettings';
+
+export const useRoomSettingsState = (): RoomSettingsState | undefined => {
+  const data = useAtomValue(roomSettingsAtom);
+
+  return data;
+};
+
+type CloseCallback = () => void;
+export const useCloseRoomSettings = (): CloseCallback => {
+  const setSettings = useSetAtom(roomSettingsAtom);
+
+  const close: CloseCallback = useCallback(() => {
+    setSettings(undefined);
+  }, [setSettings]);
+
+  return close;
+};
+
+type OpenCallback = (roomId: string, space?: string, page?: RoomSettingsPage) => void;
+export const useOpenRoomSettings = (): OpenCallback => {
+  const setSettings = useSetAtom(roomSettingsAtom);
+
+  const open: OpenCallback = useCallback(
+    (roomId, spaceId, page) => {
+      setSettings({ roomId, spaceId, page });
+    },
+    [setSettings]
+  );
+
+  return open;
+};

src/app/state/roomSettings.ts

@@ -0,0 +1,17 @@
+import { atom } from 'jotai';
+
+export enum RoomSettingsPage {
+  GeneralPage,
+  MembersPage,
+  PermissionsPage,
+  EmojisStickersPage,
+  DeveloperToolsPage,
+}
+
+export type RoomSettingsState = {
+  page?: RoomSettingsPage;
+  roomId: string;
+  spaceId?: string;
+};
+
+export const roomSettingsAtom = atom<RoomSettingsState | undefined>(undefined);