diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
index 87f085d8..e6b3a839 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -17,6 +17,7 @@ import colorMXID from '../../../util/colorMXID';
import Text from '../../atoms/text/Text';
import Chip from '../../atoms/chip/Chip';
import IconButton from '../../atoms/button/IconButton';
+import Input from '../../atoms/input/Input';
import Avatar from '../../atoms/avatar/Avatar';
import Button from '../../atoms/button/Button';
import PowerLevelSelector from '../../molecules/power-level-selector/PowerLevelSelector';
@@ -29,6 +30,45 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate';
+function ModerationTools({
+ roomId, userId,
+}) {
+ const mx = initMatrix.matrixClient;
+ const room = mx.getRoom(roomId);
+ const roomMember = room.getMember(userId);
+
+ const myPowerLevel = room.getMember(mx.getUserId()).powerLevel;
+ const powerLevel = roomMember?.powerLevel || 0;
+ const canIKick = (
+ roomMember?.membership === 'join'
+ && room.currentState.hasSufficientPowerLevelFor('kick', myPowerLevel)
+ && powerLevel < myPowerLevel
+ );
+
+ const handleKick = (e) => {
+ e.preventDefault();
+ const kickReason = e.target.elements['kick-reason']?.value.trim();
+ roomActions.kick(roomId, userId, kickReason !== '' ? kickReason : undefined);
+ };
+
+ return (
+
+ {canIKick && (
+ <>
+
+ >
+ )}
+
+ );
+}
+ModerationTools.propTypes = {
+ roomId: PropTypes.string.isRequired,
+ userId: PropTypes.string.isRequired,
+};
+
function SessionInfo({ userId }) {
const [devices, setDevices] = useState(null);
const mx = initMatrix.matrixClient;
@@ -257,25 +297,30 @@ function useToggleDialog() {
return [isOpen, roomId, userId, closeDialog, afterClose];
}
-function useRerenderOnRoleChange(roomId, userId) {
+function useRerenderOnProfileChange(roomId, userId) {
const mx = initMatrix.matrixClient;
const [, forceUpdate] = useForceUpdate();
useEffect(() => {
- const handlePowerLevelChange = (mEvent, member) => {
- if (mEvent.getRoomId() === roomId && member.userId === userId) {
+ const handleProfileChange = (mEvent, member) => {
+ if (
+ mEvent.getRoomId() === roomId
+ && (member.userId === userId || member.userId === mx.getUserId())
+ ) {
forceUpdate();
}
};
- mx.on('RoomMember.powerLevel', handlePowerLevelChange);
+ mx.on('RoomMember.powerLevel', handleProfileChange);
+ mx.on('RoomMember.membership', handleProfileChange);
return () => {
- mx.removeListener('RoomMember.powerLevel', handlePowerLevelChange);
+ mx.removeListener('RoomMember.powerLevel', handleProfileChange);
+ mx.removeListener('RoomMember.membership', handleProfileChange);
};
}, [roomId, userId]);
}
function ProfileViewer() {
const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
- useRerenderOnRoleChange(roomId, userId);
+ useRerenderOnProfileChange(roomId, userId);
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
@@ -288,8 +333,8 @@ function ProfileViewer() {
}
const renderProfile = () => {
- const avatarMxc = roomMember.getMxcAvatarUrl?.() || mx.getMember(userId).avatarUrl;
- const avatarUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null;
+ const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId).avatarUrl;
+ const avatarUrl = (avatarMxc && avatarMxc !== 'null') ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null;
const powerLevel = roomMember.powerLevel || 0;
const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
@@ -344,13 +389,10 @@ function ProfileViewer() {
+
{ userId !== mx.getUserId() && (
-
+
)}
);
diff --git a/src/app/organisms/profile-viewer/ProfileViewer.scss b/src/app/organisms/profile-viewer/ProfileViewer.scss
index 230c8db7..b8c46426 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.scss
+++ b/src/app/organisms/profile-viewer/ProfileViewer.scss
@@ -1,3 +1,4 @@
+@use '../../partials/flex';
@use '../../partials/dir';
.profile-viewer__dialog {
@@ -61,6 +62,27 @@
}
}
+.profile-viewer__admin-tool {
+ .setting-tile {
+ margin-top: var(--sp-loose);
+ }
+}
+
+.moderation-tools {
+ & > form {
+ margin: var(--sp-normal) 0;
+ display: flex;
+ align-items: flex-end;
+ & .input-container {
+ @extend .cp-fx__item-one;
+ @include dir.side(margin, 0, var(--sp-tight));
+ }
+ & button {
+ height: 46px;
+ }
+ }
+}
+
.session-info {
& .setting-tile__title .text {
color: var(--tc-surface-high);
diff --git a/src/client/action/room.js b/src/client/action/room.js
index 73783ef0..8d67afd0 100644
--- a/src/client/action/room.js
+++ b/src/client/action/room.js
@@ -192,10 +192,10 @@ async function invite(roomId, userId) {
return result;
}
-async function kick(roomId, userId) {
+async function kick(roomId, userId, reason) {
const mx = initMatrix.matrixClient;
- const result = await mx.kick(roomId, userId);
+ const result = await mx.kick(roomId, userId, reason);
return result;
}