improve thread reply layout

.github/workflows/prod-deploy.yml

@@ -72,19 +72,19 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3.10.0
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.5.0
+        uses: docker/login-action@v3.4.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Container registry
-        uses: docker/login-action@v3.5.0
+        uses: docker/login-action@v3.4.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v5.8.0
+        uses: docker/metadata-action@v5.7.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.9.0",
+  "version": "4.8.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.9.0",
+      "version": "4.8.1",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.9.0",
+  "version": "4.8.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",

src/app/components/UserRoomProfileRenderer.tsx

@@ -1,55 +0,0 @@
-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 (
-    <PopOut
-      anchor={cords}
-      position={position ?? 'Top'}
-      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/create-room/AdditionalCreatorInput.tsx

@@ -1,306 +0,0 @@
-import {
-  Box,
-  Button,
-  Chip,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Line,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Scroll,
-  Text,
-  toRem,
-} from 'folds';
-import { isKeyHotkey } from 'is-hotkey';
-import FocusTrap from 'focus-trap-react';
-import React, {
-  ChangeEventHandler,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useMemo,
-  useState,
-} from 'react';
-import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
-import { useDirectUsers } from '../../hooks/useDirectUsers';
-import { SettingTile } from '../setting-tile';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { stopPropagation } from '../../utils/keyboard';
-import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
-import { findAndReplace } from '../../utils/findAndReplace';
-import { highlightText } from '../../styles/CustomHtml.css';
-import { makeHighlightRegex } from '../../plugins/react-custom-html-parser';
-
-export const useAdditionalCreators = (defaultCreators?: string[]) => {
-  const mx = useMatrixClient();
-  const [additionalCreators, setAdditionalCreators] = useState<string[]>(
-    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
-  );
-
-  const addAdditionalCreator = (userId: string) => {
-    if (userId === mx.getSafeUserId()) return;
-
-    setAdditionalCreators((creators) => {
-      const creatorsSet = new Set(creators);
-      creatorsSet.add(userId);
-      return Array.from(creatorsSet);
-    });
-  };
-
-  const removeAdditionalCreator = (userId: string) => {
-    setAdditionalCreators((creators) => {
-      const creatorsSet = new Set(creators);
-      creatorsSet.delete(userId);
-      return Array.from(creatorsSet);
-    });
-  };
-
-  return {
-    additionalCreators,
-    addAdditionalCreator,
-    removeAdditionalCreator,
-  };
-};
-
-const SEARCH_OPTIONS: UseAsyncSearchOptions = {
-  limit: 1000,
-  matchOptions: {
-    contain: true,
-  },
-};
-const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
-
-type AdditionalCreatorInputProps = {
-  additionalCreators: string[];
-  onSelect: (userId: string) => void;
-  onRemove: (userId: string) => void;
-  disabled?: boolean;
-};
-export function AdditionalCreatorInput({
-  additionalCreators,
-  onSelect,
-  onRemove,
-  disabled,
-}: AdditionalCreatorInputProps) {
-  const mx = useMatrixClient();
-  const [menuCords, setMenuCords] = useState<RectCords>();
-  const directUsers = useDirectUsers();
-
-  const [validUserId, setValidUserId] = useState<string>();
-  const filteredUsers = useMemo(
-    () => directUsers.filter((userId) => !additionalCreators.includes(userId)),
-    [directUsers, additionalCreators]
-  );
-  const [result, search, resetSearch] = useAsyncSearch(
-    filteredUsers,
-    getUserIdString,
-    SEARCH_OPTIONS
-  );
-  const queryHighlighRegex = result?.query ? makeHighlightRegex([result.query]) : undefined;
-
-  const suggestionUsers = result
-    ? result.items
-    : filteredUsers.sort((a, b) => (a.toLocaleLowerCase() >= b.toLocaleLowerCase() ? 1 : -1));
-
-  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-  const handleCloseMenu = () => {
-    setMenuCords(undefined);
-    setValidUserId(undefined);
-    resetSearch();
-  };
-
-  const handleCreatorChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
-    const creatorInput = evt.currentTarget;
-    const creator = creatorInput.value.trim();
-    if (isUserId(creator)) {
-      setValidUserId(creator);
-    } else {
-      setValidUserId(undefined);
-      const term =
-        getMxIdLocalPart(creator) ?? (creator.startsWith('@') ? creator.slice(1) : creator);
-      if (term) {
-        search(term);
-      } else {
-        resetSearch();
-      }
-    }
-  };
-
-  const handleSelectUserId = (userId?: string) => {
-    if (userId && isUserId(userId)) {
-      onSelect(userId);
-      handleCloseMenu();
-    }
-  };
-
-  const handleCreatorKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
-    if (isKeyHotkey('enter', evt)) {
-      evt.preventDefault();
-      const creator = evt.currentTarget.value.trim();
-      handleSelectUserId(isUserId(creator) ? creator : suggestionUsers[0]);
-    }
-  };
-
-  const handleEnterClick = () => {
-    handleSelectUserId(validUserId);
-  };
-
-  return (
-    <SettingTile
-      title="Founders"
-      description="Special privileged users can be assigned during creation. These users have elevated control and can only be modified during a upgrade."
-    >
-      <Box shrink="No" direction="Column" gap="100">
-        <Box gap="200" wrap="Wrap">
-          <Chip type="button" variant="Primary" radii="Pill" outlined>
-            <Text size="B300">{mx.getSafeUserId()}</Text>
-          </Chip>
-          {additionalCreators.map((creator) => (
-            <Chip
-              type="button"
-              key={creator}
-              variant="Secondary"
-              radii="Pill"
-              after={<Icon size="50" src={Icons.Cross} />}
-              onClick={() => onRemove(creator)}
-              disabled={disabled}
-            >
-              <Text size="B300">{creator}</Text>
-            </Chip>
-          ))}
-          <PopOut
-            anchor={menuCords}
-            position="Bottom"
-            align="Center"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  onDeactivate: handleCloseMenu,
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Menu
-                  style={{
-                    width: '100vw',
-                    maxWidth: toRem(300),
-                    height: toRem(250),
-                    display: 'flex',
-                  }}
-                >
-                  <Box grow="Yes" direction="Column">
-                    <Box shrink="No" gap="100" style={{ padding: config.space.S100 }}>
-                      <Box grow="Yes" direction="Column" gap="100">
-                        <Input
-                          size="400"
-                          variant="Background"
-                          radii="300"
-                          outlined
-                          placeholder="@john:server"
-                          onChange={handleCreatorChange}
-                          onKeyDown={handleCreatorKeyDown}
-                        />
-                      </Box>
-                      <Button
-                        type="button"
-                        variant="Success"
-                        radii="300"
-                        onClick={handleEnterClick}
-                        disabled={!validUserId}
-                      >
-                        <Text size="B400">Enter</Text>
-                      </Button>
-                    </Box>
-                    <Line size="300" />
-                    <Box grow="Yes" direction="Column">
-                      {!validUserId && suggestionUsers.length > 0 ? (
-                        <Scroll size="300" hideTrack>
-                          <Box
-                            grow="Yes"
-                            direction="Column"
-                            gap="100"
-                            style={{ padding: config.space.S200, paddingRight: 0 }}
-                          >
-                            {suggestionUsers.map((userId) => (
-                              <MenuItem
-                                key={userId}
-                                size="300"
-                                variant="Surface"
-                                radii="300"
-                                onClick={() => handleSelectUserId(userId)}
-                                after={
-                                  <Text size="T200" truncate>
-                                    {getMxIdServer(userId)}
-                                  </Text>
-                                }
-                              >
-                                <Box grow="Yes">
-                                  <Text size="T200" truncate>
-                                    <b>
-                                      {queryHighlighRegex
-                                        ? findAndReplace(
-                                            getMxIdLocalPart(userId) ?? userId,
-                                            queryHighlighRegex,
-                                            (match, pushIndex) => (
-                                              <span
-                                                key={`highlight-${pushIndex}`}
-                                                className={highlightText}
-                                              >
-                                                {match[0]}
-                                              </span>
-                                            ),
-                                            (txt) => txt
-                                          )
-                                        : getMxIdLocalPart(userId)}
-                                    </b>
-                                  </Text>
-                                </Box>
-                              </MenuItem>
-                            ))}
-                          </Box>
-                        </Scroll>
-                      ) : (
-                        <Box
-                          grow="Yes"
-                          alignItems="Center"
-                          justifyContent="Center"
-                          direction="Column"
-                          gap="100"
-                        >
-                          <Text size="H6" align="Center">
-                            No Suggestions
-                          </Text>
-                          <Text size="T200" align="Center">
-                            Please provide the user ID and hit Enter.
-                          </Text>
-                        </Box>
-                      )}
-                    </Box>
-                  </Box>
-                </Menu>
-              </FocusTrap>
-            }
-          >
-            <Chip
-              type="button"
-              variant="Secondary"
-              radii="Pill"
-              onClick={handleOpenMenu}
-              aria-pressed={!!menuCords}
-              disabled={disabled}
-            >
-              <Icon size="50" src={Icons.Plus} />
-            </Chip>
-          </PopOut>
-        </Box>
-      </Box>
-    </SettingTile>
-  );
-}

src/app/components/create-room/CreateRoomAliasInput.tsx

@@ -1,118 +0,0 @@
-import React, {
-  FormEventHandler,
-  KeyboardEventHandler,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { MatrixError } from 'matrix-js-sdk';
-import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds';
-import { isKeyHotkey } from 'is-hotkey';
-import { getMxIdServer } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { replaceSpaceWithDash } from '../../utils/common';
-import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback';
-import { useDebounce } from '../../hooks/useDebounce';
-
-export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
-  const mx = useMatrixClient();
-  const aliasInputRef = useRef<HTMLInputElement>(null);
-  const [aliasAvail, setAliasAvail] = useState<AsyncState<boolean, Error>>({
-    status: AsyncStatus.Idle,
-  });
-
-  useEffect(() => {
-    if (aliasAvail.status === AsyncStatus.Success && aliasInputRef.current?.value === '') {
-      setAliasAvail({ status: AsyncStatus.Idle });
-    }
-  }, [aliasAvail]);
-
-  const checkAliasAvail = useAsync(
-    useCallback(
-      async (aliasLocalPart: string) => {
-        const roomAlias = `#${aliasLocalPart}:${getMxIdServer(mx.getSafeUserId())}`;
-        try {
-          const result = await mx.getRoomIdForAlias(roomAlias);
-          return typeof result.room_id !== 'string';
-        } catch (e) {
-          if (e instanceof MatrixError && e.httpStatus === 404) {
-            return true;
-          }
-          throw e;
-        }
-      },
-      [mx]
-    ),
-    setAliasAvail
-  );
-  const aliasAvailable: boolean | undefined =
-    aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;
-
-  const debounceCheckAliasAvail = useDebounce(checkAliasAvail, { wait: 500 });
-
-  const handleAliasChange: FormEventHandler<HTMLInputElement> = (evt) => {
-    const aliasInput = evt.currentTarget;
-    const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
-    if (aliasLocalPart) {
-      aliasInput.value = aliasLocalPart;
-      debounceCheckAliasAvail(aliasLocalPart);
-    } else {
-      setAliasAvail({ status: AsyncStatus.Idle });
-    }
-  };
-
-  const handleAliasKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
-    if (isKeyHotkey('enter', evt)) {
-      evt.preventDefault();
-
-      const aliasInput = evt.currentTarget;
-      const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
-      if (aliasLocalPart) {
-        checkAliasAvail(aliasLocalPart);
-      } else {
-        setAliasAvail({ status: AsyncStatus.Idle });
-      }
-    }
-  };
-
-  return (
-    <Box shrink="No" direction="Column" gap="100">
-      <Text size="L400">Address (Optional)</Text>
-      <Text size="T200" priority="300">
-        Pick an unique address to make it discoverable.
-      </Text>
-      <Input
-        ref={aliasInputRef}
-        onChange={handleAliasChange}
-        before={
-          aliasAvail.status === AsyncStatus.Loading ? (
-            <Spinner size="100" variant="Secondary" />
-          ) : (
-            <Icon size="100" src={Icons.Hash} />
-          )
-        }
-        after={
-          <Text style={{ maxWidth: toRem(150) }} truncate>
-            :{getMxIdServer(mx.getSafeUserId())}
-          </Text>
-        }
-        onKeyDown={handleAliasKeyDown}
-        name="aliasInput"
-        size="500"
-        variant={aliasAvailable === true ? 'Success' : 'SurfaceVariant'}
-        radii="400"
-        autoComplete="off"
-        disabled={disabled}
-      />
-      {aliasAvailable === false && (
-        <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="100">
-          <Icon src={Icons.Warning} filled size="50" />
-          <Text size="T200">
-            <b>This address is already taken. Please select a different one.</b>
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-}

src/app/components/create-room/CreateRoomKindSelector.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
-import { SequenceCard } from '../sequence-card';
-import { SettingTile } from '../setting-tile';
-
-export enum CreateRoomKind {
-  Private = 'private',
-  Restricted = 'restricted',
-  Public = 'public',
-}
-type CreateRoomKindSelectorProps = {
-  value?: CreateRoomKind;
-  onSelect: (value: CreateRoomKind) => void;
-  canRestrict?: boolean;
-  disabled?: boolean;
-  getIcon: (kind: CreateRoomKind) => IconSrc;
-};
-export function CreateRoomKindSelector({
-  value,
-  onSelect,
-  canRestrict,
-  disabled,
-  getIcon,
-}: CreateRoomKindSelectorProps) {
-  return (
-    <Box shrink="No" direction="Column" gap="100">
-      {canRestrict && (
-        <SequenceCard
-          style={{ padding: config.space.S300 }}
-          variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
-          direction="Column"
-          gap="100"
-          as="button"
-          type="button"
-          aria-pressed={value === CreateRoomKind.Restricted}
-          onClick={() => onSelect(CreateRoomKind.Restricted)}
-          disabled={disabled}
-        >
-          <SettingTile
-            before={<Icon size="400" src={getIcon(CreateRoomKind.Restricted)} />}
-            after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
-          >
-            <Text size="H6">Restricted</Text>
-            <Text size="T300" priority="300">
-              Only member of parent space can join.
-            </Text>
-          </SettingTile>
-        </SequenceCard>
-      )}
-      <SequenceCard
-        style={{ padding: config.space.S300 }}
-        variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
-        direction="Column"
-        gap="100"
-        as="button"
-        type="button"
-        aria-pressed={value === CreateRoomKind.Private}
-        onClick={() => onSelect(CreateRoomKind.Private)}
-        disabled={disabled}
-      >
-        <SettingTile
-          before={<Icon size="400" src={getIcon(CreateRoomKind.Private)} />}
-          after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
-        >
-          <Text size="H6">Private</Text>
-          <Text size="T300" priority="300">
-            Only people with invite can join.
-          </Text>
-        </SettingTile>
-      </SequenceCard>
-      <SequenceCard
-        style={{ padding: config.space.S300 }}
-        variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
-        direction="Column"
-        gap="100"
-        as="button"
-        type="button"
-        aria-pressed={value === CreateRoomKind.Public}
-        onClick={() => onSelect(CreateRoomKind.Public)}
-        disabled={disabled}
-      >
-        <SettingTile
-          before={<Icon size="400" src={getIcon(CreateRoomKind.Public)} />}
-          after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
-        >
-          <Text size="H6">Public</Text>
-          <Text size="T300" priority="300">
-            Anyone with the address can join.
-          </Text>
-        </SettingTile>
-      </SequenceCard>
-    </Box>
-  );
-}

src/app/components/create-room/RoomVersionSelector.tsx

@@ -1,117 +0,0 @@
-import React, { MouseEventHandler, useState } from 'react';
-import {
-  Box,
-  Button,
-  Chip,
-  config,
-  Icon,
-  Icons,
-  Menu,
-  PopOut,
-  RectCords,
-  Text,
-  toRem,
-} from 'folds';
-import FocusTrap from 'focus-trap-react';
-import { SettingTile } from '../setting-tile';
-import { SequenceCard } from '../sequence-card';
-import { stopPropagation } from '../../utils/keyboard';
-
-export function RoomVersionSelector({
-  versions,
-  value,
-  onChange,
-  disabled,
-}: {
-  versions: string[];
-  value: string;
-  onChange: (value: string) => void;
-  disabled?: boolean;
-}) {
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleSelect = (version: string) => {
-    setMenuCords(undefined);
-    onChange(version);
-  };
-
-  return (
-    <SequenceCard
-      style={{ padding: config.space.S300 }}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="500"
-    >
-      <SettingTile
-        title="Version"
-        after={
-          <PopOut
-            anchor={menuCords}
-            offset={5}
-            position="Bottom"
-            align="End"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setMenuCords(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) =>
-                    evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
-                  isKeyBackward: (evt: KeyboardEvent) =>
-                    evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Menu>
-                  <Box
-                    direction="Column"
-                    gap="200"
-                    style={{ padding: config.space.S200, maxWidth: toRem(300) }}
-                  >
-                    <Text size="L400">Versions</Text>
-                    <Box wrap="Wrap" gap="100">
-                      {versions.map((version) => (
-                        <Chip
-                          key={version}
-                          variant={value === version ? 'Primary' : 'SurfaceVariant'}
-                          aria-pressed={value === version}
-                          outlined={value === version}
-                          radii="300"
-                          onClick={() => handleSelect(version)}
-                          type="button"
-                        >
-                          <Text truncate size="T300">
-                            {version}
-                          </Text>
-                        </Chip>
-                      ))}
-                    </Box>
-                  </Box>
-                </Menu>
-              </FocusTrap>
-            }
-          >
-            <Button
-              type="button"
-              onClick={handleMenu}
-              size="300"
-              variant="Secondary"
-              fill="Soft"
-              radii="300"
-              aria-pressed={!!menuCords}
-              before={<Icon size="50" src={menuCords ? Icons.ChevronTop : Icons.ChevronBottom} />}
-              disabled={disabled}
-            >
-              <Text size="B300">{value}</Text>
-            </Button>
-          </PopOut>
-        }
-      />
-    </SequenceCard>
-  );
-}

src/app/components/create-room/index.ts

@@ -1,5 +0,0 @@
-export * from './CreateRoomKindSelector';
-export * from './CreateRoomAliasInput';
-export * from './RoomVersionSelector';
-export * from './utils';
-export * from './AdditionalCreatorInput';

src/app/components/create-room/utils.ts

@@ -1,140 +0,0 @@
-import {
-  ICreateRoomOpts,
-  ICreateRoomStateEvent,
-  JoinRule,
-  MatrixClient,
-  RestrictedAllowType,
-  Room,
-} from 'matrix-js-sdk';
-import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { CreateRoomKind } from './CreateRoomKindSelector';
-import { RoomType, StateEvent } from '../../../types/matrix/room';
-import { getViaServers } from '../../plugins/via-servers';
-import { getMxIdServer } from '../../utils/matrix';
-
-export const createRoomCreationContent = (
-  type: RoomType | undefined,
-  allowFederation: boolean,
-  additionalCreators: string[] | undefined
-): object => {
-  const content: Record<string, any> = {};
-  if (typeof type === 'string') {
-    content.type = type;
-  }
-  if (allowFederation === false) {
-    content['m.federate'] = false;
-  }
-  if (Array.isArray(additionalCreators)) {
-    content.additional_creators = additionalCreators;
-  }
-
-  return content;
-};
-
-export const createRoomJoinRulesState = (
-  kind: CreateRoomKind,
-  parent: Room | undefined,
-  knock: boolean
-) => {
-  let content: RoomJoinRulesEventContent = {
-    join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
-  };
-
-  if (kind === CreateRoomKind.Public) {
-    content = {
-      join_rule: JoinRule.Public,
-    };
-  }
-
-  if (kind === CreateRoomKind.Restricted && parent) {
-    content = {
-      join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
-      allow: [
-        {
-          type: RestrictedAllowType.RoomMembership,
-          room_id: parent.roomId,
-        },
-      ],
-    };
-  }
-
-  return {
-    type: StateEvent.RoomJoinRules,
-    state_key: '',
-    content,
-  };
-};
-
-export const createRoomParentState = (parent: Room) => ({
-  type: StateEvent.SpaceParent,
-  state_key: parent.roomId,
-  content: {
-    canonical: true,
-    via: getViaServers(parent),
-  },
-});
-
-export const createRoomEncryptionState = () => ({
-  type: 'm.room.encryption',
-  state_key: '',
-  content: {
-    algorithm: 'm.megolm.v1.aes-sha2',
-  },
-});
-
-export type CreateRoomData = {
-  version: string;
-  type?: RoomType;
-  parent?: Room;
-  kind: CreateRoomKind;
-  name: string;
-  topic?: string;
-  aliasLocalPart?: string;
-  encryption?: boolean;
-  knock: boolean;
-  allowFederation: boolean;
-  additionalCreators?: string[];
-};
-export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
-  const initialState: ICreateRoomStateEvent[] = [];
-
-  if (data.encryption) {
-    initialState.push(createRoomEncryptionState());
-  }
-
-  if (data.parent) {
-    initialState.push(createRoomParentState(data.parent));
-  }
-
-  initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
-
-  const options: ICreateRoomOpts = {
-    room_version: data.version,
-    name: data.name,
-    topic: data.topic,
-    room_alias_name: data.aliasLocalPart,
-    creation_content: createRoomCreationContent(
-      data.type,
-      data.allowFederation,
-      data.additionalCreators
-    ),
-    initial_state: initialState,
-  };
-
-  const result = await mx.createRoom(options);
-
-  if (data.parent) {
-    await mx.sendStateEvent(
-      data.parent.roomId,
-      StateEvent.SpaceChild as any,
-      {
-        auto_join: false,
-        suggested: false,
-        via: [getMxIdServer(mx.getUserId() ?? '') ?? ''],
-      },
-      result.room_id
-    );
-  }
-
-  return result.room_id;
-};

src/app/components/editor/Editor.css.ts

@@ -41,21 +41,21 @@ export const EditorTextarea = style([
   },
 ]);
 
