diff --git a/src/app/components/UserRoomProfileRenderer.tsx b/src/app/components/UserRoomProfileRenderer.tsx
new file mode 100644
index 00000000..ca7aa837
--- /dev/null
+++ b/src/app/components/UserRoomProfileRenderer.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Menu, PopOut, toRem } from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
+import { UserRoomProfile } from './user-profile';
+import { UserRoomProfileState } from '../state/userRoomProfile';
+import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
+import { stopPropagation } from '../utils/keyboard';
+import { SpaceProvider } from '../hooks/useSpace';
+import { RoomProvider } from '../hooks/useRoom';
+
+function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
+ const { roomId, spaceId, userId, cords, position } = state;
+ const allJoinedRooms = useAllJoinedRoomsSet();
+ const getRoom = useGetRoom(allJoinedRooms);
+ const room = getRoom(roomId);
+ const space = spaceId ? getRoom(spaceId) : undefined;
+
+ const close = useCloseUserRoomProfile();
+
+ if (!room) return null;
+
+ return (
+
+
+
+ }
+ />
+ );
+}
+
+export function UserRoomProfileRenderer() {
+ const state = useUserRoomProfileState();
+
+ if (!state) return null;
+ return ;
+}
diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx
index de1416b6..75fdf0da 100644
--- a/src/app/components/event-readers/EventReaders.tsx
+++ b/src/app/components/event-readers/EventReaders.tsx
@@ -19,9 +19,10 @@ import { getMemberDisplayName } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix';
import * as css from './EventReaders.css';
import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { openProfileViewer } from '../../../client/action/navigation';
import { UserAvatar } from '../user-avatar';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../hooks/useSpace';
export type EventReadersProps = {
room: Room;
@@ -33,6 +34,8 @@ export const EventReaders = as<'div', EventReadersProps>(
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const latestEventReaders = useRoomEventReaders(room, eventId);
+ const openProfile = useOpenUserRoomProfile();
+ const space = useSpaceOptionally();
const getName = (userId: string) =>
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -57,19 +60,32 @@ export const EventReaders = as<'div', EventReadersProps>(
{latestEventReaders.map((readerId) => {
const name = getName(readerId);
- const avatarMxcUrl = room
- .getMember(readerId)
- ?.getMxcAvatarUrl();
- const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
+ const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
+ const avatarUrl = avatarMxcUrl
+ ? mx.mxcUrlToHttp(
+ avatarMxcUrl,
+ 100,
+ 100,
+ 'crop',
+ undefined,
+ false,
+ useAuthentication
+ )
+ : undefined;
return (
+ );
+ })}
+
+
+
+
+
+
+
+ }
+ >
+
+ ) : (
+ <>
+ {!changing && }
+ {changing && }
+
+ )
+ }
+ after={tagIconSrc ? : undefined}
+ onClick={open}
+ aria-pressed={!!cords}
+ >
+
+ {tag.name}
+
+
+
+ {typeof selfDemote === 'number' ? (
+ setSelfDemote(undefined)}
+ onChange={handleSelfDemote}
+ />
+ ) : null}
+ {typeof sharedPower === 'number' ? (
+ setSharedPower(undefined)}
+ onChange={handleSharedPower}
+ />
+ ) : null}
+
+ );
+}
diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
new file mode 100644
index 00000000..53e6618b
--- /dev/null
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -0,0 +1,514 @@
+import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { Room } from 'matrix-js-sdk';
+import {
+ PopOut,
+ Menu,
+ MenuItem,
+ config,
+ Text,
+ Line,
+ Chip,
+ Icon,
+ Icons,
+ RectCords,
+ Spinner,
+ toRem,
+ Box,
+ Scroll,
+ Avatar,
+} from 'folds';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getMxIdServer } from '../../utils/matrix';
+import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { stopPropagation } from '../../utils/keyboard';
+import { copyToClipboard } from '../../utils/dom';
+import { getExploreServerPath } from '../../pages/pathUtils';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { factoryRoomIdByAtoZ } from '../../utils/sort';
+import { useMutualRooms, useMutualRoomsSupport } from '../../hooks/useMutualRooms';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { RoomAvatar, RoomIcon } from '../room-avatar';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
+import { nameInitials } from '../../utils/common';
+import { getMatrixToUser } from '../../plugins/matrix-to';
+import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
+import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
+import { CutoutCard } from '../cutout-card';
+import { SettingTile } from '../setting-tile';
+
+export function ServerChip({ server }: { server: string }) {
+ const mx = useMatrixClient();
+ const myServer = getMxIdServer(mx.getSafeUserId());
+ const navigate = useNavigate();
+ const closeProfile = useCloseUserRoomProfile();
+ const [copied, setCopied] = useTimeoutToggle();
+
+ const [cords, setCords] = useState();
+
+ const open: MouseEventHandler = (evt) => {
+ setCords(evt.currentTarget.getBoundingClientRect());
+ };
+
+ const close = () => setCords(undefined);
+
+ return (
+ isKeyHotkey('arrowdown', evt),
+ isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+ }}
+ >
+
+
+ }
+ >
+
+ ) : (
+
+ )
+ }
+ onClick={open}
+ aria-pressed={!!cords}
+ >
+
+ {server}
+
+
+
+ );
+}
+
+export function ShareChip({ userId }: { userId: string }) {
+ const [cords, setCords] = useState();
+
+ const [copied, setCopied] = useTimeoutToggle();
+
+ const open: MouseEventHandler = (evt) => {
+ setCords(evt.currentTarget.getBoundingClientRect());
+ };
+
+ const close = () => setCords(undefined);
+
+ return (
+ isKeyHotkey('arrowdown', evt),
+ isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+ }}
+ >
+
+
+ }
+ >
+
+ ) : (
+
+ )
+ }
+ onClick={open}
+ aria-pressed={!!cords}
+ >
+
+ Share
+
+
+
+ );
+}
+
+type MutualRoomsData = {
+ rooms: Room[];
+ spaces: Room[];
+ directs: Room[];
+};
+
+export function MutualRoomsChip({ userId }: { userId: string }) {
+ const mx = useMatrixClient();
+ const mutualRoomSupported = useMutualRoomsSupport();
+ const mutualRoomsState = useMutualRooms(userId);
+ const { navigateRoom, navigateSpace } = useRoomNavigate();
+ const closeUserRoomProfile = useCloseUserRoomProfile();
+ const directs = useDirectRooms();
+ const useAuthentication = useMediaAuthentication();
+
+ const allJoinedRooms = useAllJoinedRoomsSet();
+ const getRoom = useGetRoom(allJoinedRooms);
+
+ const [cords, setCords] = useState();
+
+ const open: MouseEventHandler = (evt) => {
+ setCords(evt.currentTarget.getBoundingClientRect());
+ };
+
+ const close = () => setCords(undefined);
+
+ const mutual: MutualRoomsData = useMemo(() => {
+ const data: MutualRoomsData = {
+ rooms: [],
+ spaces: [],
+ directs: [],
+ };
+
+ if (mutualRoomsState.status === AsyncStatus.Success) {
+ const mutualRooms = mutualRoomsState.data
+ .sort(factoryRoomIdByAtoZ(mx))
+ .map(getRoom)
+ .filter((room) => !!room);
+ mutualRooms.forEach((room) => {
+ if (room.isSpaceRoom()) {
+ data.spaces.push(room);
+ return;
+ }
+ if (directs.includes(room.roomId)) {
+ data.directs.push(room);
+ return;
+ }
+ data.rooms.push(room);
+ });
+ }
+ return data;
+ }, [mutualRoomsState, getRoom, directs, mx]);
+
+ if (
+ userId === mx.getSafeUserId() ||
+ !mutualRoomSupported ||
+ mutualRoomsState.status === AsyncStatus.Error
+ ) {
+ return null;
+ }
+
+ const renderItem = (room: Room) => {
+ const { roomId } = room;
+ const dm = directs.includes(roomId);
+
+ return (
+
+ );
+ };
+
+ return (
+ isKeyHotkey('arrowdown', evt),
+ isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+ }}
+ >
+
+
+ ) : null
+ }
+ >
+ }
+ disabled={
+ mutualRoomsState.status !== AsyncStatus.Success || mutualRoomsState.data.length === 0
+ }
+ onClick={open}
+ aria-pressed={!!cords}
+ >
+
+ {mutualRoomsState.status === AsyncStatus.Success &&
+ `${mutualRoomsState.data.length} Mutual Rooms`}
+ {mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
+
+
+
+ );
+}
+
+export function IgnoredUserAlert() {
+ return (
+
+
+
+
+ Blocked User
+
+
+ You do not receive any messages or invites from this user.
+
+
+
+
+ );
+}
+
+export function OptionsChip({ userId }: { userId: string }) {
+ const mx = useMatrixClient();
+ const [cords, setCords] = useState();
+
+ const open: MouseEventHandler = (evt) => {
+ setCords(evt.currentTarget.getBoundingClientRect());
+ };
+
+ const close = () => setCords(undefined);
+
+ const ignoredUsers = useIgnoredUsers();
+ const ignored = ignoredUsers.includes(userId);
+
+ const [ignoreState, toggleIgnore] = useAsyncCallback(
+ useCallback(async () => {
+ const users = ignoredUsers.filter((u) => u !== userId);
+ if (!ignored) users.push(userId);
+ await mx.setIgnoredUsers(users);
+ }, [mx, ignoredUsers, userId, ignored])
+ );
+ const ignoring = ignoreState.status === AsyncStatus.Loading;
+
+ return (
+ isKeyHotkey('arrowdown', evt),
+ isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+ }}
+ >
+
+
+ }
+ >
+
+ {ignoring ? (
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
new file mode 100644
index 00000000..cf4c815f
--- /dev/null
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Avatar, Box, Icon, Icons, Text } from 'folds';
+import classNames from 'classnames';
+import * as css from './styles.css';
+import { UserAvatar } from '../user-avatar';
+import colorMXID from '../../../util/colorMXID';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { BreakWord, LineClamp3 } from '../../styles/Text.css';
+import { UserPresence } from '../../hooks/useUserPresence';
+import { AvatarPresence, PresenceBadge } from '../presence';
+
+type UserHeroProps = {
+ userId: string;
+ avatarUrl?: string;
+ presence?: UserPresence;
+};
+export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
+ return (
+
+
+ {avatarUrl &&
}
+
+
+ }
+ >
+
+ }
+ />
+
+
+