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
2025-11-05 15:00:30 +03:00 · 2025-03-19 23:14:54 +11:00 · 2025-03-19 23:14:54 +11:00 · 286983c833
commit 286983c833
parent 00f3df8719
73 changed files with 6196 additions and 420 deletions
--- a/src/app/components/MemberSortMenu.tsx
+++ b/src/app/components/MemberSortMenu.tsx
@ -0,0 +1,45 @@
+import FocusTrap from 'focus-trap-react';
+import React from 'react';
+import { config, Menu, MenuItem, Text } from 'folds';
+import { stopPropagation } from '../utils/keyboard';
+import { useMemberSortMenu } from '../hooks/useMemberSort';
+
+type MemberSortMenuProps = {
+  requestClose: () => void;
+  selected: number;
+  onSelect: (index: number) => void;
+};
+export function MemberSortMenu({ selected, onSelect, requestClose }: MemberSortMenuProps) {
+  const memberSortMenu = useMemberSortMenu();
+
+  return (
+    <FocusTrap
+      focusTrapOptions={{
+        initialFocus: false,
+        onDeactivate: requestClose,
+        clickOutsideDeactivates: true,
+        isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+        isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+        escapeDeactivates: stopPropagation,
+      }}
+    >
+      <Menu style={{ padding: config.space.S100 }}>
+        {memberSortMenu.map((menuItem, index) => (
+          <MenuItem
+            key={menuItem.name}
+            variant="Surface"
+            aria-pressed={selected === index}
+            size="300"
+            radii="300"
+            onClick={() => {
+              onSelect(index);
+              requestClose();
+            }}
+          >
+            <Text size="T300">{menuItem.name}</Text>
+          </MenuItem>
+        ))}
+      </Menu>
+    </FocusTrap>
+  );
+}