mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-16 12:10:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Ajay Bura 2025-03-19 23:14:54 +11:00 • committed by GitHub
parent 00f3df8719
commit 286983c833
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
73 changed files with 6196 additions and 420 deletions
Download patch file Download diff file Expand all files Collapse all files

216
src/app/features/room/MembersDrawer.tsx
View file

@ -11,13 +11,11 @@ import {
Badge,
Box,
Chip,
ContainerColor,
Header,
Icon,
IconButton,
Icons,
Input,
Menu,
MenuItem,
PopOut,
RectCords,
@ -30,13 +28,11 @@ import {
} from 'folds';
import { Room, RoomMember } from 'matrix-js-sdk';
import { useVirtualizer } from '@tanstack/react-virtual';
import FocusTrap from 'focus-trap-react';
import classNames from 'classnames';
import { openProfileViewer } from '../../../client/action/navigation';
import * as css from './MembersDrawer.css';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { Membership } from '../../../types/matrix/room';
import { UseStateProvider } from '../../components/UseStateProvider';
import {
SearchItemStrGetter,
@ -44,7 +40,7 @@ import {
useAsyncSearch,
} from '../../hooks/useAsyncSearch';
import { useDebounce } from '../../hooks/useDebounce';
import { usePowerLevelTags, PowerLevelTag } from '../../hooks/usePowerLevelTags';
import { usePowerLevelTags, useFlattenPowerLevelTagMembers } from '../../hooks/usePowerLevelTags';
import { TypingIndicator } from '../../components/typing-indicator';
import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix';
@ -54,106 +50,12 @@ import { millify } from '../../plugins/millify';
import { ScrollTopContainer } from '../../components/scroll-top-container';
import { UserAvatar } from '../../components/user-avatar';
import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
import { stopPropagation } from '../../utils/keyboard';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
export const MembershipFilters = {
filterJoined: (m: RoomMember) => m.membership === Membership.Join,
filterInvited: (m: RoomMember) => m.membership === Membership.Invite,
filterLeaved: (m: RoomMember) =>
m.membership === Membership.Leave &&
m.events.member?.getStateKey() === m.events.member?.getSender(),
filterKicked: (m: RoomMember) =>
m.membership === Membership.Leave &&
m.events.member?.getStateKey() !== m.events.member?.getSender(),
filterBanned: (m: RoomMember) => m.membership === Membership.Ban,
};
export type MembershipFilterFn = (m: RoomMember) => boolean;
export type MembershipFilter = {
name: string;
filterFn: MembershipFilterFn;
color: ContainerColor;
};
const useMembershipFilterMenu = (): MembershipFilter[] =>
useMemo(
() => [
{
name: 'Joined',
filterFn: MembershipFilters.filterJoined,
color: 'Background',
},
{
name: 'Invited',
filterFn: MembershipFilters.filterInvited,
color: 'Success',
},
{
name: 'Left',
filterFn: MembershipFilters.filterLeaved,
color: 'Secondary',
},
{
name: 'Kicked',
filterFn: MembershipFilters.filterKicked,
color: 'Warning',
},
{
name: 'Banned',
filterFn: MembershipFilters.filterBanned,
color: 'Critical',
},
],
[]
);
export const SortFilters = {
filterAscending: (a: RoomMember, b: RoomMember) =>
a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1,
filterDescending: (a: RoomMember, b: RoomMember) =>
a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1,
filterNewestFirst: (a: RoomMember, b: RoomMember) =>
(b.events.member?.getTs() ?? 0) - (a.events.member?.getTs() ?? 0),
filterOldest: (a: RoomMember, b: RoomMember) =>
(a.events.member?.getTs() ?? 0) - (b.events.member?.getTs() ?? 0),
};
export type SortFilterFn = (a: RoomMember, b: RoomMember) => number;
export type SortFilter = {
name: string;
filterFn: SortFilterFn;
};
const useSortFilterMenu = (): SortFilter[] =>
useMemo(
() => [
{
name: 'A to Z',
filterFn: SortFilters.filterAscending,
},
{
name: 'Z to A',
filterFn: SortFilters.filterDescending,
},
{
name: 'Newest',
filterFn: SortFilters.filterNewestFirst,
},
{
name: 'Oldest',
filterFn: SortFilters.filterOldest,
},
],
[]
);
export type MembersFilterOptions = {
membershipFilter: MembershipFilter;
sortFilter: SortFilter;
};
import { useMembershipFilter, useMembershipFilterMenu } from '../../hooks/useMemberFilter';
import { useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
import { MemberSortMenu } from '../../components/MemberSortMenu';
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 1000,
@ -176,17 +78,19 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
const scrollRef = useRef<HTMLDivElement>(null);
const searchInputRef = useRef<HTMLInputElement>(null);
const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
const getPowerLevelTag = usePowerLevelTags();
const powerLevels = usePowerLevelsContext();
const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
const fetchingMembers = members.length < room.getJoinedMemberCount();
const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
const membershipFilterMenu = useMembershipFilterMenu();
const sortFilterMenu = useSortFilterMenu();
const sortFilterMenu = useMemberSortMenu();
const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
const membershipFilter = membershipFilterMenu[membershipFilterIndex] ?? membershipFilterMenu[0];
const sortFilter = sortFilterMenu[sortFilterIndex] ?? sortFilterMenu[0];
const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
const memberSort = useMemberSort(sortFilterIndex, sortFilterMenu);
const typingMembers = useRoomTypingMember(room.roomId);
@ -194,9 +98,9 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
() =>
members
.filter(membershipFilter.filterFn)
.sort(sortFilter.filterFn)
.sort(memberSort.sortFn)
.sort((a, b) => b.powerLevel - a.powerLevel),
[members, membershipFilter, sortFilter]
[members, membershipFilter, memberSort]
);
const [result, search, resetSearch] = useAsyncSearch(
@ -208,19 +112,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
const processMembers = result ? result.items : filteredMembers;
const PLTagOrRoomMember = useMemo(() => {
let prevTag: PowerLevelTag | undefined;
const tagOrMember: Array<PowerLevelTag | RoomMember> = [];
processMembers.forEach((m) => {
const plTag = getPowerLevelTag(m.powerLevel);
if (plTag !== prevTag) {
prevTag = plTag;
tagOrMember.push(plTag);
}
tagOrMember.push(m);
});
return tagOrMember;
}, [processMembers, getPowerLevelTag]);
const PLTagOrRoomMember = useFlattenPowerLevelTagMembers(
processMembers,
getPowerLevel,
getPowerLevelTag
);
const virtualizer = useVirtualizer({
count: PLTagOrRoomMember.length,
@ -295,38 +191,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
align="Start"
offset={4}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
escapeDeactivates: stopPropagation,
}}
>
<Menu style={{ padding: config.space.S100 }}>
{membershipFilterMenu.map((menuItem, index) => (
<MenuItem
key={menuItem.name}
variant={
menuItem.name === membershipFilter.name
? menuItem.color
: 'Surface'
}
aria-pressed={menuItem.name === membershipFilter.name}
size="300"
radii="300"
onClick={() => {
setMembershipFilterIndex(index);
setAnchor(undefined);
}}
>
<Text size="T300">{menuItem.name}</Text>
</MenuItem>
))}
</Menu>
</FocusTrap>
<MembershipFilterMenu
selected={membershipFilterIndex}
onSelect={setMembershipFilterIndex}
requestClose={() => setAnchor(undefined)}
/>
}
>
<Chip
@ -336,7 +205,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
evt.currentTarget.getBoundingClientRect()
)) as MouseEventHandler<HTMLButtonElement>
}
variant={membershipFilter.color}
variant="Background"
size="400"
radii="300"
before={<Icon src={Icons.Filter} size="50" />}
@ -354,34 +223,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
align="End"
offset={4}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
escapeDeactivates: stopPropagation,
}}
>
<Menu style={{ padding: config.space.S100 }}>
{sortFilterMenu.map((menuItem, index) => (
<MenuItem
key={menuItem.name}
variant="Surface"
aria-pressed={menuItem.name === sortFilter.name}
size="300"
radii="300"
onClick={() => {
setSortFilterIndex(index);
setAnchor(undefined);
}}
>
<Text size="T300">{menuItem.name}</Text>
</MenuItem>
))}
</Menu>
</FocusTrap>
<MemberSortMenu
selected={sortFilterIndex}
onSelect={setSortFilterIndex}
requestClose={() => setAnchor(undefined)}
/>
}
>
<Chip
@ -396,7 +242,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
radii="300"
after={<Icon src={Icons.Sort} size="50" />}
>
<Text size="T200">{sortFilter.name}</Text>
<Text size="T200">{memberSort.name}</Text>
</Chip>
</PopOut>
)}

