WIP - room user profile

src/app/components/UserRoomProfileRenderer.tsx

@@ -23,7 +23,7 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
   return (
     <PopOut
       anchor={cords}
-      position="Right"
+      position="Top"
       align="Start"
       content={
         <FocusTrap

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

@@ -0,0 +1,277 @@
+import React, { MouseEventHandler, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
+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 } 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';
+
+export 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');
+                  close();
+                }}
+              >
+                <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>
+  );
+}
+
+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<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  if (
+    userId === mx.getSafeUserId() ||
+    !mutualRoomSupported ||
+    mutualRoomsState.status === AsyncStatus.Error
+  ) {
+    return null;
+  }
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Start"
+      offset={4}
+      content={
+        mutualRoomsState.status === AsyncStatus.Success ? (
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: close,
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+              isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+              isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+            }}
+          >
+            <Menu
+              style={{
+                display: 'flex',
+                maxWidth: toRem(200),
+                maxHeight: '80vh',
+              }}
+            >
+              <Box grow="Yes">
+                <Scroll size="300" hideTrack>
+                  <Box
+                    direction="Column"
+                    gap="100"
+                    style={{
+                      padding: config.space.S200,
+                      paddingRight: 0,
+                    }}
+                  >
+                    {mutualRoomsState.data
+                      .sort(factoryRoomIdByAtoZ(mx))
+                      .map((roomId) => getRoom(roomId))
+                      .map((room) => {
+                        if (!room) return null;
+                        const { roomId } = room;
+                        const dm = directs.includes(roomId);
+
+                        return (
+                          <MenuItem
+                            key={roomId}
+                            variant="Surface"
+                            fill="None"
+                            size="300"
+                            radii="300"
+                            style={{ paddingLeft: config.space.S100 }}
+                            onClick={() => {
+                              if (room.isSpaceRoom()) {
+                                navigateSpace(roomId);
+                              } else {
+                                navigateRoom(roomId);
+                              }
+                              closeUserRoomProfile();
+                            }}
+                            before={
+                              <Avatar size="200" radii={dm ? '400' : '300'}>
+                                {dm || room.isSpaceRoom() ? (
+                                  <RoomAvatar
+                                    roomId={room.roomId}
+                                    src={
+                                      dm
+                                        ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                                        : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                                    }
+                                    alt={room.name}
+                                    renderFallback={() => (
+                                      <Text as="span" size="H6">
+                                        {nameInitials(room.name)}
+                                      </Text>
+                                    )}
+                                  />
+                                ) : (
+                                  <RoomIcon size="100" joinRule={room.getJoinRule()} />
+                                )}
+                              </Avatar>
+                            }
+                          >
+                            <Text size="B300" truncate>
+                              {room.name}
+                            </Text>
+                          </MenuItem>
+                        );
+                      })}
+                  </Box>
+                </Scroll>
+              </Box>
+            </Menu>
+          </FocusTrap>
+        ) : null
+      }
+    >
+      <Chip
+        variant="SurfaceVariant"
+        radii="Pill"
+        before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
+        disabled={mutualRoomsState.status !== AsyncStatus.Success}
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300">
+          {mutualRoomsState.status === AsyncStatus.Success &&
+            `${mutualRoomsState.data.length} Mutual Rooms`}
+          {mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}

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

