WIP - new profile view

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 } = 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 (
+    <PopOut
+      anchor={cords}
+      position="Right"
+      align="Start"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu style={{ width: toRem(340) }}>
+            <SpaceProvider value={space ?? null}>
+              <RoomProvider value={room}>
+                <UserRoomProfile userId={userId} />
+              </RoomProvider>
+            </SpaceProvider>
+          </Menu>
+        </FocusTrap>
+      }
+    />
+  );
+}
+
+export function UserRoomProfileRenderer() {
+  const state = useUserRoomProfileState();
+
+  if (!state) return null;
+  return <UserRoomProfileContextMenu state={state} />;
+}

src/app/components/message/layout/layout.css.ts

@@ -124,7 +124,7 @@ export const AvatarBase = style({
 
   selectors: {
     '&:hover': {
-      transform: `translateY(${toRem(-4)})`,
+      transform: `translateY(${toRem(-2)})`,
     },
   },
 });

src/app/components/user-profile/UserHero.tsx

@@ -0,0 +1,59 @@
+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';
+
+type UserHeroProps = {
+  userId: string;
+  avatarUrl?: string;
+};
+export function UserHero({ userId, avatarUrl }: UserHeroProps) {
+  return (
+    <Box direction="Column" className={css.UserHero}>
+      <div className={css.UserHeroCoverContainer} style={{ backgroundColor: colorMXID(userId) }}>
+        {avatarUrl && <img className={css.UserHeroCover} src={avatarUrl} alt={userId} />}
+      </div>
+      <div className={css.UserHeroAvatarContainer}>
+        <Avatar className={css.UserHeroAvatar} size="500">
+          <UserAvatar
+            userId={userId}
+            src={avatarUrl}
+            alt={userId}
+            renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+          />
+        </Avatar>
+      </div>
+    </Box>
+  );
+}
+
+type UserHeroNameProps = {
+  displayName?: string;
+  userId: string;
+};
+export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
+  const username = getMxIdLocalPart(userId);
+
+  return (
+    <Box grow="Yes" direction="Column" gap="0">
+      <Box alignItems="Baseline" gap="200" wrap="Wrap">
+        <Text
+          size="H5"
+          className={classNames(BreakWord, LineClamp3)}
+          title={displayName ?? username}
+        >
+          {displayName ?? username ?? userId}
+        </Text>
+      </Box>
+      <Box alignItems="Center" gap="100" wrap="Wrap">
+        <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
+          @{username}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

src/app/components/user-profile/UserRoomProfile.tsx

@@ -0,0 +1,311 @@
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Line,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Spinner,
+  Text,
+} from 'folds';
+import React, { MouseEventHandler, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { UserHero, UserHeroName } from './UserHero';
+import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+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 { useMutualRooms, useMutualRoomsSupport } from '../../hooks/useMutualRooms';
+import { AsyncStatus } from '../../hooks/useAsyncCallback';
+import { stopPropagation } from '../../utils/keyboard';
+import { getExploreServerPath } from '../../pages/pathUtils';
+import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { copyToClipboard } from '../../../util/common';
+import { StateEvent } from '../../../types/matrix/room';
+import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { RoomSettingsPage } from '../../state/roomSettings';
+import { useRoom } from '../../hooks/useRoom';
+import { useSpaceOptionally } from '../../hooks/useSpace';
+
+function ServerChip({ server }: { server: string }) {
+  const mx = useMatrixClient();
+  const myServer = getMxIdServer(mx.getSafeUserId());
+  const navigate = useNavigate();
+  const closeProfile = useCloseUserRoomProfile();
+
+  const [cords, setCords] = useState<RectCords>();
+
+  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={() => {
+                  copyToClipboard(server);
+                  close();
+                }}
+              >
+                <Text size="B300">Copy Server</Text>
+              </MenuItem>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  navigate(getExploreServerPath(server));
+                  closeProfile();
+                }}
+              >
+                <Text size="B300">Explore Community</Text>
+              </MenuItem>
+            </div>
+            <Line size="300" />
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant={myServer === server ? 'Surface' : 'Critical'}
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => window.open(`https://${server}`, '_blank')}
+              >
+                <Text size="B300">Open in Browser</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant={myServer === server ? 'SurfaceVariant' : 'Warning'}
+        radii="Pill"
+        before={
+          cords ? (
+            <Icon size="50" src={Icons.ChevronBottom} />
+          ) : (
+            <Icon size="50" src={Icons.Server} />
+          )
+        }
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300" truncate>
+          {server}
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+function PowerChip({ userId }: { userId: string }) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const space = useSpaceOptionally();
+  const useAuthentication = useMediaAuthentication();
+  const openRoomSettings = useOpenRoomSettings();
+
+  const powerLevels = usePowerLevels(room);
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const myPower = getPowerLevel(mx.getSafeUserId());
+  const canChangePowers = canSendStateEvent(StateEvent.RoomPowerLevels, myPower);
+
+  const userPower = getPowerLevel(userId);
+  const tag = getPowerLevelTag(userPower);
+  const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
+
+  const [cords, setCords] = useState<RectCords>();
+
+  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 }}>
+              {getPowers(powerLevelTags).map((power) => {
+                const powerTag = powerLevelTags[power];
+                const powerTagIconSrc =
+                  powerTag.icon && getTagIconSrc(mx, useAuthentication, powerTag.icon);
+
+                return (
+                  <MenuItem
+                    key={power}
+                    variant="Surface"
+                    fill="None"
+                    size="300"
+                    radii="300"
+                    aria-disabled={!canChangePowers}
+                    aria-pressed={userPower === power}
+                    before={<PowerColorBadge color={powerTag.color} />}
+                    after={
+                      powerTagIconSrc ? (
+                        <PowerIcon size="50" iconSrc={powerTagIconSrc} />
+                      ) : undefined
+                    }
+                    onClick={canChangePowers ? undefined : undefined}
+                  >
+                    <Text size="B300">{powerTag.name}</Text>
+                  </MenuItem>
+                );
+              })}
+            </div>
+
+            <Line size="300" />
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                variant="Surface"
+                fill="None"
+                size="300"
+                radii="300"
+                onClick={() => {
+                  openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);
+                  close();
+                }}
+              >
+                <Text size="B300">Manage Powers</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant="SurfaceVariant"
+        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>
+  );
+}
+
+function MutualRoomsChip({ userId }: { userId: string }) {
+  const mx = useMatrixClient();
+  const mutualRoomSupported = useMutualRoomsSupport();
+  const mutualRoomsState = useMutualRooms(userId);
+
+  if (
+    userId === mx.getSafeUserId() ||
+    !mutualRoomSupported ||
+    mutualRoomsState.status === AsyncStatus.Error
+  )
+    return null;
+
+  return (
+    <Chip
+      variant="SurfaceVariant"
+      radii="Pill"
+      before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
+      disabled={mutualRoomsState.status !== AsyncStatus.Success}
+    >
+      <Text size="B300">
+        {mutualRoomsState.status === AsyncStatus.Success &&
+          `${mutualRoomsState.data.length} Mutual Rooms`}
+        {mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
+      </Text>
+    </Chip>
+  );
+}
+
+type UserRoomProfileProps = {
+  userId: string;
+};
+export function UserRoomProfile({ userId }: UserRoomProfileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+
+  const server = getMxIdServer(userId);
+  const displayName = getMemberDisplayName(room, userId);
+  const avatarMxc = getMemberAvatarMxc(room, userId);
+  const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
+
+  return (
+    <Box direction="Column">
+      <UserHero userId={userId} avatarUrl={avatarUrl} />
+      <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
+        <Box direction="Column" gap="400">
+          <Box gap="400" alignItems="Start">
+            <UserHeroName displayName={displayName} userId={userId} />
+            <Box shrink="No">
+              <Button size="300" variant="Secondary" fill="Solid" radii="300">
+                <Text size="B300">View Profile</Text>
+              </Button>
+            </Box>
+          </Box>
+          <Box alignItems="Center" gap="200" wrap="Wrap">
+            {server && <ServerChip server={server} />}
+            <PowerChip userId={userId} />
+            <MutualRoomsChip userId={userId} />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/app/components/user-profile/index.ts

@@ -0,0 +1 @@
+export * from './UserRoomProfile';

src/app/components/user-profile/styles.css.ts

@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const UserHeader = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  padding: config.space.S200,
+});
+
+export const UserHero = style({
+  position: 'relative',
+});
+
+export const UserHeroCoverContainer = style({
+  height: toRem(96),
+  overflow: 'hidden',
+});
+export const UserHeroCover = style({
+  height: '100%',
+  width: '100%',
+  objectFit: 'cover',
+  filter: 'blur(16px)',
+  transform: 'scale(2)',
+});
+
+export const UserHeroAvatarContainer = style({
+  position: 'relative',
+  height: toRem(29),
+});
+export const UserHeroAvatar = style({
+  position: 'absolute',
+  left: config.space.S400,
+  top: 0,
+  transform: 'translateY(-50%)',
+  background: color.Surface.Container,
+
+  outline: `${config.borderWidth.B500} solid ${color.Surface.Container}`,
+});

src/app/features/room/MembersDrawer.tsx

@@ -30,7 +30,6 @@ import { Room, RoomMember } from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
 
-import { openProfileViewer } from '../../../client/action/navigation';
 import * as css from './MembersDrawer.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -56,6 +55,8 @@ import { useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../components/MemberSortMenu';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../hooks/useSpace';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -82,6 +83,8 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const fetchingMembers = members.length < room.getJoinedMemberCount();
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+  const openUserRoomProfile = useOpenUserRoomProfile();
+  const space = useSpaceOptionally();
 
   const membershipFilterMenu = useMembershipFilterMenu();
   const sortFilterMenu = useMemberSortMenu();
@@ -142,7 +145,8 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
-    openProfileViewer(userId, room.roomId);
+    if (!userId) return;
+    openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect());
   };
 
   return (

src/app/features/room/RoomTimeline.tsx

@@ -85,7 +85,6 @@ import {
 } from '../../utils/room';
 import { useSetting } from '../../state/hooks/settings';
 import { MessageLayout, settingsAtom } from '../../state/settings';
-import { openProfileViewer } from '../../../client/action/navigation';
 import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
 import { Reactions, Message, Event, EncryptedContent } from './message';
 import { useMemberEventParser } from '../../hooks/useMemberEventParser';
@@ -120,6 +119,8 @@ import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
 import { useIsDirectRoom } from '../../hooks/useRoom';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../hooks/useSpace';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -469,6 +470,8 @@ export function RoomTimeline({
   const { navigateRoom } = useRoomNavigate();
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
+  const openUserRoomProfile = useOpenUserRoomProfile();
+  const space = useSpaceOptionally();
 
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
@@ -906,9 +909,14 @@ export function RoomTimeline({
         console.warn('Button should have "data-user-id" attribute!');
         return;
       }
-      openProfileViewer(userId, room.roomId);
+      openUserRoomProfile(
+        room.roomId,
+        space?.roomId,
+        userId,
+        evt.currentTarget.getBoundingClientRect()
+      );
     },
-    [room]
+    [room, space, openUserRoomProfile]
   );
   const handleUsernameClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     (evt) => {

src/app/hooks/useMutualRooms.ts

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import { useMatrixClient } from './useMatrixClient';
+import { AsyncState, useAsyncCallbackValue } from './useAsyncCallback';
+import { useSpecVersions } from './useSpecVersions';
+
+export const useMutualRoomsSupport = (): boolean => {
+  const { unstable_features: unstableFeatures } = useSpecVersions();
+
+  const supported =
+    unstableFeatures?.['uk.half-shot.msc2666'] ||
+    unstableFeatures?.['uk.half-shot.msc2666.mutual_rooms'] ||
+    unstableFeatures?.['uk.half-shot.msc2666.query_mutual_rooms'];
+
+  return !!supported;
+};
+
+export const useMutualRooms = (userId: string): AsyncState<string[], unknown> => {
+  const mx = useMatrixClient();
+
+  const supported = useMutualRoomsSupport();
+
+  const [mutualRoomsState] = useAsyncCallbackValue(
+    useCallback(
+      () => (supported ? mx._unstable_getSharedRooms(userId) : Promise.resolve([])),
+      [mx, userId, supported]
+    )
+  );
+
+  return mutualRoomsState;
+};

src/app/pages/Router.tsx

@@ -61,6 +61,7 @@ import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
 import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
 import { SpaceSettingsRenderer } from '../features/space-settings';
+import { UserRoomProfileRenderer } from '../components/UserRoomProfileRenderer';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -125,6 +126,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                       >
                         <Outlet />
                       </ClientLayout>
+                      <UserRoomProfileRenderer />
                       <RoomSettingsRenderer />
                       <SpaceSettingsRenderer />
                       <ReceiveSelfDeviceVerification />

src/app/state/hooks/userRoomProfile.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { RectCords } from 'folds';
+import { userRoomProfileAtom, UserRoomProfileState } from '../userRoomProfile';
+
+export const useUserRoomProfileState = (): UserRoomProfileState | undefined => {
+  const data = useAtomValue(userRoomProfileAtom);
+
+  return data;
+};
+
+type CloseCallback = () => void;
+export const useCloseUserRoomProfile = (): CloseCallback => {
+  const setUserRoomProfile = useSetAtom(userRoomProfileAtom);
+
+  const close: CloseCallback = useCallback(() => {
+    setUserRoomProfile(undefined);
+  }, [setUserRoomProfile]);
+
+  return close;
+};
+
+type OpenCallback = (
+  roomId: string,
+  spaceId: string | undefined,
+  userId: string,
+  cords: RectCords
+) => void;
+export const useOpenUserRoomProfile = (): OpenCallback => {
+  const setUserRoomProfile = useSetAtom(userRoomProfileAtom);
+
+  const open: OpenCallback = useCallback(
+    (roomId, spaceId, userId, cords) => {
+      setUserRoomProfile({ roomId, spaceId, userId, cords });
+    },
+    [setUserRoomProfile]
+  );
+
+  return open;
+};

src/app/state/userRoomProfile.ts

@@ -0,0 +1,11 @@
+import { RectCords } from 'folds';
+import { atom } from 'jotai';
+
+export type UserRoomProfileState = {
+  userId: string;
+  roomId: string;
+  spaceId?: string;
+  cords: RectCords;
+};
+
+export const userRoomProfileAtom = atom<UserRoomProfileState | undefined>(undefined);