18
src/app/features/room/RoomInput.tsx
View file

@ -4,7 +4,6 @@ import React, {
forwardRef,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
@ -101,12 +100,7 @@ import {
getVideoMsgContent,
} from './msgContent';
import colorMXID from '../../../util/colorMXID';
import {
getAllParents,
getMemberDisplayName,
getMentionContent,
trimReplyFromBody,
} from '../../utils/room';
import { getMemberDisplayName, getMentionContent, trimReplyFromBody } from '../../utils/room';
import { CommandAutocomplete } from './CommandAutocomplete';
import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands';
import { mobileOrTablet } from '../../utils/user-agent';
@ -114,6 +108,7 @@ import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
import { ReplyLayout, ThreadIndicator } from '../../components/message';
import { roomToParentsAtom } from '../../state/room/roomToParents';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useImagePackRooms } from '../../hooks/useImagePackRooms';
interface RoomInputProps {
editor: Editor;
@ -142,14 +137,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
);
const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers>();
const imagePackRooms: Room[] = useMemo(() => {
const allParentSpaces = [roomId].concat(Array.from(getAllParents(roomToParents, roomId)));
return allParentSpaces.reduce<Room[]>((list, rId) => {
const r = mx.getRoom(rId);
if (r) list.push(r);
return list;
}, []);
}, [mx, roomId, roomToParents]);
const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);
const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
const [autocompleteQuery, setAutocompleteQuery] =