-export const EditorPlaceholderContainer = style([
+export const EditorPlaceholder = style([
   DefaultReset,
   {
+    position: 'absolute',
+    zIndex: 1,
+    width: '100%',
     opacity: config.opacity.Placeholder,
     pointerEvents: 'none',
     userSelect: 'none',
-  },
-]);
 
-export const EditorPlaceholderTextVisual = style([
-  DefaultReset,
-  {
-    display: 'block',
-    paddingTop: toRem(13),
-    paddingLeft: toRem(1),
+    selectors: {
+      '&:not(:first-child)': {
+        display: 'none',
+      },
+    },
   },
 ]);
 

src/app/components/editor/Editor.tsx

@@ -106,17 +106,22 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       [editor, onKeyDown]
     );
 
-    const renderPlaceholder = useCallback(
-      ({ attributes, children }: RenderPlaceholderProps) => (
-        <span {...attributes} className={css.EditorPlaceholderContainer}>
-          {/* Inner component to style the actual text position and appearance */}
-          <Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
-            {children}
-          </Text>
-        </span>
-      ),
-      []
-    );
+    const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => {
+      // drop style attribute as we use our custom placeholder css.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { style, ...props } = attributes;
+      return (
+        <Text
+          as="span"
+          {...props}
+          className={css.EditorPlaceholder}
+          contentEditable={false}
+          truncate
+        >
+          {children}
+        </Text>
+      );
+    }, []);
 
     return (
       <div className={css.Editor} ref={ref}>

src/app/components/editor/Toolbar.tsx

@@ -339,7 +339,7 @@ export function Toolbar() {
           <Box className={css.MarkdownBtnBox} shrink="No" grow="Yes" justifyContent="End">
             <TooltipProvider
               align="End"
-              tooltip={<BtnTooltip text={isMarkdown ? 'Disable Markdown' : 'Enable Markdown'} />}
+              tooltip={<BtnTooltip text="Toggle Markdown" />}
               delay={500}
             >
               {(triggerRef) => (

src/app/components/event-readers/EventReaders.tsx

@@ -19,10 +19,9 @@ 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;
@@ -34,8 +33,6 @@ 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;
@@ -60,32 +57,19 @@ export const EventReaders = as<'div', EventReadersProps>(
             <Box className={css.Content} direction="Column">
               {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 (
                   <MenuItem
                     key={readerId}
                     style={{ padding: `0 ${config.space.S200}` }}
                     radii="400"
-                    onClick={(event) => {
-                      openProfile(
-                        room.roomId,
-                        space?.roomId,
-                        readerId,
-                        event.currentTarget.getBoundingClientRect(),
-                        'Bottom'
-                      );
+                    onClick={() => {
+                      requestClose();
+                      openProfileViewer(readerId, room.roomId);
                     }}
                     before={
                       <Avatar size="200">

src/app/components/image-pack-view/RoomImagePack.tsx

@@ -1,14 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
 import { Room } from 'matrix-js-sdk';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { ImagePackContent } from './ImagePackContent';
 import { ImagePack, PackContent } from '../../plugins/custom-emoji';
 import { StateEvent } from '../../../types/matrix/room';
 import { useRoomImagePack } from '../../hooks/useImagePacks';
 import { randomStr } from '../../utils/common';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
 
 type RoomImagePackProps = {
   room: Room;
@@ -19,10 +17,9 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
   const mx = useMatrixClient();
   const userId = mx.getUserId()!;
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
 
-  const permissions = useRoomPermissions(creators, powerLevels);
-  const canEditImagePack = permissions.stateEvent(StateEvent.PoniesRoomEmotes, userId);
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
 
   const fallbackPack = useMemo(() => {
     const fakePackId = randomStr(4);

src/app/components/message/Reply.tsx

@@ -10,8 +10,8 @@ import * as css from './Reply.css';
 import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
 import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
+import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
 import colorMXID from '../../../util/colorMXID';
-import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 
 type ReplyLayoutProps = {
   userColor?: string;
@@ -57,7 +57,8 @@ type ReplyProps = {
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
-  getMemberPowerTag?: GetMemberPowerTag;
+  getPowerLevel?: (userId: string) => number;
+  getPowerLevelTag?: GetPowerLevelTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
 };
@@ -70,7 +71,8 @@ export const Reply = as<'div', ReplyProps>(
       replyEventId,
       threadRootId,
       onClick,
-      getMemberPowerTag,
+      getPowerLevel,
+      getPowerLevelTag,
       accessibleTagColors,
       legacyUsernameColor,
       ...props
@@ -86,7 +88,8 @@ export const Reply = as<'div', ReplyProps>(
 
     const { body } = replyEvent?.getContent() ?? {};
     const sender = replyEvent?.getSender();
-    const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
+    const senderPL = sender && getPowerLevel?.(sender);
+    const powerTag = typeof senderPL === 'number' ? getPowerLevelTag?.(senderPL) : undefined;
     const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
 
     const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;

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

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

src/app/components/presence/Presence.tsx

@@ -1,80 +0,0 @@
-import {
-  as,
-  Badge,
-  Box,
-  color,
-  ContainerColor,
-  MainColor,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  toRem,
-} from 'folds';
-import React, { ReactNode, useId } from 'react';
-import * as css from './styles.css';
-import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
-
-const PresenceToColor: Record<Presence, MainColor> = {
-  [Presence.Online]: 'Success',
-  [Presence.Unavailable]: 'Warning',
-  [Presence.Offline]: 'Secondary',
-};
-
-type PresenceBadgeProps = {
-  presence: Presence;
-  status?: string;
-  size?: '200' | '300' | '400' | '500';
-};
-export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
-  const label = usePresenceLabel();
-  const badgeLabelId = useId();
-
-  return (
-    <TooltipProvider
-      position="Right"
-      align="Center"
-      offset={4}
-      delay={200}
-      tooltip={
-        <Tooltip id={badgeLabelId}>
-          <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
-            <Text size="L400">{label[presence]}</Text>
-            {status && <Text size="T200">•</Text>}
-            {status && <Text size="T200">{status}</Text>}
-          </Box>
-        </Tooltip>
-      }
-    >
-      {(triggerRef) => (
-        <Badge
-          aria-labelledby={badgeLabelId}
-          ref={triggerRef}
-          size={size}
-          variant={PresenceToColor[presence]}
-          fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
-          radii="Pill"
-        />
-      )}
-    </TooltipProvider>
-  );
-}
-
-type AvatarPresenceProps = {
-  badge: ReactNode;
-  variant?: ContainerColor;
-};
-export const AvatarPresence = as<'div', AvatarPresenceProps>(
-  ({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
-    <Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
-      {badge && (
-        <div
-          className={css.AvatarPresenceBadge}
-          style={{ backgroundColor: color[variant].Container }}
-        >
-          {badge}
-        </div>
-      )}
-      {children}
-    </Box>
-  )
-);

src/app/components/presence/index.ts

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

src/app/components/presence/styles.css.ts

@@ -1,22 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
-
-export const AvatarPresence = style({
-  display: 'flex',
-  position: 'relative',
-  flexShrink: 0,
-});
-
-export const AvatarPresenceBadge = style({
-  position: 'absolute',
-  bottom: 0,
-  right: 0,
-  transform: 'translate(25%, 25%)',
-  zIndex: 1,
-
-  display: 'flex',
-  padding: config.borderWidth.B600,
-  backgroundColor: 'inherit',
-  borderRadius: config.radii.Pill,
-  overflow: 'hidden',
-});

src/app/components/room-intro/RoomIntro.tsx

@@ -87,7 +87,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
           {typeof prevRoomId === 'string' &&
             (mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
               <Button
-                onClick={() => navigateRoom(prevRoomId, createContent?.predecessor?.event_id)}
+                onClick={() => navigateRoom(prevRoomId)}
                 variant="Success"
                 size="300"
                 fill="Soft"

src/app/components/sequence-card/SequenceCard.tsx

@@ -7,31 +7,12 @@ import * as css from './style.css';
 export const SequenceCard = as<
   'div',
   ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
->(
-  (
-    {
-      as: AsSequenceCard = 'div',
-      className,
-      variant,
-      radii,
-      firstChild,
-      lastChild,
-      outlined,
-      ...props
-    },
-    ref
-  ) => (
-    <Box
-      as={AsSequenceCard}
-      className={classNames(
-        css.SequenceCard({ radii, outlined }),
-        ContainerColor({ variant }),
-        className
-      )}
-      data-first-child={firstChild}
-      data-last-child={lastChild}
-      {...props}
-      ref={ref}
-    />
-  )
-);
+>(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => (
+  <Box
+    className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
+    data-first-child={firstChild}
+    data-last-child={lastChild}
+    {...props}
+    ref={ref}
+  />
+));

src/app/components/sequence-card/style.css.ts

@@ -3,7 +3,6 @@ import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { config } from 'folds';
 
 const outlinedWidth = createVar('0');
-const radii = createVar(config.radii.R400);
 export const SequenceCard = recipe({
   base: {
     vars: {
@@ -14,59 +13,33 @@ export const SequenceCard = recipe({
     borderBottomWidth: 0,
     selectors: {
       '&:first-child, :not(&) + &': {
-        borderTopLeftRadius: [radii],
-        borderTopRightRadius: [radii],
+        borderTopLeftRadius: config.radii.R400,
+        borderTopRightRadius: config.radii.R400,
       },
       '&:last-child, &:not(:has(+&))': {
-        borderBottomLeftRadius: [radii],
-        borderBottomRightRadius: [radii],
+        borderBottomLeftRadius: config.radii.R400,
+        borderBottomRightRadius: config.radii.R400,
         borderBottomWidth: outlinedWidth,
       },
       [`&[data-first-child="true"]`]: {
-        borderTopLeftRadius: [radii],
-        borderTopRightRadius: [radii],
+        borderTopLeftRadius: config.radii.R400,
+        borderTopRightRadius: config.radii.R400,
       },
       [`&[data-first-child="false"]`]: {
         borderTopLeftRadius: 0,
         borderTopRightRadius: 0,
       },
       [`&[data-last-child="true"]`]: {
-        borderBottomLeftRadius: [radii],
-        borderBottomRightRadius: [radii],
+        borderBottomLeftRadius: config.radii.R400,
+        borderBottomRightRadius: config.radii.R400,
       },
       [`&[data-last-child="false"]`]: {
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
       },
-
-      'button&': {
-        cursor: 'pointer',
-      },
     },
   },
   variants: {
-    radii: {
-      '0': {
-        vars: {
-          [radii]: config.radii.R0,
-        },
-      },
-      '300': {
-        vars: {
-          [radii]: config.radii.R300,
-        },
-      },
-      '400': {
-        vars: {
-          [radii]: config.radii.R400,
-        },
-      },
-      '500': {
-        vars: {
-          [radii]: config.radii.R500,
-        },
-      },
-    },
     outlined: {
       true: {
         vars: {
@@ -75,8 +48,5 @@ export const SequenceCard = recipe({
       },
     },
   },
-  defaultVariants: {
-    radii: '400',
-  },
 });
 export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;

src/app/components/upload-card/CompactUploadCardRenderer.tsx

@@ -4,8 +4,7 @@ import { UploadCard, UploadCardError, CompactUploadCardProgress } from './Upload
 import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
-import { bytesToSize, getFileTypeIcon } from '../../utils/common';
-import { useMediaConfig } from '../../hooks/useMediaConfig';
+import { getFileTypeIcon } from '../../utils/common';
 
 type CompactUploadCardRendererProps = {
   isEncrypted?: boolean;
@@ -20,16 +19,10 @@ export function CompactUploadCardRenderer({
   onComplete,
 }: CompactUploadCardRendererProps) {
   const mx = useMatrixClient();
-  const mediaConfig = useMediaConfig();
-  const allowSize = mediaConfig['m.upload.size'] || Infinity;
-
   const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
   const { file } = upload;
-  const fileSizeExceeded = file.size >= allowSize;
 
-  if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
-    startUpload();
-  }
+  if (upload.status === UploadStatus.Idle) startUpload();
 
   const removeUpload = () => {
     cancelUpload();
@@ -83,7 +76,7 @@ export function CompactUploadCardRenderer({
         </>
       ) : (
         <>
-          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
+          {upload.status === UploadStatus.Idle && (
             <CompactUploadCardProgress sentBytes={0} totalBytes={file.size} />
           )}
           {upload.status === UploadStatus.Loading && (
@@ -94,15 +87,6 @@ export function CompactUploadCardRenderer({
               <Text size="T200">{upload.error.message}</Text>
             </UploadCardError>
           )}
-          {upload.status === UploadStatus.Idle && fileSizeExceeded && (
-            <UploadCardError>
-              <Text size="T200">
-                The file size exceeds the limit. Maximum allowed size is{' '}
-                <b>{bytesToSize(allowSize)}</b>, but the uploaded file is{' '}
-                <b>{bytesToSize(file.size)}</b>.
-              </Text>
-            </UploadCardError>
-          )}
         </>
       )}
     </UploadCard>

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -4,14 +4,13 @@ import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
 import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
-import { bytesToSize, getFileTypeIcon } from '../../utils/common';
+import { getFileTypeIcon } from '../../utils/common';
 import {
   roomUploadAtomFamily,
   TUploadItem,
   TUploadMetadata,
 } from '../../state/room/roomInputDrafts';
 import { useObjectURL } from '../../hooks/useObjectURL';
-import { useMediaConfig } from '../../hooks/useMediaConfig';
 
 type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void };
 function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) {
@@ -76,18 +75,12 @@ export function UploadCardRenderer({
   onComplete,
 }: UploadCardRendererProps) {
   const mx = useMatrixClient();
-  const mediaConfig = useMediaConfig();
-  const allowSize = mediaConfig['m.upload.size'] || Infinity;
-
   const uploadAtom = roomUploadAtomFamily(fileItem.file);
   const { metadata } = fileItem;
   const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
   const { file } = upload;
-  const fileSizeExceeded = file.size >= allowSize;
 
-  if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
-    startUpload();
-  }
+  if (upload.status === UploadStatus.Idle) startUpload();
 
   const handleSpoiler = (marked: boolean) => {
     setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked });
@@ -138,7 +131,7 @@ export function UploadCardRenderer({
           {fileItem.originalFile.type.startsWith('image') && (
             <ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} />
           )}
-          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
+          {upload.status === UploadStatus.Idle && (
             <UploadCardProgress sentBytes={0} totalBytes={file.size} />
           )}
           {upload.status === UploadStatus.Loading && (
@@ -149,15 +142,6 @@ export function UploadCardRenderer({
               <Text size="T200">{upload.error.message}</Text>
             </UploadCardError>
           )}
-          {upload.status === UploadStatus.Idle && fileSizeExceeded && (
-            <UploadCardError>
-              <Text size="T200">
-                The file size exceeds the limit. Maximum allowed size is{' '}
-                <b>{bytesToSize(allowSize)}</b>, but the uploaded file is{' '}
-                <b>{bytesToSize(file.size)}</b>.
-              </Text>
-            </UploadCardError>
-          )}
         </>
       }
     >

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

@@ -1,101 +0,0 @@
-import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
-import React, { MouseEventHandler, useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import { isKeyHotkey } from 'is-hotkey';
-import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
-import { PowerColorBadge, PowerIcon } from '../power';
-import { getPowerTagIconSrc } from '../../hooks/useMemberPowerTag';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { stopPropagation } from '../../utils/keyboard';
-import { useRoom } from '../../hooks/useRoom';
-import { useSpaceOptionally } from '../../hooks/useSpace';
-import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
-import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
-import { SpaceSettingsPage } from '../../state/spaceSettings';
-import { RoomSettingsPage } from '../../state/roomSettings';
-
-export function CreatorChip() {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const room = useRoom();
-  const space = useSpaceOptionally();
-  const openRoomSettings = useOpenRoomSettings();
-  const openSpaceSettings = useOpenSpaceSettings();
-
-  const [cords, setCords] = useState<RectCords>();
-  const tag = useRoomCreatorsTag();
-  const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
-
-  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={() => {
-                  if (room.isSpaceRoom()) {
-                    openSpaceSettings(
-                      room.roomId,
-                      space?.roomId,
-                      SpaceSettingsPage.PermissionsPage
-                    );
-                  } else {
-                    openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);
-                  }
-                  close();
-                }}
-              >
-                <Text size="B300">Manage Powers</Text>
-              </MenuItem>
-            </div>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      <Chip
-        variant="Success"
-        outlined
-        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>
-  );
-}

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

@@ -1,357 +0,0 @@
-import {
-  Box,
-  Button,
-  Chip,
-  config,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Menu,
-  MenuItem,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  PopOut,
-  RectCords,
-  Spinner,
-  Text,
-  toRem,
-} from 'folds';
-import React, { MouseEventHandler, useCallback, useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import { isKeyHotkey } from 'is-hotkey';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { PowerColorBadge, PowerIcon } from '../power';
-import { useGetMemberPowerLevel, usePowerLevels } from '../../hooks/usePowerLevels';
-import { getPowers, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
-import { stopPropagation } from '../../utils/keyboard';
-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 { CutoutCard } from '../cutout-card';
-import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
-import { SpaceSettingsPage } from '../../state/spaceSettings';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { BreakWord } from '../../styles/Text.css';
-import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
-
-type SelfDemoteAlertProps = {
-  power: number;
-  onCancel: () => void;
-  onChange: (power: number) => void;
-};
-function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: onCancel,
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Dialog variant="Surface">
-            <Header
-              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
-              variant="Surface"
-              size="500"
-            >
-              <Box grow="Yes">
-                <Text size="H4">Self Demotion</Text>
-              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
-                <Icon src={Icons.Cross} />
-              </IconButton>
-            </Header>
-            <Box style={{ padding: config.space.S400, paddingTop: 0 }} direction="Column" gap="500">
-              <Box direction="Column" gap="200">
-                <Text priority="400">
-                  You are about to demote yourself! You will not be able to regain this power
-                  yourself. Are you sure?
-                </Text>
-              </Box>
-              <Box direction="Column" gap="200">
-                <Button type="submit" variant="Warning" onClick={() => onChange(power)}>
-                  <Text size="B400">Demote</Text>
-                </Button>
-              </Box>
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}
-
-type SharedPowerAlertProps = {
-  power: number;
-  onCancel: () => void;
-  onChange: (power: number) => void;
-};
-function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps) {
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: onCancel,
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Dialog variant="Surface">
-            <Header
-              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
-              variant="Surface"
-              size="500"
-            >
-              <Box grow="Yes">
-                <Text size="H4">Shared Power</Text>
-              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
-                <Icon src={Icons.Cross} />
-              </IconButton>
-            </Header>
-            <Box style={{ padding: config.space.S400, paddingTop: 0 }} direction="Column" gap="500">
-              <Box direction="Column" gap="200">
-                <Text priority="400">
-                  You are promoting the user to have the same power as yourself! You will not be
-                  able to change their power afterward. Are you sure?
-                </Text>
-              </Box>
-              <Box direction="Column" gap="200">
-                <Button type="submit" variant="Warning" onClick={() => onChange(power)}>
-                  <Text size="B400">Promote</Text>
-                </Button>
-              </Box>
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}
-
-export function PowerChip({ userId }: { userId: string }) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const space = useSpaceOptionally();
-  const useAuthentication = useMediaAuthentication();
-  const openRoomSettings = useOpenRoomSettings();
-  const openSpaceSettings = useOpenSpaceSettings();
-
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-  const getMemberPowerLevel = useGetMemberPowerLevel(powerLevels);
-  const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
-
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
-
-  const myUserId = mx.getSafeUserId();
-  const canChangePowers =
-    permissions.stateEvent(StateEvent.RoomPowerLevels, myUserId) &&
-    (myUserId === userId ? true : hasMorePower(myUserId, userId));
-
-  const tag = getMemberPowerTag(userId);
-  const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
-
-  const [cords, setCords] = useState<RectCords>();
-
-  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const close = () => setCords(undefined);
-
-  const [powerState, changePower] = useAsyncCallback<undefined, Error, [number]>(
-    useCallback(
-      async (power: number) => {
-        await mx.setPowerLevel(room.roomId, userId, power);
-      },
-      [mx, userId, room]
-    )
-  );
-  const changing = powerState.status === AsyncStatus.Loading;
-  const error = powerState.status === AsyncStatus.Error;
-  const [selfDemote, setSelfDemote] = useState<number>();
-  const [sharedPower, setSharedPower] = useState<number>();
-
-  const handlePowerSelect = (power: number): void => {
-    close();
-    if (!canChangePowers) return;
-    if (power === getMemberPowerLevel(userId)) return;
-
-    if (userId === mx.getSafeUserId()) {
-      setSelfDemote(power);
-      return;
-    }
-    if (!creators.has(myUserId) && power === getMemberPowerLevel(myUserId)) {
-      setSharedPower(power);
-      return;
-    }
-
-    changePower(power);
-  };
-
-  const handleSelfDemote = (power: number) => {
-    setSelfDemote(undefined);
-    changePower(power);
-  };
-  const handleSharedPower = (power: number) => {
-    setSharedPower(undefined);
-    changePower(power);
-  };
-
-  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>
-              <Box
-                direction="Column"
-                gap="100"
-                style={{ padding: config.space.S100, maxWidth: toRem(200) }}
-              >
-                {error && (
-                  <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
-                    <Text size="L400">Error: {powerState.error.name}</Text>
-                    <Text className={BreakWord} size="T200">
-                      {powerState.error.message}
-                    </Text>
-                  </CutoutCard>
-                )}
-                {getPowers(powerLevelTags).map((power) => {
-                  const powerTag = powerLevelTags[power];
-                  const powerTagIconSrc =
-                    powerTag.icon && getPowerTagIconSrc(mx, useAuthentication, powerTag.icon);
-
-                  const selected = getMemberPowerLevel(userId) === power;
-                  const canAssignPower = creators.has(myUserId)
-                    ? true
-                    : power <= getMemberPowerLevel(myUserId);
-
-                  return (
-                    <MenuItem
-                      key={power}
-                      variant={selected ? 'Primary' : 'Surface'}
-                      fill="None"
-                      size="300"
-                      radii="300"
-                      aria-disabled={changing || !canChangePowers || !canAssignPower}
-                      aria-pressed={selected}
-                      before={<PowerColorBadge color={powerTag.color} />}
-                      after={
-                        powerTagIconSrc ? (
-                          <PowerIcon size="50" iconSrc={powerTagIconSrc} />
-                        ) : undefined
-                      }
-                      onClick={
-                        canChangePowers && canAssignPower
-                          ? () => handlePowerSelect(power)
-                          : undefined
-                      }
-                    >
-                      <Text size="B300">{powerTag.name}</Text>
-                    </MenuItem>
-                  );
-                })}
-              </Box>
-              <Line size="300" />
-              <div style={{ padding: config.space.S100 }}>
-                <MenuItem
-                  variant="Surface"
-                  fill="None"
-                  size="300"
-                  radii="300"
-                  onClick={() => {
-                    if (room.isSpaceRoom()) {
-                      openSpaceSettings(
-                        room.roomId,
-                        space?.roomId,
-                        SpaceSettingsPage.PermissionsPage
-                      );
-                    } else {
-                      openRoomSettings(
-                        room.roomId,
-                        space?.roomId,
-                        RoomSettingsPage.PermissionsPage
-                      );
-                    }
-                    close();
-                  }}
-                >
-                  <Text size="B300">Manage Powers</Text>
-                </MenuItem>
-              </div>
-            </Menu>
-          </FocusTrap>
-        }
-      >
-        <Chip
-          variant={error ? 'Critical' : 'SurfaceVariant'}
-          radii="Pill"
-          before={
-            cords ? (
-              <Icon size="50" src={Icons.ChevronBottom} />
-            ) : (
-              <>
-                {!changing && <PowerColorBadge color={tag.color} />}
-                {changing && <Spinner size="50" variant="Secondary" fill="Soft" />}
-              </>
-            )
-          }
-          after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
-          onClick={open}
-          aria-pressed={!!cords}
-        >
-          <Text size="B300" truncate>
-            {tag.name}
-          </Text>
-        </Chip>
-      </PopOut>
-      {typeof selfDemote === 'number' ? (
-        <SelfDemoteAlert
-          power={selfDemote}
-          onCancel={() => setSelfDemote(undefined)}
-          onChange={handleSelfDemote}
-        />
-      ) : null}
-      {typeof sharedPower === 'number' ? (
-        <SharedPowerAlert
-          power={sharedPower}
-          onCancel={() => setSharedPower(undefined)}
-          onChange={handleSharedPower}
-        />
-      ) : null}
-    </>
-  );
-}

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

@@ -1,514 +0,0 @@
-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<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);
-                  setCopied();
-                  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={copied ? Icons.Check : Icons.Server} />
-          )
-        }
-        onClick={open}
-        aria-pressed={!!cords}
-      >
-        <Text size="B300" truncate>
-          {server}
-        </Text>
-      </Chip>
-    </PopOut>
-  );
-}
-
-export function ShareChip({ userId }: { userId: string }) {
-  const [cords, setCords] = useState<RectCords>();
-
-  const [copied, setCopied] = useTimeoutToggle();
-
-  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(userId);
-                  setCopied();
-                  close();
-                }}
-              >
-                <Text size="B300">Copy User ID</Text>
-              </MenuItem>
-              <MenuItem
-                variant="Surface"
-                fill="None"
-                size="300"
-                radii="300"
-                onClick={() => {
-                  copyToClipboard(getMatrixToUser(userId));
-                  setCopied();
-                  close();
-                }}
-              >
-                <Text size="B300">Copy User Link</Text>
-              </MenuItem>
-            </div>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      <Chip
-        variant={copied ? 'Success' : 'SurfaceVariant'}
-        radii="Pill"
-        before={
-          cords ? (
-            <Icon size="50" src={Icons.ChevronBottom} />
-          ) : (
-            <Icon size="50" src={copied ? Icons.Check : Icons.Link} />
-          )
-        }
-        onClick={open}
-        aria-pressed={!!cords}
-      >
-        <Text size="B300" truncate>
-          Share
-        </Text>
-      </Chip>
-    </PopOut>
-  );
-}
-
-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<RectCords>();
-
-  const open: MouseEventHandler<HTMLButtonElement> = (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 (
-      <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>
-    );
-  };
-
-  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="400"
-                    style={{ padding: config.space.S200, paddingRight: 0 }}
-                  >
-                    {mutual.spaces.length > 0 && (
-                      <Box direction="Column" gap="100">
-                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
-                          Spaces
-                        </Text>
-                        {mutual.spaces.map(renderItem)}
-                      </Box>
-                    )}
-                    {mutual.rooms.length > 0 && (
-                      <Box direction="Column" gap="100">
-                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
-                          Rooms
-                        </Text>
-                        {mutual.rooms.map(renderItem)}
-                      </Box>
-                    )}
-                    {mutual.directs.length > 0 && (
-                      <Box direction="Column" gap="100">
-                        <Text style={{ paddingLeft: config.space.S100 }} size="L400">
-                          Direct Messages
-                        </Text>
-                        {mutual.directs.map(renderItem)}
-                      </Box>
-                    )}
-                  </Box>
-                </Scroll>
-              </Box>
-            </Menu>
-          </FocusTrap>
-        ) : null
-      }
-    >
-      <Chip
-        variant="SurfaceVariant"
-        radii="Pill"
-        before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
-        disabled={
-          mutualRoomsState.status !== AsyncStatus.Success || mutualRoomsState.data.length === 0
-        }
-        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>
-  );
-}
-
-export function IgnoredUserAlert() {
-  return (
-    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
-      <SettingTile>
-        <Box direction="Column" gap="200">
-          <Box gap="200" justifyContent="SpaceBetween">
-            <Text size="L400">Blocked User</Text>
-          </Box>
-          <Box direction="Column">
-            <Text size="T200">You do not receive any messages or invites from this user.</Text>
-          </Box>
-        </Box>
-      </SettingTile>
-    </CutoutCard>
-  );
-}
-
-export function OptionsChip({ userId }: { userId: string }) {
-  const mx = useMatrixClient();
-  const [cords, setCords] = useState<RectCords>();
-
-  const open: MouseEventHandler<HTMLButtonElement> = (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 (
-    <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="Critical"
-                fill="None"
-                size="300"
-                radii="300"
-                onClick={() => {
-                  toggleIgnore();
-                  close();
-                }}
-                before={
-                  ignoring ? (
-                    <Spinner variant="Critical" size="50" />
-                  ) : (
-                    <Icon size="50" src={Icons.Prohibited} />
-                  )
-                }
-                disabled={ignoring}
-              >
-                <Text size="B300">{ignored ? 'Unblock User' : 'Block User'}</Text>
-              </MenuItem>
-            </div>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      <Chip variant="SurfaceVariant" radii="Pill" onClick={open} aria-pressed={!!cords}>
-        {ignoring ? (
-          <Spinner variant="Secondary" size="50" />
-        ) : (
-          <Icon size="50" src={Icons.HorizontalDots} />
-        )}
-      </Chip>
-    </PopOut>
-  );
-}

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

@@ -1,75 +0,0 @@
-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 (
-    <Box direction="Column" className={css.UserHero}>
-      <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}
-              src={avatarUrl}
-              alt={userId}
-              renderFallback={() => <Icon size="500" src={Icons.User} filled />}
-            />
-          </Avatar>
-        </AvatarPresence>
-      </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="H4"
-          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/UserModeration.tsx

@@ -1,349 +0,0 @@
-import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds';
-import React, { useCallback, useRef } from 'react';
-import { useRoom } from '../../hooks/useRoom';
-import { CutoutCard } from '../cutout-card';
-import { SettingTile } from '../setting-tile';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { BreakWord } from '../../styles/Text.css';
-import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
-import { timeDayMonYear, timeHourMinute } from '../../utils/time';
-
-type UserKickAlertProps = {
-  reason?: string;
-  kickedBy?: string;
-  ts?: number;
-};
-export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
-
-  return (
-    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
-      <SettingTile>
-        <Box direction="Column" gap="200">
-          <Box gap="200" justifyContent="SpaceBetween">
-            <Text size="L400">Kicked User</Text>
-            {time && date && (
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
-          </Box>
-          <Box direction="Column">
-            {kickedBy && (
-              <Text size="T200">
-                Kicked by: <b>{kickedBy}</b>
-              </Text>
-            )}
-            <Text size="T200">
-              {reason ? (
-                <>
-                  Reason: <b>{reason}</b>
-                </>
-              ) : (
-                <i>No Reason Provided.</i>
-              )}
-            </Text>
-          </Box>
-        </Box>
-      </SettingTile>
-    </CutoutCard>
-  );
-}
-
-type UserBanAlertProps = {
-  userId: string;
-  reason?: string;
-  canUnban?: boolean;
-  bannedBy?: string;
-  ts?: number;
-};
-export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBanAlertProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
-
-  const [unbanState, unban] = useAsyncCallback<undefined, Error, []>(
-    useCallback(async () => {
-      await mx.unban(room.roomId, userId);
-    }, [mx, room, userId])
-  );
-  const banning = unbanState.status === AsyncStatus.Loading;
-  const error = unbanState.status === AsyncStatus.Error;
-
-  return (
-    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
-      <SettingTile>
-        <Box direction="Column" gap="200">
-          <Box gap="200" justifyContent="SpaceBetween">
-            <Text size="L400">Banned User</Text>
-            {time && date && (
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
-          </Box>
-          <Box direction="Column">
-            {bannedBy && (
-              <Text size="T200">
-                Banned by: <b>{bannedBy}</b>
-              </Text>
-            )}
-            <Text size="T200">
-              {reason ? (
-                <>
-                  Reason: <b>{reason}</b>
-                </>
-              ) : (
-                <i>No Reason Provided.</i>
-              )}
-            </Text>
-          </Box>
-          {error && (
-            <Text className={BreakWord} size="T200" style={{ color: color.Critical.Main }}>
-              <b>{unbanState.error.message}</b>
-            </Text>
-          )}
-          {canUnban && (
-            <Button
-              size="300"
-              variant="Critical"
-              radii="300"
-              onClick={unban}
-              before={banning && <Spinner size="100" variant="Critical" fill="Solid" />}
-              disabled={banning}
-            >
-              <Text size="B300">Unban</Text>
-            </Button>
-          )}
-        </Box>
-      </SettingTile>
-    </CutoutCard>
-  );
-}
-
-type UserInviteAlertProps = {
-  userId: string;
-  reason?: string;
-  canKick?: boolean;
-  invitedBy?: string;
-  ts?: number;
-};
-export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: UserInviteAlertProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
-
-  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
-    useCallback(async () => {
-      await mx.kick(room.roomId, userId);
-    }, [mx, room, userId])
-  );
-  const kicking = kickState.status === AsyncStatus.Loading;
-  const error = kickState.status === AsyncStatus.Error;
-
-  return (
-    <CutoutCard style={{ padding: config.space.S200 }} variant="Success">
-      <SettingTile>
-        <Box direction="Column" gap="200">
-          <Box gap="200" justifyContent="SpaceBetween">
-            <Text size="L400">Invited User</Text>
-            {time && date && (
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
-          </Box>
-          <Box direction="Column">
-            {invitedBy && (
-              <Text size="T200">
-                Invited by: <b>{invitedBy}</b>
-              </Text>
-            )}
-            <Text size="T200">
-              {reason ? (
-                <>
-                  Reason: <b>{reason}</b>
-                </>
-              ) : (
-                <i>No Reason Provided.</i>
-              )}
-            </Text>
-          </Box>
-          {error && (
-            <Text className={BreakWord} size="T200" style={{ color: color.Critical.Main }}>
-              <b>{kickState.error.message}</b>
-            </Text>
-          )}
-          {canKick && (
-            <Button
-              size="300"
-              variant="Success"
-              fill="Soft"
-              outlined
-              radii="300"
-              onClick={kick}
-              before={kicking && <Spinner size="100" variant="Success" fill="Soft" />}
-              disabled={kicking}
-            >
-              <Text size="B300">Cancel Invite</Text>
-            </Button>
-          )}
-        </Box>
-      </SettingTile>
-    </CutoutCard>
-  );
-}
-
-type UserModerationProps = {
-  userId: string;
-  canKick: boolean;
-  canBan: boolean;
-  canInvite: boolean;
-};
-export function UserModeration({ userId, canKick, canBan, canInvite }: UserModerationProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const reasonInputRef = useRef<HTMLInputElement>(null);
-
-  const getReason = useCallback((): string | undefined => {
-    const reason = reasonInputRef.current?.value.trim() || undefined;
-    if (reasonInputRef.current) {
-      reasonInputRef.current.value = '';
-    }
-    return reason;
-  }, []);
-
-  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
-    useCallback(async () => {
-      await mx.kick(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
-  );
-
-  const [banState, ban] = useAsyncCallback<undefined, Error, []>(
-    useCallback(async () => {
-      await mx.ban(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
-  );
-
-  const [inviteState, invite] = useAsyncCallback<undefined, Error, []>(
-    useCallback(async () => {
-      await mx.invite(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
-  );
-
-  const disabled =
-    kickState.status === AsyncStatus.Loading ||
-    banState.status === AsyncStatus.Loading ||
-    inviteState.status === AsyncStatus.Loading;
-
-  if (!canBan && !canKick && !canInvite) return null;
-
-  return (
-    <Box direction="Column" gap="400">
-      <Box direction="Column" gap="200">
-        <Box grow="Yes" direction="Column" gap="100">
-          <Text size="L400">Moderation</Text>
-          <Input
-            ref={reasonInputRef}
-            placeholder="Reason"
-            size="300"
-            variant="Background"
-            radii="300"
-            disabled={disabled}
-          />
-          {kickState.status === AsyncStatus.Error && (
-            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
-              <b>{kickState.error.message}</b>
-            </Text>
-          )}
-          {banState.status === AsyncStatus.Error && (
-            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
-              <b>{banState.error.message}</b>
-            </Text>
-          )}
-          {inviteState.status === AsyncStatus.Error && (
-            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
-              <b>{inviteState.error.message}</b>
-            </Text>
-          )}
-        </Box>
-        <Box shrink="No" gap="200">
-          {canInvite && (
-            <Button
-              style={{ flexGrow: 1 }}
-              size="300"
-              variant="Secondary"
-              fill="Soft"
-              radii="300"
-              before={
-                inviteState.status === AsyncStatus.Loading ? (
-                  <Spinner size="50" variant="Secondary" fill="Soft" />
-                ) : (
-                  <Icon size="50" src={Icons.ArrowRight} />
-                )
-              }
-              onClick={invite}
-              disabled={disabled}
-            >
-              <Text size="B300">Invite</Text>
-            </Button>
-          )}
-          {canKick && (
-            <Button
-              style={{ flexGrow: 1 }}
-              size="300"
-              variant="Critical"
-              fill="Soft"
-              radii="300"
-              before={
-                kickState.status === AsyncStatus.Loading ? (
-                  <Spinner size="50" variant="Critical" fill="Soft" />
-                ) : (
-                  <Icon size="50" src={Icons.ArrowLeft} />
-                )
-              }
-              onClick={kick}
-              disabled={disabled}
-            >
-              <Text size="B300">Kick</Text>
-            </Button>
-          )}
-          {canBan && (
-            <Button
-              style={{ flexGrow: 1 }}
-              size="300"
-              variant="Critical"
-              fill="Solid"
-              radii="300"
-              before={
-                banState.status === AsyncStatus.Loading ? (
-                  <Spinner size="50" variant="Critical" fill="Solid" />
-                ) : (
-                  <Icon size="50" src={Icons.Prohibited} />
-                )
-              }
-              onClick={ban}
-              disabled={disabled}
-            >
-              <Text size="B300">Ban</Text>
-            </Button>
-          )}
-        </Box>
-      </Box>
-    </Box>
-  );
-}

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

@@ -1,169 +0,0 @@
-import { Box, Button, color, config, Icon, Icons, Spinner, Text } from 'folds';
-import React, { useCallback } from 'react';
-import { UserHero, UserHeroName } from './UserHero';
-import { getDMRoomFor, getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
-import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
-import { useRoom } from '../../hooks/useRoom';
-import { useUserPresence } from '../../hooks/useUserPresence';
-import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { createDM } from '../../../client/action/room';
-import { hasDevices } from '../../../util/matrixUtil';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { useAlive } from '../../hooks/useAlive';
-import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
-import { PowerChip } from './PowerChip';
-import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
-import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
-import { useMembership } from '../../hooks/useMembership';
-import { Membership } from '../../../types/matrix/room';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
-import { CreatorChip } from './CreatorChip';
-
-type UserRoomProfileProps = {
-  userId: string;
-};
-export function UserRoomProfile({ userId }: UserRoomProfileProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const { navigateRoom } = useRoomNavigate();
-  const alive = useAlive();
-  const closeUserRoomProfile = useCloseUserRoomProfile();
-  const ignoredUsers = useIgnoredUsers();
-  const ignored = ignoredUsers.includes(userId);
-
-  const room = useRoom();
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-  const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
-
-  const myUserId = mx.getSafeUserId();
-  const creator = creators.has(userId);
-
-  const canKickUser = permissions.action('kick', myUserId) && hasMorePower(myUserId, userId);
-  const canBanUser = permissions.action('ban', myUserId) && hasMorePower(myUserId, userId);
-  const canUnban = permissions.action('ban', myUserId);
-  const canInvite = permissions.action('invite', myUserId);
-
-  const member = room.getMember(userId);
-  const membership = useMembership(room, 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);
-
-  const [directMessageState, directMessage] = useAsyncCallback<string, Error, []>(
-    useCallback(async () => {
-      const result = await createDM(mx, userId, await hasDevices(mx, userId));
-      return result.room_id as string;
-    }, [userId, mx])
-  );
-
-  const handleMessage = () => {
-    const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
-    if (dmRoomId) {
-      navigateRoom(dmRoomId);
-      closeUserRoomProfile();
-      return;
-    }
-    directMessage().then((rId) => {
-      if (alive()) {
-        navigateRoom(rId);
-        closeUserRoomProfile();
-      }
-    });
-  };
-
-  return (
-    <Box direction="Column">
-      <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="Primary"
-                fill="Solid"
-                radii="300"
-                disabled={directMessageState.status === AsyncStatus.Loading}
-                before={
-                  directMessageState.status === AsyncStatus.Loading ? (
-                    <Spinner size="50" variant="Primary" fill="Solid" />
-                  ) : (
-                    <Icon size="50" src={Icons.Message} filled />
-                  )
-                }
-                onClick={handleMessage}
-              >
-                <Text size="B300">Message</Text>
-              </Button>
-            </Box>
-          </Box>
-          {directMessageState.status === AsyncStatus.Error && (
-            <Text style={{ color: color.Critical.Main }}>
-              <b>{directMessageState.error.message}</b>
-            </Text>
-          )}
-          <Box alignItems="Center" gap="200" wrap="Wrap">
-            {server && <ServerChip server={server} />}
-            <ShareChip userId={userId} />
-            {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
-            <MutualRoomsChip userId={userId} />
-            <OptionsChip userId={userId} />
-          </Box>
-        </Box>
-        {ignored && <IgnoredUserAlert />}
-        {member && membership === Membership.Ban && (
-          <UserBanAlert
-            userId={userId}
-            reason={member.events.member?.getContent().reason}
-            canUnban={canUnban}
-            bannedBy={member.events.member?.getSender()}
-            ts={member.events.member?.getTs()}
-          />
-        )}
-        {member &&
-          membership === Membership.Leave &&
-          member.events.member &&
-          member.events.member.getSender() !== userId && (
-            <UserKickAlert
-              reason={member.events.member?.getContent().reason}
-              kickedBy={member.events.member?.getSender()}
-              ts={member.events.member?.getTs()}
-            />
-          )}
-        {member && membership === Membership.Invite && (
-          <UserInviteAlert
-            userId={userId}
-            reason={member.events.member?.getContent().reason}
-            canKick={canKickUser}
-            invitedBy={member.events.member?.getSender()}
-            ts={member.events.member?.getTs()}
-          />
-        )}
-        <UserModeration
-          userId={userId}
-          canInvite={canInvite && membership === Membership.Leave}
-          canKick={canKickUser && membership === Membership.Join}
-          canBan={canBanUser && membership !== Membership.Ban}
-        />
-      </Box>
-    </Box>
-  );
-}

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

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

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

@@ -1,42 +0,0 @@
-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 UserAvatarContainer = style({
-  position: 'absolute',
-  left: config.space.S400,
-  top: 0,
-  transform: 'translateY(-50%)',
-  backgroundColor: color.Surface.Container,
-});
-export const UserHeroAvatar = style({
-  outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
-});

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -27,10 +27,8 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { syntaxErrorPosition } from '../../../utils/dom';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCardStyle } from '../styles.css';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -246,10 +244,8 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
   const stateEvent = useStateEvent(room, type as unknown as StateEvent, stateKey);
   const [editContent, setEditContent] = useState<object>();
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-  const canEdit = permissions.stateEvent(type, mx.getSafeUserId());
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canEdit = canSendStateEvent(type, getPowerLevel(mx.getSafeUserId()));
 
   const eventJSONStr = useMemo(() => {
     if (!stateEvent) return '';

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -33,13 +33,11 @@ import { SequenceCardStyle } from '../styles.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { StateEvent } from '../../../../types/matrix/room';
 import { suffixRename } from '../../../utils/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type CreatePackTileProps = {
   packs: ImagePack[];
@@ -148,10 +146,8 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
   const alive = useAlive();
 
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-  const canEdit = permissions.stateEvent(StateEvent.PoniesRoomEmotes, mx.getSafeUserId());
+  const { canSendStateEvent, getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const canEdit = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(mx.getSafeUserId()));
 
   const unfilteredPacks = useRoomImagePacks(room);
   const packs = useMemo(() => unfilteredPacks.filter((pack) => !pack.deleted), [unfilteredPacks]);

src/app/features/common-settings/general/RoomAddress.tsx

@@ -15,6 +15,7 @@ import {
   toRem,
 } from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
@@ -32,19 +33,19 @@ import { getIdServer } from '../../../../util/matrixUtil';
 import { replaceSpaceWithDash } from '../../../utils/common';
 import { useAlive } from '../../../hooks/useAlive';
 import { StateEvent } from '../../../../types/matrix/room';
-import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 type RoomPublishedAddressesProps = {
-  permissions: RoomPermissionsAPI;
+  powerLevels: IPowerLevels;
 };
 
-export function RoomPublishedAddresses({ permissions }: RoomPublishedAddressesProps) {
+export function RoomPublishedAddresses({ powerLevels }: RoomPublishedAddressesProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-
-  const canEditCanonical = permissions.stateEvent(
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEditCanonical = powerLevelAPI.canSendStateEvent(
+    powerLevels,
     StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    userPowerLevel
   );
 
   const [canonicalAlias, publishedAliases] = usePublishedAliases(room);
@@ -359,13 +360,14 @@ function LocalAddressesList({
   );
 }
 
-export function RoomLocalAddresses({ permissions }: { permissions: RoomPermissionsAPI }) {
+export function RoomLocalAddresses({ powerLevels }: { powerLevels: IPowerLevels }) {
   const mx = useMatrixClient();
   const room = useRoom();
-
-  const canEditCanonical = permissions.stateEvent(
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEditCanonical = powerLevelAPI.canSendStateEvent(
+    powerLevels,
     StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    userPowerLevel
   );
 
   const [expand, setExpand] = useState(false);

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -21,24 +21,28 @@ import FocusTrap from 'focus-trap-react';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useRoom } from '../../../hooks/useRoom';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
-import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2';
 
 type RoomEncryptionProps = {
-  permissions: RoomPermissionsAPI;
+  powerLevels: IPowerLevels;
 };
-export function RoomEncryption({ permissions }: RoomEncryptionProps) {
+export function RoomEncryption({ powerLevels }: RoomEncryptionProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-
-  const canEnable = permissions.stateEvent(StateEvent.RoomEncryption, mx.getSafeUserId());
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEnable = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomEncryption,
+    userPowerLevel
+  );
   const content = useStateEvent(room, StateEvent.RoomEncryption)?.getContent<{
     algorithm: string;
   }>();

src/app/features/common-settings/general/RoomHistoryVisibility.tsx

@@ -18,13 +18,13 @@ import FocusTrap from 'focus-trap-react';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
 import { StateEvent } from '../../../../types/matrix/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
-import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 const useVisibilityStr = () =>
   useMemo(
@@ -49,13 +49,17 @@ const useVisibilityMenu = () =>
   );
 
 type RoomHistoryVisibilityProps = {
-  permissions: RoomPermissionsAPI;
+  powerLevels: IPowerLevels;
 };
-export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProps) {
+export function RoomHistoryVisibility({ powerLevels }: RoomHistoryVisibilityProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-
-  const canEdit = permissions.stateEvent(StateEvent.RoomHistoryVisibility, mx.getSafeUserId());
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEdit = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomHistoryVisibility,
+    userPowerLevel
+  );
 
   const visibilityEvent = useStateEvent(room, StateEvent.RoomHistoryVisibility);
   const historyVisibility: HistoryVisibility =

src/app/features/common-settings/general/RoomJoinRules.tsx

@@ -3,6 +3,7 @@ import { color, Text } from 'folds';
 import { JoinRule, MatrixError, RestrictedAllowType } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { useAtomValue } from 'jotai';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import {
   ExtendedJoinRules,
   JoinRulesSwitcher,
@@ -26,12 +27,6 @@ import {
 } from '../../../state/hooks/roomList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
-import {
-  knockRestrictedSupported,
-  knockSupported,
-  restrictedSupported,
-} from '../../../utils/matrix';
-import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 type RestrictedRoomAllowContent = {
   room_id: string;
@@ -39,21 +34,27 @@ type RestrictedRoomAllowContent = {
 };
 
 type RoomJoinRulesProps = {
-  permissions: RoomPermissionsAPI;
+  powerLevels: IPowerLevels;
 };
-export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
+export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const allowKnockRestricted = knockRestrictedSupported(room.getVersion());
-  const allowRestricted = restrictedSupported(room.getVersion());
-  const allowKnock = knockSupported(room.getVersion());
+  const roomVersion = parseInt(room.getVersion(), 10);
+  const allowKnockRestricted = roomVersion >= 10;
+  const allowRestricted = roomVersion >= 8;
+  const allowKnock = roomVersion >= 7;
 
   const roomIdToParents = useAtomValue(roomToParentsAtom);
   const space = useSpaceOptionally();
   const subspacesScope = useRecursiveChildSpaceScopeFactory(mx, roomIdToParents);
   const subspaces = useSpaceChildren(allRoomsAtom, space?.roomId ?? '', subspacesScope);
 
-  const canEdit = permissions.stateEvent(StateEvent.RoomHistoryVisibility, mx.getSafeUserId());
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEdit = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomHistoryVisibility,
+    userPowerLevel
+  );
 
   const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
   const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();

src/app/features/common-settings/general/RoomProfile.tsx

@@ -32,6 +32,7 @@ import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { IPowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { StateEvent } from '../../../../types/matrix/room';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { useObjectURL } from '../../../hooks/useObjectURL';
@@ -39,7 +40,6 @@ import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { useFilePicker } from '../../../hooks/useFilePicker';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
-import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 type RoomProfileEditProps = {
   canEditAvatar: boolean;
@@ -261,22 +261,24 @@ export function RoomProfileEdit({
 }
 
 type RoomProfileProps = {
-  permissions: RoomPermissionsAPI;
+  powerLevels: IPowerLevels;
 };
-export function RoomProfile({ permissions }: RoomProfileProps) {
+export function RoomProfile({ powerLevels }: RoomProfileProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
   const directs = useAtomValue(mDirectAtom);
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const userPowerLevel = getPowerLevel(mx.getSafeUserId());
 
   const avatar = useRoomAvatar(room, directs.has(room.roomId));
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
   const joinRule = useRoomJoinRule(room);
 
-  const canEditAvatar = permissions.stateEvent(StateEvent.RoomAvatar, mx.getSafeUserId());
-  const canEditName = permissions.stateEvent(StateEvent.RoomName, mx.getSafeUserId());
-  const canEditTopic = permissions.stateEvent(StateEvent.RoomTopic, mx.getSafeUserId());
+  const canEditAvatar = canSendStateEvent(StateEvent.RoomAvatar, userPowerLevel);
+  const canEditName = canSendStateEvent(StateEvent.RoomName, userPowerLevel);
+  const canEditTopic = canSendStateEvent(StateEvent.RoomTopic, userPowerLevel);
   const canEdit = canEditAvatar || canEditName || canEditTopic;
 
   const avatarUrl = avatar

src/app/features/common-settings/general/RoomPublish.tsx

@@ -1,33 +1,28 @@
 import React from 'react';
 import { Box, color, Spinner, Switch, Text } from 'folds';
-import { JoinRule, MatrixError } from 'matrix-js-sdk';
-import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
+import { MatrixError } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { useRoomDirectoryVisibility } from '../../../hooks/useRoomDirectoryVisibility';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
 import { StateEvent } from '../../../../types/matrix/room';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { useStateEvent } from '../../../hooks/useStateEvent';
-import { ExtendedJoinRules } from '../../../components/JoinRulesSwitcher';
-import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 
 type RoomPublishProps = {
-  permissions: RoomPermissionsAPI;
+  powerLevels: IPowerLevels;
 };
-export function RoomPublish({ permissions }: RoomPublishProps) {
+export function RoomPublish({ powerLevels }: RoomPublishProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-
-  const canEditCanonical = permissions.stateEvent(
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canEditCanonical = powerLevelAPI.canSendStateEvent(
+    powerLevels,
     StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    userPowerLevel
   );
-  const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
-  const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();
-  const rule: ExtendedJoinRules = (content?.join_rule as ExtendedJoinRules) ?? JoinRule.Invite;
 
   const { visibilityState, setVisibility } = useRoomDirectoryVisibility(room.roomId);
 
@@ -35,8 +30,6 @@ export function RoomPublish({ permissions }: RoomPublishProps) {
 
   const loading =
     visibilityState.status === AsyncStatus.Loading || toggleState.status === AsyncStatus.Loading;
-  const validRule =
-    rule === JoinRule.Public || rule === JoinRule.Knock || rule === 'knock_restricted';
 
   return (
     <SequenceCard
@@ -46,12 +39,7 @@ export function RoomPublish({ permissions }: RoomPublishProps) {
       gap="400"
     >
       <SettingTile
-        title="Publish to Directory"
-        description={
-          room.isSpaceRoom()
-            ? 'List the space in the public directory to make it discoverable by others.'
-            : 'List the room in the public directory to make it discoverable by others.'
-        }
+        title="Publish To Directory"
         after={
           <Box gap="200" alignItems="Center">
             {loading && <Spinner variant="Secondary" />}
@@ -59,7 +47,7 @@ export function RoomPublish({ permissions }: RoomPublishProps) {
               <Switch
                 value={visibilityState.data}
                 onChange={toggleVisibility}
-                disabled={!canEditCanonical || !validRule}
+                disabled={!canEditCanonical}
               />
             )}
           </Box>

src/app/features/common-settings/general/RoomUpgrade.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { FormEventHandler, useCallback, useState } from 'react';
 import {
   Button,
   color,
@@ -14,172 +14,54 @@ import {
   IconButton,
   Icon,
   Icons,
+  Input,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { MatrixError, Method } from 'matrix-js-sdk';
-import { RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';
+import { MatrixError } from 'matrix-js-sdk';
+import { RoomCreateEventContent, RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { IRoomCreateContent, StateEvent } from '../../../../types/matrix/room';
+import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
+import { StateEvent } from '../../../../types/matrix/room';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { useCapabilities } from '../../../hooks/useCapabilities';
 import { stopPropagation } from '../../../utils/keyboard';
-import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
-import {
-  AdditionalCreatorInput,
-  RoomVersionSelector,
-  useAdditionalCreators,
-} from '../../../components/create-room';
-import { useAlive } from '../../../hooks/useAlive';
-import { creatorsSupported } from '../../../utils/matrix';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { BreakWord } from '../../../styles/Text.css';
-
-function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const alive = useAlive();
-  const creators = useRoomCreators(room);
-
-  const capabilities = useCapabilities();
-  const roomVersions = capabilities['m.room_versions'];
-  const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1');
-  useEffect(() => {
-    // capabilities load async
-    selectRoomVersion(roomVersions?.default ?? '1');
-  }, [roomVersions?.default]);
-
-  const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
-  const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
-    useAdditionalCreators(Array.from(creators));
-
-  const [upgradeState, upgrade] = useAsyncCallback(
-    useCallback(
-      async (version: string, newAdditionalCreators?: string[]) => {
-        await mx.http.authedRequest(Method.Post, `/rooms/${room.roomId}/upgrade`, undefined, {
-          new_version: version,
-          additional_creators: newAdditionalCreators,
-        });
-      },
-      [mx, room]
-    )
-  );
-
-  const upgrading = upgradeState.status === AsyncStatus.Loading;
-
-  const handleUpgradeRoom = () => {
-    const version = selectedRoomVersion;
-
-    upgrade(version, allowAdditionalCreators ? additionalCreators : undefined).then(() => {
-      if (alive()) {
-        requestClose();
-      }
-    });
-  };
-
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: requestClose,
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Dialog variant="Surface">
-            <Header
-              style={{
-                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-                borderBottomWidth: config.borderWidth.B300,
-              }}
-              variant="Surface"
-              size="500"
-            >
-              <Box grow="Yes">
-                <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
-              </Box>
-              <IconButton size="300" onClick={requestClose} radii="300">
-                <Icon src={Icons.Cross} />
-              </IconButton>
-            </Header>
-            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-              <Text priority="400" style={{ color: color.Critical.Main }}>
-                <b>This action is irreversible!</b>
-              </Text>
-              <Box direction="Column" gap="100">
-                <Text size="L400">Options</Text>
-                <RoomVersionSelector
-                  versions={roomVersions?.available ? Object.keys(roomVersions.available) : ['1']}
-                  value={selectedRoomVersion}
-                  onChange={selectRoomVersion}
-                  disabled={upgrading}
-                />
-                {allowAdditionalCreators && (
-                  <SequenceCard
-                    style={{ padding: config.space.S300 }}
-                    variant="SurfaceVariant"
-                    direction="Column"
-                    gap="500"
-                  >
-                    <AdditionalCreatorInput
-                      additionalCreators={additionalCreators}
-                      onSelect={addAdditionalCreator}
-                      onRemove={removeAdditionalCreator}
-                      disabled={upgrading}
-                    />
-                  </SequenceCard>
-                )}
-              </Box>
-              {upgradeState.status === AsyncStatus.Error && (
-                <Text className={BreakWord} style={{ color: color.Critical.Main }} size="T200">
-                  {(upgradeState.error as MatrixError).message}
-                </Text>
-              )}
-              <Button
-                onClick={handleUpgradeRoom}
-                variant="Secondary"
-                disabled={upgrading}
-                before={upgrading && <Spinner size="200" variant="Secondary" fill="Solid" />}
-              >
-                <Text size="B400">{room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}</Text>
-              </Button>
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}
 
 type RoomUpgradeProps = {
-  permissions: RoomPermissionsAPI;
+  powerLevels: IPowerLevels;
   requestClose: () => void;
 };
-export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
+export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const createContent = useStateEvent(
     room,
     StateEvent.RoomCreate
-  )?.getContent<IRoomCreateContent>();
-  const roomVersion = createContent?.room_version ?? '1';
+  )?.getContent<RoomCreateEventContent>();
+  const roomVersion = createContent?.room_version ?? 1;
   const predecessorRoomId = createContent?.predecessor?.room_id;
 
+  const capabilities = useCapabilities();
+  const defaultRoomVersion = capabilities['m.room_versions']?.default;
+
   const tombstoneContent = useStateEvent(
     room,
     StateEvent.RoomTombstone
   )?.getContent<RoomTombstoneEventContent>();
   const replacementRoom = tombstoneContent?.replacement_room;
 
-  const canUpgrade = permissions.stateEvent(StateEvent.RoomTombstone, mx.getSafeUserId());
+  const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
+  const canUpgrade = powerLevelAPI.canSendStateEvent(
+    powerLevels,
+    StateEvent.RoomTombstone,
+    userPowerLevel
+  );
 
   const handleOpenRoom = () => {
     if (replacementRoom) {
@@ -203,8 +85,31 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
     }
   };
 
+  const [upgradeState, upgrade] = useAsyncCallback(
+    useCallback(
+      async (version: string) => {
+        await mx.upgradeRoom(room.roomId, version);
+      },
+      [mx, room]
+    )
+  );
+
+  const upgrading = upgradeState.status === AsyncStatus.Loading;
+
   const [prompt, setPrompt] = useState(false);
 
+  const handleSubmitUpgrade: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const versionInput = target?.versionInput as HTMLInputElement | undefined;
+    const version = versionInput?.value.trim();
+    if (!version) return;
+
+    upgrade(version);
+    setPrompt(false);
+  };
+
   return (
     <SequenceCard
       className={SequenceCardStyle}
@@ -218,7 +123,7 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
           replacementRoom
             ? tombstoneContent.body ||
               `This ${room.isSpaceRoom() ? 'space' : 'room'} has been replaced!`
-            : `Current version: ${roomVersion}.`
+            : `Current room version: ${roomVersion}.`
         }
         after={
           <Box alignItems="Center" gap="200">
@@ -250,7 +155,8 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
                 variant="Secondary"
                 fill="Solid"
                 radii="300"
-                disabled={!canUpgrade}
+                disabled={upgrading || !canUpgrade}
+                before={upgrading && <Spinner size="100" variant="Secondary" fill="Solid" />}
                 onClick={() => setPrompt(true)}
               >
                 <Text size="B300">Upgrade</Text>
@@ -259,7 +165,63 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
           </Box>
         }
       >
-        {prompt && <RoomUpgradeDialog requestClose={() => setPrompt(false)} />}
+        {upgradeState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(upgradeState.error as MatrixError).message}
+          </Text>
+        )}
+
+        {prompt && (
+          <Overlay open backdrop={<OverlayBackdrop />}>
+            <OverlayCenter>
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setPrompt(false),
+                  clickOutsideDeactivates: true,
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Dialog variant="Surface" as="form" onSubmit={handleSubmitUpgrade}>
+                  <Header
+                    style={{
+                      padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                      borderBottomWidth: config.borderWidth.B300,
+                    }}
+                    variant="Surface"
+                    size="500"
+                  >
+                    <Box grow="Yes">
+                      <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
+                    </Box>
+                    <IconButton size="300" onClick={() => setPrompt(false)} radii="300">
+                      <Icon src={Icons.Cross} />
+                    </IconButton>
+                  </Header>
+                  <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+                    <Text priority="400" style={{ color: color.Critical.Main }}>
+                      <b>This action is irreversible!</b>
+                    </Text>
+                    <Box direction="Column" gap="100">
+                      <Text size="L400">Version</Text>
+                      <Input
+                        defaultValue={defaultRoomVersion}
+                        name="versionInput"
+                        variant="Background"
+                        required
+                      />
+                    </Box>
+                    <Button type="submit" variant="Secondary">
+                      <Text size="B400">
+                        {room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}
+                      </Text>
+                    </Button>
+                  </Box>
+                </Dialog>
+              </FocusTrap>
+            </OverlayCenter>
+          </Overlay>
+        )}
       </SettingTile>
     </SequenceCard>
   );

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

@@ -27,12 +27,17 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
 import { useRoomMembers } from '../../../hooks/useRoomMembers';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import {
+  useFlattenPowerLevelTagMembers,
+  usePowerLevelTags,
+} from '../../../hooks/usePowerLevelTags';
 import { VirtualTile } from '../../../components/virtualizer';
 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,
@@ -41,20 +46,13 @@ import {
 } from '../../../hooks/useAsyncSearch';
 import { getMemberSearchStr } from '../../../utils/room';
 import { useMembershipFilter, useMembershipFilterMenu } from '../../../hooks/useMemberFilter';
-import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort';
+import { useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort';
 import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
 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';
-import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../../hooks/useMemberPowerTag';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -79,19 +77,15 @@ 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 creators = useRoomCreators(room);
-  const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
 
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
   const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
   const membershipFilter = useMembershipFilter(membershipFilterIndex, useMembershipFilterMenu());
   const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
-  const memberPowerSort = useMemberPowerSort(creators);
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -102,8 +96,8 @@ export function Members({ requestClose }: MembersProps) {
       Array.from(members)
         .filter(membershipFilter.filterFn)
         .sort(memberSort.sortFn)
-        .sort(memberPowerSort),
-    [members, membershipFilter, memberSort, memberPowerSort]
+        .sort((a, b) => b.powerLevel - a.powerLevel),
+    [members, membershipFilter, memberSort]
   );
 
   const [result, search, resetSearch] = useAsyncSearch(
@@ -113,7 +107,11 @@ export function Members({ requestClose }: MembersProps) {
   );
   if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
 
-  const flattenTagMembers = useFlattenPowerTagMembers(result?.items ?? sortedMembers, getPowerTag);
+  const flattenTagMembers = useFlattenPowerLevelTagMembers(
+    result?.items ?? sortedMembers,
+    getPowerLevel,
+    getPowerLevelTag
+  );
 
   const virtualizer = useVirtualizer({
     count: flattenTagMembers.length,
@@ -144,9 +142,8 @@ export function Members({ requestClose }: MembersProps) {
   const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
-    if (userId) {
-      openProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect());
-    }
+    openProfileViewer(userId, room.roomId);
+    requestClose();
   };
 
   return (
@@ -320,7 +317,6 @@ 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/common-settings/permissions/PermissionGroups.tsx

@@ -10,9 +10,10 @@ import {
   getPermissionPower,
   IPowerLevels,
   PermissionLocation,
+  usePowerLevelsAPI,
 } from '../../../hooks/usePowerLevels';
 import { PermissionGroup } from './types';
-import { getPowerLevelTag, getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { useRoom } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
@@ -25,20 +26,19 @@ const USER_DEFAULT_LOCATION: PermissionLocation = {
 };
 
 type PermissionGroupsProps = {
-  canEdit: boolean;
   powerLevels: IPowerLevels;
   permissionGroups: PermissionGroup[];
 };
-export function PermissionGroups({
-  powerLevels,
-  permissionGroups,
-  canEdit,
-}: PermissionGroupsProps) {
+export function PermissionGroups({ powerLevels, permissionGroups }: PermissionGroupsProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const alive = useAlive();
-
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canChangePermission = canSendStateEvent(
+    StateEvent.RoomPowerLevels,
+    getPowerLevel(mx.getSafeUserId())
+  );
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const maxPower = useMemo(() => Math.max(...getPowers(powerLevelTags)), [powerLevelTags]);
 
   const [permissionUpdate, setPermissionUpdate] = useState<Map<PermissionLocation, number>>(
@@ -82,7 +82,6 @@ export function PermissionGroups({
         permissionUpdate.forEach((power, location) =>
           applyPermissionPower(draftPowerLevels, location, power)
         );
-
         return draftPowerLevels;
       });
       await mx.sendStateEvent(room.roomId, StateEvent.RoomPowerLevels as any, editedPowerLevels);
@@ -109,7 +108,7 @@ export function PermissionGroups({
     const powerUpdate = permissionUpdate.get(USER_DEFAULT_LOCATION);
     const value = powerUpdate ?? power;
 
-    const tag = getPowerLevelTag(powerLevelTags, value);
+    const tag = getPowerLevelTag(value);
     const powerChanges = value !== power;
 
     return (
@@ -137,14 +136,14 @@ export function PermissionGroups({
                     fill="Soft"
                     radii="Pill"
                     aria-selected={opened}
-                    disabled={!canEdit || applyingChanges}
+                    disabled={!canChangePermission || applyingChanges}
                     after={
                       powerChanges && (
                         <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
                       )
                     }
                     before={
-                      canEdit && (
+                      canChangePermission && (
                         <Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
                       )
                     }
@@ -174,7 +173,7 @@ export function PermissionGroups({
             const powerUpdate = permissionUpdate.get(item.location);
             const value = powerUpdate ?? power;
 
-            const tag = getPowerLevelTag(powerLevelTags, value);
+            const tag = getPowerLevelTag(value);
             const powerChanges = value !== power;
 
             return (
@@ -201,14 +200,14 @@ export function PermissionGroups({
                           fill="Soft"
                           radii="Pill"
                           aria-selected={opened}
-                          disabled={!canEdit || applyingChanges}
+                          disabled={!canChangePermission || applyingChanges}
                           after={
                             powerChanges && (
                               <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
                             )
                           }
                           before={
-                            canEdit && (
+                            canChangePermission && (
                               <Icon
                                 size="50"
                                 src={opened ? Icons.ChevronTop : Icons.ChevronBottom}

src/app/features/common-settings/permissions/Powers.tsx

@@ -16,7 +16,7 @@ import {
 } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
-import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { getPowers, getTagIconSrc, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { SettingTile } from '../../../components/setting-tile';
 import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
@@ -25,9 +25,6 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { stopPropagation } from '../../../utils/keyboard';
 import { PermissionGroup } from './types';
-import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
-import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
 
 type PeekPermissionsProps = {
   powerLevels: IPowerLevels;
@@ -111,43 +108,10 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const creators = useRoomCreators(room);
-  const creatorsTag = useRoomCreatorsTag();
-  const creatorTagIconSrc =
-    creatorsTag.icon && getPowerTagIconSrc(mx, useAuthentication, creatorsTag.icon);
+  const [powerLevelTags] = usePowerLevelTags(room, powerLevels);
 
   return (
     <Box direction="Column" gap="100">
-      {creators.size > 0 && (
-        <SequenceCard
-          variant="SurfaceVariant"
-          className={SequenceCardStyle}
-          direction="Column"
-          gap="400"
-        >
-          <SettingTile
-            title="Founders"
-            description="Founding members has all permissions and can only be changed during upgrade."
-          />
-
-          <SettingTile>
-            <Box gap="200" wrap="Wrap">
-              <Chip
-                disabled
-                variant="Secondary"
-                radii="300"
-                before={<PowerColorBadge color={creatorsTag.color} />}
-                after={creatorTagIconSrc && <PowerIcon size="50" iconSrc={creatorTagIconSrc} />}
-              >
-                <Text size="T300" truncate>
-                  <b>{creatorsTag.name}</b>
-                </Text>
-              </Chip>
-            </Box>
-          </SettingTile>
-        </SequenceCard>
-      )}
       <SequenceCard
         variant="SurfaceVariant"
         className={SequenceCardStyle}
@@ -178,7 +142,7 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
           <Box gap="200" wrap="Wrap">
             {getPowers(powerLevelTags).map((power) => {
               const tag = powerLevelTags[power];
-              const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+              const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
 
               return (
                 <PeekPermissions

src/app/features/common-settings/permissions/PowersEditor.tsx

@@ -27,7 +27,10 @@ import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import {
   getPowers,
+  getTagIconSrc,
   getUsedPowers,
+  PowerLevelTag,
+  PowerLevelTagIcon,
   PowerLevelTags,
   usePowerLevelTags,
 } from '../../../hooks/usePowerLevelTags';
@@ -44,17 +47,15 @@ import { useFilePicker } from '../../../hooks/useFilePicker';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { MemberPowerTag, MemberPowerTagIcon, StateEvent } from '../../../../types/matrix/room';
+import { StateEvent } from '../../../../types/matrix/room';
 import { useAlive } from '../../../hooks/useAlive';
 import { BetaNoticeBadge } from '../../../components/BetaNoticeBadge';
-import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
-import { creatorsSupported } from '../../../utils/matrix';
 
 type EditPowerProps = {
   maxPower: number;
   power?: number;
-  tag?: MemberPowerTag;
-  onSave: (power: number, tag: MemberPowerTag) => void;
+  tag?: PowerLevelTag;
+  onSave: (power: number, tag: PowerLevelTag) => void;
   onClose: () => void;
 };
 function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
@@ -62,7 +63,6 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
   const room = useRoom();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const useAuthentication = useMediaAuthentication();
-  const supportCreators = creatorsSupported(room.getVersion());
 
   const imagePackRooms = useImagePackRooms(room.roomId, roomToParents);
 
@@ -70,9 +70,9 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
   const pickFile = useFilePicker(setIconFile, false);
 
   const [tagColor, setTagColor] = useState<string | undefined>(tag?.color);
-  const [tagIcon, setTagIcon] = useState<MemberPowerTagIcon | undefined>(tag?.icon);
+  const [tagIcon, setTagIcon] = useState<PowerLevelTagIcon | undefined>(tag?.icon);
   const uploadingIcon = iconFile && !tagIcon;
-  const tagIconSrc = tagIcon && getPowerTagIconSrc(mx, useAuthentication, tagIcon);
+  const tagIconSrc = tagIcon && getTagIconSrc(mx, useAuthentication, tagIcon);
 
   const iconUploadAtom = useMemo(() => {
     if (iconFile) return createUploadAtom(iconFile);
@@ -101,11 +101,11 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
 
     const tagPower = parseInt(powerInput.value, 10);
     if (Number.isNaN(tagPower)) return;
-
+    if (tagPower > maxPower) return;
     const tagName = nameInput.value.trim();
     if (!tagName) return;
 
-    const editedTag: MemberPowerTag = {
+    const editedTag: PowerLevelTag = {
       name: tagName,
       color: tagColor,
       icon: tagIcon,
@@ -165,7 +165,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
               radii="300"
               type="number"
               placeholder="75"
-              max={supportCreators ? undefined : maxPower}
+              max={maxPower}
               outlined={typeof power === 'number'}
               readOnly={typeof power === 'number'}
               required
@@ -298,7 +298,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
     return [up, Math.max(...Array.from(up))];
   }, [powerLevels]);
 
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const [powerLevelTags] = usePowerLevelTags(room, powerLevels);
   const [editedPowerTags, setEditedPowerTags] = useState<PowerLevelTags>();
   const [deleted, setDeleted] = useState<Set<number>>(new Set());
 
@@ -317,7 +317,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
   }, []);
 
   const handleSaveTag = useCallback(
-    (power: number, tag: MemberPowerTag) => {
+    (power: number, tag: PowerLevelTag) => {
       setEditedPowerTags((tags) => {
         const editedTags = { ...(tags ?? powerLevelTags) };
         editedTags[power] = tag;
@@ -419,8 +419,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
                 </SequenceCard>
                 {getPowers(powerTags).map((power) => {
                   const tag = powerTags[power];
-                  const tagIconSrc =
-                    tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+                  const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
 
                   return (
                     <SequenceCard

src/app/features/create-room/CreateRoom.tsx

@@ -1,306 +0,0 @@
-import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
-import {
-  Box,
-  Button,
-  Chip,
-  color,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Spinner,
-  Switch,
-  Text,
-  TextArea,
-} from 'folds';
-import { SettingTile } from '../../components/setting-tile';
-import { SequenceCard } from '../../components/sequence-card';
-import {
-  creatorsSupported,
-  knockRestrictedSupported,
-  knockSupported,
-  restrictedSupported,
-} from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { useCapabilities } from '../../hooks/useCapabilities';
-import { useAlive } from '../../hooks/useAlive';
-import { ErrorCode } from '../../cs-errorcode';
-import {
-  AdditionalCreatorInput,
-  createRoom,
-  CreateRoomAliasInput,
-  CreateRoomData,
-  CreateRoomKind,
-  CreateRoomKindSelector,
-  RoomVersionSelector,
-  useAdditionalCreators,
-} from '../../components/create-room';
-
-const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
-  if (kind === CreateRoomKind.Private) return Icons.HashLock;
-  if (kind === CreateRoomKind.Restricted) return Icons.Hash;
-  return Icons.HashGlobe;
-};
-
-type CreateRoomFormProps = {
-  defaultKind?: CreateRoomKind;
-  space?: Room;
-  onCreate?: (roomId: string) => void;
-};
-export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
-  const mx = useMatrixClient();
-  const alive = useAlive();
-
-  const capabilities = useCapabilities();
-  const roomVersions = capabilities['m.room_versions'];
-  const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1');
-  useEffect(() => {
-    // capabilities load async
-    selectRoomVersion(roomVersions?.default ?? '1');
-  }, [roomVersions?.default]);
-
-  const allowRestricted = space && restrictedSupported(selectedRoomVersion);
-
-  const [kind, setKind] = useState(
-    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
-  );
-  const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
-  const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
-    useAdditionalCreators();
-  const [federation, setFederation] = useState(true);
-  const [encryption, setEncryption] = useState(false);
-  const [knock, setKnock] = useState(false);
-  const [advance, setAdvance] = useState(false);
-
-  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
-  const allowKnockRestricted =
-    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
-
-  const handleRoomVersionChange = (version: string) => {
-    if (!restrictedSupported(version)) {
-      setKind(CreateRoomKind.Private);
-    }
-    selectRoomVersion(version);
-  };
-
-  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
-    useCallback((data) => createRoom(mx, data), [mx])
-  );
-  const loading = createState.status === AsyncStatus.Loading;
-  const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
-  const disabled = createState.status === AsyncStatus.Loading;
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    if (disabled) return;
-    const form = evt.currentTarget;
-
-    const nameInput = form.nameInput as HTMLInputElement | undefined;
-    const topicTextArea = form.topicTextAria as HTMLTextAreaElement | undefined;
-    const aliasInput = form.aliasInput as HTMLInputElement | undefined;
-    const roomName = nameInput?.value.trim();
-    const roomTopic = topicTextArea?.value.trim();
-    const aliasLocalPart =
-      aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
-
-    if (!roomName) return;
-    const publicRoom = kind === CreateRoomKind.Public;
-    let roomKnock = false;
-    if (allowKnock && kind === CreateRoomKind.Private) {
-      roomKnock = knock;
-    }
-    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
-      roomKnock = knock;
-    }
-
-    create({
-      version: selectedRoomVersion,
-      parent: space,
-      kind,
-      name: roomName,
-      topic: roomTopic || undefined,
-      aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
-      encryption: publicRoom ? false : encryption,
-      knock: roomKnock,
-      allowFederation: federation,
-      additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
-    }).then((roomId) => {
-      if (alive()) {
-        onCreate?.(roomId);
-      }
-    });
-  };
-
-  return (
-    <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
-      <Box direction="Column" gap="100">
-        <Text size="L400">Access</Text>
-        <CreateRoomKindSelector
-          value={kind}
-          onSelect={setKind}
-          canRestrict={allowRestricted}
-          disabled={disabled}
-          getIcon={getCreateRoomKindToIcon}
-        />
-      </Box>
-      <Box shrink="No" direction="Column" gap="100">
-        <Text size="L400">Name</Text>
-        <Input
-          required
-          before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />}
-          name="nameInput"
-          autoFocus
-          size="500"
-          variant="SurfaceVariant"
-          radii="400"
-          autoComplete="off"
-          disabled={disabled}
-        />
-      </Box>
-      <Box shrink="No" direction="Column" gap="100">
-        <Text size="L400">Topic (Optional)</Text>
-        <TextArea
-          name="topicTextAria"
-          size="500"
-          variant="SurfaceVariant"
-          radii="400"
-          disabled={disabled}
-        />
-      </Box>
-
-      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
-
-      <Box shrink="No" direction="Column" gap="100">
-        <Box gap="200" alignItems="End">
-          <Text size="L400">Options</Text>
-          <Box grow="Yes" justifyContent="End">
-            <Chip
-              radii="Pill"
-              before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
-              onClick={() => setAdvance(!advance)}
-              type="button"
-            >
-              <Text size="T200">Advance Options</Text>
-            </Chip>
-          </Box>
-        </Box>
-        {allowAdditionalCreators && (
-          <SequenceCard
-            style={{ padding: config.space.S300 }}
-            variant="SurfaceVariant"
-            direction="Column"
-            gap="500"
-          >
-            <AdditionalCreatorInput
-              additionalCreators={additionalCreators}
-              onSelect={addAdditionalCreator}
-              onRemove={removeAdditionalCreator}
-            />
-          </SequenceCard>
-        )}
-        {kind !== CreateRoomKind.Public && (
-          <>
-            <SequenceCard
-              style={{ padding: config.space.S300 }}
-              variant="SurfaceVariant"
-              direction="Column"
-              gap="500"
-            >
-              <SettingTile
-                title="End-to-End Encryption"
-                description="Once this feature is enabled, it can't be disabled after the room is created."
-                after={
-                  <Switch
-                    variant="Primary"
-                    value={encryption}
-                    onChange={setEncryption}
-                    disabled={disabled}
-                  />
-                }
-              />
-            </SequenceCard>
-            {advance && (allowKnock || allowKnockRestricted) && (
-              <SequenceCard
-                style={{ padding: config.space.S300 }}
-                variant="SurfaceVariant"
-                direction="Column"
-                gap="500"
-              >
-                <SettingTile
-                  title="Knock to Join"
-                  description="Anyone can send request to join this room."
-                  after={
-                    <Switch
-                      variant="Primary"
-                      value={knock}
-                      onChange={setKnock}
-                      disabled={disabled}
-                    />
-                  }
-                />
-              </SequenceCard>
-            )}
-          </>
-        )}
-
-        <SequenceCard
-          style={{ padding: config.space.S300 }}
-          variant="SurfaceVariant"
-          direction="Column"
-          gap="500"
-        >
-          <SettingTile
-            title="Allow Federation"
-            description="Users from other servers can join."
-            after={
-              <Switch
-                variant="Primary"
-                value={federation}
-                onChange={setFederation}
-                disabled={disabled}
-              />
-            }
-          />
-        </SequenceCard>
-        {advance && (
-          <RoomVersionSelector
-            versions={roomVersions?.available ? Object.keys(roomVersions.available) : ['1']}
-            value={selectedRoomVersion}
-            onChange={handleRoomVersionChange}
-            disabled={disabled}
-          />
-        )}
-      </Box>
-
-      {error && (
-        <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="200">
-          <Icon src={Icons.Warning} filled size="100" />
-          <Text size="T300" style={{ color: color.Critical.Main }}>
-            <b>
-              {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
-                ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
-                  )} minutes!`
-                : error.message}
-            </b>
-          </Text>
-        </Box>
-      )}
-      <Box shrink="No" direction="Column" gap="200">
-        <Button
-          type="submit"
-          size="500"
-          variant="Primary"
-          radii="400"
-          disabled={disabled}
-          before={loading && <Spinner variant="Primary" fill="Solid" size="200" />}
-        >
-          <Text size="B500">Create</Text>
-        </Button>
-      </Box>
-    </Box>
-  );
-}

src/app/features/create-room/CreateRoomModal.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Scroll,
-  Text,
-} from 'folds';
-import FocusTrap from 'focus-trap-react';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
-import { SpaceProvider } from '../../hooks/useSpace';
-import { CreateRoomForm } from './CreateRoom';
-import {
-  useCloseCreateRoomModal,
-  useCreateRoomModalState,
-} from '../../state/hooks/createRoomModal';
-import { CreateRoomModalState } from '../../state/createRoomModal';
-import { stopPropagation } from '../../utils/keyboard';
-
-type CreateRoomModalProps = {
-  state: CreateRoomModalState;
-};
-function CreateRoomModal({ state }: CreateRoomModalProps) {
-  const { spaceId } = state;
-  const closeDialog = useCloseCreateRoomModal();
-
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
-  const space = spaceId ? getRoom(spaceId) : undefined;
-
-  return (
-    <SpaceProvider value={space ?? null}>
-      <Overlay open backdrop={<OverlayBackdrop />}>
-        <OverlayCenter>
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              clickOutsideDeactivates: true,
-              onDeactivate: closeDialog,
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Modal size="300" flexHeight>
-              <Box direction="Column">
-                <Header
-                  size="500"
-                  style={{
-                    padding: config.space.S200,
-                    paddingLeft: config.space.S400,
-                    borderBottomWidth: config.borderWidth.B300,
-                  }}
-                >
-                  <Box grow="Yes">
-                    <Text size="H4">New Room</Text>
-                  </Box>
-                  <Box shrink="No">
-                    <IconButton size="300" radii="300" onClick={closeDialog}>
-                      <Icon src={Icons.Cross} />
-                    </IconButton>
-                  </Box>
-                </Header>
-                <Scroll size="300" hideTrack>
-                  <Box
-                    style={{
-                      padding: config.space.S400,
-                      paddingRight: config.space.S200,
-                    }}
-                    direction="Column"
-                    gap="500"
-                  >
-                    <CreateRoomForm space={space} onCreate={closeDialog} />
-                  </Box>
-                </Scroll>
-              </Box>
-            </Modal>
-          </FocusTrap>
-        </OverlayCenter>
-      </Overlay>
-    </SpaceProvider>
-  );
-}
-
-export function CreateRoomModalRenderer() {
-  const state = useCreateRoomModalState();
-
-  if (!state) return null;
-  return <CreateRoomModal state={state} />;
-}

src/app/features/create-room/index.ts

@@ -1,2 +0,0 @@
-export * from './CreateRoom';
-export * from './CreateRoomModal';

src/app/features/create-space/CreateSpace.tsx

@@ -1,279 +0,0 @@
-import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
-import {
-  Box,
-  Button,
-  Chip,
-  color,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Spinner,
-  Switch,
-  Text,
-  TextArea,
-} from 'folds';
-import { SettingTile } from '../../components/setting-tile';
-import { SequenceCard } from '../../components/sequence-card';
-import {
-  creatorsSupported,
-  knockRestrictedSupported,
-  knockSupported,
-  restrictedSupported,
-} from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { useCapabilities } from '../../hooks/useCapabilities';
-import { useAlive } from '../../hooks/useAlive';
-import { ErrorCode } from '../../cs-errorcode';
-import {
-  AdditionalCreatorInput,
-  createRoom,
-  CreateRoomAliasInput,
-  CreateRoomData,
-  CreateRoomKind,
-  CreateRoomKindSelector,
-  RoomVersionSelector,
-  useAdditionalCreators,
-} from '../../components/create-room';
-import { RoomType } from '../../../types/matrix/room';
-
-const getCreateSpaceKindToIcon = (kind: CreateRoomKind) => {
-  if (kind === CreateRoomKind.Private) return Icons.SpaceLock;
-  if (kind === CreateRoomKind.Restricted) return Icons.Space;
-  return Icons.SpaceGlobe;
-};
-
-type CreateSpaceFormProps = {
-  defaultKind?: CreateRoomKind;
-  space?: Room;
-  onCreate?: (roomId: string) => void;
-};
-export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFormProps) {
-  const mx = useMatrixClient();
-  const alive = useAlive();
-
-  const capabilities = useCapabilities();
-  const roomVersions = capabilities['m.room_versions'];
-  const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1');
-  useEffect(() => {
-    // capabilities load async
-    selectRoomVersion(roomVersions?.default ?? '1');
-  }, [roomVersions?.default]);
-
-  const allowRestricted = space && restrictedSupported(selectedRoomVersion);
-
-  const [kind, setKind] = useState(
-    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
-  );
-
-  const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
-  const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
-    useAdditionalCreators();
-  const [federation, setFederation] = useState(true);
-  const [knock, setKnock] = useState(false);
-  const [advance, setAdvance] = useState(false);
-
-  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
-  const allowKnockRestricted =
-    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
-
-  const handleRoomVersionChange = (version: string) => {
-    if (!restrictedSupported(version)) {
-      setKind(CreateRoomKind.Private);
-    }
-    selectRoomVersion(version);
-  };
-
-  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
-    useCallback((data) => createRoom(mx, data), [mx])
-  );
-  const loading = createState.status === AsyncStatus.Loading;
-  const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
-  const disabled = createState.status === AsyncStatus.Loading;
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    if (disabled) return;
-    const form = evt.currentTarget;
-
-    const nameInput = form.nameInput as HTMLInputElement | undefined;
-    const topicTextArea = form.topicTextAria as HTMLTextAreaElement | undefined;
-    const aliasInput = form.aliasInput as HTMLInputElement | undefined;
-    const roomName = nameInput?.value.trim();
-    const roomTopic = topicTextArea?.value.trim();
-    const aliasLocalPart =
-      aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
-
-    if (!roomName) return;
-    const publicRoom = kind === CreateRoomKind.Public;
-    let roomKnock = false;
-    if (allowKnock && kind === CreateRoomKind.Private) {
-      roomKnock = knock;
-    }
-    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
-      roomKnock = knock;
-    }
-
-    create({
-      version: selectedRoomVersion,
-      type: RoomType.Space,
-      parent: space,
-      kind,
-      name: roomName,
-      topic: roomTopic || undefined,
-      aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
-      knock: roomKnock,
-      allowFederation: federation,
-      additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
-    }).then((roomId) => {
-      if (alive()) {
-        onCreate?.(roomId);
-      }
-    });
-  };
-
-  return (
-    <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
-      <Box direction="Column" gap="100">
-        <Text size="L400">Access</Text>
-        <CreateRoomKindSelector
-          value={kind}
-          onSelect={setKind}
-          canRestrict={allowRestricted}
-          disabled={disabled}
-          getIcon={getCreateSpaceKindToIcon}
-        />
-      </Box>
-      <Box shrink="No" direction="Column" gap="100">
-        <Text size="L400">Name</Text>
-        <Input
-          required
-          before={<Icon size="100" src={getCreateSpaceKindToIcon(kind)} />}
-          name="nameInput"
-          autoFocus
-          size="500"
-          variant="SurfaceVariant"
-          radii="400"
-          autoComplete="off"
-          disabled={disabled}
-        />
-      </Box>
-      <Box shrink="No" direction="Column" gap="100">
-        <Text size="L400">Topic (Optional)</Text>
-        <TextArea
-          name="topicTextAria"
-          size="500"
-          variant="SurfaceVariant"
-          radii="400"
-          disabled={disabled}
-        />
-      </Box>
-
-      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
-
-      <Box shrink="No" direction="Column" gap="100">
-        <Box gap="200" alignItems="End">
-          <Text size="L400">Options</Text>
-          <Box grow="Yes" justifyContent="End">
-            <Chip
-              radii="Pill"
-              before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
-              onClick={() => setAdvance(!advance)}
-              type="button"
-            >
-              <Text size="T200">Advance Options</Text>
-            </Chip>
-          </Box>
-        </Box>
-        {allowAdditionalCreators && (
-          <SequenceCard
-            style={{ padding: config.space.S300 }}
-            variant="SurfaceVariant"
-            direction="Column"
-            gap="500"
-          >
-            <AdditionalCreatorInput
-              additionalCreators={additionalCreators}
-              onSelect={addAdditionalCreator}
-              onRemove={removeAdditionalCreator}
-            />
-          </SequenceCard>
-        )}
-        {kind !== CreateRoomKind.Public && advance && (allowKnock || allowKnockRestricted) && (
-          <SequenceCard
-            style={{ padding: config.space.S300 }}
-            variant="SurfaceVariant"
-            direction="Column"
-            gap="500"
-          >
-            <SettingTile
-              title="Knock to Join"
-              description="Anyone can send request to join this space."
-              after={
-                <Switch variant="Primary" value={knock} onChange={setKnock} disabled={disabled} />
-              }
-            />
-          </SequenceCard>
-        )}
-
-        <SequenceCard
-          style={{ padding: config.space.S300 }}
-          variant="SurfaceVariant"
-          direction="Column"
-          gap="500"
-        >
-          <SettingTile
-            title="Allow Federation"
-            description="Users from other servers can join."
-            after={
-              <Switch
-                variant="Primary"
-                value={federation}
-                onChange={setFederation}
-                disabled={disabled}
-              />
-            }
-          />
-        </SequenceCard>
-        {advance && (
-          <RoomVersionSelector
-            versions={roomVersions?.available ? Object.keys(roomVersions.available) : ['1']}
-            value={selectedRoomVersion}
-            onChange={handleRoomVersionChange}
-            disabled={disabled}
-          />
-        )}
-      </Box>
-
-      {error && (
-        <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="200">
-          <Icon src={Icons.Warning} filled size="100" />
-          <Text size="T300" style={{ color: color.Critical.Main }}>
-            <b>
-              {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
-                ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
-                  )} minutes!`
-                : error.message}
-            </b>
-          </Text>
-        </Box>
-      )}
-      <Box shrink="No" direction="Column" gap="200">
-        <Button
-          type="submit"
-          size="500"
-          variant="Primary"
-          radii="400"
-          disabled={disabled}
-          before={loading && <Spinner variant="Primary" fill="Solid" size="200" />}
-        >
-          <Text size="B500">Create</Text>
-        </Button>
-      </Box>
-    </Box>
-  );
-}

src/app/features/create-space/CreateSpaceModal.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Scroll,
-  Text,
-} from 'folds';
-import FocusTrap from 'focus-trap-react';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
-import { SpaceProvider } from '../../hooks/useSpace';
-import { CreateSpaceForm } from './CreateSpace';
-import {
-  useCloseCreateSpaceModal,
-  useCreateSpaceModalState,
-} from '../../state/hooks/createSpaceModal';
-import { CreateSpaceModalState } from '../../state/createSpaceModal';
-import { stopPropagation } from '../../utils/keyboard';
-
-type CreateSpaceModalProps = {
-  state: CreateSpaceModalState;
-};
-function CreateSpaceModal({ state }: CreateSpaceModalProps) {
-  const { spaceId } = state;
-  const closeDialog = useCloseCreateSpaceModal();
-
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
-  const space = spaceId ? getRoom(spaceId) : undefined;
-
-  return (
-    <SpaceProvider value={space ?? null}>
-      <Overlay open backdrop={<OverlayBackdrop />}>
-        <OverlayCenter>
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              clickOutsideDeactivates: true,
-              onDeactivate: closeDialog,
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Modal size="300" flexHeight>
-              <Box direction="Column">
-                <Header
-                  size="500"
-                  style={{
-                    padding: config.space.S200,
-                    paddingLeft: config.space.S400,
-                    borderBottomWidth: config.borderWidth.B300,
-                  }}
-                >
-                  <Box grow="Yes">
-                    <Text size="H4">New Space</Text>
-                  </Box>
-                  <Box shrink="No">
-                    <IconButton size="300" radii="300" onClick={closeDialog}>
-                      <Icon src={Icons.Cross} />
-                    </IconButton>
-                  </Box>
-                </Header>
-                <Scroll size="300" hideTrack>
-                  <Box
-                    style={{
-                      padding: config.space.S400,
-                      paddingRight: config.space.S200,
-                    }}
-                    direction="Column"
-                    gap="500"
-                  >
-                    <CreateSpaceForm space={space} onCreate={closeDialog} />
-                  </Box>
-                </Scroll>
-              </Box>
-            </Modal>
-          </FocusTrap>
-        </OverlayCenter>
-      </Overlay>
-    </SpaceProvider>
-  );
-}
-
-export function CreateSpaceModalRenderer() {
-  const state = useCreateSpaceModalState();
-
-  if (!state) return null;
-  return <CreateSpaceModal state={state} />;
-}

src/app/features/create-space/index.ts

@@ -1,2 +0,0 @@
-export * from './CreateSpace';
-export * from './CreateSpaceModal';

src/app/features/lobby/HierarchyItemMenu.tsx

@@ -27,9 +27,6 @@ import { stopPropagation } from '../../utils/keyboard';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
-import { IPowerLevels } from '../../hooks/usePowerLevels';
-import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
-import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 
 type HierarchyItemWithParent = HierarchyItem & {
   parentId: string;
@@ -48,7 +45,7 @@ function SuggestMenuItem({
   const [toggleState, handleToggleSuggested] = useAsyncCallback(
     useCallback(() => {
       const newContent: MSpaceChildContent = { ...content, suggested: !content.suggested };
-      return mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, newContent, roomId);
+      return mx.sendStateEvent(parentId, StateEvent.SpaceChild, newContent, roomId);
     }, [mx, parentId, roomId, content])
   );
 
@@ -85,7 +82,7 @@ function RemoveMenuItem({
 
   const [removeState, handleRemove] = useAsyncCallback(
     useCallback(
-      () => mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, {}, roomId),
+      () => mx.sendStateEvent(parentId, StateEvent.SpaceChild, {}, roomId),
       [mx, parentId, roomId]
     )
   );
@@ -183,7 +180,7 @@ type HierarchyItemMenuProps = {
     parentId: string;
   };
   joined: boolean;
-  powerLevels?: IPowerLevels;
+  canInvite: boolean;
   canEditChild: boolean;
   pinned?: boolean;
   onTogglePin?: (roomId: string) => void;
@@ -191,22 +188,13 @@ type HierarchyItemMenuProps = {
 export function HierarchyItemMenu({
   item,
   joined,
-  powerLevels,
+  canInvite,
   canEditChild,
   pinned,
   onTogglePin,
 }: HierarchyItemMenuProps) {
-  const mx = useMatrixClient();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
-  const canInvite = (): boolean => {
-    if (!powerLevels) return false;
-    const creators = getRoomCreatorsForRoomId(mx, item.roomId);
-    const permissions = getRoomPermissionsAPI(creators, powerLevels);
-
-    return permissions.action('invite', mx.getSafeUserId());
-  };
-
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
@@ -266,7 +254,7 @@ export function HierarchyItemMenu({
                     <InviteMenuItem
                       item={item}
                       requestClose={handleRequestClose}
-                      disabled={!canInvite()}
+                      disabled={!canInvite}
                     />
                     <SettingsMenuItem item={item} requestClose={handleRequestClose} />
                     <UseStateProvider initial={false}>

src/app/features/lobby/Lobby.tsx

@@ -27,6 +27,7 @@ import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
 import {
   IPowerLevels,
   PowerLevelsContextProvider,
+  powerLevelAPI,
   usePowerLevels,
   useRoomsPowerLevels,
 } from '../../hooks/usePowerLevels';
@@ -54,13 +55,12 @@ import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { SpaceHierarchy } from './SpaceHierarchy';
 import { useGetRoom } from '../../hooks/useGetRoom';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
-import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
 
 const useCanDropLobbyItem = (
   space: Room,
   roomsPowerLevels: Map<string, IPowerLevels>,
-  getRoom: (roomId: string) => Room | undefined
+  getRoom: (roomId: string) => Room | undefined,
+  canEditSpaceChild: (powerLevels: IPowerLevels) => boolean
 ): CanDropCallback => {
   const mx = useMatrixClient();
 
@@ -74,20 +74,16 @@ const useCanDropLobbyItem = (
 
       const containerSpaceId = space.roomId;
 
-      const powerLevels = roomsPowerLevels.get(containerSpaceId) ?? {};
-      const creators = getRoomCreatorsForRoomId(mx, containerSpaceId);
-      const permissions = getRoomPermissionsAPI(creators, powerLevels);
-
       if (
         getRoom(containerSpaceId) === undefined ||
-        !permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+        !canEditSpaceChild(roomsPowerLevels.get(containerSpaceId) ?? {})
       ) {
         return false;
       }
 
       return true;
     },
-    [space, roomsPowerLevels, getRoom, mx]
+    [space, roomsPowerLevels, getRoom, canEditSpaceChild]
   );
 
   const canDropRoom: CanDropCallback = useCallback(
@@ -101,31 +97,30 @@ const useCanDropLobbyItem = (
       // check and do not allow restricted room to be dragged outside
       // current space if can't change `m.room.join_rules` `content.allow`
       if (draggingOutsideSpace && restrictedItem) {
-        const itemPowerLevels = roomsPowerLevels.get(item.roomId) ?? {};
-        const itemCreators = getRoomCreatorsForRoomId(mx, item.roomId);
-        const itemPermissions = getRoomPermissionsAPI(itemCreators, itemPowerLevels);
-
-        const canChangeJoinRuleAllow = itemPermissions.stateEvent(
+        const itemPowerLevel = roomsPowerLevels.get(item.roomId) ?? {};
+        const userPLInItem = powerLevelAPI.getPowerLevel(
+          itemPowerLevel,
+          mx.getUserId() ?? undefined
+        );
+        const canChangeJoinRuleAllow = powerLevelAPI.canSendStateEvent(
+          itemPowerLevel,
           StateEvent.RoomJoinRules,
-          mx.getSafeUserId()
+          userPLInItem
         );
         if (!canChangeJoinRuleAllow) {
           return false;
         }
       }
 
-      const powerLevels = roomsPowerLevels.get(containerSpaceId) ?? {};
-      const creators = getRoomCreatorsForRoomId(mx, containerSpaceId);
-      const permissions = getRoomPermissionsAPI(creators, powerLevels);
       if (
         getRoom(containerSpaceId) === undefined ||
-        !permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+        !canEditSpaceChild(roomsPowerLevels.get(containerSpaceId) ?? {})
       ) {
         return false;
       }
       return true;
     },
-    [mx, getRoom, roomsPowerLevels]
+    [mx, getRoom, canEditSpaceChild, roomsPowerLevels]
   );
 
   const canDrop: CanDropCallback = useCallback(
@@ -188,6 +183,16 @@ export function Lobby() {
 
   const getRoom = useGetRoom(allJoinedRooms);
 
+  const canEditSpaceChild = useCallback(
+    (powerLevels: IPowerLevels) =>
+      powerLevelAPI.canSendStateEvent(
+        powerLevels,
+        StateEvent.SpaceChild,
+        powerLevelAPI.getPowerLevel(powerLevels, mx.getUserId() ?? undefined)
+      ),
+    [mx]
+  );
+
   const [draggingItem, setDraggingItem] = useState<HierarchyItem>();
   const hierarchy = useSpaceHierarchy(
     space.roomId,
@@ -215,16 +220,23 @@ export function Lobby() {
       () =>
         hierarchy
           .flatMap((i) => {
-            const childRooms = Array.isArray(i.rooms) ? i.rooms.map((r) => getRoom(r.roomId)) : [];
+            const childRooms = Array.isArray(i.rooms)
+              ? i.rooms.map((r) => mx.getRoom(r.roomId))
+              : [];
 
-            return [getRoom(i.space.roomId), ...childRooms];
+            return [mx.getRoom(i.space.roomId), ...childRooms];
           })
           .filter((r) => !!r) as Room[],
-      [hierarchy, getRoom]
+      [mx, hierarchy]
     )
   );
 
-  const canDrop: CanDropCallback = useCanDropLobbyItem(space, roomsPowerLevels, getRoom);
+  const canDrop: CanDropCallback = useCanDropLobbyItem(
+    space,
+    roomsPowerLevels,
+    getRoom,
+    canEditSpaceChild
+  );
 
   const [reorderSpaceState, reorderSpace] = useAsyncCallback(
     useCallback(
@@ -260,11 +272,7 @@ export function Lobby() {
           .filter((reorder, index) => {
             if (!reorder.item.parentId) return false;
             const parentPL = roomsPowerLevels.get(reorder.item.parentId);
-            if (!parentPL) return false;
-
-            const creators = getRoomCreatorsForRoomId(mx, reorder.item.parentId);
-            const permissions = getRoomPermissionsAPI(creators, parentPL);
-            const canEdit = permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId());
+            const canEdit = parentPL && canEditSpaceChild(parentPL);
             return canEdit && reorder.orderKey !== currentOrders[index];
           });
 
@@ -280,7 +288,7 @@ export function Lobby() {
           });
         }
       },
-      [mx, hierarchy, lex, roomsPowerLevels]
+      [mx, hierarchy, lex, roomsPowerLevels, canEditSpaceChild]
     )
   );
   const reorderingSpace = reorderSpaceState.status === AsyncStatus.Loading;
@@ -422,7 +430,7 @@ export function Lobby() {
         newItems.push(rId);
       }
       const newSpacesContent = makeCinnySpacesContent(mx, newItems);
-      mx.setAccountData(AccountDataEvent.CinnySpaces as any, newSpacesContent as any);
+      mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
     },
     [mx, sidebarItems, sidebarSpaces]
   );
@@ -487,6 +495,7 @@ export function Lobby() {
                             allJoinedRooms={allJoinedRooms}
                             mDirects={mDirects}
                             roomsPowerLevels={roomsPowerLevels}
+                            canEditSpaceChild={canEditSpaceChild}
                             categoryId={categoryId}
                             closed={
                               closedCategories.has(categoryId) ||

src/app/features/lobby/LobbyHeader.tsx

@@ -27,7 +27,7 @@ import { RoomAvatar } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
 import * as css from './LobbyHeader.css';
 import { openInviteUser } from '../../../client/action/navigation';
-import { IPowerLevels } from '../../hooks/usePowerLevels';
+import { IPowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
 import { stopPropagation } from '../../utils/keyboard';
@@ -36,30 +36,26 @@ import { BackRouteHandler } from '../../components/BackRouteHandler';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 
 type LobbyMenuProps = {
+  roomId: string;
   powerLevels: IPowerLevels;
   requestClose: () => void;
 };
 const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
-  ({ powerLevels, requestClose }, ref) => {
+  ({ roomId, powerLevels, requestClose }, ref) => {
     const mx = useMatrixClient();
-    const space = useSpace();
-    const creators = useRoomCreators(space);
-
-    const permissions = useRoomPermissions(creators, powerLevels);
-    const canInvite = permissions.action('invite', mx.getSafeUserId());
+    const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
+    const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
     const openSpaceSettings = useOpenSpaceSettings();
 
     const handleInvite = () => {
-      openInviteUser(space.roomId);
+      openInviteUser(roomId);
       requestClose();
     };
 
     const handleRoomSettings = () => {
-      openSpaceSettings(space.roomId);
+      openSpaceSettings(roomId);
       requestClose();
     };
 
@@ -110,7 +106,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
                 </MenuItem>
                 {promptLeave && (
                   <LeaveSpacePrompt
-                    roomId={space.roomId}
+                    roomId={roomId}
                     onDone={requestClose}
                     onCancel={() => setPromptLeave(false)}
                   />
@@ -246,6 +242,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
                 }}
               >
                 <LobbyMenu
+                  roomId={space.roomId}
                   powerLevels={powerLevels}
                   requestClose={() => setMenuAnchor(undefined)}
                 />

src/app/features/lobby/SpaceHierarchy.tsx

@@ -8,16 +8,14 @@ import {
   HierarchyItemSpace,
   useFetchSpaceHierarchyLevel,
 } from '../../hooks/useSpaceHierarchy';
-import { IPowerLevels } from '../../hooks/usePowerLevels';
+import { IPowerLevels, powerLevelAPI } from '../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SpaceItemCard } from './SpaceItem';
 import { AfterItemDropTarget, CanDropCallback } from './DnD';
 import { HierarchyItemMenu } from './HierarchyItemMenu';
 import { RoomItemCard } from './RoomItem';
-import { RoomType, StateEvent } from '../../../types/matrix/room';
+import { RoomType } from '../../../types/matrix/room';
 import { SequenceCard } from '../../components/sequence-card';
-import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
-import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 
 type SpaceHierarchyProps = {
   summary: IHierarchyRoom | undefined;
@@ -26,6 +24,7 @@ type SpaceHierarchyProps = {
   allJoinedRooms: Set<string>;
   mDirects: Set<string>;
   roomsPowerLevels: Map<string, IPowerLevels>;
+  canEditSpaceChild: (powerLevels: IPowerLevels) => boolean;
   categoryId: string;
   closed: boolean;
   handleClose: MouseEventHandler<HTMLButtonElement>;
@@ -49,6 +48,7 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
       allJoinedRooms,
       mDirects,
       roomsPowerLevels,
+      canEditSpaceChild,
       categoryId,
       closed,
       handleClose,
@@ -79,28 +79,25 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
       return s;
     }, [rooms]);
 
-    const spacePowerLevels = roomsPowerLevels.get(spaceItem.roomId);
-    const spaceCreators = getRoomCreatorsForRoomId(mx, spaceItem.roomId);
-    const spacePermissions =
-      spacePowerLevels && getRoomPermissionsAPI(spaceCreators, spacePowerLevels);
+    const spacePowerLevels = roomsPowerLevels.get(spaceItem.roomId) ?? {};
+    const userPLInSpace = powerLevelAPI.getPowerLevel(
+      spacePowerLevels,
+      mx.getUserId() ?? undefined
+    );
+    const canInviteInSpace = powerLevelAPI.canDoAction(spacePowerLevels, 'invite', userPLInSpace);
 
     const draggingSpace =
       draggingItem?.roomId === spaceItem.roomId && draggingItem.parentId === spaceItem.parentId;
 
     const { parentId } = spaceItem;
-    const parentPowerLevels = parentId ? roomsPowerLevels.get(parentId) : undefined;
-    const parentCreators = parentId ? getRoomCreatorsForRoomId(mx, parentId) : undefined;
-    const parentPermissions =
-      parentCreators &&
-      parentPowerLevels &&
-      getRoomPermissionsAPI(parentCreators, parentPowerLevels);
+    const parentPowerLevels = parentId ? roomsPowerLevels.get(parentId) ?? {} : undefined;
 
     useEffect(() => {
       onSpacesFound(Array.from(subspaces.values()));
     }, [subspaces, onSpacesFound]);
 
     let childItems = roomItems?.filter((i) => !subspaces.has(i.roomId));
-    if (!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())) {
+    if (!canEditSpaceChild(spacePowerLevels)) {
       // hide unknown rooms for normal user
       childItems = childItems?.filter((i) => {
         const forbidden = error instanceof MatrixError ? error.errcode === 'M_FORBIDDEN' : false;
@@ -120,22 +117,18 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
           closed={closed}
           handleClose={handleClose}
           getRoom={getRoom}
-          canEditChild={!!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())}
+          canEditChild={canEditSpaceChild(spacePowerLevels)}
           canReorder={
-            parentPowerLevels && !disabledReorder && parentPermissions
-              ? parentPermissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
-              : false
+            parentPowerLevels && !disabledReorder ? canEditSpaceChild(parentPowerLevels) : false
           }
           options={
             parentId &&
             parentPowerLevels && (
               <HierarchyItemMenu
                 item={{ ...spaceItem, parentId }}
-                powerLevels={spacePowerLevels}
+                canInvite={canInviteInSpace}
                 joined={allJoinedRooms.has(spaceItem.roomId)}
-                canEditChild={
-                  !!parentPermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
-                }
+                canEditChild={canEditSpaceChild(parentPowerLevels)}
                 pinned={pinned}
                 onTogglePin={togglePinToSidebar}
               />
@@ -158,6 +151,15 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
               const roomSummary = rooms.get(roomItem.roomId);
 
               const roomPowerLevels = roomsPowerLevels.get(roomItem.roomId) ?? {};
+              const userPLInRoom = powerLevelAPI.getPowerLevel(
+                roomPowerLevels,
+                mx.getUserId() ?? undefined
+              );
+              const canInviteInRoom = powerLevelAPI.canDoAction(
+                roomPowerLevels,
+                'invite',
+                userPLInRoom
+              );
 
               const lastItem = index === childItems.length;
               const nextRoomId = lastItem ? nextSpaceId : childItems[index + 1]?.roomId;
@@ -176,18 +178,13 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
                   dm={mDirects.has(roomItem.roomId)}
                   onOpen={onOpenRoom}
                   getRoom={getRoom}
-                  canReorder={
-                    !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId()) &&
-                    !disabledReorder
-                  }
+                  canReorder={canEditSpaceChild(spacePowerLevels) && !disabledReorder}
                   options={
                     <HierarchyItemMenu
                       item={roomItem}
-                      powerLevels={roomPowerLevels}
+                      canInvite={canInviteInRoom}
                       joined={allJoinedRooms.has(roomItem.roomId)}
-                      canEditChild={
-                        !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
-                      }
+                      canEditChild={canEditSpaceChild(spacePowerLevels)}
                     />
                   }
                   after={

src/app/features/lobby/SpaceItem.tsx

@@ -30,12 +30,10 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import * as css from './SpaceItem.css';
 import * as styleCss from './style.css';
 import { useDraggableItem } from './DnD';
-import { openSpaceAddExisting } from '../../../client/action/navigation';
+import { openCreateRoom, openSpaceAddExisting } from '../../../client/action/navigation';
 import { stopPropagation } from '../../utils/keyboard';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
-import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
 
 function SpaceProfileLoading() {
   return (
@@ -242,14 +240,13 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
 
 function AddRoomButton({ item }: { item: HierarchyItem }) {
   const [cords, setCords] = useState<RectCords>();
-  const openCreateRoomModal = useOpenCreateRoomModal();
 
   const handleAddRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
   const handleCreateRoom = () => {
-    openCreateRoomModal(item.roomId);
+    openCreateRoom(false, item.roomId as any);
     setCords(undefined);
   };
 
@@ -306,14 +303,13 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
 
 function AddSpaceButton({ item }: { item: HierarchyItem }) {
   const [cords, setCords] = useState<RectCords>();
-  const openCreateSpaceModal = useOpenCreateSpaceModal();
 
   const handleAddSpace: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
   const handleCreateSpace = () => {
-    openCreateSpaceModal(item.roomId as any);
+    openCreateRoom(true, item.roomId as any);
     setCords(undefined);
   };
 
@@ -474,7 +470,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
               </>
             )}
           </Box>
-          {space && canEditChild && (
+          {canEditChild && (
             <Box shrink="No" alignItems="Inherit" gap="200">
               <AddRoomButton item={item} />
               {item.parentId === undefined && <AddSpaceButton item={item} />}

src/app/features/message-search/SearchResultGroup.tsx

@@ -39,18 +39,15 @@ import { UserAvatar } from '../../components/user-avatar';
 import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
-import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
+import {
+  getTagIconSrc,
+  useAccessibleTagColors,
+  usePowerLevelTags,
+} from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
 import { PowerIcon } from '../../components/power';
 import colorMXID from '../../../util/colorMXID';
-import {
-  getPowerTagIconSrc,
-  useAccessiblePowerTagColors,
-  useGetMemberPowerTag,
-} from '../../hooks/useMemberPowerTag';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 
 type SearchResultGroupProps = {
   room: Room;
@@ -79,14 +76,10 @@ export function SearchResultGroup({
   const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
 
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
-
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const theme = useTheme();
-  const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
 
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
@@ -233,12 +226,13 @@ export function SearchResultGroup({
           const threadRootId =
             relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
 
-          const memberPowerTag = getMemberPowerTag(event.sender);
-          const tagColor = memberPowerTag?.color
-            ? accessibleTagColors?.get(memberPowerTag.color)
+          const senderPowerLevel = getPowerLevel(event.sender);
+          const powerLevelTag = getPowerLevelTag(senderPowerLevel);
+          const tagColor = powerLevelTag?.color
+            ? accessibleTagColors?.get(powerLevelTag.color)
             : undefined;
-          const tagIconSrc = memberPowerTag?.icon
-            ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
+          const tagIconSrc = powerLevelTag?.icon
+            ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
             : undefined;
 
           const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
@@ -308,7 +302,8 @@ export function SearchResultGroup({
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
-                    getMemberPowerTag={getMemberPowerTag}
+                    getPowerLevel={getPowerLevel}
+                    getPowerLevelTag={getPowerLevelTag}
                     accessibleTagColors={accessibleTagColors}
                     legacyUsernameColor={legacyUsernameColor}
                   />

src/app/features/room-nav/RoomNavItem.tsx

@@ -27,7 +27,7 @@ import { nameInitials } from '../../utils/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
 import { markAsRead } from '../../../client/action/notifications';
 import { openInviteUser } from '../../../client/action/navigation';
@@ -49,8 +49,6 @@ import {
   RoomNotificationMode,
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -63,10 +61,8 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
     const powerLevels = usePowerLevels(room);
-    const creators = useRoomCreators(room);
-
-    const permissions = useRoomPermissions(creators, powerLevels);
-    const canInvite = permissions.action('invite', mx.getSafeUserId());
+    const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
+    const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
     const openRoomSettings = useOpenRoomSettings();
     const space = useSpaceOptionally();
 

src/app/features/room-settings/general/General.tsx

@@ -13,8 +13,6 @@ import {
   RoomPublish,
   RoomUpgrade,
 } from '../../common-settings/general';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type GeneralProps = {
   requestClose: () => void;
@@ -22,8 +20,6 @@ type GeneralProps = {
 export function General({ requestClose }: GeneralProps) {
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-  const permissions = useRoomPermissions(creators, powerLevels);
 
   return (
     <Page>
@@ -45,22 +41,22 @@ export function General({ requestClose }: GeneralProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
-              <RoomProfile permissions={permissions} />
+              <RoomProfile powerLevels={powerLevels} />
               <Box direction="Column" gap="100">
                 <Text size="L400">Options</Text>
-                <RoomJoinRules permissions={permissions} />
-                <RoomHistoryVisibility permissions={permissions} />
-                <RoomEncryption permissions={permissions} />
-                <RoomPublish permissions={permissions} />
+                <RoomJoinRules powerLevels={powerLevels} />
+                <RoomHistoryVisibility powerLevels={powerLevels} />
+                <RoomEncryption powerLevels={powerLevels} />
+                <RoomPublish powerLevels={powerLevels} />
               </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Addresses</Text>
-                <RoomPublishedAddresses permissions={permissions} />
-                <RoomLocalAddresses permissions={permissions} />
+                <RoomPublishedAddresses powerLevels={powerLevels} />
+                <RoomLocalAddresses powerLevels={powerLevels} />
               </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Advance Options</Text>
-                <RoomUpgrade permissions={permissions} requestClose={requestClose} />
+                <RoomUpgrade powerLevels={powerLevels} requestClose={requestClose} />
               </Box>
             </Box>
           </PageContent>

src/app/features/room-settings/permissions/Permissions.tsx

@@ -2,13 +2,11 @@ import React, { useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
 import { usePermissionGroups } from './usePermissionItems';
 import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type PermissionsProps = {
   requestClose: () => void;
@@ -17,12 +15,11 @@ export function Permissions({ requestClose }: PermissionsProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-
-  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
-  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canEditPowers = canSendStateEvent(
+    StateEvent.PowerLevelTags,
+    getPowerLevel(mx.getSafeUserId())
+  );
   const permissionGroups = usePermissionGroups();
 
   const [powerEditor, setPowerEditor] = useState(false);
@@ -60,11 +57,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
                 onEdit={canEditPowers ? handleEditPowers : undefined}
                 permissionGroups={permissionGroups}
               />
-              <PermissionGroups
-                canEdit={canEditPermissions}
-                powerLevels={powerLevels}
-                permissionGroups={permissionGroups}
-              />
+              <PermissionGroups powerLevels={powerLevels} permissionGroups={permissionGroups} />
             </Box>
           </PageContent>
         </Scroll>

src/app/features/room/MembersDrawer.css.ts

@@ -1,8 +1,10 @@
 import { keyframes, style } from '@vanilla-extract/css';
-import { config, toRem } from 'folds';
+import { color, config, toRem } from 'folds';
 
 export const MembersDrawer = style({
   width: toRem(266),
+  backgroundColor: color.Background.Container,
+  color: color.Background.OnContainer,
 });
 
 export const MembersDrawerHeader = style({

src/app/features/room/MembersDrawer.tsx

@@ -26,10 +26,11 @@ import {
   TooltipProvider,
   config,
 } from 'folds';
-import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
+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';
@@ -39,6 +40,7 @@ import {
   useAsyncSearch,
 } from '../../hooks/useAsyncSearch';
 import { useDebounce } from '../../hooks/useDebounce';
+import { usePowerLevelTags, useFlattenPowerLevelTagMembers } from '../../hooks/usePowerLevelTags';
 import { TypingIndicator } from '../../components/typing-indicator';
 import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
@@ -50,116 +52,10 @@ import { UserAvatar } from '../../components/user-avatar';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useMembershipFilter, useMembershipFilterMenu } from '../../hooks/useMemberFilter';
-import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
-import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../components/MemberSortMenu';
-import { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
-import { useSpaceOptionally } from '../../hooks/useSpace';
-import { ContainerColor } from '../../styles/ContainerColor.css';
-import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-
-type MemberDrawerHeaderProps = {
-  room: Room;
-};
-function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
-  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
-
-  return (
-    <Header className={css.MembersDrawerHeader} variant="Background" size="600">
-      <Box grow="Yes" alignItems="Center" gap="200">
-        <Box grow="Yes" alignItems="Center" gap="200">
-          <Text title={`${room.getJoinedMemberCount()} Members`} size="H5" truncate>
-            {`${millify(room.getJoinedMemberCount())} Members`}
-          </Text>
-        </Box>
-        <Box shrink="No" alignItems="Center">
-          <TooltipProvider
-            position="Bottom"
-            align="End"
-            offset={4}
-            tooltip={
-              <Tooltip>
-                <Text>Close</Text>
-              </Tooltip>
-            }
-          >
-            {(triggerRef) => (
-              <IconButton
-                ref={triggerRef}
-                variant="Background"
-                onClick={() => setPeopleDrawer(false)}
-              >
-                <Icon src={Icons.Cross} />
-              </IconButton>
-            )}
-          </TooltipProvider>
-        </Box>
-      </Box>
-    </Header>
-  );
-}
-
-type MemberItemProps = {
-  mx: MatrixClient;
-  useAuthentication: boolean;
-  room: Room;
-  member: RoomMember;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-  pressed?: boolean;
-  typing?: boolean;
-};
-function MemberItem({
-  mx,
-  useAuthentication,
-  room,
-  member,
-  onClick,
-  pressed,
-  typing,
-}: MemberItemProps) {
-  const name =
-    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
-  const avatarMxcUrl = member.getMxcAvatarUrl();
-  const avatarUrl = avatarMxcUrl
-    ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
-    : undefined;
-
-  return (
-    <MenuItem
-      style={{ padding: `0 ${config.space.S200}` }}
-      aria-pressed={pressed}
-      data-user-id={member.userId}
-      variant="Background"
-      radii="400"
-      onClick={onClick}
-      before={
-        <Avatar size="200">
-          <UserAvatar
-            userId={member.userId}
-            src={avatarUrl ?? undefined}
-            alt={name}
-            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-          />
-        </Avatar>
-      }
-      after={
-        typing && (
-          <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
-            <TypingIndicator size="300" />
-          </Badge>
-        )
-      }
-    >
-      <Box grow="Yes">
-        <Text size="T400" truncate>
-          {name}
-        </Text>
-      </Box>
-    </MenuItem>
-  );
-}
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -183,28 +79,28 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
-  const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
-
+  const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const fetchingMembers = members.length < room.getJoinedMemberCount();
-  const openUserRoomProfile = useOpenUserRoomProfile();
-  const space = useSpaceOptionally();
-  const openProfileUserId = useUserRoomProfileState()?.userId;
+  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
   const membershipFilterMenu = useMembershipFilterMenu();
   const sortFilterMenu = useMemberSortMenu();
   const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
 
   const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
   const memberSort = useMemberSort(sortFilterIndex, sortFilterMenu);
-  const memberPowerSort = useMemberPowerSort(creators);
 
   const typingMembers = useRoomTypingMember(room.roomId);
 
   const filteredMembers = useMemo(
-    () => members.filter(membershipFilter.filterFn).sort(memberSort.sortFn).sort(memberPowerSort),
-    [members, membershipFilter, memberSort, memberPowerSort]
+    () =>
+      members
+        .filter(membershipFilter.filterFn)
+        .sort(memberSort.sortFn)
+        .sort((a, b) => b.powerLevel - a.powerLevel),
+    [members, membershipFilter, memberSort]
   );
 
   const [result, search, resetSearch] = useAsyncSearch(
@@ -216,7 +112,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
 
   const processMembers = result ? result.items : filteredMembers;
 
-  const PLTagOrRoomMember = useFlattenPowerTagMembers(processMembers, getPowerTag);
+  const PLTagOrRoomMember = useFlattenPowerLevelTagMembers(
+    processMembers,
+    getPowerLevel,
+    getPowerLevelTag
+  );
 
   const virtualizer = useVirtualizer({
     count: PLTagOrRoomMember.length,
@@ -236,20 +136,48 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     { wait: 200 }
   );
 
+  const getName = (member: RoomMember) =>
+    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
+
   const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
-    if (!userId) return;
-    openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect(), 'Left');
+    openProfileViewer(userId, room.roomId);
   };
 
   return (
-    <Box
-      className={classNames(css.MembersDrawer, ContainerColor({ variant: 'Background' }))}
-      shrink="No"
-      direction="Column"
-    >
-      <MemberDrawerHeader room={room} />
+    <Box className={css.MembersDrawer} shrink="No" direction="Column">
+      <Header className={css.MembersDrawerHeader} variant="Background" size="600">
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text title={`${room.getJoinedMemberCount()} Members`} size="H5" truncate>
+              {`${millify(room.getJoinedMemberCount())} Members`}
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center">
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Close</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  ref={triggerRef}
+                  variant="Background"
+                  onClick={() => setPeopleDrawer(false)}
+                >
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
+        </Box>
+      </Header>
       <Box className={css.MemberDrawerContentBase} grow="Yes">
         <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
           <Box className={css.MemberDrawerContent} direction="Column" gap="200">
@@ -401,28 +329,59 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                     );
                   }
 
+                  const member = tagOrMember;
+                  const name = getName(member);
+                  const avatarMxcUrl = member.getMxcAvatarUrl();
+                  const avatarUrl = avatarMxcUrl
+                    ? mx.mxcUrlToHttp(
+                        avatarMxcUrl,
+                        100,
+                        100,
+                        'crop',
+                        undefined,
+                        false,
+                        useAuthentication
+                      )
+                    : undefined;
+
                   return (
-                    <div
+                    <MenuItem
                       style={{
+                        padding: `0 ${config.space.S200}`,
                         transform: `translateY(${vItem.start}px)`,
                       }}
-                      className={css.DrawerVirtualItem}
                       data-index={vItem.index}
-                      key={`${room.roomId}-${tagOrMember.userId}`}
+                      data-user-id={member.userId}
                       ref={virtualizer.measureElement}
+                      key={`${room.roomId}-${member.userId}`}
+                      className={css.DrawerVirtualItem}
+                      variant="Background"
+                      radii="400"
+                      onClick={handleMemberClick}
+                      before={
+                        <Avatar size="200">
+                          <UserAvatar
+                            userId={member.userId}
+                            src={avatarUrl ?? undefined}
+                            alt={name}
+                            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                          />
+                        </Avatar>
+                      }
+                      after={
+                        typingMembers.find((receipt) => receipt.userId === member.userId) && (
+                          <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
+                            <TypingIndicator size="300" />
+                          </Badge>
+                        )
+                      }
                     >
-                      <MemberItem
-                        mx={mx}
-                        useAuthentication={useAuthentication}
-                        room={room}
-                        member={tagOrMember}
-                        onClick={handleMemberClick}
-                        pressed={openProfileUserId === tagOrMember.userId}
-                        typing={typingMembers.some(
-                          (receipt) => receipt.userId === tagOrMember.userId
-                        )}
-                      />
-                    </div>
+                      <Box grow="Yes">
+                        <Text size="T400" truncate>
+                          {name}
+                        </Text>
+                      </Box>
+                    </MenuItem>
                   );
                 })}
               </div>

src/app/features/room/RoomInput.tsx

@@ -108,23 +108,21 @@ import { ReplyLayout, ThreadIndicator } from '../../components/message';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
-import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
+import { powerLevelAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import colorMXID from '../../../util/colorMXID';
 import { useIsDirectRoom } from '../../hooks/useRoom';
-import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useTheme } from '../../hooks/useTheme';
-import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
-import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 
 interface RoomInputProps {
   editor: Editor;
   fileDropContainerRef: RefObject<HTMLElement>;
   roomId: string;
   room: Room;
+  getPowerLevelTag: GetPowerLevelTag;
+  accessibleTagColors: Map<string, string>;
 }
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
-  ({ editor, fileDropContainerRef, roomId, room }, ref) => {
+  ({ editor, fileDropContainerRef, roomId, room, getPowerLevelTag, accessibleTagColors }, ref) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
@@ -136,24 +134,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const emojiBtnRef = useRef<HTMLButtonElement>(null);
     const roomToParents = useAtomValue(roomToParentsAtom);
     const powerLevels = usePowerLevelsContext();
-    const creators = useRoomCreators(room);
 
     const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
     const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
     const replyUserID = replyDraft?.userId;
 
-    const powerLevelTags = usePowerLevelTags(room, powerLevels);
-    const creatorsTag = useRoomCreatorsTag();
-    const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
-    const theme = useTheme();
-    const accessibleTagColors = useAccessiblePowerTagColors(
-      theme.kind,
-      creatorsTag,
-      powerLevelTags
-    );
-
-    const replyPowerTag = replyUserID ? getMemberPowerTag(replyUserID) : undefined;
-    const replyPowerColor = replyPowerTag?.color
+    const replyPowerTag = getPowerLevelTag(powerLevelAPI.getPowerLevel(powerLevels, replyUserID));
+    const replyPowerColor = replyPowerTag.color
       ? accessibleTagColors.get(replyPowerTag.color)
       : undefined;
     const replyUsernameColor =
@@ -290,7 +277,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       });
       handleCancelUpload(uploads);
       const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
-      contents.forEach((content) => mx.sendMessage(roomId, content as any));
+      contents.forEach((content) => mx.sendMessage(roomId, content));
     };
 
     const submit = useCallback(() => {
@@ -369,7 +356,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           content['m.relates_to'].is_falling_back = false;
         }
       }
-      mx.sendMessage(roomId, content as any);
+      mx.sendMessage(roomId, content);
       resetEditor(editor);
       resetEditorHistory(editor);
       setReplyDraft(undefined);

src/app/features/room/RoomTimeline.tsx

@@ -85,6 +85,7 @@ 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';
@@ -101,7 +102,7 @@ import * as css from './RoomTimeline.css';
 import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
 import { createMentionElement, isEmptyEditor, moveCursor } from '../../components/editor';
 import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
-import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
@@ -117,15 +118,8 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 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';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
-import { useTheme } from '../../hooks/useTheme';
-import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
-import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -228,6 +222,8 @@ type RoomTimelineProps = {
   eventId?: string;
   roomInputRef: RefObject<HTMLElement>;
   editor: Editor;
+  getPowerLevelTag: GetPowerLevelTag;
+  accessibleTagColors: Map<string, string>;
 };
 
 const PAGINATION_LIMIT = 80;
@@ -430,7 +426,14 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
   };
 };
 
-export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
+export function RoomTimeline({
+  room,
+  eventId,
+  roomInputRef,
+  editor,
+  getPowerLevelTag,
+  accessibleTagColors,
+}: RoomTimelineProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -455,24 +458,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
+  const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
+    usePowerLevelsAPI(powerLevels);
 
-  const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
-
-  const theme = useTheme();
-  const accessiblePowerTagColors = useAccessiblePowerTagColors(
-    theme.kind,
-    creatorsTag,
-    powerLevelTags
-  );
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-
-  const canRedact = permissions.action('redact', mx.getSafeUserId());
-  const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
-  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
+  const myPowerLevel = getPowerLevel(mx.getUserId() ?? '');
+  const canRedact = canDoAction('redact', myPowerLevel);
+  const canSendReaction = canSendEvent(MessageEvent.Reaction, myPowerLevel);
+  const canPinEvent = canSendStateEvent(StateEvent.RoomPinnedEvents, myPowerLevel);
   const [editId, setEditId] = useState<string>();
 
   const roomToParents = useAtomValue(roomToParentsAtom);
@@ -480,8 +472,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const { navigateRoom } = useRoomNavigate();
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
-  const openUserRoomProfile = useOpenUserRoomProfile();
-  const space = useSpaceOptionally();
 
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
@@ -919,14 +909,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         console.warn('Button should have "data-user-id" attribute!');
         return;
       }
-      openUserRoomProfile(
-        room.roomId,
-        space?.roomId,
-        userId,
-        evt.currentTarget.getBoundingClientRect()
-      );
+      openProfileViewer(userId, room.roomId);
     },
-    [room, space, openUserRoomProfile]
+    [room]
   );
   const handleUsernameClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     (evt) => {
@@ -997,7 +982,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         (reactions.find(eventWithShortcode)?.getContent().shortcode as string | undefined);
       mx.sendEvent(
         room.roomId,
-        MessageEvent.Reaction as any,
+        MessageEvent.Reaction,
         getReactionContent(targetEventId, key, rShortcode)
       );
     },
@@ -1032,6 +1017,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent()) as GetContentCallback;
 
         const senderId = mEvent.getSender() ?? '';
+        const senderPowerLevel = getPowerLevel(mEvent.getSender());
         const senderDisplayName =
           getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
 
@@ -1065,8 +1051,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
                   onClick={handleOpenReply}
-                  getMemberPowerTag={getMemberPowerTag}
-                  accessibleTagColors={accessiblePowerTagColors}
+                  getPowerLevel={getPowerLevel}
+                  getPowerLevelTag={getPowerLevelTag}
+                  accessibleTagColors={accessibleTagColors}
                   legacyUsernameColor={legacyUsernameColor || direct}
                 />
               )
@@ -1085,8 +1072,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             }
             hideReadReceipts={hideActivity}
             showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(senderId)}
-            accessibleTagColors={accessiblePowerTagColors}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
             hour24Clock={hour24Clock}
             dateFormatString={dateFormatString}
@@ -1116,6 +1103,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const hasReactions = reactions && reactions.length > 0;
         const { replyEventId, threadRootId } = mEvent;
         const highlighted = focusItem?.index === item && focusItem.highlight;
+        const senderPowerLevel = getPowerLevel(mEvent.getSender());
 
         return (
           <Message
@@ -1147,8 +1135,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
                   onClick={handleOpenReply}
-                  getMemberPowerTag={getMemberPowerTag}
-                  accessibleTagColors={accessiblePowerTagColors}
+                  getPowerLevel={getPowerLevel}
+                  getPowerLevelTag={getPowerLevelTag}
+                  accessibleTagColors={accessibleTagColors}
                   legacyUsernameColor={legacyUsernameColor || direct}
                 />
               )
@@ -1167,8 +1156,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             }
             hideReadReceipts={hideActivity}
             showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
-            accessibleTagColors={accessiblePowerTagColors}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
             hour24Clock={hour24Clock}
             dateFormatString={dateFormatString}
@@ -1235,6 +1224,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
         const hasReactions = reactions && reactions.length > 0;
         const highlighted = focusItem?.index === item && focusItem.highlight;
+        const senderPowerLevel = getPowerLevel(mEvent.getSender());
 
         return (
           <Message
@@ -1270,8 +1260,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             }
             hideReadReceipts={hideActivity}
             showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
-            accessibleTagColors={accessiblePowerTagColors}
+            powerLevelTag={getPowerLevelTag(senderPowerLevel)}
+            accessibleTagColors={accessibleTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
             hour24Clock={hour24Clock}
             dateFormatString={dateFormatString}

src/app/features/room/RoomView.tsx

@@ -5,7 +5,7 @@ import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { StateEvent } from '../../../types/matrix/room';
-import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useEditor } from '../../components/editor';
 import { RoomInputPlaceholder } from './RoomInputPlaceholder';
@@ -21,8 +21,8 @@ import { editableActiveElement } from '../../utils/dom';
 import navigation from '../../../client/state/navigation';
 import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { useTheme } from '../../hooks/useTheme';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -70,10 +70,15 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
 
   const tombstoneEvent = useStateEvent(room, StateEvent.RoomTombstone);
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
+  const { getPowerLevel, canSendEvent } = usePowerLevelsAPI(powerLevels);
+  const myUserId = mx.getUserId();
+  const canMessage = myUserId
+    ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId))
+    : false;
 
-  const permissions = useRoomPermissions(creators, powerLevels);
-  const canMessage = permissions.event(EventType.RoomMessage, mx.getSafeUserId());
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const theme = useTheme();
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
 
   useKeyDown(
     window,
@@ -104,6 +109,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
           eventId={eventId}
           roomInputRef={roomInputRef}
           editor={editor}
+          getPowerLevelTag={getPowerLevelTag}
+          accessibleTagColors={accessibleTagColors}
         />
         <RoomViewTyping room={room} />
       </Box>
@@ -124,6 +131,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
                   roomId={roomId}
                   fileDropContainerRef={roomViewRef}
                   ref={roomInputRef}
+                  getPowerLevelTag={getPowerLevelTag}
+                  accessibleTagColors={accessibleTagColors}
                 />
               )}
               {!canMessage && (

src/app/features/room/RoomViewHeader.tsx

@@ -34,7 +34,7 @@ import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { StateEvent } from '../../../types/matrix/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoom } from '../../hooks/useRoom';
-import { useSetting } from '../../state/hooks/settings';
+import { useSetSetting, useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
@@ -42,7 +42,7 @@ import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../util
 import { _SearchPathSearchParams } from '../../pages/paths';
 import * as css from './RoomViewHeader.css';
 import { useRoomUnread } from '../../state/hooks/unread';
-import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { markAsRead } from '../../../client/action/notifications';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { openInviteUser } from '../../../client/action/navigation';
@@ -67,8 +67,6 @@ import {
 } from '../../hooks/useRoomsNotificationPreferences';
 import { JumpToTime } from './jump-to-time';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 
 type RoomMenuProps = {
   room: Room;
@@ -79,10 +77,8 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-  const canInvite = permissions.action('invite', mx.getSafeUserId());
+  const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
+  const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
   const { navigateRoom } = useRoomNavigate();
@@ -264,7 +260,7 @@ export function RoomViewHeader() {
     ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
     : undefined;
 
-  const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
   const handleSearchClick = () => {
     const searchParams: _SearchPathSearchParams = {
@@ -438,7 +434,7 @@ export function RoomViewHeader() {
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
+                  <Text>Members</Text>
                 </Tooltip>
               }
             >

src/app/features/room/message/Message.tsx

@@ -75,10 +75,10 @@ import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
-import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room';
+import { StateEvent } from '../../../../types/matrix/room';
+import { getTagIconSrc, PowerLevelTag } from '../../../hooks/usePowerLevelTags';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
-import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -371,7 +371,7 @@ export const MessagePinItem = as<
     if (!isPinned && eventId) {
       pinContent.pinned.push(eventId);
     }
-    mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents as any, pinContent);
+    mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents, pinContent);
     onClose?.();
   };
 
@@ -679,7 +679,7 @@ export type MessageProps = {
   reactions?: ReactNode;
   hideReadReceipts?: boolean;
   showDeveloperTools?: boolean;
-  memberPowerTag?: MemberPowerTag;
+  powerLevelTag?: PowerLevelTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
   hour24Clock: boolean;
@@ -710,7 +710,7 @@ export const Message = as<'div', MessageProps>(
       reactions,
       hideReadReceipts,
       showDeveloperTools,
-      memberPowerTag,
+      powerLevelTag,
       accessibleTagColors,
       legacyUsernameColor,
       hour24Clock,
@@ -733,11 +733,11 @@ export const Message = as<'div', MessageProps>(
       getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
     const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
 
-    const tagColor = memberPowerTag?.color
-      ? accessibleTagColors?.get(memberPowerTag.color)
+    const tagColor = powerLevelTag?.color
+      ? accessibleTagColors?.get(powerLevelTag.color)
       : undefined;
-    const tagIconSrc = memberPowerTag?.icon
-      ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
+    const tagIconSrc = powerLevelTag?.icon
+      ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
       : undefined;
 
     const usernameColor = legacyUsernameColor ? colorMXID(senderId) : tagColor;

src/app/features/room/reaction-viewer/ReactionViewer.tsx

@@ -20,13 +20,12 @@ import { getMemberDisplayName } from '../../../utils/room';
 import { eventWithShortcode, getMxIdLocalPart } from '../../../utils/matrix';
 import * as css from './ReactionViewer.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { openProfileViewer } from '../../../../client/action/navigation';
 import { useRelations } from '../../../hooks/useRelations';
 import { Reaction } from '../../../components/message';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../../plugins/emoji';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
-import { useSpaceOptionally } from '../../../hooks/useSpace';
 
 export type ReactionViewerProps = {
   room: Room;
@@ -42,8 +41,6 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
       relations,
       useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
     );
-    const space = useSpaceOptionally();
-    const openProfile = useOpenUserRoomProfile();
 
     const [selectedKey, setSelectedKey] = useState<string>(() => {
       if (initialKey) return initialKey;
@@ -114,31 +111,24 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                   const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
 
                   const avatarMxcUrl = member?.getMxcAvatarUrl();
-                  const avatarUrl = avatarMxcUrl
-                    ? mx.mxcUrlToHttp(
-                        avatarMxcUrl,
-                        100,
-                        100,
-                        'crop',
-                        undefined,
-                        false,
-                        useAuthentication
-                      )
-                    : undefined;
+                  const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
+                    avatarMxcUrl,
+                    100,
+                    100,
+                    'crop',
+                    undefined,
+                    false,
+                    useAuthentication
+                  ) : undefined;
 
                   return (
                     <MenuItem
                       key={senderId}
                       style={{ padding: `0 ${config.space.S200}` }}
                       radii="400"
-                      onClick={(event) => {
-                        openProfile(
-                          room.roomId,
-                          space?.roomId,
-                          senderId,
-                          event.currentTarget.getBoundingClientRect(),
-                          'Bottom'
-                        );
+                      onClick={() => {
+                        requestClose();
+                        openProfileViewer(senderId, room.roomId);
                       }}
                       before={
                         <Avatar size="200">

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -69,23 +69,18 @@ import { Image } from '../../../components/media';
 import { ImageViewer } from '../../../components/image-viewer';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { VirtualTile } from '../../../components/virtualizer';
-import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
-import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import {
+  getTagIconSrc,
+  useAccessibleTagColors,
+  usePowerLevelTags,
+} from '../../../hooks/usePowerLevelTags';
 import { useTheme } from '../../../hooks/useTheme';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { useIsDirectRoom } from '../../../hooks/useRoom';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import {
-  GetMemberPowerTag,
-  getPowerTagIconSrc,
-  useAccessiblePowerTagColors,
-  useGetMemberPowerTag,
-} from '../../../hooks/useMemberPowerTag';
-import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 
 type PinnedMessageProps = {
   room: Room;
@@ -93,27 +88,22 @@ type PinnedMessageProps = {
   renderContent: RenderMatrixEvent<[MatrixEvent, string, GetContentCallback]>;
   onOpen: (roomId: string, eventId: string) => void;
   canPinEvent: boolean;
-  getMemberPowerTag: GetMemberPowerTag;
-  accessibleTagColors: Map<string, string>;
-  legacyUsernameColor: boolean;
-  hour24Clock: boolean;
-  dateFormatString: string;
 };
-function PinnedMessage({
-  room,
-  eventId,
-  renderContent,
-  onOpen,
-  canPinEvent,
-  getMemberPowerTag,
-  accessibleTagColors,
-  legacyUsernameColor,
-  hour24Clock,
-  dateFormatString,
-}: PinnedMessageProps) {
+function PinnedMessage({ room, eventId, renderContent, onOpen, canPinEvent }: PinnedMessageProps) {
   const pinnedEvent = useRoomEvent(room, eventId);
   const useAuthentication = useMediaAuthentication();
   const mx = useMatrixClient();
+  const direct = useIsDirectRoom();
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+
+  const powerLevels = usePowerLevelsContext();
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
+  const theme = useTheme();
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
+
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
   const [unpinState, unpin] = useAsyncCallback(
     useCallback(() => {
@@ -179,15 +169,14 @@ function PinnedMessage({
   const senderAvatarMxc = getMemberAvatarMxc(room, sender);
   const getContent = (() => pinnedEvent.getContent()) as GetContentCallback;
 
-  const memberPowerTag = getMemberPowerTag(sender);
-  const tagColor = memberPowerTag?.color
-    ? accessibleTagColors?.get(memberPowerTag.color)
-    : undefined;
-  const tagIconSrc = memberPowerTag?.icon
-    ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
+  const senderPowerLevel = getPowerLevel(sender);
+  const powerLevelTag = getPowerLevelTag(senderPowerLevel);
+  const tagColor = powerLevelTag?.color ? accessibleTagColors?.get(powerLevelTag.color) : undefined;
+  const tagIconSrc = powerLevelTag?.icon
+    ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
     : undefined;
 
-  const usernameColor = legacyUsernameColor ? colorMXID(sender) : tagColor;
+  const usernameColor = legacyUsernameColor || direct ? colorMXID(sender) : tagColor;
 
   return (
     <ModernLayout
@@ -233,7 +222,8 @@ function PinnedMessage({
           replyEventId={pinnedEvent.replyEventId}
           threadRootId={pinnedEvent.threadRootId}
           onClick={handleOpenClick}
-          getMemberPowerTag={getMemberPowerTag}
+          getPowerLevel={getPowerLevel}
+          getPowerLevelTag={getPowerLevelTag}
           accessibleTagColors={accessibleTagColors}
           legacyUsernameColor={legacyUsernameColor}
         />
@@ -252,34 +242,14 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
     const mx = useMatrixClient();
     const userId = mx.getUserId()!;
     const powerLevels = usePowerLevelsContext();
-    const creators = useRoomCreators(room);
-
-    const permissions = useRoomPermissions(creators, powerLevels);
-    const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, userId);
-
-    const creatorsTag = useRoomCreatorsTag();
-    const powerLevelTags = usePowerLevelTags(room, powerLevels);
-    const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
-
-    const theme = useTheme();
-    const accessibleTagColors = useAccessiblePowerTagColors(
-      theme.kind,
-      creatorsTag,
-      powerLevelTags
-    );
+    const { canSendStateEvent, getPowerLevel } = usePowerLevelsAPI(powerLevels);
+    const canPinEvent = canSendStateEvent(StateEvent.RoomPinnedEvents, getPowerLevel(userId));
 
     const pinnedEvents = useRoomPinnedEvents(room);
     const sortedPinnedEvent = useMemo(() => Array.from(pinnedEvents).reverse(), [pinnedEvents]);
     const useAuthentication = useMediaAuthentication();
     const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
     const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
-
-    const direct = useIsDirectRoom();
-    const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-
-    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-    const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
-
     const { navigateRoom } = useRoomNavigate();
     const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -494,11 +464,6 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
                               renderContent={renderMatrixEvent}
                               onOpen={handleOpen}
                               canPinEvent={canPinEvent}
-                              getMemberPowerTag={getMemberPowerTag}
-                              accessibleTagColors={accessibleTagColors}
-                              legacyUsernameColor={legacyUsernameColor || direct}
-                              hour24Clock={hour24Clock}
-                              dateFormatString={dateFormatString}
                             />
                           </SequenceCard>
                         </VirtualTile>

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 && spaceId !== roomId ? getRoom(spaceId) : undefined;
+  const space = spaceId ? getRoom(spaceId) : undefined;
 
   if (!room) return null;
 

src/app/features/space-settings/general/General.tsx

@@ -11,8 +11,6 @@ import {
   RoomPublish,
   RoomUpgrade,
 } from '../../common-settings/general';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type GeneralProps = {
   requestClose: () => void;
@@ -20,8 +18,6 @@ type GeneralProps = {
 export function General({ requestClose }: GeneralProps) {
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-  const permissions = useRoomPermissions(creators, powerLevels);
 
   return (
     <Page>
@@ -43,20 +39,20 @@ export function General({ requestClose }: GeneralProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
-              <RoomProfile permissions={permissions} />
+              <RoomProfile powerLevels={powerLevels} />
               <Box direction="Column" gap="100">
                 <Text size="L400">Options</Text>
-                <RoomJoinRules permissions={permissions} />
-                <RoomPublish permissions={permissions} />
+                <RoomJoinRules powerLevels={powerLevels} />
+                <RoomPublish powerLevels={powerLevels} />
               </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Addresses</Text>
-                <RoomPublishedAddresses permissions={permissions} />
-                <RoomLocalAddresses permissions={permissions} />
+                <RoomPublishedAddresses powerLevels={powerLevels} />
+                <RoomLocalAddresses powerLevels={powerLevels} />
               </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Advance Options</Text>
-                <RoomUpgrade permissions={permissions} requestClose={requestClose} />
+                <RoomUpgrade powerLevels={powerLevels} requestClose={requestClose} />
               </Box>
             </Box>
           </PageContent>

src/app/features/space-settings/permissions/Permissions.tsx

@@ -2,13 +2,11 @@ import React, { useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
 import { usePermissionGroups } from './usePermissionItems';
 import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type PermissionsProps = {
   requestClose: () => void;
@@ -17,12 +15,11 @@ export function Permissions({ requestClose }: PermissionsProps) {
   const mx = useMatrixClient();
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-
-  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
-  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
+  const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
+  const canEditPowers = canSendStateEvent(
+    StateEvent.PowerLevelTags,
+    getPowerLevel(mx.getSafeUserId())
+  );
   const permissionGroups = usePermissionGroups();
 
   const [powerEditor, setPowerEditor] = useState(false);
@@ -60,11 +57,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
                 onEdit={canEditPowers ? handleEditPowers : undefined}
                 permissionGroups={permissionGroups}
               />
-              <PermissionGroups
-                canEdit={canEditPermissions}
-                powerLevels={powerLevels}
-                permissionGroups={permissionGroups}
-              />
+              <PermissionGroups powerLevels={powerLevels} permissionGroups={permissionGroups} />
             </Box>
           </PageContent>
         </Scroll>

src/app/hooks/router/useCreateSelected.ts

@@ -1,12 +0,0 @@
-import { useMatch } from 'react-router-dom';
-import { getCreatePath } from '../../pages/pathUtils';
-
-export const useCreateSelected = (): boolean => {
-  const match = useMatch({
-    path: getCreatePath(),
-    caseSensitive: true,
-    end: false,
-  });
-
-  return !!match;
-};

src/app/hooks/useDirectUsers.ts

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import { AccountDataEvent, MDirectContent } from '../../types/matrix/accountData';
-import { useAccountData } from './useAccountData';
-import { useAllJoinedRoomsSet, useGetRoom } from './useGetRoom';
-
-export const useDirectUsers = (): string[] => {
-  const directEvent = useAccountData(AccountDataEvent.Direct);
-  const content = directEvent?.getContent<MDirectContent>();
-
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
-
-  const users = useMemo(() => {
-    if (typeof content !== 'object') return [];
-
-    const u = Object.keys(content).filter((userId) => {
-      const rooms = content[userId];
-      if (!Array.isArray(rooms)) return false;
-      const hasDM = rooms.some((roomId) => typeof roomId === 'string' && !!getRoom(roomId));
-      return hasDM;
-    });
-
-    return u;
-  }, [content, getRoom]);
-
-  return users;
-};

src/app/hooks/useMemberPowerCompare.ts

@@ -1,28 +0,0 @@
-import { useCallback } from 'react';
-import { IPowerLevels, readPowerLevel } from './usePowerLevels';
-
-export const useMemberPowerCompare = (creators: Set<string>, powerLevels: IPowerLevels) => {
-  /**
-   * returns `true` if `userIdA` has more power than `userIdB`
-   * returns `false` otherwise
-   */
-  const hasMorePower = useCallback(
-    (userIdA: string, userIdB: string): boolean => {
-      const aIsCreator = creators.has(userIdA);
-      const bIsCreator = creators.has(userIdB);
-      if (aIsCreator && bIsCreator) return false;
-      if (aIsCreator) return true;
-      if (bIsCreator) return false;
-
-      const aPower = readPowerLevel.user(powerLevels, userIdA);
-      const bPower = readPowerLevel.user(powerLevels, userIdB);
-
-      return aPower > bPower;
-    },
-    [creators, powerLevels]
-  );
-
-  return {
-    hasMorePower,
-  };
-};

src/app/hooks/useMemberPowerTag.ts

@@ -1,87 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
-import { getPowerLevelTag, PowerLevelTags, usePowerLevelTags } from './usePowerLevelTags';
-import { IPowerLevels, readPowerLevel } from './usePowerLevels';
-import { MemberPowerTag, MemberPowerTagIcon } from '../../types/matrix/room';
-import { useRoomCreatorsTag } from './useRoomCreatorsTag';
-import { ThemeKind } from './useTheme';
-import { accessibleColor } from '../plugins/color';
-
-export type GetMemberPowerTag = (userId: string) => MemberPowerTag;
-
-export const useGetMemberPowerTag = (
-  room: Room,
-  creators: Set<string>,
-  powerLevels: IPowerLevels
-) => {
-  const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-
-  const getMemberPowerTag: GetMemberPowerTag = useCallback(
-    (userId) => {
-      if (creators.has(userId)) {
-        return creatorsTag;
-      }
-
-      const power = readPowerLevel.user(powerLevels, userId);
-      return getPowerLevelTag(powerLevelTags, power);
-    },
-    [creators, creatorsTag, powerLevels, powerLevelTags]
-  );
-
-  return getMemberPowerTag;
-};
-
-export const getPowerTagIconSrc = (
-  mx: MatrixClient,
-  useAuthentication: boolean,
-  icon: MemberPowerTagIcon
-): string | undefined =>
-  icon?.key?.startsWith('mxc://')
-    ? mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻'
-    : icon?.key;
-
-export const useAccessiblePowerTagColors = (
-  themeKind: ThemeKind,
-  creatorsTag: MemberPowerTag,
-  powerLevelTags: PowerLevelTags
-): Map<string, string> => {
-  const accessibleColors: Map<string, string> = useMemo(() => {
-    const colors: Map<string, string> = new Map();
-    if (creatorsTag.color) {
-      colors.set(creatorsTag.color, accessibleColor(themeKind, creatorsTag.color));
-    }
-
-    Object.values(powerLevelTags).forEach((tag) => {
-      const { color } = tag;
-      if (!color) return;
-
-      colors.set(color, accessibleColor(themeKind, color));
-    });
-
-    return colors;
-  }, [powerLevelTags, creatorsTag, themeKind]);
-
-  return accessibleColors;
-};
-
-export const useFlattenPowerTagMembers = (
-  members: RoomMember[],
-  getTag: GetMemberPowerTag
-): Array<MemberPowerTag | RoomMember> => {
-  const PLTagOrRoomMember = useMemo(() => {
-    let prevTag: MemberPowerTag | undefined;
-    const tagOrMember: Array<MemberPowerTag | RoomMember> = [];
-    members.forEach((member) => {
-      const tag = getTag(member.userId);
-      if (tag !== prevTag) {
-        prevTag = tag;
-        tagOrMember.push(tag);
-      }
-      tagOrMember.push(member);
-    });
-    return tagOrMember;
-  }, [members, getTag]);
-
-  return PLTagOrRoomMember;
-};

src/app/hooks/useMemberSort.ts

@@ -1,5 +1,5 @@
 import { RoomMember } from 'matrix-js-sdk';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 export const MemberSort = {
   Ascending: (a: RoomMember, b: RoomMember) =>
@@ -46,20 +46,3 @@ export const useMemberSort = (index: number, memberSort: MemberSortItem[]): Memb
   const item = memberSort[index] ?? memberSort[0];
   return item;
 };
-
-export const useMemberPowerSort = (creators: Set<string>): MemberSortFn => {
-  const sort: MemberSortFn = useCallback(
-    (a, b) => {
-      if (creators.has(a.userId) && creators.has(b.userId)) {
-        return 0;
-      }
-      if (creators.has(a.userId)) return -1;
-      if (creators.has(b.userId)) return 1;
-
-      return b.powerLevel - a.powerLevel;
-    },
-    [creators]
-  );
-
-  return sort;
-};

src/app/hooks/useMembership.ts

@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Room, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk';
-import { Membership } from '../../types/matrix/room';
-
-export const useMembership = (room: Room, userId: string): Membership => {
-  const member = room.getMember(userId);
-
-  const [membership, setMembership] = useState<Membership>(
-    () => (member?.membership as Membership | undefined) ?? Membership.Leave
-  );
-
-  useEffect(() => {
-    const handleMembershipChange: RoomMemberEventHandlerMap[RoomMemberEvent.Membership] = (
-      event,
-      m
-    ) => {
-      if (event.getRoomId() === room.roomId && m.userId === userId) {
-        setMembership((m.membership as Membership | undefined) ?? Membership.Leave);
-      }
-    };
-    member?.on(RoomMemberEvent.Membership, handleMembershipChange);
-    return () => {
-      member?.removeListener(RoomMemberEvent.Membership, handleMembershipChange);
-    };
-  }, [room, member, userId]);
-
-  return membership;
-};

src/app/hooks/useMentionClickHandler.ts

@@ -3,17 +3,14 @@ import { useNavigate } from 'react-router-dom';
 import { useRoomNavigate } from './useRoomNavigate';
 import { useMatrixClient } from './useMatrixClient';
 import { isRoomId, isUserId } from '../utils/matrix';
+import { openProfileViewer } from '../../client/action/navigation';
 import { getHomeRoomPath, withSearchParam } from '../pages/pathUtils';
 import { _RoomSearchParams } from '../pages/paths';
-import { useOpenUserRoomProfile } from '../state/hooks/userRoomProfile';
-import { useSpaceOptionally } from './useSpace';
 
 export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLElement> => {
   const mx = useMatrixClient();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const navigate = useNavigate();
-  const openProfile = useOpenUserRoomProfile();
-  const space = useSpaceOptionally();
 
   const handleClick: ReactEventHandler<HTMLElement> = useCallback(
     (evt) => {
@@ -24,7 +21,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
       if (typeof mentionId !== 'string') return;
 
       if (isUserId(mentionId)) {
-        openProfile(roomId, space?.roomId, mentionId, target.getBoundingClientRect());
+        openProfileViewer(mentionId, roomId);
         return;
       }
 
@@ -40,7 +37,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 
       navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
     },
-    [mx, navigate, navigateRoom, navigateSpace, roomId, space, openProfile]
+    [mx, navigate, navigateRoom, navigateSpace, roomId]
   );
 
   return handleClick;

src/app/hooks/useMutualRooms.ts

@@ -1,30 +0,0 @@
-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/hooks/usePowerLevelTags.ts

@@ -1,24 +1,29 @@
-import { Room } from 'matrix-js-sdk';
-import { useMemo } from 'react';
+import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
+import { useCallback, useMemo } from 'react';
 import { IPowerLevels } from './usePowerLevels';
 import { useStateEvent } from './useStateEvent';
-import { MemberPowerTag, StateEvent } from '../../types/matrix/room';
+import { StateEvent } from '../../types/matrix/room';
+import { IImageInfo } from '../../types/matrix/common';
+import { ThemeKind } from './useTheme';
+import { accessibleColor } from '../plugins/color';
 
-export type PowerLevelTags = Record<number, MemberPowerTag>;
+export type PowerLevelTagIcon = {
+  key?: string;
+  info?: IImageInfo;
+};
+export type PowerLevelTag = {
+  name: string;
+  color?: string;
+  icon?: PowerLevelTagIcon;
+};
 
-const powerSortFn = (a: number, b: number) => b - a;
-const sortPowers = (powers: number[]): number[] => powers.sort(powerSortFn);
+export type PowerLevelTags = Record<number, PowerLevelTag>;
+
+export const powerSortFn = (a: number, b: number) => b - a;
+export const sortPowers = (powers: number[]): number[] => powers.sort(powerSortFn);
 
 export const getPowers = (tags: PowerLevelTags): number[] => {
-  const powers: number[] = Object.keys(tags)
-    .map((p) => {
-      const power = parseInt(p, 10);
-      if (Number.isNaN(power)) {
-        return undefined;
-      }
-      return power;
-    })
-    .filter((power) => typeof power === 'number');
+  const powers: number[] = Object.keys(tags).map((p) => parseInt(p, 10));
 
   return sortPowers(powers);
 };
@@ -50,8 +55,8 @@ const DEFAULT_TAGS: PowerLevelTags = {
     name: 'Goku',
     color: '#ff6a00',
   },
-  150: {
-    name: 'Co-Founder',
+  102: {
+    name: 'Goku Reborn',
     color: '#ff6a7f',
   },
   101: {
@@ -76,7 +81,7 @@ const DEFAULT_TAGS: PowerLevelTags = {
   },
 };
 
-const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): MemberPowerTag => {
+const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): PowerLevelTag => {
   const highToLow = sortPowers(getPowers(powerLevelTags));
 
   const tagPower = highToLow.find((p) => p < power);
@@ -87,7 +92,12 @@ const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): Mem
   };
 };
 
-export const usePowerLevelTags = (room: Room, powerLevels: IPowerLevels): PowerLevelTags => {
+export type GetPowerLevelTag = (powerLevel: number) => PowerLevelTag;
+
+export const usePowerLevelTags = (
+  room: Room,
+  powerLevels: IPowerLevels
+): [PowerLevelTags, GetPowerLevelTag] => {
   const tagsEvent = useStateEvent(room, StateEvent.PowerLevelTags);
 
   const powerLevelTags: PowerLevelTags = useMemo(() => {
@@ -104,13 +114,66 @@ export const usePowerLevelTags = (room: Room, powerLevels: IPowerLevels): PowerL
     return powerToTags;
   }, [powerLevels, tagsEvent]);
 
-  return powerLevelTags;
+  const getTag: GetPowerLevelTag = useCallback(
+    (power) => {
+      const tag: PowerLevelTag | undefined = powerLevelTags[power];
+      return tag ?? generateFallbackTag(DEFAULT_TAGS, power);
+    },
+    [powerLevelTags]
+  );
+
+  return [powerLevelTags, getTag];
 };
 
-export const getPowerLevelTag = (
-  powerLevelTags: PowerLevelTags,
-  powerLevel: number
-): MemberPowerTag => {
-  const tag: MemberPowerTag | undefined = powerLevelTags[powerLevel];
-  return tag ?? generateFallbackTag(powerLevelTags, powerLevel);
+export const useFlattenPowerLevelTagMembers = (
+  members: RoomMember[],
+  getPowerLevel: (userId: string) => number,
+  getTag: GetPowerLevelTag
+): Array<PowerLevelTag | RoomMember> => {
+  const PLTagOrRoomMember = useMemo(() => {
+    let prevTag: PowerLevelTag | undefined;
+    const tagOrMember: Array<PowerLevelTag | RoomMember> = [];
+    members.forEach((member) => {
+      const memberPL = getPowerLevel(member.userId);
+      const tag = getTag(memberPL);
+      if (tag !== prevTag) {
+        prevTag = tag;
+        tagOrMember.push(tag);
+      }
+      tagOrMember.push(member);
+    });
+    return tagOrMember;
+  }, [members, getTag, getPowerLevel]);
+
+  return PLTagOrRoomMember;
+};
+
+export const getTagIconSrc = (
+  mx: MatrixClient,
+  useAuthentication: boolean,
+  icon: PowerLevelTagIcon
+): string | undefined =>
+  icon?.key?.startsWith('mxc://')
+    ? mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻'
+    : icon?.key;
+
+export const useAccessibleTagColors = (
+  themeKind: ThemeKind,
+  powerLevelTags: PowerLevelTags
+): Map<string, string> => {
+  const accessibleColors: Map<string, string> = useMemo(() => {
+    const colors: Map<string, string> = new Map();
+
+    getPowers(powerLevelTags).forEach((power) => {
+      const tag = powerLevelTags[power];
+      const { color } = tag;
+      if (!color) return;
+
+      colors.set(color, accessibleColor(themeKind, color));
+    });
+
+    return colors;
+  }, [powerLevelTags, themeKind]);
+
+  return accessibleColors;
 };

src/app/hooks/usePowerLevels.ts

@@ -58,11 +58,10 @@ const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
   });
 
 const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
-  const plContent = mEvent?.getContent<IPowerLevels>();
+  const pl = mEvent?.getContent<IPowerLevels>();
+  if (!pl) return DEFAULT_POWER_LEVELS;
 
-  const powerLevels = !plContent ? DEFAULT_POWER_LEVELS : fillMissingPowers(plContent);
-
-  return powerLevels;
+  return fillMissingPowers(pl);
 };
 
 export function usePowerLevels(room: Room): IPowerLevels {
@@ -121,8 +120,33 @@ export const useRoomsPowerLevels = (rooms: Room[]): Map<string, IPowerLevels> =>
   return roomToPowerLevels;
 };
 
+export type GetPowerLevel = (powerLevels: IPowerLevels, userId: string | undefined) => number;
+export type CanSend = (
+  powerLevels: IPowerLevels,
+  eventType: string | undefined,
+  powerLevel: number
+) => boolean;
+export type CanDoAction = (
+  powerLevels: IPowerLevels,
+  action: PowerLevelActions,
+  powerLevel: number
+) => boolean;
+export type CanDoNotificationAction = (
+  powerLevels: IPowerLevels,
+  action: PowerLevelNotificationsAction,
+  powerLevel: number
+) => boolean;
+
+export type PowerLevelsAPI = {
+  getPowerLevel: GetPowerLevel;
+  canSendEvent: CanSend;
+  canSendStateEvent: CanSend;
+  canDoAction: CanDoAction;
+  canDoNotificationAction: CanDoNotificationAction;
+};
+
 export type ReadPowerLevelAPI = {
-  user: (powerLevels: IPowerLevels, userId: string | undefined) => number;
+  user: GetPowerLevel;
   event: (powerLevels: IPowerLevels, eventType: string | undefined) => number;
   state: (powerLevels: IPowerLevels, eventType: string | undefined) => number;
   action: (powerLevels: IPowerLevels, action: PowerLevelActions) => number;
@@ -132,7 +156,6 @@ export type ReadPowerLevelAPI = {
 export const readPowerLevel: ReadPowerLevelAPI = {
   user: (powerLevels, userId) => {
     const { users_default: usersDefault, users } = powerLevels;
-
     if (userId && users && typeof users[userId] === 'number') {
       return users[userId];
     }
@@ -168,13 +191,63 @@ export const readPowerLevel: ReadPowerLevelAPI = {
   },
 };
 
-export const useGetMemberPowerLevel = (powerLevels: IPowerLevels) => {
-  const callback = useCallback(
-    (userId?: string): number => readPowerLevel.user(powerLevels, userId),
+export const powerLevelAPI: PowerLevelsAPI = {
+  getPowerLevel: (powerLevels, userId) => readPowerLevel.user(powerLevels, userId),
+  canSendEvent: (powerLevels, eventType, powerLevel) => {
+    const requiredPL = readPowerLevel.event(powerLevels, eventType);
+    return powerLevel >= requiredPL;
+  },
+  canSendStateEvent: (powerLevels, eventType, powerLevel) => {
+    const requiredPL = readPowerLevel.state(powerLevels, eventType);
+    return powerLevel >= requiredPL;
+  },
+  canDoAction: (powerLevels, action, powerLevel) => {
+    const requiredPL = readPowerLevel.action(powerLevels, action);
+    return powerLevel >= requiredPL;
+  },
+  canDoNotificationAction: (powerLevels, action, powerLevel) => {
+    const requiredPL = readPowerLevel.notification(powerLevels, action);
+    return powerLevel >= requiredPL;
+  },
+};
+
+export const usePowerLevelsAPI = (powerLevels: IPowerLevels) => {
+  const getPowerLevel = useCallback(
+    (userId: string | undefined) => powerLevelAPI.getPowerLevel(powerLevels, userId),
     [powerLevels]
   );
 
-  return callback;
+  const canSendEvent = useCallback(
+    (eventType: string | undefined, powerLevel: number) =>
+      powerLevelAPI.canSendEvent(powerLevels, eventType, powerLevel),
+    [powerLevels]
+  );
+
+  const canSendStateEvent = useCallback(
+    (eventType: string | undefined, powerLevel: number) =>
+      powerLevelAPI.canSendStateEvent(powerLevels, eventType, powerLevel),
+    [powerLevels]
+  );
+
+  const canDoAction = useCallback(
+    (action: PowerLevelActions, powerLevel: number) =>
+      powerLevelAPI.canDoAction(powerLevels, action, powerLevel),
+    [powerLevels]
+  );
+
+  const canDoNotificationAction = useCallback(
+    (action: PowerLevelNotificationsAction, powerLevel: number) =>
+      powerLevelAPI.canDoNotificationAction(powerLevels, action, powerLevel),
+    [powerLevels]
+  );
+
+  return {
+    getPowerLevel,
+    canSendEvent,
+    canSendStateEvent,
+    canDoAction,
+    canDoNotificationAction,
+  };
 };
 
 /**

src/app/hooks/useRoomCreators.ts

@@ -1,49 +0,0 @@
-import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
-import { useMemo } from 'react';
-import { useStateEvent } from './useStateEvent';
-import { IRoomCreateContent, StateEvent } from '../../types/matrix/room';
-import { creatorsSupported } from '../utils/matrix';
-import { getStateEvent } from '../utils/room';
-
-export const getRoomCreators = (createEvent: MatrixEvent): Set<string> => {
-  const createContent = createEvent.getContent<IRoomCreateContent>();
-
-  const creators: Set<string> = new Set();
-
-  if (!creatorsSupported(createContent.room_version)) return creators;
-
-  if (createEvent.event.sender) {
-    creators.add(createEvent.event.sender);
-  }
-
-  if ('additional_creators' in createContent && Array.isArray(createContent.additional_creators)) {
-    createContent.additional_creators.forEach((creator) => {
-      if (typeof creator === 'string') {
-        creators.add(creator);
-      }
-    });
-  }
-
-  return creators;
-};
-
-export const useRoomCreators = (room: Room): Set<string> => {
-  const createEvent = useStateEvent(room, StateEvent.RoomCreate);
-
-  const creators = useMemo(
-    () => (createEvent ? getRoomCreators(createEvent) : new Set<string>()),
-    [createEvent]
-  );
-
-  return creators;
-};
-
-export const getRoomCreatorsForRoomId = (mx: MatrixClient, roomId: string): Set<string> => {
-  const room = mx.getRoom(roomId);
-  if (!room) return new Set();
-
-  const createEvent = getStateEvent(room, StateEvent.RoomCreate);
-  if (!createEvent) return new Set();
-
-  return getRoomCreators(createEvent);
-};

src/app/hooks/useRoomCreatorsTag.ts

@@ -1,8 +0,0 @@
-import { MemberPowerTag } from '../../types/matrix/room';
-
-const DEFAULT_TAG: MemberPowerTag = {
-  name: 'Founder',
-  color: '#0000ff',
-};
-
-export const useRoomCreatorsTag = (): MemberPowerTag => DEFAULT_TAG;

src/app/hooks/useRoomPermissions.ts

@@ -1,60 +0,0 @@
-import { useMemo } from 'react';
-import {
-  IPowerLevels,
-  PowerLevelActions,
-  PowerLevelNotificationsAction,
-  readPowerLevel,
-} from './usePowerLevels';
-
-export type RoomPermissionsAPI = {
-  event: (type: string, userId: string) => boolean;
-  stateEvent: (type: string, userId: string) => boolean;
-  action: (action: PowerLevelActions, userId: string) => boolean;
-  notificationAction: (action: PowerLevelNotificationsAction, userId: string) => boolean;
-};
-
-export const getRoomPermissionsAPI = (
-  creators: Set<string>,
-  powerLevels: IPowerLevels
-): RoomPermissionsAPI => {
-  const api: RoomPermissionsAPI = {
-    event: (type, userId) => {
-      if (creators.has(userId)) return true;
-      const userPower = readPowerLevel.user(powerLevels, userId);
-      const requiredPL = readPowerLevel.event(powerLevels, type);
-      return userPower >= requiredPL;
-    },
-    stateEvent: (type, userId) => {
-      if (creators.has(userId)) return true;
-      const userPower = readPowerLevel.user(powerLevels, userId);
-      const requiredPL = readPowerLevel.state(powerLevels, type);
-      return userPower >= requiredPL;
-    },
-    action: (action, userId) => {
-      if (creators.has(userId)) return true;
-      const userPower = readPowerLevel.user(powerLevels, userId);
-      const requiredPL = readPowerLevel.action(powerLevels, action);
-      return userPower >= requiredPL;
-    },
-    notificationAction: (action, userId) => {
-      if (creators.has(userId)) return true;
-      const userPower = readPowerLevel.user(powerLevels, userId);
-      const requiredPL = readPowerLevel.notification(powerLevels, action);
-      return userPower >= requiredPL;
-    },
-  };
-
-  return api;
-};
-
-export const useRoomPermissions = (
-  creators: Set<string>,
-  powerLevels: IPowerLevels
-): RoomPermissionsAPI => {
-  const api: RoomPermissionsAPI = useMemo(
-    () => getRoomPermissionsAPI(creators, powerLevels),
-    [creators, powerLevels]
-  );
-
-  return api;
-};

src/app/hooks/useUserPresence.ts

@@ -1,58 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { User, UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
-import { useMatrixClient } from './useMatrixClient';
-
-export enum Presence {
-  Online = 'online',
-  Unavailable = 'unavailable',
-  Offline = 'offline',
-}
-
-export type UserPresence = {
-  presence: Presence;
-  status?: string;
-  active: boolean;
-  lastActiveTs?: number;
-};
-
-const getUserPresence = (user: User): UserPresence => ({
-  presence: user.presence as Presence,
-  status: user.presenceStatusMsg,
-  active: user.currentlyActive,
-  lastActiveTs: user.getLastActiveTs(),
-});
-
-export const useUserPresence = (userId: string): UserPresence | undefined => {
-  const mx = useMatrixClient();
-  const user = mx.getUser(userId);
-
-  const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined));
-
-  useEffect(() => {
-    const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => {
-      if (u.userId === user?.userId) {
-        setPresence(getUserPresence(user));
-      }
-    };
-    user?.on(UserEvent.Presence, updatePresence);
-    user?.on(UserEvent.CurrentlyActive, updatePresence);
-    user?.on(UserEvent.LastPresenceTs, updatePresence);
-    return () => {
-      user?.removeListener(UserEvent.Presence, updatePresence);
-      user?.removeListener(UserEvent.CurrentlyActive, updatePresence);
-      user?.removeListener(UserEvent.LastPresenceTs, updatePresence);
-    };
-  }, [user]);
-
-  return presence;
-};
-
-export const usePresenceLabel = (): Record<Presence, string> =>
-  useMemo(
-    () => ({
-      [Presence.Online]: 'Active',
-      [Presence.Unavailable]: 'Busy',
-      [Presence.Offline]: 'Away',
-    }),
-    []
-  );

src/app/pages/Router.tsx

@@ -28,7 +28,6 @@ import {
   _ROOM_PATH,
   _SEARCH_PATH,
   _SERVER_PATH,
-  CREATE_PATH,
 } from './paths';
 import { isAuthenticated } from '../../client/state/auth';
 import {
@@ -62,11 +61,6 @@ 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';
-import { CreateRoomModalRenderer } from '../features/create-room';
-import { HomeCreateRoom } from './client/home/CreateRoom';
-import { Create } from './client/create';
-import { CreateSpaceModalRenderer } from '../features/create-space';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -131,9 +125,6 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                       >
                         <Outlet />
                       </ClientLayout>
-                      <UserRoomProfileRenderer />
-                      <CreateRoomModalRenderer />
-                      <CreateSpaceModalRenderer />
                       <RoomSettingsRenderer />
                       <SpaceSettingsRenderer />
                       <ReceiveSelfDeviceVerification />
@@ -161,7 +152,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           }
         >
           {mobile ? null : <Route index element={<WelcomePage />} />}
-          <Route path={_CREATE_PATH} element={<HomeCreateRoom />} />
+          <Route path={_CREATE_PATH} element={<p>create</p>} />
           <Route path={_JOIN_PATH} element={<p>join</p>} />
           <Route path={_SEARCH_PATH} element={<HomeSearch />} />
           <Route
@@ -262,7 +253,6 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           <Route path={_FEATURED_PATH} element={<FeaturedRooms />} />
           <Route path={_SERVER_PATH} element={<PublicRooms />} />
         </Route>
-        <Route path={CREATE_PATH} element={<Create />} />
         <Route
           path={INBOX_PATH}
           element={

src/app/pages/auth/AuthFooter.tsx

@@ -15,7 +15,7 @@ export function AuthFooter() {
         target="_blank"
         rel="noreferrer"
       >
-        v4.9.0
+        v4.8.1
       </Text>
       <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
         Twitter

src/app/pages/client/SidebarNav.tsx

@@ -19,8 +19,7 @@ import {
   SettingsTab,
   UnverifiedTab,
 } from './sidebar';
-import { openSearch } from '../../../client/action/navigation';
-import { CreateTab } from './sidebar/CreateTab';
+import { openCreateRoom, openSearch } from '../../../client/action/navigation';
 
 export function SidebarNav() {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -38,7 +37,20 @@ export function SidebarNav() {
             <SidebarStackSeparator />
             <SidebarStack>
               <ExploreTab />
-              <CreateTab />
+              <SidebarItem>
+                <SidebarItemTooltip tooltip="Create Space">
+                  {(triggerRef) => (
+                    <SidebarAvatar
+                      as="button"
+                      ref={triggerRef}
+                      outlined
+                      onClick={() => openCreateRoom(true)}
+                    >
+                      <Icon src={Icons.Plus} />
+                    </SidebarAvatar>
+                  )}
+                </SidebarItemTooltip>
+              </SidebarItem>
             </SidebarStack>
           </Scroll>
         }

src/app/pages/client/WelcomePage.tsx

@@ -24,7 +24,7 @@ export function WelcomePage() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  v4.9.0
+                  v4.8.1
                 </a>
               </span>
             }

src/app/pages/client/create/Create.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Box, Icon, Icons, Scroll } from 'folds';
-import {
-  Page,
-  PageContent,
-  PageContentCenter,
-  PageHero,
-  PageHeroSection,
-} from '../../../components/page';
-import { CreateSpaceForm } from '../../../features/create-space';
-import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
-
-export function Create() {
-  const { navigateSpace } = useRoomNavigate();
-
-  return (
-    <Page>
-      <Box grow="Yes">
-        <Scroll hideTrack visibility="Hover">
-          <PageContent>
-            <PageContentCenter>
-              <PageHeroSection>
-                <Box direction="Column" gap="700">
-                  <PageHero
-                    icon={<Icon size="600" src={Icons.Space} />}
-                    title="Create Space"
-                    subTitle="Build a space for your community."
-                  />
-                  <CreateSpaceForm onCreate={navigateSpace} />
-                </Box>
-              </PageHeroSection>
-            </PageContentCenter>
-          </PageContent>
-        </Scroll>
-      </Box>
-    </Page>
-  );
-}

src/app/pages/client/create/index.ts

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

src/app/pages/client/home/CreateRoom.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { Box, Icon, Icons, Scroll, IconButton } from 'folds';
-import {
-  Page,
-  PageContent,
-  PageContentCenter,
-  PageHeader,
-  PageHero,
-  PageHeroSection,
-} from '../../../components/page';
-import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
-import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { CreateRoomForm } from '../../../features/create-room';
-import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
-
-export function HomeCreateRoom() {
-  const screenSize = useScreenSizeContext();
-
-  const { navigateRoom } = useRoomNavigate();
-
-  return (
-    <Page>
-      {screenSize === ScreenSize.Mobile && (
-        <PageHeader balance outlined={false}>
-          <Box grow="Yes" alignItems="Center" gap="200">
-            <BackRouteHandler>
-              {(onBack) => (
-                <IconButton onClick={onBack}>
-                  <Icon src={Icons.ArrowLeft} />
-                </IconButton>
-              )}
-            </BackRouteHandler>
-          </Box>
-        </PageHeader>
-      )}
-      <Box grow="Yes">
-        <Scroll hideTrack visibility="Hover">
-          <PageContent>
-            <PageContentCenter>
-              <PageHeroSection>
-                <Box direction="Column" gap="700">
-                  <PageHero
-                    icon={<Icon size="600" src={Icons.Hash} />}
-                    title="Create Room"
-                    subTitle="Build a Room for Real-Time Conversations"
-                  />
-                  <CreateRoomForm onCreate={navigateRoom} />
-                </Box>
-              </PageHeroSection>
-            </PageContentCenter>
-          </PageContent>
-        </Scroll>
-      </Box>
-    </Page>
-  );
-}

src/app/pages/client/home/Home.tsx

@@ -29,18 +29,10 @@ import {
   NavItemContent,
   NavLink,
 } from '../../../components/nav';
-import {
-  getExplorePath,
-  getHomeCreatePath,
-  getHomeRoomPath,
-  getHomeSearchPath,
-} from '../../pathUtils';
+import { getExplorePath, getHomeRoomPath, getHomeSearchPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
-import {
-  useHomeCreateSelected,
-  useHomeSearchSelected,
-} from '../../../hooks/router/useHomeSelected';
+import { useHomeSearchSelected } from '../../../hooks/router/useHomeSelected';
 import { useHomeRooms } from './useHomeRooms';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -49,7 +41,7 @@ import { makeNavCategoryId } from '../../../state/closedNavCategories';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
-import { openJoinAlias } from '../../../../client/action/navigation';
+import { openCreateRoom, openJoinAlias } from '../../../../client/action/navigation';
 import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { markAsRead } from '../../../../client/action/notifications';
@@ -182,7 +174,7 @@ function HomeEmpty() {
         }
         options={
           <>
-            <Button onClick={() => navigate(getHomeCreatePath())} variant="Secondary" size="300">
+            <Button onClick={() => openCreateRoom()} variant="Secondary" size="300">
               <Text size="B300" truncate>
                 Create Room
               </Text>
@@ -212,10 +204,8 @@ export function Home() {
   const rooms = useHomeRooms();
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const roomToUnread = useAtomValue(roomToUnreadAtom);
-  const navigate = useNavigate();
 
   const selectedRoomId = useSelectedRoom();
-  const createRoomSelected = useHomeCreateSelected();
   const searchSelected = useHomeSearchSelected();
   const noRoomToDisplay = rooms.length === 0;
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
@@ -252,8 +242,8 @@ export function Home() {
         <PageNavContent scrollRef={scrollRef}>
           <Box direction="Column" gap="300">
             <NavCategory>
-              <NavItem variant="Background" radii="400" aria-selected={createRoomSelected}>
-                <NavButton onClick={() => navigate(getHomeCreatePath())}>
+              <NavItem variant="Background" radii="400">
+                <NavButton onClick={() => openCreateRoom()}>
                   <NavItemContent>
                     <Box as="span" grow="Yes" alignItems="Center" gap="200">
                       <Avatar size="200" radii="400">

src/app/pages/client/inbox/Notifications.tsx

@@ -84,19 +84,16 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
-import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
+import {
+  getTagIconSrc,
+  useAccessibleTagColors,
+  usePowerLevelTags,
+} from '../../../hooks/usePowerLevelTags';
 import { useTheme } from '../../../hooks/useTheme';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { mDirectAtom } from '../../../state/mDirectList';
-import {
-  getPowerTagIconSrc,
-  useAccessiblePowerTagColors,
-  useGetMemberPowerTag,
-} from '../../../hooks/useMemberPowerTag';
-import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -227,14 +224,10 @@ function RoomNotificationsGroupComp({
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
 
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
-
+  const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
+  const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const theme = useTheme();
-  const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
+  const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
 
   const mentionClickHandler = useMentionClickHandler(room.roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
@@ -454,12 +447,13 @@ function RoomNotificationsGroupComp({
           const threadRootId =
             relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
 
-          const memberPowerTag = getMemberPowerTag(event.sender);
-          const tagColor = memberPowerTag?.color
-            ? accessibleTagColors?.get(memberPowerTag.color)
+          const senderPowerLevel = getPowerLevel(event.sender);
+          const powerLevelTag = getPowerLevelTag(senderPowerLevel);
+          const tagColor = powerLevelTag?.color
+            ? accessibleTagColors?.get(powerLevelTag.color)
             : undefined;
-          const tagIconSrc = memberPowerTag?.icon
-            ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
+          const tagIconSrc = powerLevelTag?.icon
+            ? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
             : undefined;
 
           const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
@@ -529,7 +523,8 @@ function RoomNotificationsGroupComp({
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
-                    getMemberPowerTag={getMemberPowerTag}
+                    getPowerLevel={getPowerLevel}
+                    getPowerLevelTag={getPowerLevelTag}
                     accessibleTagColors={accessibleTagColors}
                     legacyUsernameColor={legacyUsernameColor}
                   />

src/app/pages/client/sidebar/CreateTab.tsx

@@ -1,111 +0,0 @@
-import React, { MouseEventHandler, useState } from 'react';
-import { Box, config, Icon, Icons, Menu, PopOut, RectCords, Text } from 'folds';
-import FocusTrap from 'focus-trap-react';
-import { useNavigate } from 'react-router-dom';
-import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
-import { stopPropagation } from '../../../utils/keyboard';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SettingTile } from '../../../components/setting-tile';
-import { ContainerColor } from '../../../styles/ContainerColor.css';
-import { openJoinAlias } from '../../../../client/action/navigation';
-import { getCreatePath } from '../../pathUtils';
-import { useCreateSelected } from '../../../hooks/router/useCreateSelected';
-
-export function CreateTab() {
-  const createSelected = useCreateSelected();
-
-  const navigate = useNavigate();
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(menuCords ? undefined : evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleCreateSpace = () => {
-    navigate(getCreatePath());
-    setMenuCords(undefined);
-  };
-
-  const handleJoinWithAddress = () => {
-    openJoinAlias();
-    setMenuCords(undefined);
-  };
-
-  return (
-    <SidebarItem active={createSelected}>
-      <SidebarItemTooltip tooltip="Add Space">
-        {(triggerRef) => (
-          <PopOut
-            anchor={menuCords}
-            position="Right"
-            align="Center"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  returnFocusOnDeactivate: false,
-                  initialFocus: false,
-                  onDeactivate: () => setMenuCords(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) =>
-                    evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
-                  isKeyBackward: (evt: KeyboardEvent) =>
-                    evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Menu>
-                  <Box direction="Column">
-                    <SequenceCard
-                      style={{ padding: config.space.S300 }}
-                      variant="Surface"
-                      direction="Column"
-                      gap="100"
-                      radii="0"
-                      as="button"
-                      type="button"
-                      onClick={handleCreateSpace}
-                    >
-                      <SettingTile before={<Icon size="400" src={Icons.Space} />}>
-                        <Text size="H6">Create Space</Text>
-                        <Text size="T300" priority="300">
-                          Build a space for your community.
-                        </Text>
-                      </SettingTile>
-                    </SequenceCard>
-                    <SequenceCard
-                      style={{ padding: config.space.S300 }}
-                      variant="Surface"
-                      direction="Column"
-                      gap="100"
-                      radii="0"
-                      as="button"
-                      type="button"
-                      onClick={handleJoinWithAddress}
-                    >
-                      <SettingTile before={<Icon size="400" src={Icons.Link} />}>
-                        <Text size="H6">Join with Address</Text>
-                        <Text size="T300" priority="300">
-                          Become a part of existing community.
-                        </Text>
-                      </SettingTile>
-                    </SequenceCard>
-                  </Box>
-                </Menu>
-              </FocusTrap>
-            }
-          >
-            <SidebarAvatar
-              className={menuCords ? ContainerColor({ variant: 'Surface' }) : undefined}
-              as="button"
-              ref={triggerRef}
-              outlined
-              onClick={handleMenu}
-            >
-              <Icon src={Icons.Plus} />
-            </SidebarAvatar>
-          </PopOut>
-        )}
-      </SidebarItemTooltip>
-    </SidebarItem>
-  );
-}

src/app/pages/client/sidebar/SettingsTab.tsx

@@ -28,7 +28,7 @@ export function SettingsTab() {
 
   return (
     <SidebarItem active={settings}>
-      <SidebarItemTooltip tooltip="User Settings">
+      <SidebarItemTooltip tooltip={displayName}>
         {(triggerRef) => (
           <SidebarAvatar as="button" ref={triggerRef} onClick={openSettings}>
             <UserAvatar

src/app/pages/client/sidebar/SpaceTabs.tsx

@@ -77,7 +77,7 @@ import { AccountDataEvent } from '../../../../types/matrix/accountData';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useOpenedSidebarFolderAtom } from '../../../state/hooks/openedSidebarFolder';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { markAsRead } from '../../../../client/action/notifications';
@@ -91,8 +91,6 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 
 type SpaceMenuProps = {
   room: Room;
@@ -105,10 +103,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const roomToParents = useAtomValue(roomToParentsAtom);
     const powerLevels = usePowerLevels(room);
-    const creators = useRoomCreators(room);
-
-    const permissions = useRoomPermissions(creators, powerLevels);
-    const canInvite = permissions.action('invite', mx.getSafeUserId());
+    const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
+    const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
     const openSpaceSettings = useOpenSpaceSettings();
 
     const allChild = useSpaceChildren(

src/app/pages/client/space/Space.tsx

@@ -10,7 +10,6 @@ import { useAtom, useAtomValue } from 'jotai';
 import {
   Avatar,
   Box,
-  Button,
   Icon,
   IconButton,
   Icons,
@@ -19,9 +18,7 @@ import {
   MenuItem,
   PopOut,
   RectCords,
-  Spinner,
   Text,
-  color,
   config,
   toRem,
 } from 'folds';
@@ -56,7 +53,7 @@ import { useRoomName } from '../../../hooks/useRoomMeta';
 import { useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { openInviteUser } from '../../../../client/action/navigation';
 import { useRecursiveChildScopeFactory, useSpaceChildren } from '../../../state/hooks/roomList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
@@ -67,7 +64,7 @@ import { LeaveSpacePrompt } from '../../../components/leave-space-prompt';
 import { copyToClipboard } from '../../../utils/dom';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { useStateEvent } from '../../../hooks/useStateEvent';
-import { Membership, StateEvent } from '../../../../types/matrix/room';
+import { StateEvent } from '../../../../types/matrix/room';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
@@ -79,11 +76,6 @@ import {
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import { ContainerColor } from '../../../styles/ContainerColor.css';
-import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { BreakWord } from '../../../styles/Text.css';
 
 type SpaceMenuProps = {
   room: Room;
@@ -95,10 +87,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   const [developerTools] = useSetting(settingsAtom, 'developerTools');
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-  const canInvite = permissions.action('invite', mx.getSafeUserId());
+  const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
+  const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
   const openSpaceSettings = useOpenSpaceSettings();
   const { navigateRoom } = useRoomNavigate();
 
@@ -294,75 +284,6 @@ function SpaceHeader() {
   );
 }
 
-type SpaceTombstoneProps = { roomId: string; replacementRoomId: string };
-export function SpaceTombstone({ roomId, replacementRoomId }: SpaceTombstoneProps) {
-  const mx = useMatrixClient();
-  const { navigateRoom } = useRoomNavigate();
-
-  const [joinState, handleJoin] = useAsyncCallback(
-    useCallback(() => {
-      const currentRoom = mx.getRoom(roomId);
-      const via = currentRoom ? getViaServers(currentRoom) : [];
-      return mx.joinRoom(replacementRoomId, {
-        viaServers: via,
-      });
-    }, [mx, roomId, replacementRoomId])
-  );
-  const replacementRoom = mx.getRoom(replacementRoomId);
-
-  const handleOpen = () => {
-    if (replacementRoom) navigateRoom(replacementRoom.roomId);
-    if (joinState.status === AsyncStatus.Success) navigateRoom(joinState.data.roomId);
-  };
-
-  return (
-    <Box
-      style={{
-        padding: config.space.S200,
-        borderRadius: config.radii.R400,
-        borderWidth: config.borderWidth.B300,
-      }}
-      className={ContainerColor({ variant: 'Surface' })}
-      direction="Column"
-      gap="300"
-    >
-      <Box direction="Column" grow="Yes" gap="100">
-        <Text size="L400">Space Upgraded</Text>
-        <Text size="T200">This space has been replaced and is no longer active.</Text>
-        {joinState.status === AsyncStatus.Error && (
-          <Text className={BreakWord} style={{ color: color.Critical.Main }} size="T200">
-            {(joinState.error as any)?.message ?? 'Failed to join replacement space!'}
-          </Text>
-        )}
-      </Box>
-      <Box direction="Column" shrink="No">
-        {replacementRoom?.getMyMembership() === Membership.Join ||
-        joinState.status === AsyncStatus.Success ? (
-          <Button onClick={handleOpen} size="300" variant="Success" fill="Solid" radii="300">
-            <Text size="B300">Open New Space</Text>
-          </Button>
-        ) : (
-          <Button
-            onClick={handleJoin}
-            size="300"
-            variant="Primary"
-            fill="Solid"
-            radii="300"
-            before={
-              joinState.status === AsyncStatus.Loading && (
-                <Spinner size="100" variant="Primary" fill="Solid" />
-              )
-            }
-            disabled={joinState.status === AsyncStatus.Loading}
-          >
-            <Text size="B300">Join New Space</Text>
-          </Button>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
 export function Space() {
   const mx = useMatrixClient();
   const space = useSpace();
@@ -375,8 +296,6 @@ export function Space() {
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
   const notificationPreferences = useRoomsNotificationPreferencesContext();
 
-  const tombstoneEvent = useStateEvent(space, StateEvent.RoomTombstone);
-
   const selectedRoomId = useSelectedRoom();
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
@@ -432,12 +351,6 @@ export function Space() {
       <SpaceHeader />
       <PageNavContent scrollRef={scrollRef}>
         <Box direction="Column" gap="300">
-          {tombstoneEvent && (
-            <SpaceTombstone
-              roomId={space.roomId}
-              replacementRoomId={tombstoneEvent.getContent().replacement_room}
-            />
-          )}
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
               <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>