@@ -6,18 +6,33 @@ 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 }: UserHeroProps) {
+export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
   return (
     <Box direction="Column" className={css.UserHero}>
-      <div className={css.UserHeroCoverContainer} style={{ backgroundColor: colorMXID(userId) }}>
+      <div
+        className={css.UserHeroCoverContainer}
+        style={{
+          backgroundColor: colorMXID(userId),
+          filter: avatarUrl ? undefined : 'brightness(50%)',
+        }}
+      >
         {avatarUrl && <img className={css.UserHeroCover} src={avatarUrl} alt={userId} />}
       </div>
       <div className={css.UserHeroAvatarContainer}>
+        <AvatarPresence
+          className={css.UserAvatarContainer}
+          badge={
+            presence && <PresenceBadge presence={presence.presence} status={presence.status} />
+          }
+        >
           <Avatar className={css.UserHeroAvatar} size="500">
             <UserAvatar
               userId={userId}
@@ -26,6 +41,7 @@ export function UserHero({ userId, avatarUrl }: UserHeroProps) {
               renderFallback={() => <Icon size="500" src={Icons.User} filled />}
             />
           </Avatar>
+        </AvatarPresence>
       </div>
     </Box>
   );
@@ -42,7 +58,7 @@ export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
     <Box grow="Yes" direction="Column" gap="0">
       <Box alignItems="Baseline" gap="200" wrap="Wrap">
         <Text
-          size="H5"
+          size="H4"
           className={classNames(BreakWord, LineClamp3)}
           title={displayName ?? username}
         >

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

@@ -1,5 +1,4 @@
 import {
-  Avatar,
   Box,
   Button,
   Chip,
@@ -11,141 +10,32 @@ import {
   MenuItem,
   PopOut,
   RectCords,
-  Scroll,
-  Spinner,
   Text,
-  toRem,
 } 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 {
-  getDirectRoomAvatarUrl,
-  getMemberAvatarMxc,
-  getMemberDisplayName,
-  getRoomAvatarUrl,
-  joinRuleToIconSrc,
-} from '../../utils/room';
+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';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { factoryRoomIdByAtoZ } from '../../utils/sort';
-import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
-import { RoomAvatar, RoomIcon } from '../room-avatar';
-import { nameInitials } from '../../utils/common';
-
-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>
-  );
-}
+import { useUserPresence } from '../../hooks/useUserPresence';
+import { SequenceCard } from '../sequence-card';
+import { MutualRoomsChip, ServerChip } from './UserChips';
+import { CutoutCard } from '../cutout-card';
+import { SettingTile } from '../setting-tile';
+import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
+import { SpaceSettingsPage } from '../../state/spaceSettings';
 
 function PowerChip({ userId }: { userId: string }) {
   const mx = useMatrixClient();
@@ -153,6 +43,7 @@ function PowerChip({ userId }: { userId: string }) {
   const space = useSpaceOptionally();
   const useAuthentication = useMediaAuthentication();
   const openRoomSettings = useOpenRoomSettings();
+  const openSpaceSettings = useOpenSpaceSettings();
 
   const powerLevels = usePowerLevels(room);
   const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
@@ -227,7 +118,16 @@ function PowerChip({ userId }: { userId: string }) {
                 size="300"
                 radii="300"
                 onClick={() => {
+                  console.log(room.roomId, space?.roomId);
+                  if (room.isSpaceRoom()) {
+                    openSpaceSettings(
+                      room.roomId,
+                      space?.roomId,
+                      SpaceSettingsPage.PermissionsPage
+                    );
+                  } else {
                     openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);
+                  }
                   close();
                 }}
               >
@@ -260,145 +160,66 @@ function PowerChip({ userId }: { userId: string }) {
   );
 }
 
-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<RectCords>();
-
-  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setCords(evt.currentTarget.getBoundingClientRect());
+type UserBanAlertProps = {
+  userId: string;
+  reason?: string;
 };
-
-  const close = () => setCords(undefined);
-
-  if (
-    userId === mx.getSafeUserId() ||
-    !mutualRoomSupported ||
-    mutualRoomsState.status === AsyncStatus.Error
-  ) {
-    return null;
-  }
-
+function UserBanAlert({ userId, reason }: UserBanAlertProps) {
   return (
-    <PopOut
-      anchor={cords}
-      position="Bottom"
-      align="Start"
-      offset={4}
-      content={
-        mutualRoomsState.status === AsyncStatus.Success ? (
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: close,
-              clickOutsideDeactivates: true,
-              escapeDeactivates: stopPropagation,
-              isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
-              isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
-            }}
-          >
-            <Menu
-              style={{
-                display: 'flex',
-                maxWidth: toRem(200),
-                maxHeight: '80vh',
-              }}
-            >
-              <Box grow="Yes">
-                <Scroll size="300" hideTrack>
-                  <Box
-                    direction="Column"
-                    gap="100"
-                    style={{
-                      padding: config.space.S200,
-                      paddingRight: 0,
-                    }}
-                  >
-                    {mutualRoomsState.data
-                      .sort(factoryRoomIdByAtoZ(mx))
-                      .map((roomId) => getRoom(roomId))
-                      .map((room) => {
-                        if (!room) return null;
-                        const { roomId } = room;
-                        const dm = directs.includes(roomId);
-
-                        return (
-                          <MenuItem
-                            key={roomId}
-                            variant="Surface"
-                            fill="None"
-                            size="300"
-                            radii="300"
-                            style={{ paddingLeft: config.space.S100 }}
-                            onClick={() => {
-                              if (room.isSpaceRoom()) {
-                                navigateSpace(roomId);
-                              } else {
-                                navigateRoom(roomId);
-                              }
-                              closeUserRoomProfile();
-                            }}
-                            before={
-                              <Avatar size="200" radii={dm ? '400' : '300'}>
-                                {dm || room.isSpaceRoom() ? (
-                                  <RoomAvatar
-                                    roomId={room.roomId}
-                                    src={
-                                      dm
-                                        ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                                        : getRoomAvatarUrl(mx, room, 96, useAuthentication)
-                                    }
-                                    alt={room.name}
-                                    renderFallback={() => (
-                                      <Text as="span" size="H6">
-                                        {nameInitials(room.name)}
-                                      </Text>
-                                    )}
-                                  />
-                                ) : (
-                                  <RoomIcon size="100" joinRule={room.getJoinRule()} />
-                                )}
-                              </Avatar>
+    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
+      <SettingTile
+        after={
+          <Button size="300" variant="Critical" radii="300">
+            <Text size="B300">Unban</Text>
+          </Button>
         }
       >
-                            <Text size="B300" truncate>
-                              {room.name}
-                            </Text>
-                          </MenuItem>
+        <Box direction="Column">
+          <Text size="L400">Banned User</Text>
+          <Text size="T200">This user has been banned!{reason ? ` Reason: ${reason}` : ''}</Text>
+        </Box>
+      </SettingTile>
+    </CutoutCard>
   );
-                      })}
-                  </Box>
-                </Scroll>
-              </Box>
-            </Menu>
-          </FocusTrap>
-        ) : null
 }
-    >
-      <Chip
+
+type UserModerationProps = {
+  userId: string;
+  canKick: boolean;
+  canBan: boolean;
+};
+function UserModeration({ userId, canKick, canBan }: UserModerationProps) {
+  const room = useRoom();
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Moderation</Text>
+      <SequenceCard
         variant="SurfaceVariant"
-        radii="Pill"
-        before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
-        disabled={mutualRoomsState.status !== AsyncStatus.Success}
-        onClick={open}
-        aria-pressed={!!cords}
+        style={{ padding: config.space.S100 }}
+        direction="Column"
       >
-        <Text size="B300">
-          {mutualRoomsState.status === AsyncStatus.Success &&
-            `${mutualRoomsState.data.length} Mutual Rooms`}
-          {mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
-        </Text>
-      </Chip>
-    </PopOut>
+        <MenuItem
+          size="400"
+          radii="300"
+          variant="SurfaceVariant"
+          before={<Icon size="100" src={Icons.ArrowGoLeft} />}
+          disabled={!canKick}
+        >
+          <Text size="T300">Kick</Text>
+        </MenuItem>
+        <MenuItem
+          size="400"
+          radii="300"
+          variant="SurfaceVariant"
+          fill="None"
+          before={<Icon size="100" src={Icons.NoEntry} />}
+          disabled={!canBan}
+        >
+          <Text size="T300">Ban</Text>
+        </MenuItem>
+      </SequenceCard>
+    </Box>
   );
 }
 
@@ -409,22 +230,42 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
+  const powerlevels = usePowerLevels(room);
+  const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerlevels);
+  const myPowerLevel = getPowerLevel(mx.getSafeUserId());
+  const userPowerLevel = getPowerLevel(userId);
+  const canKick = canDoAction('kick', myPowerLevel) && myPowerLevel > userPowerLevel;
+  const canBan = canDoAction('ban', myPowerLevel) && myPowerLevel > userPowerLevel;
+
+  const member = room.getMember(userId);
 
   const server = getMxIdServer(userId);
   const displayName = getMemberDisplayName(room, userId);
   const avatarMxc = getMemberAvatarMxc(room, userId);
   const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
 
+  const presence = useUserPresence(userId);
+
   return (
     <Box direction="Column">
-      <UserHero userId={userId} avatarUrl={avatarUrl} />
+      <UserHero
+        userId={userId}
+        avatarUrl={avatarUrl}
+        presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
+      />
       <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
+                size="300"
+                variant="Secondary"
+                fill="Solid"
+                radii="300"
+                before={<Icon size="50" src={Icons.User} filled />}
+              >
+                <Text size="B300">Profile</Text>
               </Button>
             </Box>
           </Box>
@@ -434,6 +275,10 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
             <MutualRoomsChip userId={userId} />
           </Box>
         </Box>
+        {member?.membership === 'ban' && <UserBanAlert userId={userId} />}
+        {(canKick || canBan) && (
+          <UserModeration userId={userId} canKick={canKick} canBan={canBan} />
+        )}
       </Box>
     </Box>
   );

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

@@ -30,12 +30,13 @@ export const UserHeroAvatarContainer = style({
   position: 'relative',
   height: toRem(29),
 });
-export const UserHeroAvatar = style({
+export const UserAvatarContainer = style({
   position: 'absolute',
   left: config.space.S400,
   top: 0,
   transform: 'translateY(-50%)',
-  background: color.Surface.Container,
-
-  outline: `${config.borderWidth.B500} solid ${color.Surface.Container}`,
+  backgroundColor: color.Surface.Container,
+});
+export const UserHeroAvatar = style({
+  outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
 });

src/app/features/common-settings/members/Members.tsx

@@ -37,7 +37,6 @@ import { MemberTile } from '../../../components/member-tile';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
 import { ServerBadge } from '../../../components/server-badge';
-import { openProfileViewer } from '../../../../client/action/navigation';
 import { useDebounce } from '../../../hooks/useDebounce';
 import {
   SearchItemStrGetter,
@@ -53,6 +52,11 @@ import { UseStateProvider } from '../../../components/UseStateProvider';
 import { MembershipFilterMenu } from '../../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../../components/MemberSortMenu';
 import { ScrollTopContainer } from '../../../components/scroll-top-container';
+import {
+  useOpenUserRoomProfile,
+  useUserRoomProfileState,
+} from '../../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../../hooks/useSpace';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -77,6 +81,9 @@ export function Members({ requestClose }: MembersProps) {
   const room = useRoom();
   const members = useRoomMembers(mx, room.roomId);
   const fetchingMembers = members.length < room.getJoinedMemberCount();
+  const openProfile = useOpenUserRoomProfile();
+  const profileUser = useUserRoomProfileState();
+  const space = useSpaceOptionally();
 
   const powerLevels = usePowerLevels(room);
   const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
@@ -142,8 +149,9 @@ export function Members({ requestClose }: MembersProps) {
   const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
-    openProfileViewer(userId, room.roomId);
-    requestClose();
+    if (userId) {
+      openProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect());
+    }
   };
 
   return (
@@ -317,6 +325,7 @@ export function Members({ requestClose }: MembersProps) {
                           <MemberTile
                             data-user-id={tagOrMember.userId}
                             onClick={handleMemberClick}
+                            aria-pressed={profileUser?.userId === tagOrMember.userId}
                             mx={mx}
                             room={room}
                             member={tagOrMember}

src/app/features/room/MembersDrawer.tsx

@@ -55,7 +55,7 @@ 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 { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
@@ -85,6 +85,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
   const openUserRoomProfile = useOpenUserRoomProfile();
   const space = useSpaceOptionally();
+  const openProfileUserId = useUserRoomProfileState()?.userId;
 
   const membershipFilterMenu = useMembershipFilterMenu();
   const sortFilterMenu = useMemberSortMenu();
@@ -354,6 +355,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                         padding: `0 ${config.space.S200}`,
                         transform: `translateY(${vItem.start}px)`,
                       }}
+                      aria-pressed={openProfileUserId === member.userId}
                       data-index={vItem.index}
                       data-user-id={member.userId}
                       ref={virtualizer.measureElement}

src/app/features/space-settings/SpaceSettingsRenderer.tsx

@@ -16,7 +16,7 @@ function RenderSettings({ state }: RenderSettingsProps) {
   const allJoinedRooms = useAllJoinedRoomsSet();
   const getRoom = useGetRoom(allJoinedRooms);
   const room = getRoom(roomId);
-  const space = spaceId ? getRoom(spaceId) : undefined;
+  const space = spaceId && spaceId !== roomId ? getRoom(spaceId) : undefined;
 
   if (!room) return null;