13
src/app/features/room/RoomTimeline.tsx
View file

@ -75,7 +75,6 @@ import {
import {
canEditEvent,
decryptAllTimelineEvent,
getAllParents,
getEditedEvent,
getEventReactions,
getLatestEditableEvt,
@ -118,6 +117,7 @@ import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
import { useImagePackRooms } from '../../hooks/useImagePackRooms';
const TimelineFloat = as<'div', css.TimelineFloatVariants>(
({ position, className, ...props }, ref) => (
@ -454,16 +454,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const mentionClickHandler = useMentionClickHandler(room.roomId);
const spoilerClickHandler = useSpoilerClickHandler();
const imagePackRooms: Room[] = useMemo(() => {
const allParentSpaces = [room.roomId].concat(
Array.from(getAllParents(roomToParents, room.roomId))
);
return allParentSpaces.reduce<Room[]>((list, rId) => {
const r = mx.getRoom(rId);
if (r) list.push(r);
return list;
}, []);
}, [mx, room, roomToParents]);
const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
const readUptoEventIdRef = useRef<string>();

11
src/app/features/room/RoomViewHeader.tsx
View file

@ -44,7 +44,7 @@ import { useRoomUnread } from '../../state/hooks/unread';
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { markAsRead } from '../../../client/action/notifications';
import { roomToUnreadAtom } from '../../state/room/roomToUnread';
import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
import { openInviteUser } from '../../../client/action/navigation';
import { copyToClipboard } from '../../utils/dom';
import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
@ -57,6 +57,7 @@ import { BackRouteHandler } from '../../components/BackRouteHandler';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
import { RoomPinMenu } from './room-pin-menu';
import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
type RoomMenuProps = {
room: Room;
@ -87,8 +88,10 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
requestClose();
};
const handleRoomSettings = () => {
toggleRoomSettings(room.roomId);
const openSettings = useOpenRoomSettings();
const parentSpace = useSpaceOptionally();
const handleOpenSettings = () => {
openSettings(room.roomId, parentSpace?.roomId);
requestClose();
};
@ -133,7 +136,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
</Text>
</MenuItem>
<MenuItem
onClick={handleRoomSettings}
onClick={handleOpenSettings}
size="300"
after={<Icon size="100" src={Icons.Setting} />}
radii="300"