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-16 04:00:29 +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/member-tile/MemberTile.tsx
+++ b/src/app/components/member-tile/MemberTile.tsx
@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react';
+import { as, Avatar, Box, Icon, Icons, Text } from 'folds';
+import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
+import { getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { UserAvatar } from '../user-avatar';
+import * as css from './style.css';
+
+const getName = (room: Room, member: RoomMember) =>
+  getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
+
+type MemberTileProps = {
+  mx: MatrixClient;
+  room: Room;
+  member: RoomMember;
+  useAuthentication: boolean;
+  after?: ReactNode;
+};
+export const MemberTile = as<'button', MemberTileProps>(
+  ({ as: AsMemberTile = 'button', mx, room, member, useAuthentication, after, ...props }, ref) => {
+    const name = getName(room, member);
+    const username = getMxIdLocalPart(member.userId);
+
+    const avatarMxcUrl = member.getMxcAvatarUrl();
+    const avatarUrl = avatarMxcUrl
+      ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
+      : undefined;
+
+    return (
+      <AsMemberTile className={css.MemberTile} {...props} ref={ref}>
+        <Avatar size="300" radii="400">
+          <UserAvatar
+            userId={member.userId}
+            src={avatarUrl ?? undefined}
+            alt={name}
+            renderFallback={() => <Icon size="300" src={Icons.User} filled />}
+          />
+        </Avatar>
+        <Box grow="Yes" as="span" direction="Column">
+          <Text as="span" size="T300" truncate>
+            <b>{name}</b>
+          </Text>
+          <Box alignItems="Center" justifyContent="SpaceBetween" gap="100">
+            <Text as="span" size="T200" priority="300" truncate>
+              {username}
+            </Text>
+          </Box>
+        </Box>
+        {after}
+      </AsMemberTile>
+    );
+  }
+);
--- a/src/app/components/member-tile/index.ts
+++ b/src/app/components/member-tile/index.ts
@ -0,0 +1 @@
+export * from './MemberTile';
--- a/src/app/components/member-tile/style.css.ts
+++ b/src/app/components/member-tile/style.css.ts
@ -0,0 +1,32 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, DefaultReset, Disabled, FocusOutline } from 'folds';
+
+export const MemberTile = style([
+  DefaultReset,
+  {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    gap: config.space.S200,
+
+    padding: config.space.S100,
+    borderRadius: config.radii.R500,
+
+    selectors: {
+      'button&': {
+        cursor: 'pointer',
+      },
+      '&[aria-pressed=true]': {
+        backgroundColor: color.Surface.ContainerActive,
+      },
+      'button&:hover, &:focus-visible': {
+        backgroundColor: color.Surface.ContainerHover,
+      },
+      'button&:active': {
+        backgroundColor: color.Surface.ContainerActive,
+      },
+    },
+  },
+  FocusOutline,
+  Disabled,
+]);