+
+
+ {name}
+ {parentName && (
+
+ {' — '}
+ {parentName}
+
+ )}
+
+ {isUnread && (
+
+ )}
+
+ }
+ options={options}
+ onClick={onClick}
+ onContextMenu={onContextMenu}
+ />
+ );
+}
+RoomSelector.defaultProps = {
+ parentName: null,
+ isSelected: false,
+ imageSrc: null,
+ iconSrc: null,
+ isMuted: false,
+ options: null,
+ onContextMenu: null,
+};
+RoomSelector.propTypes = {
+ name: PropTypes.string.isRequired,
+ parentName: PropTypes.string,
+ roomId: PropTypes.string.isRequired,
+ imageSrc: PropTypes.string,
+ iconSrc: PropTypes.string,
+ isSelected: PropTypes.bool,
+ isMuted: PropTypes.bool,
+ isUnread: PropTypes.bool.isRequired,
+ notificationCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ isAlert: PropTypes.bool.isRequired,
+ options: PropTypes.node,
+ onClick: PropTypes.func.isRequired,
+ onContextMenu: PropTypes.func,
+};
+
+export default RoomSelector;
diff --git a/src/app/molecules/room-selector/RoomSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss
new file mode 100644
index 00000000..59e47473
--- /dev/null
+++ b/src/app/molecules/room-selector/RoomSelector.scss
@@ -0,0 +1,87 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
+
+.room-selector {
+ @extend .cp-fx__row--s-c;
+
+ border: 1px solid transparent;
+ border-radius: var(--bo-radius);
+ cursor: pointer;
+
+ &--muted {
+ opacity: 0.6;
+ }
+
+ &--unread {
+ .room-selector__content > .text {
+ color: var(--tc-surface-high);
+ }
+ }
+
+ &--selected {
+ background-color: var(--bg-surface);
+ border-color: var(--bg-surface-border);
+
+ & .room-selector__options {
+ display: flex;
+ }
+ }
+
+ @media (hover: hover) {
+ &:hover {
+ background-color: var(--bg-surface-hover);
+ & .room-selector__options {
+ display: flex;
+ }
+ }
+ }
+ &:focus-within {
+ background-color: var(--bg-surface-hover);
+ & button {
+ outline: none;
+ }
+ }
+ &:active {
+ background-color: var(--bg-surface-active);
+ }
+ &--selected:hover,
+ &--selected:focus,
+ &--selected:active {
+ background-color: var(--bg-surface);
+ }
+}
+
+.room-selector__content {
+ @extend .cp-fx__item-one;
+ @extend .cp-fx__row--s-c;
+ padding: 0 var(--sp-extra-tight);
+ min-height: 40px;
+ cursor: inherit;
+
+ & > .avatar-container .avatar__border--active {
+ box-shadow: none;
+ }
+
+ & > .text {
+ @extend .cp-fx__item-one;
+ @extend .cp-txt__ellipsis;
+ margin: 0 var(--sp-extra-tight);
+
+ color: var(--tc-surface-normal-low);
+ }
+}
+.room-selector__options {
+ @extend .cp-fx__row--s-c;
+ @include dir.side(margin, 0, var(--sp-ultra-tight));
+ display: none;
+
+ &:empty {
+ margin: 0 !important;
+ }
+
+ & .ic-btn {
+ padding: 6px;
+ border-radius: calc(var(--bo-radius) / 2);
+ }
+}
\ No newline at end of file
diff --git a/src/app/molecules/room-tile/RoomTile.jsx b/src/app/molecules/room-tile/RoomTile.jsx
new file mode 100644
index 00000000..2e0a63f6
--- /dev/null
+++ b/src/app/molecules/room-tile/RoomTile.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomTile.scss';
+
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+
+function RoomTile({ avatarSrc, name, id, inviterName, memberCount, desc, options }) {
+ return (
+
+
+
+ {name}
+
+ {inviterName !== null
+ ? `Invited by ${inviterName} to ${id}${
+ memberCount === null ? '' : ` • ${memberCount} members`
+ }`
+ : id + (memberCount === null ? '' : ` • ${memberCount} members`)}
+
+ {desc !== null && typeof desc === 'string' ? (
+
+ {desc}
+
+ ) : (
+ desc
+ )}
+
+ {options !== null &&
{options}
}
+
+
+
+ {
+ typeof title === 'string'
+ ? {title}
+ : title
+ }
+
+ {content}
+
+ {options !== null &&
{options}
}
+
+ {process && }
+ {process || `${selected.length} item selected`}
+ {!process && (
+
+ )}
+
+ )}
+
+ );
+}
+SpaceAddExistingContent.propTypes = {
+ roomId: PropTypes.string.isRequired,
+ spaces: PropTypes.bool.isRequired,
+};
+
+function useVisibilityToggle() {
+ const [data, setData] = useState(null);
+
+ useEffect(() => {
+ const handleOpen = (roomId, spaces) =>
+ setData({
+ roomId,
+ spaces,
+ });
+ navigation.on(cons.events.navigation.SPACE_ADDEXISTING_OPENED, handleOpen);
+ return () => {
+ navigation.removeListener(cons.events.navigation.SPACE_ADDEXISTING_OPENED, handleOpen);
+ };
+ }, []);
+
+ const requestClose = () => setData(null);
+
+ return [data, requestClose];
+}
+
+function SpaceAddExisting() {
+ const [data, requestClose] = useVisibilityToggle();
+ const mx = useMatrixClient();
+ const room = mx.getRoom(data?.roomId);
+
+ return (
+
+ );
+}
+
+export default SpaceAddExisting;
diff --git a/src/app/molecules/space-add-existing/SpaceAddExisting.scss b/src/app/molecules/space-add-existing/SpaceAddExisting.scss
new file mode 100644
index 00000000..3eb3d96a
--- /dev/null
+++ b/src/app/molecules/space-add-existing/SpaceAddExisting.scss
@@ -0,0 +1,77 @@
+@use '../../partials/dir';
+@use '../../partials/flex';
+
+.space-add-existing {
+ height: 100%;
+
+ .dialog__content-container {
+ padding: 0;
+ padding-bottom: 80px;
+ @include dir.side(padding, var(--sp-extra-tight), 0);
+
+ & > .text {
+ margin: var(--sp-loose) var(--sp-normal);
+ text-align: center;
+ }
+ }
+
+ & form {
+ @extend .cp-fx__row--s-c;
+ padding: var(--sp-extra-tight);
+ padding-top: var(--sp-normal);
+
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ background-color: var(--bg-surface);
+
+ & > .ic-raw,
+ & > .ic-btn {
+ position: absolute;
+ }
+ & > .ic-raw {
+ margin: 0 var(--sp-tight);
+ }
+ & > .ic-btn {
+ border-radius: calc(var(--bo-radius) / 2);
+ @include dir.prop(right, var(--sp-tight), unset);
+ @include dir.prop(left, unset, var(--sp-tight));
+ }
+ & input {
+ padding: var(--sp-tight) 40px;
+ }
+ }
+
+ .input-container {
+ @extend .cp-fx__item-one;
+ }
+
+ .room-selector {
+ margin: 0 var(--sp-extra-tight);
+ }
+ .room-selector__options {
+ display: flex;
+ margin: 0 10px;
+ }
+}
+
+.space-add-existing__footer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding: var(--sp-normal);
+ background-color: var(--bg-surface);
+ border-top: 1px solid var(--bg-surface-border);
+ display: flex;
+ align-items: center;
+
+ & > .text {
+ @extend .cp-fx__item-one;
+ padding: 0 var(--sp-tight);
+ }
+
+ & > button {
+ @include dir.side(margin, var(--sp-normal), 0);
+ }
+}
\ No newline at end of file
diff --git a/src/app/organisms/create-room/CreateRoom.jsx b/src/app/organisms/create-room/CreateRoom.jsx
new file mode 100644
index 00000000..04b2faeb
--- /dev/null
+++ b/src/app/organisms/create-room/CreateRoom.jsx
@@ -0,0 +1,307 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './CreateRoom.scss';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
+import { isRoomAliasAvailable, getIdServer } from '../../../util/matrixUtil';
+import { getEventCords } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import Toggle from '../../atoms/button/Toggle';
+import IconButton from '../../atoms/button/IconButton';
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+import SegmentControl from '../../atoms/segmented-controls/SegmentedControls';
+import Dialog from '../../molecules/dialog/Dialog';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
+import SpacePlusIC from '../../../../public/res/ic/outlined/space-plus.svg';
+import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
+import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
+import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
+import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
+import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+
+function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
+ const [joinRule, setJoinRule] = useState(parentId ? 'restricted' : 'invite');
+ const [isEncrypted, setIsEncrypted] = useState(true);
+ const [isCreatingRoom, setIsCreatingRoom] = useState(false);
+ const [creatingError, setCreatingError] = useState(null);
+ const { navigateRoom, navigateSpace } = useRoomNavigate();
+
+ const [isValidAddress, setIsValidAddress] = useState(null);
+ const [addressValue, setAddressValue] = useState(undefined);
+ const [roleIndex, setRoleIndex] = useState(0);
+
+ const addressRef = useRef(null);
+
+ const mx = useMatrixClient();
+ const userHs = getIdServer(mx.getUserId());
+
+ const handleSubmit = async (evt) => {
+ evt.preventDefault();
+ const { target } = evt;
+
+ if (isCreatingRoom) return;
+ setIsCreatingRoom(true);
+ setCreatingError(null);
+
+ const name = target.name.value;
+ let topic = target.topic.value;
+ if (topic.trim() === '') topic = undefined;
+ let roomAlias;
+ if (joinRule === 'public') {
+ roomAlias = addressRef?.current?.value;
+ if (roomAlias.trim() === '') roomAlias = undefined;
+ }
+
+ const powerLevel = roleIndex === 1 ? 101 : undefined;
+
+ try {
+ const data = await roomActions.createRoom(mx, {
+ name,
+ topic,
+ joinRule,
+ alias: roomAlias,
+ isEncrypted: isSpace || joinRule === 'public' ? false : isEncrypted,
+ powerLevel,
+ isSpace,
+ parentId,
+ });
+ setIsCreatingRoom(false);
+ setCreatingError(null);
+ setIsValidAddress(null);
+ setAddressValue(undefined);
+ onRequestClose();
+ if (isSpace) {
+ navigateSpace(data.room_id);
+ } else {
+ navigateRoom(data.room_id);
+ }
+ } catch (e) {
+ if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
+ setCreatingError('ERROR: Invalid characters in address');
+ setIsValidAddress(false);
+ } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
+ setCreatingError('ERROR: This address is already in use');
+ setIsValidAddress(false);
+ } else setCreatingError(e.message);
+ setIsCreatingRoom(false);
+ }
+ };
+
+ const validateAddress = (e) => {
+ const myAddress = e.target.value;
+ setIsValidAddress(null);
+ setAddressValue(e.target.value);
+ setCreatingError(null);
+
+ setTimeout(async () => {
+ if (myAddress !== addressRef.current.value) return;
+ const roomAlias = addressRef.current.value;
+ if (roomAlias === '') return;
+ const roomAddress = `#${roomAlias}:${userHs}`;
+
+ if (await isRoomAliasAvailable(mx, roomAddress)) {
+ setIsValidAddress(true);
+ } else {
+ setIsValidAddress(false);
+ }
+ }, 1000);
+ };
+
+ const joinRules = ['invite', 'restricted', 'public'];
+ const joinRuleShortText = ['Private', 'Restricted', 'Public'];
+ const joinRuleText = [
+ 'Private (invite only)',
+ 'Restricted (space member can join)',
+ 'Public (anyone can join)',
+ ];
+ const jrRoomIC = [HashLockIC, HashIC, HashGlobeIC];
+ const jrSpaceIC = [SpaceLockIC, SpaceIC, SpaceGlobeIC];
+ const handleJoinRule = (evt) => {
+ openReusableContextMenu('bottom', getEventCords(evt, '.btn-surface'), (closeMenu) => (
+ <>
+ Visibility (who can join)
+ {joinRules.map((rule) => (
+
+ ))}
+
+ ));
+ };
+
+ return (
+
+ );
+}
+CreateRoomContent.defaultProps = {
+ parentId: null,
+};
+CreateRoomContent.propTypes = {
+ isSpace: PropTypes.bool.isRequired,
+ parentId: PropTypes.string,
+ onRequestClose: PropTypes.func.isRequired,
+};
+
+function useWindowToggle() {
+ const [create, setCreate] = useState(null);
+
+ useEffect(() => {
+ const handleOpen = (isSpace, parentId) => {
+ setCreate({
+ isSpace,
+ parentId,
+ });
+ };
+ navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, handleOpen);
+ return () => {
+ navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, handleOpen);
+ };
+ }, []);
+
+ const onRequestClose = () => setCreate(null);
+
+ return [create, onRequestClose];
+}
+
+function CreateRoom() {
+ const [create, onRequestClose] = useWindowToggle();
+ const { isSpace, parentId } = create ?? {};
+ const mx = useMatrixClient();
+ const room = mx.getRoom(parentId);
+
+ return (
+
+ );
+}
+
+export default CreateRoom;
diff --git a/src/app/organisms/create-room/CreateRoom.scss b/src/app/organisms/create-room/CreateRoom.scss
new file mode 100644
index 00000000..ccd3ea3b
--- /dev/null
+++ b/src/app/organisms/create-room/CreateRoom.scss
@@ -0,0 +1,90 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.create-room {
+ margin: var(--sp-normal);
+ @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
+
+ &__form > * {
+ margin-top: var(--sp-normal);
+ &:first-child {
+ margin-top: var(--sp-extra-tight);
+ }
+ }
+
+ & .segment-btn {
+ padding: var(--sp-ultra-tight) 0;
+ &__base {
+ padding: 0 var(--sp-tight);
+ }
+ }
+
+ &__address {
+ display: flex;
+ &__label {
+ color: var(--tc-surface-low);
+ margin-bottom: var(--sp-ultra-tight);
+ }
+ &__tip {
+ margin-top: var(--sp-ultra-tight);
+ @include dir.side(margin, 46px, 0);
+ }
+ & .text {
+ display: flex;
+ align-items: center;
+ padding: 0 var(--sp-normal);
+ border: 1px solid var(--bg-surface-border);
+ border-radius: var(--bo-radius);
+ color: var(--tc-surface-low);
+ }
+ & *:nth-child(2) {
+ flex: 1;
+ min-width: 0;
+ & .input {
+ border-radius: 0;
+ }
+ }
+ & .text:first-child {
+ @include dir.prop(border-width, 1px 0 1px 1px, 1px 1px 1px 0);
+ @include dir.prop(
+ border-radius,
+ var(--bo-radius) 0 0 var(--bo-radius),
+ 0 var(--bo-radius) var(--bo-radius) 0,
+ );
+ }
+ & .text:last-child {
+ @include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
+ @include dir.prop(
+ border-radius,
+ 0 var(--bo-radius) var(--bo-radius) 0,
+ var(--bo-radius) 0 0 var(--bo-radius),
+ );
+ }
+ }
+
+ &__name-wrapper {
+ display: flex;
+ align-items: flex-end;
+
+ & .input-container {
+ flex: 1;
+ min-width: 0;
+ @include dir.side(margin, 0, var(--sp-normal));
+ }
+ & .btn-primary {
+ padding-top: 11px;
+ padding-bottom: 11px;
+ }
+ }
+
+ &__loading {
+ @extend .cp-fx__row--c-c;
+ & .text {
+ @include dir.side(margin, var(--sp-normal), 0);
+ }
+ }
+ &__error {
+ text-align: center;
+ color: var(--bg-danger) !important;
+ }
+}
\ No newline at end of file
diff --git a/src/app/organisms/emoji-board/custom-emoji.js b/src/app/organisms/emoji-board/custom-emoji.js
new file mode 100644
index 00000000..4ca2088f
--- /dev/null
+++ b/src/app/organisms/emoji-board/custom-emoji.js
@@ -0,0 +1,142 @@
+// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
+
+export class ImagePack {
+ static parsePack(eventId, packContent) {
+ if (!eventId || typeof packContent?.images !== 'object') {
+ return null;
+ }
+
+ return new ImagePack(eventId, packContent);
+ }
+
+ constructor(eventId, content) {
+ this.id = eventId;
+ this.content = JSON.parse(JSON.stringify(content));
+
+ this.applyPack(content);
+ this.applyImages(content);
+ }
+
+ applyPack(content) {
+ const pack = content.pack ?? {};
+
+ this.displayName = pack.display_name;
+ this.avatarUrl = pack.avatar_url;
+ this.usage = pack.usage ?? ['emoticon', 'sticker'];
+ this.attribution = pack.attribution;
+ }
+
+ applyImages(content) {
+ this.images = new Map();
+ this.emoticons = [];
+ this.stickers = [];
+
+ Object.entries(content.images).forEach(([shortcode, data]) => {
+ const mxc = data.url;
+ const body = data.body ?? shortcode;
+ const usage = data.usage ?? this.usage;
+ const { info } = data;
+
+ if (!mxc) return;
+ const image = {
+ shortcode, mxc, body, usage, info,
+ };
+
+ this.images.set(shortcode, image);
+ if (usage.includes('emoticon')) {
+ this.emoticons.push(image);
+ }
+ if (usage.includes('sticker')) {
+ this.stickers.push(image);
+ }
+ });
+ }
+
+ getImages() {
+ return this.images;
+ }
+
+ getEmojis() {
+ return this.emoticons;
+ }
+
+ getStickers() {
+ return this.stickers;
+ }
+
+ getContent() {
+ return this.content;
+ }
+
+ _updatePackProperty(property, value) {
+ if (this.content.pack === undefined) {
+ this.content.pack = {};
+ }
+ this.content.pack[property] = value;
+ this.applyPack(this.content);
+ }
+
+ setAvatarUrl(avatarUrl) {
+ this._updatePackProperty('avatar_url', avatarUrl);
+ }
+
+ setDisplayName(displayName) {
+ this._updatePackProperty('display_name', displayName);
+ }
+
+ setAttribution(attribution) {
+ this._updatePackProperty('attribution', attribution);
+ }
+
+ setUsage(usage) {
+ this._updatePackProperty('usage', usage);
+ }
+
+ addImage(key, imgContent) {
+ this.content.images = {
+ [key]: imgContent,
+ ...this.content.images,
+ };
+ this.applyImages(this.content);
+ }
+
+ removeImage(key) {
+ if (this.content.images[key] === undefined) return;
+ delete this.content.images[key];
+ this.applyImages(this.content);
+ }
+
+ updateImageKey(key, newKey) {
+ if (this.content.images[key] === undefined) return;
+ const copyImages = {};
+ Object.keys(this.content.images).forEach((imgKey) => {
+ copyImages[imgKey === key ? newKey : imgKey] = this.content.images[imgKey];
+ });
+ this.content.images = copyImages;
+ this.applyImages(this.content);
+ }
+
+ _updateImageProperty(key, property, value) {
+ if (this.content.images[key] === undefined) return;
+ this.content.images[key][property] = value;
+ this.applyImages(this.content);
+ }
+
+ setImageUrl(key, url) {
+ this._updateImageProperty(key, 'url', url);
+ }
+
+ setImageBody(key, body) {
+ this._updateImageProperty(key, 'body', body);
+ }
+
+ setImageInfo(key, info) {
+ this._updateImageProperty(key, 'info', info);
+ }
+
+ setImageUsage(key, usage) {
+ this._updateImageProperty(key, 'usage', usage);
+ }
+}
+
+
diff --git a/src/app/organisms/invite-user/InviteUser.jsx b/src/app/organisms/invite-user/InviteUser.jsx
new file mode 100644
index 00000000..271c22a9
--- /dev/null
+++ b/src/app/organisms/invite-user/InviteUser.jsx
@@ -0,0 +1,315 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './InviteUser.scss';
+
+import * as roomActions from '../../../client/action/room';
+import { hasDevices } from '../../../util/matrixUtil';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
+import Spinner from '../../atoms/spinner/Spinner';
+import Input from '../../atoms/input/Input';
+import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import RoomTile from '../../molecules/room-tile/RoomTile';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import UserIC from '../../../../public/res/ic/outlined/user.svg';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { getDMRoomFor } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+
+function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
+ const [isSearching, updateIsSearching] = useState(false);
+ const [searchQuery, updateSearchQuery] = useState({});
+ const [users, updateUsers] = useState([]);
+ const useAuthentication = useMediaAuthentication();
+
+ const [procUsers, updateProcUsers] = useState(new Set()); // proc stands for processing.
+ const [procUserError, updateUserProcError] = useState(new Map());
+
+ const [createdDM, updateCreatedDM] = useState(new Map());
+ const [roomIdToUserId, updateRoomIdToUserId] = useState(new Map());
+
+ const [invitedUserIds, updateInvitedUserIds] = useState(new Set());
+
+ const usernameRef = useRef(null);
+
+ const mx = useMatrixClient();
+ const { navigateRoom } = useRoomNavigate();
+
+ function getMapCopy(myMap) {
+ const newMap = new Map();
+ myMap.forEach((data, key) => {
+ newMap.set(key, data);
+ });
+ return newMap;
+ }
+ function addUserToProc(userId) {
+ procUsers.add(userId);
+ updateProcUsers(new Set(Array.from(procUsers)));
+ }
+ function deleteUserFromProc(userId) {
+ procUsers.delete(userId);
+ updateProcUsers(new Set(Array.from(procUsers)));
+ }
+
+ function onDMCreated(newRoomId) {
+ const myDMPartnerId = roomIdToUserId.get(newRoomId);
+ if (typeof myDMPartnerId === 'undefined') return;
+
+ createdDM.set(myDMPartnerId, newRoomId);
+ roomIdToUserId.delete(newRoomId);
+
+ deleteUserFromProc(myDMPartnerId);
+ updateCreatedDM(getMapCopy(createdDM));
+ updateRoomIdToUserId(getMapCopy(roomIdToUserId));
+ }
+
+ async function searchUser(username) {
+ const inputUsername = username.trim();
+ if (isSearching || inputUsername === '' || inputUsername === searchQuery.username) return;
+ const isInputUserId = inputUsername[0] === '@' && inputUsername.indexOf(':') > 1;
+ updateIsSearching(true);
+ updateSearchQuery({ username: inputUsername });
+
+ if (isInputUserId) {
+ try {
+ const result = await mx.getProfileInfo(inputUsername);
+ updateUsers([
+ {
+ user_id: inputUsername,
+ display_name: result.displayname,
+ avatar_url: result.avatar_url,
+ },
+ ]);
+ } catch (e) {
+ updateSearchQuery({ error: `${inputUsername} not found!` });
+ }
+ } else {
+ try {
+ const result = await mx.searchUserDirectory({
+ term: inputUsername,
+ limit: 20,
+ });
+ if (result.results.length === 0) {
+ updateSearchQuery({ error: `No matches found for "${inputUsername}"!` });
+ updateIsSearching(false);
+ return;
+ }
+ updateUsers(result.results);
+ } catch (e) {
+ updateSearchQuery({ error: 'Something went wrong!' });
+ }
+ }
+ updateIsSearching(false);
+ }
+
+ async function createDM(userId) {
+ if (mx.getUserId() === userId) return;
+ const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
+ if (dmRoomId) {
+ navigateRoom(dmRoomId);
+ onRequestClose();
+ return;
+ }
+
+ try {
+ addUserToProc(userId);
+ procUserError.delete(userId);
+ updateUserProcError(getMapCopy(procUserError));
+
+ const result = await roomActions.createDM(mx, userId, await hasDevices(mx, userId));
+ roomIdToUserId.set(result.room_id, userId);
+ updateRoomIdToUserId(getMapCopy(roomIdToUserId));
+ onDMCreated(result.room_id);
+ } catch (e) {
+ deleteUserFromProc(userId);
+ if (typeof e.message === 'string') procUserError.set(userId, e.message);
+ else procUserError.set(userId, 'Something went wrong!');
+ updateUserProcError(getMapCopy(procUserError));
+ }
+ }
+
+ async function inviteToRoom(userId) {
+ if (typeof roomId === 'undefined') return;
+ try {
+ addUserToProc(userId);
+ procUserError.delete(userId);
+ updateUserProcError(getMapCopy(procUserError));
+
+ await mx.invite(roomId, userId);
+
+ invitedUserIds.add(userId);
+ updateInvitedUserIds(new Set(Array.from(invitedUserIds)));
+ deleteUserFromProc(userId);
+ } catch (e) {
+ deleteUserFromProc(userId);
+ if (typeof e.message === 'string') procUserError.set(userId, e.message);
+ else procUserError.set(userId, 'Something went wrong!');
+ updateUserProcError(getMapCopy(procUserError));
+ }
+ }
+
+ function renderUserList() {
+ const renderOptions = (userId) => {
+ const messageJSX = (message, isPositive) => (
+
+
+ {message}
+
+
+ );
+
+ if (mx.getUserId() === userId) return null;
+ if (procUsers.has(userId)) {
+ return ;
+ }
+ if (createdDM.has(userId)) {
+ // eslint-disable-next-line max-len
+ return (
+
+ );
+ }
+ if (invitedUserIds.has(userId)) {
+ return messageJSX('Invited', true);
+ }
+ if (typeof roomId === 'string') {
+ const member = mx.getRoom(roomId).getMember(userId);
+ if (member !== null) {
+ const userMembership = member.membership;
+ switch (userMembership) {
+ case 'join':
+ return messageJSX('Already joined', true);
+ case 'invite':
+ return messageJSX('Already Invited', true);
+ case 'ban':
+ return messageJSX('Banned', false);
+ default:
+ }
+ }
+ }
+ return typeof roomId === 'string' ? (
+
+ ) : (
+
+ );
+ };
+ const renderError = (userId) => {
+ if (!procUserError.has(userId)) return null;
+ return (
+
+ {procUserError.get(userId)}
+
+ );
+ };
+
+ return users.map((user) => {
+ const userId = user.user_id;
+ const name = typeof user.display_name === 'string' ? user.display_name : userId;
+ return (
+
+ );
+ });
+ }
+
+ useEffect(() => {
+ if (isOpen && typeof searchTerm === 'string') searchUser(searchTerm);
+ return () => {
+ updateIsSearching(false);
+ updateSearchQuery({});
+ updateUsers([]);
+ updateProcUsers(new Set());
+ updateUserProcError(new Map());
+ updateCreatedDM(new Map());
+ updateRoomIdToUserId(new Map());
+ updateInvitedUserIds(new Set());
+ };
+ }, [isOpen, searchTerm]);
+
+ return (
+ }
+ onRequestClose={onRequestClose}
+ >
+
+
+
+ {typeof searchQuery.username !== 'undefined' && isSearching && (
+
+
+ {`Searching for user "${searchQuery.username}"...`}
+
+ )}
+ {typeof searchQuery.username !== 'undefined' && !isSearching && (
+
{`Search result for user "${searchQuery.username}"`}
+ )}
+ {searchQuery.error && (
+
+ {searchQuery.error}
+
+ )}
+
+ {users.length !== 0 &&
{renderUserList()}
}
+
+ {canIKick && (
+
+ )}
+ {canIBan && (
+
+ )}
+
+ );
+}
+ModerationTools.propTypes = {
+ roomId: PropTypes.string.isRequired,
+ userId: PropTypes.string.isRequired,
+};
+
+function SessionInfo({ userId }) {
+ const [devices, setDevices] = useState(null);
+ const [isVisible, setIsVisible] = useState(false);
+ const mx = useMatrixClient();
+
+ useEffect(() => {
+ let isUnmounted = false;
+
+ async function loadDevices() {
+ try {
+ const crypto = mx.getCrypto();
+ const userToDevices = await crypto.getUserDeviceInfo([userId], true);
+ const myDevices = Array.from(userToDevices.get(userId).values());
+
+ if (isUnmounted) return;
+ setDevices(myDevices);
+ } catch {
+ setDevices([]);
+ }
+ }
+ loadDevices();
+
+ return () => {
+ isUnmounted = true;
+ };
+ }, [mx, userId]);
+
+ function renderSessionChips() {
+ if (!isVisible) return null;
+ return (
+
+ {devices === null && Loading sessions...}
+ {devices?.length === 0 && No session found.}
+ {devices !== null &&
+ devices.map((device) => (
+
+ ))}
+
+ );
+ }
+
+ return (
+
+
+ {renderSessionChips()}
+
+ );
+}
+
+SessionInfo.propTypes = {
+ userId: PropTypes.string.isRequired,
+};
+
+function ProfileFooter({ roomId, userId, onRequestClose }) {
+ const [isCreatingDM, setIsCreatingDM] = useState(false);
+ const [isIgnoring, setIsIgnoring] = useState(false);
+ const mx = useMatrixClient();
+ const [isUserIgnored, setIsUserIgnored] = useState(mx.isUserIgnored(userId));
+
+ const isMountedRef = useRef(true);
+ const { navigateRoom } = useRoomNavigate();
+ const room = mx.getRoom(roomId);
+ const member = room.getMember(userId);
+ const isInvitable = member?.membership !== 'join' && member?.membership !== 'ban';
+
+ const [isInviting, setIsInviting] = useState(false);
+ const [isInvited, setIsInvited] = useState(member?.membership === 'invite');
+
+ const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+ const userPL = room.getMember(userId)?.powerLevel || 0;
+ const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
+
+ const canIKick =
+ roomState?.hasSufficientPowerLevelFor('kick', myPowerlevel) && userPL < myPowerlevel;
+
+ const isBanned = member?.membership === 'ban';
+
+ const onCreated = (dmRoomId) => {
+ if (isMountedRef.current === false) return;
+ setIsCreatingDM(false);
+ navigateRoom(dmRoomId);
+ onRequestClose();
+ };
+
+ useEffect(() => {
+ setIsUserIgnored(mx.isUserIgnored(userId));
+ setIsIgnoring(false);
+ setIsInviting(false);
+ }, [mx, userId]);
+
+ const openDM = async () => {
+ // Check and open if user already have a DM with userId.
+ const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
+ if (dmRoomId) {
+ navigateRoom(dmRoomId);
+ onRequestClose();
+ return;
+ }
+
+ // Create new DM
+ try {
+ setIsCreatingDM(true);
+ const result = await roomActions.createDM(mx, userId, await hasDevices(mx, userId));
+ onCreated(result.room_id);
+ } catch {
+ if (isMountedRef.current === false) return;
+ setIsCreatingDM(false);
+ }
+ };
+
+ const toggleIgnore = async () => {
+ const isIgnored = mx.getIgnoredUsers().includes(userId);
+
+ try {
+ setIsIgnoring(true);
+ if (isIgnored) {
+ await roomActions.unignore(mx, [userId]);
+ } else {
+ await roomActions.ignore(mx, [userId]);
+ }
+
+ if (isMountedRef.current === false) return;
+ setIsUserIgnored(!isIgnored);
+ setIsIgnoring(false);
+ } catch {
+ setIsIgnoring(false);
+ }
+ };
+
+ const toggleInvite = async () => {
+ try {
+ setIsInviting(true);
+ let isInviteSent = false;
+ if (isInvited) await mx.kick(roomId, userId);
+ else {
+ await mx.invite(roomId, userId);
+ isInviteSent = true;
+ }
+ if (isMountedRef.current === false) return;
+ setIsInvited(isInviteSent);
+ setIsInviting(false);
+ } catch {
+ setIsInviting(false);
+ }
+ };
+
+ return (
+
+
+ {isBanned && canIKick && (
+
+ )}
+ {(isInvited ? canIKick : room.canInvite(mx.getUserId())) && isInvitable && (
+
+ )}
+
+
+ );
+}
+ProfileFooter.propTypes = {
+ roomId: PropTypes.string.isRequired,
+ userId: PropTypes.string.isRequired,
+ onRequestClose: PropTypes.func.isRequired,
+};
+
+function useToggleDialog() {
+ const [isOpen, setIsOpen] = useState(false);
+ const [roomId, setRoomId] = useState(null);
+ const [userId, setUserId] = useState(null);
+
+ useEffect(() => {
+ const loadProfile = (uId, rId) => {
+ setIsOpen(true);
+ setUserId(uId);
+ setRoomId(rId);
+ };
+ navigation.on(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
+ return () => {
+ navigation.removeListener(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
+ };
+ }, []);
+
+ const closeDialog = () => setIsOpen(false);
+
+ const afterClose = () => {
+ setUserId(null);
+ setRoomId(null);
+ };
+
+ return [isOpen, roomId, userId, closeDialog, afterClose];
+}
+
+function useRerenderOnProfileChange(roomId, userId) {
+ const mx = useMatrixClient();
+ const [, forceUpdate] = useForceUpdate();
+ useEffect(() => {
+ const handleProfileChange = (mEvent, member) => {
+ if (
+ mEvent.getRoomId() === roomId &&
+ (member.userId === userId || member.userId === mx.getUserId())
+ ) {
+ forceUpdate();
+ }
+ };
+ mx.on('RoomMember.powerLevel', handleProfileChange);
+ mx.on('RoomMember.membership', handleProfileChange);
+ return () => {
+ mx.removeListener('RoomMember.powerLevel', handleProfileChange);
+ mx.removeListener('RoomMember.membership', handleProfileChange);
+ };
+ }, [mx, roomId, userId]);
+}
+
+function ProfileViewer() {
+ const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
+ useRerenderOnProfileChange(roomId, userId);
+ const useAuthentication = useMediaAuthentication();
+
+ const mx = useMatrixClient();
+ const room = mx.getRoom(roomId);
+
+ const renderProfile = () => {
+ const roomMember = room.getMember(userId);
+ const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(mx, userId);
+ const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
+ const avatarUrl =
+ avatarMxc && avatarMxc !== 'null'
+ ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop', undefined, undefined, useAuthentication)
+ : null;
+
+ const powerLevel = roomMember?.powerLevel || 0;
+ const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+
+ const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
+ const canChangeRole =
+ roomState?.maySendEvent('m.room.power_levels', mx.getUserId()) &&
+ (powerLevel < myPowerLevel || userId === mx.getUserId());
+
+ const handleChangePowerLevel = async (newPowerLevel) => {
+ if (newPowerLevel === powerLevel) return;
+ const SHARED_POWER_MSG =
+ 'You will not be able to undo this change as you are promoting the user to have the same power level as yourself. Are you sure?';
+ const DEMOTING_MYSELF_MSG =
+ 'You will not be able to undo this change as you are demoting yourself. Are you sure?';
+
+ const isSharedPower = newPowerLevel === myPowerLevel;
+ const isDemotingMyself = userId === mx.getUserId();
+ if (isSharedPower || isDemotingMyself) {
+ const isConfirmed = await confirmDialog(
+ 'Change power level',
+ isSharedPower ? SHARED_POWER_MSG : DEMOTING_MYSELF_MSG,
+ 'Change',
+ 'caution'
+ );
+ if (!isConfirmed) return;
+ roomActions.setPowerLevel(mx, roomId, userId, newPowerLevel);
+ } else {
+ roomActions.setPowerLevel(mx, roomId, userId, newPowerLevel);
+ }
+ };
+
+ const handlePowerSelector = (e) => {
+ openReusableContextMenu('bottom', getEventCords(e, '.btn-surface'), (closeMenu) => (
+ {
+ closeMenu();
+ handleChangePowerLevel(pl);
+ }}
+ />
+ ));
+ };
+
+ return (
+
+
+
+
+
+ {username}
+
+ {userId}
+
+
+ Role
+
+
+
+
+
+ {userId !== mx.getUserId() && (
+
+ )}
+
+
+
+
+
+ {Array.isArray(result?.chunk) && result.chunk.map(renderRoomSelector)}
+
+
+
+
+ Type # for rooms, @ for DMs and * for spaces. Hotkey: Ctrl + k
+
+