diff --git a/src/ui/views/session/dialogs/MemberListDialog.tsx b/src/ui/views/session/dialogs/MemberListDialog.tsx index e0990e233..230490da9 100644 --- a/src/ui/views/session/dialogs/MemberListDialog.tsx +++ b/src/ui/views/session/dialogs/MemberListDialog.tsx @@ -34,6 +34,7 @@ import { BadgeWrapper } from "../../../atoms/badge/BadgeWrapper"; import { NotificationBadge } from "../../../atoms/badge/NotificationBadge"; import { useAnimationFrame } from "../nametags/Nametags"; import { setPowerLevel } from "../../../utils/matrixUtils"; +import { PowerLevelSelector } from "./PowerLevelSelector"; interface MemberListDialogProps { room: Room; @@ -65,15 +66,17 @@ export function MemberListDialog({ room, requestClose }: MemberListDialogProps) const { active, invited, joined, leaved, banned } = useRoomMembers(room) ?? {}; const [inviteOpen, setInviteOpen] = useState(false); + const [changeUserIdPL, setChangeUserIdPL] = useState(); const isWorld = room.type === "org.matrix.msc3815.world"; const filteredJoined = joined?.filter((member) => !active?.find((m) => m.userId === member.userId)); - const { canDoAction, getPowerLevel } = usePowerLevels(room); + const { canDoAction, getPowerLevel, canSendStateEvent } = usePowerLevels(room); const myPL = getPowerLevel(session.userId); const canInvite = canDoAction("invite", myPL); const canKick = canDoAction("kick", myPL); const canBan = canDoAction("ban", myPL); + const canChangePL = canSendStateEvent("m.room.power_levels", myPL); const [activeCat, setActiveCat] = useState(true); const [joinedCat, setJoinedCat] = useState(true); @@ -86,9 +89,6 @@ export function MemberListDialog({ room, requestClose }: MemberListDialogProps) const kick = (roomId: string, userId: string) => session.hsApi.kick(roomId, userId); const ban = (roomId: string, userId: string) => session.hsApi.ban(roomId, userId); const unban = (roomId: string, userId: string) => session.hsApi.unban(roomId, userId); - const makeMember = (roomId: string, userId: string) => setPowerLevel(session, roomId, userId, 0); - const makeMod = (roomId: string, userId: string) => setPowerLevel(session, roomId, userId, 50); - const makeAdmin = (roomId: string, userId: string) => setPowerLevel(session, roomId, userId, 100); const engine = useMainThreadContext(); const toggleMute = (userId: string) => toggleMutePeer(engine, userId); @@ -123,6 +123,13 @@ export function MemberListDialog({ room, requestClose }: MemberListDialogProps) Ignore , ]; + if (canChangePL && myPL > userPL) { + menuItems.push( + setChangeUserIdPL(userId)}> + Change Power Level + + ); + } switch (membership) { case "join": if (canKick && myPL > userPL) @@ -137,23 +144,6 @@ export function MemberListDialog({ room, requestClose }: MemberListDialogProps) Ban ); - if (myPL === 100) { - menuItems.push( - makeMember(room.id, userId)}> - Make Member - - ); - menuItems.push( - makeMod(room.id, userId)}> - Make Moderator - - ); - menuItems.push( - makeAdmin(room.id, userId)}> - Make Admin - - ); - } break; case "ban": if (canKick && myPL > userPL) @@ -209,7 +199,7 @@ export function MemberListDialog({ room, requestClose }: MemberListDialogProps) {name} - {userId} + {`${userId} • PL: ${getPowerLevel(userId)}`} } @@ -227,6 +217,22 @@ export function MemberListDialog({ room, requestClose }: MemberListDialogProps) return ( <> + setChangeUserIdPL(undefined)}> +
Power Level Selector} + right={ setChangeUserIdPL(undefined)} label="Close" />} + /> + {changeUserIdPL && ( + { + setPowerLevel(session, room.id, changeUserIdPL, newPL); + setChangeUserIdPL(undefined); + }} + /> + )} +
Members} right={ diff --git a/src/ui/views/session/dialogs/PowerLevelSelector.tsx b/src/ui/views/session/dialogs/PowerLevelSelector.tsx new file mode 100644 index 000000000..95e880e73 --- /dev/null +++ b/src/ui/views/session/dialogs/PowerLevelSelector.tsx @@ -0,0 +1,54 @@ +import { NumericInput } from "../../../atoms/input/NumericInput"; +import { MenuItem } from "../../../atoms/menu/MenuItem"; +import { Label } from "../../../atoms/text/Label"; + +interface PowerLevelSelectorProps { + value: number; + max: number; + onSelect: (value: number) => void; +} + +export function PowerLevelSelector({ value, max, onSelect }: PowerLevelSelectorProps) { + const handleSubmit = (powerLevel: number) => { + if (!powerLevel) return; + onSelect(powerLevel); + }; + + return ( +
+
+ + +
+
+ {max >= 0 && } + {max >= 100 && ( + onSelect(100)}> + Admin - 100 + + )} + {max >= 50 && ( + onSelect(50)}> + Mod - 50 + + )} + {max >= 0 && ( + onSelect(0)}> + Member - 0 + + )} +
+
+ ); +}