forked from github/cinny
Support room version 12 (#2399)
* WIP - support room version 12 * add room creators hook * revert changes from powerlevels * improve use room creators hook * add hook to get dm users * add options to add creators in create room/space * add member item component in member drawer * remove unused import * extract member drawer header component * get room creators as set only if room version support them * add room permissions hook * support room v12 creators power * make predecessor event id optional * add info about founders in permissions * allow to create infinite powers to room creators * allow everyone with permission to create infinite power * handle additional creators in room upgrade * add option to follow space tombstone
This commit is contained in:
101
src/app/components/user-profile/CreatorChip.tsx
Normal file
101
src/app/components/user-profile/CreatorChip.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
|
||||
import React, { MouseEventHandler, useState } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { isKeyHotkey } from 'is-hotkey';
|
||||
import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
|
||||
import { PowerColorBadge, PowerIcon } from '../power';
|
||||
import { getPowerTagIconSrc } from '../../hooks/useMemberPowerTag';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { useRoom } from '../../hooks/useRoom';
|
||||
import { useSpaceOptionally } from '../../hooks/useSpace';
|
||||
import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
|
||||
import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
|
||||
import { SpaceSettingsPage } from '../../state/spaceSettings';
|
||||
import { RoomSettingsPage } from '../../state/roomSettings';
|
||||
|
||||
export function CreatorChip() {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const room = useRoom();
|
||||
const space = useSpaceOptionally();
|
||||
const openRoomSettings = useOpenRoomSettings();
|
||||
const openSpaceSettings = useOpenSpaceSettings();
|
||||
|
||||
const [cords, setCords] = useState<RectCords>();
|
||||
const tag = useRoomCreatorsTag();
|
||||
const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
|
||||
|
||||
const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const close = () => setCords(undefined);
|
||||
|
||||
return (
|
||||
<PopOut
|
||||
anchor={cords}
|
||||
position="Bottom"
|
||||
align="Start"
|
||||
offset={4}
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: close,
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
|
||||
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<div style={{ padding: config.space.S100 }}>
|
||||
<MenuItem
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
size="300"
|
||||
radii="300"
|
||||
onClick={() => {
|
||||
if (room.isSpaceRoom()) {
|
||||
openSpaceSettings(
|
||||
room.roomId,
|
||||
space?.roomId,
|
||||
SpaceSettingsPage.PermissionsPage
|
||||
);
|
||||
} else {
|
||||
openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);
|
||||
}
|
||||
close();
|
||||
}}
|
||||
>
|
||||
<Text size="B300">Manage Powers</Text>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<Chip
|
||||
variant="Success"
|
||||
outlined
|
||||
radii="Pill"
|
||||
before={
|
||||
cords ? (
|
||||
<Icon size="50" src={Icons.ChevronBottom} />
|
||||
) : (
|
||||
<PowerColorBadge color={tag.color} />
|
||||
)
|
||||
}
|
||||
after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
|
||||
onClick={open}
|
||||
aria-pressed={!!cords}
|
||||
>
|
||||
<Text size="B300" truncate>
|
||||
{tag.name}
|
||||
</Text>
|
||||
</Chip>
|
||||
</PopOut>
|
||||
);
|
||||
}
|
||||
@@ -26,8 +26,8 @@ import { isKeyHotkey } from 'is-hotkey';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { PowerColorBadge, PowerIcon } from '../power';
|
||||
import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
|
||||
import { getPowers, getTagIconSrc, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
|
||||
import { useGetMemberPowerLevel, usePowerLevels } from '../../hooks/usePowerLevels';
|
||||
import { getPowers, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
|
||||
@@ -39,6 +39,10 @@ import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
|
||||
import { SpaceSettingsPage } from '../../state/spaceSettings';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||
import { BreakWord } from '../../styles/Text.css';
|
||||
import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
|
||||
import { useRoomCreators } from '../../hooks/useRoomCreators';
|
||||
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
|
||||
import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
|
||||
|
||||
type SelfDemoteAlertProps = {
|
||||
power: number;
|
||||
@@ -149,16 +153,22 @@ export function PowerChip({ userId }: { userId: string }) {
|
||||
const openSpaceSettings = useOpenSpaceSettings();
|
||||
|
||||
const powerLevels = usePowerLevels(room);
|
||||
const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
|
||||
const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
|
||||
const myPower = getPowerLevel(mx.getSafeUserId());
|
||||
const userPower = getPowerLevel(userId);
|
||||
const canChangePowers =
|
||||
canSendStateEvent(StateEvent.RoomPowerLevels, myPower) &&
|
||||
(mx.getSafeUserId() === userId ? true : myPower > userPower);
|
||||
const creators = useRoomCreators(room);
|
||||
|
||||
const tag = getPowerLevelTag(userPower);
|
||||
const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
|
||||
const permissions = useRoomPermissions(creators, powerLevels);
|
||||
const getMemberPowerLevel = useGetMemberPowerLevel(powerLevels);
|
||||
const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
|
||||
|
||||
const powerLevelTags = usePowerLevelTags(room, powerLevels);
|
||||
const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
|
||||
|
||||
const myUserId = mx.getSafeUserId();
|
||||
const canChangePowers =
|
||||
permissions.stateEvent(StateEvent.RoomPowerLevels, myUserId) &&
|
||||
(myUserId === userId ? true : hasMorePower(myUserId, userId));
|
||||
|
||||
const tag = getMemberPowerTag(userId);
|
||||
const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
|
||||
|
||||
const [cords, setCords] = useState<RectCords>();
|
||||
|
||||
@@ -184,13 +194,13 @@ export function PowerChip({ userId }: { userId: string }) {
|
||||
const handlePowerSelect = (power: number): void => {
|
||||
close();
|
||||
if (!canChangePowers) return;
|
||||
if (power === userPower) return;
|
||||
if (power === getMemberPowerLevel(userId)) return;
|
||||
|
||||
if (userId === mx.getSafeUserId()) {
|
||||
setSelfDemote(power);
|
||||
return;
|
||||
}
|
||||
if (power === myPower) {
|
||||
if (!creators.has(myUserId) && power === getMemberPowerLevel(myUserId)) {
|
||||
setSharedPower(power);
|
||||
return;
|
||||
}
|
||||
@@ -242,19 +252,22 @@ export function PowerChip({ userId }: { userId: string }) {
|
||||
{getPowers(powerLevelTags).map((power) => {
|
||||
const powerTag = powerLevelTags[power];
|
||||
const powerTagIconSrc =
|
||||
powerTag.icon && getTagIconSrc(mx, useAuthentication, powerTag.icon);
|
||||
powerTag.icon && getPowerTagIconSrc(mx, useAuthentication, powerTag.icon);
|
||||
|
||||
const canAssignPower = power <= myPower;
|
||||
const selected = getMemberPowerLevel(userId) === power;
|
||||
const canAssignPower = creators.has(myUserId)
|
||||
? true
|
||||
: power <= getMemberPowerLevel(myUserId);
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={power}
|
||||
variant={userPower === power ? 'Primary' : 'Surface'}
|
||||
variant={selected ? 'Primary' : 'Surface'}
|
||||
fill="None"
|
||||
size="300"
|
||||
radii="300"
|
||||
aria-disabled={changing || !canChangePowers || !canAssignPower}
|
||||
aria-pressed={userPower === power}
|
||||
aria-pressed={selected}
|
||||
before={<PowerColorBadge color={powerTag.color} />}
|
||||
after={
|
||||
powerTagIconSrc ? (
|
||||
|
||||
@@ -5,12 +5,12 @@ import { getDMRoomFor, getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
|
||||
import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
|
||||
import { usePowerLevels } from '../../hooks/usePowerLevels';
|
||||
import { useRoom } from '../../hooks/useRoom';
|
||||
import { useUserPresence } from '../../hooks/useUserPresence';
|
||||
import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||
import { createDM, ignore } from '../../../client/action/room';
|
||||
import { createDM } from '../../../client/action/room';
|
||||
import { hasDevices } from '../../../util/matrixUtil';
|
||||
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
||||
import { useAlive } from '../../hooks/useAlive';
|
||||
@@ -20,6 +20,10 @@ import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './
|
||||
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
|
||||
import { useMembership } from '../../hooks/useMembership';
|
||||
import { Membership } from '../../../types/matrix/room';
|
||||
import { useRoomCreators } from '../../hooks/useRoomCreators';
|
||||
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
|
||||
import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
|
||||
import { CreatorChip } from './CreatorChip';
|
||||
|
||||
type UserRoomProfileProps = {
|
||||
userId: string;
|
||||
@@ -34,13 +38,19 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
|
||||
const ignored = ignoredUsers.includes(userId);
|
||||
|
||||
const room = useRoom();
|
||||
const powerlevels = usePowerLevels(room);
|
||||
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerlevels);
|
||||
const myPowerLevel = getPowerLevel(mx.getSafeUserId());
|
||||
const userPowerLevel = getPowerLevel(userId);
|
||||
const canKick = canDoAction('kick', myPowerLevel) && myPowerLevel > userPowerLevel;
|
||||
const canBan = canDoAction('ban', myPowerLevel) && myPowerLevel > userPowerLevel;
|
||||
const canInvite = canDoAction('invite', myPowerLevel);
|
||||
const powerLevels = usePowerLevels(room);
|
||||
const creators = useRoomCreators(room);
|
||||
|
||||
const permissions = useRoomPermissions(creators, powerLevels);
|
||||
const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
|
||||
|
||||
const myUserId = mx.getSafeUserId();
|
||||
const creator = creators.has(userId);
|
||||
|
||||
const canKickUser = permissions.action('kick', myUserId) && hasMorePower(myUserId, userId);
|
||||
const canBanUser = permissions.action('ban', myUserId) && hasMorePower(myUserId, userId);
|
||||
const canUnban = permissions.action('ban', myUserId);
|
||||
const canInvite = permissions.action('invite', myUserId);
|
||||
|
||||
const member = room.getMember(userId);
|
||||
const membership = useMembership(room, userId);
|
||||
@@ -113,7 +123,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
|
||||
<Box alignItems="Center" gap="200" wrap="Wrap">
|
||||
{server && <ServerChip server={server} />}
|
||||
<ShareChip userId={userId} />
|
||||
<PowerChip userId={userId} />
|
||||
{creator ? <CreatorChip /> : <PowerChip userId={userId} />}
|
||||
<MutualRoomsChip userId={userId} />
|
||||
<OptionsChip userId={userId} />
|
||||
</Box>
|
||||
@@ -123,7 +133,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
|
||||
<UserBanAlert
|
||||
userId={userId}
|
||||
reason={member.events.member?.getContent().reason}
|
||||
canUnban={canBan}
|
||||
canUnban={canUnban}
|
||||
bannedBy={member.events.member?.getSender()}
|
||||
ts={member.events.member?.getTs()}
|
||||
/>
|
||||
@@ -142,7 +152,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
|
||||
<UserInviteAlert
|
||||
userId={userId}
|
||||
reason={member.events.member?.getContent().reason}
|
||||
canKick={canKick}
|
||||
canKick={canKickUser}
|
||||
invitedBy={member.events.member?.getSender()}
|
||||
ts={member.events.member?.getTs()}
|
||||
/>
|
||||
@@ -150,8 +160,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
|
||||
<UserModeration
|
||||
userId={userId}
|
||||
canInvite={canInvite && membership === Membership.Leave}
|
||||
canKick={canKick && membership === Membership.Join}
|
||||
canBan={canBan && membership !== Membership.Ban}
|
||||
canKick={canKickUser && membership === Membership.Join}
|
||||
canBan={canBanUser && membership !== Membership.Ban}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user