Gaboule/chat
1
0
Fork 0
Code Issues Pull requests Activity

Compare commits

base: Gaboule:34bed9acec199147d0aea71a9d3e0865a2c4f0b9
Branches Tags
Gaboule:dev
Gaboule:4.8.1
...
compare: Gaboule:2a30d18bd01beb0ccc9fc4f9644b038042ee144e
Branches Tags
Gaboule:dev
Gaboule:4.8.1

23 commits
34bed9acec ... 2a30d18bd0

Author SHA1 Message Date
anavoi
2a30d18bd0 add presence badge in member list 
Potential performance issues:
- In large rooms, we should only update the presence for the users shown in the scrollcontainer
 2025-08-27 12:10:36 +02:00
anavoi
03298013b3 Minor dependencies update 2025-08-27 11:48:42 +02:00
anavoi
f2e0d23c30 Fix fallback messages 2025-08-21 22:53:40 +02:00
anavoi
180111a02e Add shield icon when messaging in an encrypted room 2025-08-21 22:53:24 +02:00
anavoi
eb5e2b61c0 power level improvements 
changed default colors
added more presets
 2025-08-21 21:28:40 +02:00
Ajay Bura
724174f5fa New add existing room/space modal (#2451) 2025-08-21 21:28:40 +02:00
Ajay Bura
865467c7ca Fix message button opens left dm room (#2453) 2025-08-21 21:28:40 +02:00
Ajay Bura
b0f03a611a Fix incorrectly parsed mxid (#2452) 2025-08-21 21:28:40 +02:00
Krishan
ac1d398d42 Release v4.9.1 (#2446) 2025-08-21 21:28:40 +02:00
Ajay Bura
5dc0cf97e5 Add new join with address prompt (#2442) 2025-08-21 21:26:22 +02:00
Ajay Bura
2cda1812ce Fix type error when accessing FileList (#2441) 2025-08-21 21:26:22 +02:00
Ajay Bura
0ee4a2aa4d Open user profile at around mouse anchor (#2440) 2025-08-21 21:26:22 +02:00
Ajay Bura
db4aaa202a Hide block user button for own profile (#2439) 2025-08-21 21:26:22 +02:00
Ajay Bura
17dfbc47ce Fix room v12 mention pills (#2438) 2025-08-21 21:26:22 +02:00
Ajay Bura
198919454c Fix missing creators support using via (#2431) 
* add additional_creators in IRoomCreateContent type

* use creators in getViaServers

* consider creators in guessing perfect parent
 2025-08-21 21:26:22 +02:00
Ajay Bura
d40818af89 Open tombstone space as space (#2428) 2025-08-21 21:26:22 +02:00
Krishan
8d9b128501 Release v4.9.0 (#2421) 2025-08-21 21:26:22 +02:00
Ajay Bura
fa575fc09d Support room version 12 (#2399) 
* WIP - support room version 12

* add room creators hook

* revert changes from powerlevels

* improve use room creators hook

* add hook to get dm users

* add options to add creators in create room/space

* add member item component in member drawer

* remove unused import

* extract member drawer header component

* get room creators as set only if room version support them

* add room permissions hook

* support room v12 creators power

* make predecessor event id optional

* add info about founders in permissions

* allow to create infinite powers to room creators

* allow everyone with permission to create infinite power

* handle additional creators in room upgrade

* add option to follow space tombstone
 2025-08-21 21:24:05 +02:00
Ajay Bura
a79164318c Redesign user profile view (#2396) 
* WIP - new profile view

* render common rooms in user profile

* add presence component

* WIP - room user profile

* temp hide profile button

* show mutual rooms in spaces, rooms and direct messages categories

* add message button

* add option to change user powers in profile

* improve ban info and option to unban

* add share user button in user profile

* add option to block user in user profile

* improve blocked user alert body

* add moderation tool in user profile

* open profile view on left side in member drawer

* open new user profile in all places
 2025-08-21 21:16:38 +02:00
anavoi
9fc30bff57 change tooltip delay in sidebar items 2025-08-21 21:00:52 +02:00
anavoi
1e2548ad11 power level improvements 
changed default colors
added more presets
 2025-08-21 21:00:43 +02:00
anavoi
10d9e703f5 hide connecting header when syncing 2025-08-09 12:03:47 +02:00
anavoi
5f28824b8a update source code links and branding changes 2025-08-09 11:03:10 +02:00
107 changed files with 7399 additions and 3334 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.vscode/settings.json vendored
View file

@ -1,5 +1,8 @@
{ {
"editor.formatOnSave": true, "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.defaultFormatter": "esbenp.prettier-vscode",
"typescript.tsdk": "node_modules/typescript/lib" "typescript.tsdk": "node_modules/typescript/lib",
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
}
} }

4
README.md
View file

@ -1,4 +1,4 @@
# Cinny # Gaboule Chat (Cinny fork)
<p> <p>
<a href="https://github.com/ajbura/cinny/releases"> <a href="https://github.com/ajbura/cinny/releases">
<img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a> <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
@ -12,6 +12,8 @@
<img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a> <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
</p> </p>
This is a fork of [Cinny](https://github.com/cinnyapp/cinny).
A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch. A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
- [Roadmap](https://github.com/orgs/cinnyapp/projects/1) - [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
- [Contributing](./CONTRIBUTING.md) - [Contributing](./CONTRIBUTING.md)

29
config.json
View file

@ -1,38 +1,23 @@
{ {
"defaultHomeserver": 2, "defaultHomeserver": 0,
"homeserverList": [ "homeserverList": [
"converser.eu", "gaboule.com"
"envs.net",
"matrix.org",
"monero.social",
"mozilla.org",
"xmr.se"
], ],
"allowCustomHomeservers": true, "allowCustomHomeservers": true,
"featuredCommunities": { "featuredCommunities": {
"openAsDefault": false, "openAsDefault": true,
"spaces": [ "spaces": [
"#cinny-space:matrix.org", "#gaboule:gaboule.com"
"#community:matrix.org",
"#space:envs.net",
"#science-space:matrix.org",
"#libregaming-games:tchncs.de",
"#mathematics-on:matrix.org"
], ],
"rooms": [ "rooms": [
"#cinny:matrix.org", "#general:gaboule.com"
"#freesoftware:matrix.org",
"#pcapdroid:matrix.org",
"#gentoo:matrix.org",
"#PrivSec.dev:arcticfoxes.net",
"#disroot:aria-net.org"
], ],
"servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"] "servers": ["gaboule.com"]
}, },
"hashRouter": { "hashRouter": {
"enabled": false, "enabled": true,
"basename": "/" "basename": "/"
} }
} }

4
index.html
View file

@ -1,10 +1,10 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Cinny</title> <title>Gaboule Chat</title>
<meta name="name" content="Cinny" /> <meta name="name" content="Cinny" />
<meta name="author" content="Ajay Bura" /> <meta name="author" content="Ajay Bura" />
<meta <meta

4961
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

134
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "cinny", "name": "cinny",
"version": "4.8.1", "version": "4.9.1",
"description": "Yet another matrix client", "description": "Yet another matrix client",
"main": "index.js", "main": "index.js",
"type": "module", "type": "module",
@ -20,99 +20,99 @@
"author": "Ajay Bura", "author": "Ajay Bura",
"license": "AGPL-3.0-only", "license": "AGPL-3.0-only",
"dependencies": { "dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "1.1.6", "@atlaskit/pragmatic-drag-and-drop": "1.7.4",
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0", "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.4.0",
"@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3", "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
"@fontsource/inter": "4.5.14", "@fontsource/inter": "4.5.15",
"@tanstack/react-query": "5.24.1", "@tanstack/react-query": "5.85.5",
"@tanstack/react-query-devtools": "5.24.1", "@tanstack/react-query-devtools": "5.85.5",
"@tanstack/react-virtual": "3.2.0", "@tanstack/react-virtual": "3.13.12",
"@tippyjs/react": "4.2.6", "@tippyjs/react": "4.2.6",
"@vanilla-extract/css": "1.9.3", "@vanilla-extract/css": "1.17.4",
"@vanilla-extract/recipes": "0.3.0", "@vanilla-extract/recipes": "0.5.7",
"@vanilla-extract/vite-plugin": "3.7.1", "@vanilla-extract/vite-plugin": "3.9.5",
"await-to-js": "3.0.0", "await-to-js": "3.0.0",
"badwords-list": "2.0.1-4", "badwords-list": "2.0.1-4",
"blurhash": "2.0.4", "blurhash": "2.0.5",
"browser-encrypt-attachment": "0.3.0", "browser-encrypt-attachment": "0.3.0",
"chroma-js": "3.1.2", "chroma-js": "3.1.2",
"classnames": "2.3.2", "classnames": "2.5.1",
"dateformat": "5.0.3", "dateformat": "5.0.3",
"dayjs": "1.11.10", "dayjs": "1.11.14",
"domhandler": "5.0.3", "domhandler": "5.0.3",
"emojibase": "15.3.1", "emojibase": "15.3.1",
"emojibase-data": "15.3.2", "emojibase-data": "15.3.2",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"flux": "4.0.3", "flux": "4.0.4",
"focus-trap-react": "10.0.2", "focus-trap-react": "10.3.1",
"folds": "2.2.0", "folds": "2.2.0",
"formik": "2.4.6", "formik": "2.4.6",
"html-dom-parser": "4.0.0", "html-dom-parser": "4.0.1",
"html-react-parser": "4.2.0", "html-react-parser": "4.2.10",
"i18next": "23.12.2", "i18next": "23.16.8",
"i18next-browser-languagedetector": "8.0.0", "i18next-browser-languagedetector": "8.2.0",
"i18next-http-backend": "2.5.2", "i18next-http-backend": "2.7.3",
"immer": "9.0.16", "immer": "9.0.21",
"is-hotkey": "0.2.0", "is-hotkey": "0.2.0",
"jotai": "2.6.0", "jotai": "2.13.1",
"linkify-react": "4.1.3", "linkify-react": "4.3.2",
"linkifyjs": "4.1.3", "linkifyjs": "4.3.2",
"matrix-js-sdk": "37.5.0", "matrix-js-sdk": "37.13.0",
"millify": "6.1.0", "millify": "6.1.0",
"pdfjs-dist": "4.2.67", "pdfjs-dist": "4.10.38",
"prismjs": "1.30.0", "prismjs": "1.30.0",
"prop-types": "15.8.1", "prop-types": "15.8.1",
"react": "18.2.0", "react": "18.3.1",
"react-aria": "3.29.1", "react-aria": "3.43.0",
"react-autosize-textarea": "7.1.0", "react-autosize-textarea": "7.1.0",
"react-blurhash": "0.2.0", "react-blurhash": "0.3.0",
"react-colorful": "5.6.1", "react-colorful": "5.6.1",
"react-dom": "18.2.0", "react-dom": "18.3.1",
"react-error-boundary": "4.0.13", "react-error-boundary": "4.1.2",
"react-google-recaptcha": "2.1.0", "react-google-recaptcha": "2.1.0",
"react-i18next": "15.0.0", "react-i18next": "15.7.2",
"react-modal": "3.16.1", "react-modal": "3.16.3",
"react-range": "1.8.14", "react-range": "1.10.0",
"react-router-dom": "6.20.0", "react-router-dom": "6.30.1",
"sanitize-html": "2.12.1", "sanitize-html": "2.17.0",
"slate": "0.112.0", "slate": "0.118.1",
"slate-dom": "0.112.2", "slate-dom": "0.118.1",
"slate-history": "0.110.3", "slate-history": "0.115.0",
"slate-react": "0.112.1", "slate-react": "0.117.4",
"tippy.js": "6.3.7", "tippy.js": "6.3.7",
"ua-parser-js": "1.0.35" "ua-parser-js": "1.0.41"
}, },
"devDependencies": { "devDependencies": {
"@esbuild-plugins/node-globals-polyfill": "0.2.3", "@esbuild-plugins/node-globals-polyfill": "0.2.3",
"@rollup/plugin-inject": "5.0.3", "@rollup/plugin-inject": "5.0.5",
"@rollup/plugin-wasm": "6.1.1", "@rollup/plugin-wasm": "6.2.2",
"@types/chroma-js": "3.1.1", "@types/chroma-js": "3.1.1",
"@types/file-saver": "2.0.5", "@types/file-saver": "2.0.7",
"@types/is-hotkey": "0.1.10", "@types/is-hotkey": "0.1.10",
"@types/node": "18.11.18", "@types/node": "18.19.123",
"@types/prismjs": "1.26.0", "@types/prismjs": "1.26.5",
"@types/react": "18.2.39", "@types/react": "18.3.24",
"@types/react-dom": "18.2.17", "@types/react-dom": "18.3.7",
"@types/react-google-recaptcha": "2.1.8", "@types/react-google-recaptcha": "2.1.9",
"@types/sanitize-html": "2.9.0", "@types/sanitize-html": "2.16.0",
"@types/ua-parser-js": "0.7.36", "@types/ua-parser-js": "0.7.39",
"@typescript-eslint/eslint-plugin": "5.46.1", "@typescript-eslint/eslint-plugin": "5.62.0",
"@typescript-eslint/parser": "5.46.1", "@typescript-eslint/parser": "5.62.0",
"@vitejs/plugin-react": "4.2.0", "@vitejs/plugin-react": "4.7.0",
"buffer": "6.0.3", "buffer": "6.0.3",
"eslint": "8.29.0", "eslint": "8.57.1",
"eslint-config-airbnb": "19.0.4", "eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "8.5.0", "eslint-config-prettier": "8.10.2",
"eslint-plugin-import": "2.29.1", "eslint-plugin-import": "2.32.0",
"eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-jsx-a11y": "6.10.2",
"eslint-plugin-react": "7.31.11", "eslint-plugin-react": "7.37.5",
"eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-react-hooks": "4.6.2",
"prettier": "2.8.1", "prettier": "2.8.8",
"sass": "1.56.2", "sass": "1.91.0",
"typescript": "4.9.4", "typescript": "4.9.5",
"vite": "5.4.19", "vite": "5.4.19",
"vite-plugin-pwa": "0.20.5", "vite-plugin-pwa": "0.21.2",
"vite-plugin-static-copy": "1.0.4", "vite-plugin-static-copy": "1.0.6",
"vite-plugin-top-level-await": "1.4.4" "vite-plugin-top-level-await": "1.6.0"
} }
} }

55
src/app/components/UserRoomProfileRenderer.tsx Normal file
View file

@ -0,0 +1,55 @@
import React from 'react';
import { Menu, PopOut, toRem } from 'folds';
import FocusTrap from 'focus-trap-react';
import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
import { UserRoomProfile } from './user-profile';
import { UserRoomProfileState } from '../state/userRoomProfile';
import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
import { stopPropagation } from '../utils/keyboard';
import { SpaceProvider } from '../hooks/useSpace';
import { RoomProvider } from '../hooks/useRoom';
function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
const { roomId, spaceId, userId, cords, position } = state;
const allJoinedRooms = useAllJoinedRoomsSet();
const getRoom = useGetRoom(allJoinedRooms);
const room = getRoom(roomId);
const space = spaceId ? getRoom(spaceId) : undefined;
const close = useCloseUserRoomProfile();
if (!room) return null;
return (
<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} />;
}

294
src/app/components/create-room/AdditionalCreatorInput.tsx Normal file
View file

@ -0,0 +1,294 @@
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 { highlightText, 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
? highlightText(queryHighlighRegex, [
getMxIdLocalPart(userId) ?? userId,
])
: 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>
);
}

2
src/app/components/create-room/RoomVersionSelector.tsx
View file

@ -47,7 +47,7 @@ export function RoomVersionSelector({
gap="500" gap="500"
> >
<SettingTile <SettingTile
title="Room Version" title="Version"
after={ after={
<PopOut <PopOut
anchor={menuCords} anchor={menuCords}

1
src/app/components/create-room/index.ts
View file

@ -2,3 +2,4 @@ export * from './CreateRoomKindSelector';
export * from './CreateRoomAliasInput'; export * from './CreateRoomAliasInput';
export * from './RoomVersionSelector'; export * from './RoomVersionSelector';
export * from './utils'; export * from './utils';
export * from './AdditionalCreatorInput';

13
src/app/components/create-room/utils.ts
View file

@ -14,7 +14,8 @@ import { getMxIdServer } from '../../utils/matrix';
export const createRoomCreationContent = ( export const createRoomCreationContent = (
type: RoomType | undefined, type: RoomType | undefined,
allowFederation: boolean allowFederation: boolean,
additionalCreators: string[] | undefined
): object => { ): object => {
const content: Record<string, any> = {}; const content: Record<string, any> = {};
if (typeof type === 'string') { if (typeof type === 'string') {
@ -23,6 +24,9 @@ export const createRoomCreationContent = (
if (allowFederation === false) { if (allowFederation === false) {
content['m.federate'] = false; content['m.federate'] = false;
} }
if (Array.isArray(additionalCreators)) {
content.additional_creators = additionalCreators;
}
return content; return content;
}; };
@ -89,6 +93,7 @@ export type CreateRoomData = {
encryption?: boolean; encryption?: boolean;
knock: boolean; knock: boolean;
allowFederation: boolean; allowFederation: boolean;
additionalCreators?: string[];
}; };
export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => { export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
const initialState: ICreateRoomStateEvent[] = []; const initialState: ICreateRoomStateEvent[] = [];
@ -108,7 +113,11 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
name: data.name, name: data.name,
topic: data.topic, topic: data.topic,
room_alias_name: data.aliasLocalPart, room_alias_name: data.aliasLocalPart,
creation_content: createRoomCreationContent(data.type, data.allowFederation), creation_content: createRoomCreationContent(
data.type,
data.allowFederation,
data.additionalCreators
),
initial_state: initialState, initial_state: initialState,
}; };

33
src/app/components/event-readers/EventReaders.tsx
View file

@ -19,9 +19,11 @@ import { getMemberDisplayName } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix'; import { getMxIdLocalPart } from '../../utils/matrix';
import * as css from './EventReaders.css'; import * as css from './EventReaders.css';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { openProfileViewer } from '../../../client/action/navigation';
import { UserAvatar } from '../user-avatar'; import { UserAvatar } from '../user-avatar';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
import { useSpaceOptionally } from '../../hooks/useSpace';
import { getMouseEventCords } from '../../utils/dom';
export type EventReadersProps = { export type EventReadersProps = {
room: Room; room: Room;
@ -33,6 +35,8 @@ export const EventReaders = as<'div', EventReadersProps>(
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const latestEventReaders = useRoomEventReaders(room, eventId); const latestEventReaders = useRoomEventReaders(room, eventId);
const openProfile = useOpenUserRoomProfile();
const space = useSpaceOptionally();
const getName = (userId: string) => const getName = (userId: string) =>
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId; getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@ -57,19 +61,32 @@ export const EventReaders = as<'div', EventReadersProps>(
<Box className={css.Content} direction="Column"> <Box className={css.Content} direction="Column">
{latestEventReaders.map((readerId) => { {latestEventReaders.map((readerId) => {
const name = getName(readerId); const name = getName(readerId);
const avatarMxcUrl = room const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
.getMember(readerId) const avatarUrl = avatarMxcUrl
?.getMxcAvatarUrl(); ? mx.mxcUrlToHttp(
const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined; avatarMxcUrl,
100,
100,
'crop',
undefined,
false,
useAuthentication
)
: undefined;
return ( return (
<MenuItem <MenuItem
key={readerId} key={readerId}
style={{ padding: `0 ${config.space.S200}` }} style={{ padding: `0 ${config.space.S200}` }}
radii="400" radii="400"
onClick={() => { onClick={(event) => {
requestClose(); openProfile(
openProfileViewer(readerId, room.roomId); room.roomId,
space?.roomId,
readerId,
getMouseEventCords(event.nativeEvent),
'Bottom'
);
}} }}
before={ before={
<Avatar size="200"> <Avatar size="200">

9
src/app/components/image-pack-view/RoomImagePack.tsx
View file

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

131
src/app/components/join-address-prompt/JoinAddressPrompt.tsx Normal file
View file

@ -0,0 +1,131 @@
import React, { FormEventHandler, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
Dialog,
Overlay,
OverlayCenter,
OverlayBackdrop,
Header,
config,
Box,
Text,
IconButton,
Icon,
Icons,
Button,
Input,
color,
} from 'folds';
import { stopPropagation } from '../../utils/keyboard';
import { isRoomAlias, isRoomId } from '../../utils/matrix';
import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
import { tryDecodeURIComponent } from '../../utils/dom';
type JoinAddressProps = {
onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void;
onCancel: () => void;
};
export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
const [invalid, setInvalid] = useState(false);
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
evt.preventDefault();
setInvalid(false);
const target = evt.target as HTMLFormElement | undefined;
const addressInput = target?.addressInput as HTMLInputElement | undefined;
const address = addressInput?.value.trim();
if (!address) return;
if (isRoomId(address) || isRoomAlias(address)) {
onOpen(address);
return;
}
if (testMatrixTo(address)) {
const decodedAddress = tryDecodeURIComponent(address);
const toRoom = parseMatrixToRoom(decodedAddress);
if (toRoom) {
onOpen(toRoom.roomIdOrAlias, toRoom.viaServers);
return;
}
const toEvent = parseMatrixToRoomEvent(decodedAddress);
if (toEvent) {
onOpen(toEvent.roomIdOrAlias, toEvent.viaServers, toEvent.eventId);
return;
}
}
setInvalid(true);
};
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">Join with Address</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Box
as="form"
onSubmit={handleSubmit}
style={{ padding: config.space.S400, paddingTop: 0 }}
direction="Column"
gap="400"
>
<Box direction="Column" gap="200">
<Text priority="400" size="T300">
Enter public address to join the community. Addresses looks like:
</Text>
<Text as="ul" size="T200" priority="300" style={{ paddingLeft: config.space.S400 }}>
<li>#community:server</li>
<li>https://matrix.to/#/#community:server</li>
<li>https://matrix.to/#/!xYzAj?via=server</li>
</Text>
</Box>
<Box direction="Column" gap="100">
<Text size="L400">Address</Text>
<Input
size="500"
autoFocus
name="addressInput"
variant="Background"
placeholder="#community:server"
required
/>
{invalid && (
<Text size="T200" style={{ color: color.Critical.Main }}>
<b>Invalid Address</b>
</Text>
)}
</Box>
<Button type="submit" variant="Primary">
<Text size="B400">Open</Text>
</Button>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}

1
src/app/components/join-address-prompt/index.ts Normal file
View file

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

11
src/app/components/message/Reply.tsx
View file

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

8
src/app/components/message/content/FallbackContent.tsx
View file

@ -20,28 +20,28 @@ export const MessageDeletedContent = as<'div', { children?: never; reason?: stri
export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...props }, ref) => ( export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}> <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
<Icon size="50" src={Icons.Warning} /> <Icon size="50" src={Icons.Warning} />
<i>Unsupported message</i> <i>Unsupported message.</i>
</Box> </Box>
)); ));
export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => ( export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}> <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
<Icon size="50" src={Icons.Warning} /> <Icon size="50" src={Icons.Warning} />
<i>Failed to load message</i> <i>Failed to load message.</i>
</Box> </Box>
)); ));
export const MessageBadEncryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => ( export const MessageBadEncryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}> <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
<Icon size="50" src={Icons.Lock} /> <Icon size="50" src={Icons.Lock} />
<i>Unable to decrypt message</i> <i>Unable to decrypt message. Please verify your session or restore your backup.</i>
</Box> </Box>
)); ));
export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => ( export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}> <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
<Icon size="50" src={Icons.Lock} /> <Icon size="50" src={Icons.Lock} />
<i>This message is not decrypted yet</i> <i>This message is not decrypted yet. Please wait.</i>
</Box> </Box>
)); ));

2
src/app/components/message/layout/layout.css.ts
View file

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

80
src/app/components/presence/Presence.tsx Normal file
View file

@ -0,0 +1,80 @@
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>
)
);

1
src/app/components/presence/index.ts Normal file
View file

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

22
src/app/components/presence/styles.css.ts Normal file
View file

@ -0,0 +1,22 @@
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',
});

2
src/app/components/room-intro/RoomIntro.tsx
View file

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

2
src/app/components/sidebar/SidebarItem.tsx
View file

@ -36,7 +36,7 @@ export function SidebarItemTooltip({
return ( return (
<TooltipProvider <TooltipProvider
delay={400} delay={0}
position="Right" position="Right"
tooltip={ tooltip={
<Tooltip style={{ maxWidth: toRem(280) }}> <Tooltip style={{ maxWidth: toRem(280) }}>

2
src/app/components/splash-screen/SplashScreen.tsx
View file

@ -21,7 +21,7 @@ export function SplashScreen({ children }: SplashScreenProps) {
justifyContent="Center" justifyContent="Center"
> >
<Text size="H2" align="Center"> <Text size="H2" align="Center">
Cinny Gaboule Chat
</Text> </Text>
</Box> </Box>
</Box> </Box>

101
src/app/components/user-profile/CreatorChip.tsx Normal file
View file

@ -0,0 +1,101 @@
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>
);
}

357
src/app/components/user-profile/PowerChip.tsx Normal file
View file

@ -0,0 +1,357 @@
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}
</>
);
}

514
src/app/components/user-profile/UserChips.tsx Normal file
View file

@ -0,0 +1,514 @@
import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import FocusTrap from 'focus-trap-react';
import { isKeyHotkey } from 'is-hotkey';
import { Room } from 'matrix-js-sdk';
import {
PopOut,
Menu,
MenuItem,
config,
Text,
Line,
Chip,
Icon,
Icons,
RectCords,
Spinner,
toRem,
Box,
Scroll,
Avatar,
} from 'folds';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { getMxIdServer } from '../../utils/matrix';
import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
import { stopPropagation } from '../../utils/keyboard';
import { copyToClipboard } from '../../utils/dom';
import { getExploreServerPath } from '../../pages/pathUtils';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { factoryRoomIdByAtoZ } from '../../utils/sort';
import { useMutualRooms, useMutualRoomsSupport } from '../../hooks/useMutualRooms';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
import { RoomAvatar, RoomIcon } from '../room-avatar';
import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
import { nameInitials } from '../../utils/common';
import { getMatrixToUser } from '../../plugins/matrix-to';
import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
import { CutoutCard } from '../cutout-card';
import { SettingTile } from '../setting-tile';
export function ServerChip({ server }: { server: string }) {
const mx = useMatrixClient();
const myServer = getMxIdServer(mx.getSafeUserId());
const navigate = useNavigate();
const closeProfile = useCloseUserRoomProfile();
const [copied, setCopied] = useTimeoutToggle();
const [cords, setCords] = useState<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>
);
}

75
src/app/components/user-profile/UserHero.tsx Normal file
View file

@ -0,0 +1,75 @@
import React from 'react';
import { Avatar, Box, Icon, Icons, Text } from 'folds';
import classNames from 'classnames';
import * as css from './styles.css';
import { UserAvatar } from '../user-avatar';
import colorMXID from '../../../util/colorMXID';
import { getMxIdLocalPart } from '../../utils/matrix';
import { BreakWord, LineClamp3 } from '../../styles/Text.css';
import { UserPresence } from '../../hooks/useUserPresence';
import { AvatarPresence, PresenceBadge } from '../presence';
type UserHeroProps = {
userId: string;
avatarUrl?: string;
presence?: UserPresence;
};
export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
return (
<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>
);
}

349
src/app/components/user-profile/UserModeration.tsx Normal file
View file

@ -0,0 +1,349 @@
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>
);
}

169
src/app/components/user-profile/UserRoomProfile.tsx Normal file
View file

@ -0,0 +1,169 @@
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} />}
{userId !== myUserId && <MutualRoomsChip userId={userId} />}
{userId !== myUserId && <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>
);
}

1
src/app/components/user-profile/index.ts Normal file
View file

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

42
src/app/components/user-profile/styles.css.ts Normal file
View file

@ -0,0 +1,42 @@
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}`,
});

375
src/app/features/add-existing/AddExisting.tsx Normal file
View file

@ -0,0 +1,375 @@
import FocusTrap from 'focus-trap-react';
import {
Avatar,
Box,
Button,
config,
Header,
Icon,
IconButton,
Icons,
Input,
Menu,
MenuItem,
Modal,
Overlay,
OverlayBackdrop,
OverlayCenter,
Scroll,
Spinner,
Text,
} from 'folds';
import React, {
ChangeEventHandler,
MouseEventHandler,
useCallback,
useMemo,
useRef,
useState,
} from 'react';
import { useAtomValue } from 'jotai';
import { useVirtualizer } from '@tanstack/react-virtual';
import { Room } from 'matrix-js-sdk';
import { stopPropagation } from '../../utils/keyboard';
import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { allRoomsAtom } from '../../state/room-list/roomList';
import { mDirectAtom } from '../../state/mDirectList';
import { roomToParentsAtom } from '../../state/room/roomToParents';
import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
import { VirtualTile } from '../../components/virtualizer';
import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
import { nameInitials } from '../../utils/common';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { factoryRoomIdByAtoZ } from '../../utils/sort';
import {
SearchItemStrGetter,
useAsyncSearch,
UseAsyncSearchOptions,
} from '../../hooks/useAsyncSearch';
import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { StateEvent } from '../../../types/matrix/room';
import { getViaServers } from '../../plugins/via-servers';
import { rateLimitedActions } from '../../utils/matrix';
import { useAlive } from '../../hooks/useAlive';
const SEARCH_OPTS: UseAsyncSearchOptions = {
limit: 500,
matchOptions: {
contain: true,
},
normalizeOptions: {
ignoreWhitespace: false,
},
};
type AddExistingModalProps = {
parentId: string;
space?: boolean;
requestClose: () => void;
};
export function AddExistingModal({ parentId, space, requestClose }: AddExistingModalProps) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const alive = useAlive();
const mDirects = useAtomValue(mDirectAtom);
const spaces = useSpaces(mx, allRoomsAtom);
const rooms = useRooms(mx, allRoomsAtom, mDirects);
const directs = useDirects(mx, allRoomsAtom, mDirects);
const roomIdToParents = useAtomValue(roomToParentsAtom);
const scrollRef = useRef<HTMLDivElement>(null);
const [selected, setSelected] = useState<string[]>([]);
const allRoomsSet = useAllJoinedRoomsSet();
const getRoom = useGetRoom(allRoomsSet);
const allItems: string[] = useMemo(() => {
const rIds = space ? [...spaces] : [...rooms, ...directs];
return rIds
.filter((rId) => rId !== parentId && !roomIdToParents.get(rId)?.has(parentId))
.sort(factoryRoomIdByAtoZ(mx));
}, [spaces, rooms, directs, space, parentId, roomIdToParents, mx]);
const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
(rId) => getRoom(rId)?.name ?? rId,
[getRoom]
);
const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
allItems,
getRoomNameStr,
SEARCH_OPTS
);
const queryHighlighRegex = searchResult?.query
? makeHighlightRegex(searchResult.query.split(' '))
: undefined;
const items = searchResult ? searchResult.items : allItems;
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => scrollRef.current,
estimateSize: () => 32,
overscan: 5,
});
const vItems = virtualizer.getVirtualItems();
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
const value = evt.currentTarget.value.trim();
if (!value) {
resetSearch();
return;
}
searchRoom(value);
};
const [applyState, applyChanges] = useAsyncCallback<undefined, Error, [Room[]]>(
useCallback(
async (selectedRooms) => {
await rateLimitedActions(selectedRooms, async (room) => {
const via = getViaServers(room);
await mx.sendStateEvent(
parentId,
StateEvent.SpaceChild as any,
{
auto_join: false,
suggested: false,
via,
},
room.roomId
);
});
},
[mx, parentId]
)
);
const applyingChanges = applyState.status === AsyncStatus.Loading;
const handleRoomClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
const roomId = evt.currentTarget.getAttribute('data-room-id');
if (!roomId) return;
if (selected?.includes(roomId)) {
setSelected(selected?.filter((rId) => rId !== roomId));
return;
}
const addedRooms = [...(selected ?? [])];
addedRooms.push(roomId);
setSelected(addedRooms);
};
const handleApplyChanges = () => {
const selectedRooms = selected.map((rId) => getRoom(rId)).filter((room) => room !== undefined);
applyChanges(selectedRooms).then(() => {
if (alive()) {
setSelected([]);
requestClose();
}
});
};
const resetChanges = () => {
setSelected([]);
};
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
clickOutsideDeactivates: true,
onDeactivate: requestClose,
escapeDeactivates: stopPropagation,
}}
>
<Modal size="300">
<Box grow="Yes" direction="Column">
<Header
size="500"
style={{
padding: config.space.S200,
paddingLeft: config.space.S400,
}}
>
<Box grow="Yes">
<Text size="H4">Add Existing</Text>
</Box>
<Box shrink="No">
<IconButton size="300" radii="300" onClick={requestClose}>
<Icon src={Icons.Cross} />
</IconButton>
</Box>
</Header>
<Box grow="Yes">
<Scroll ref={scrollRef} size="300" hideTrack>
<Box
style={{ padding: config.space.S300, paddingRight: 0 }}
direction="Column"
gap="500"
>
<Box
direction="Column"
style={{ position: 'sticky', top: config.space.S300, zIndex: 1 }}
>
<Input
onChange={handleSearchChange}
before={<Icon size="200" src={Icons.Search} />}
placeholder="Search"
size="400"
variant="Background"
outlined
/>
</Box>
{vItems.length === 0 && (
<Box
style={{ paddingTop: config.space.S700 }}
grow="Yes"
alignItems="Center"
justifyContent="Center"
direction="Column"
gap="100"
>
<Text size="H6" align="Center">
{searchResult ? 'No Match Found' : `No ${space ? 'Spaces' : 'Rooms'}`}
</Text>
<Text size="T200" align="Center">
{searchResult
? `No match found for "${searchResult.query}".`
: `You do not have any ${space ? 'Spaces' : 'Rooms'} to display yet.`}
</Text>
</Box>
)}
<Box
style={{
position: 'relative',
height: virtualizer.getTotalSize(),
}}
>
{vItems.map((vItem) => {
const roomId = items[vItem.index];
const room = getRoom(roomId);
if (!room) return null;
const selectedItem = selected?.includes(roomId);
const dm = mDirects.has(room.roomId);
return (
<VirtualTile
virtualItem={vItem}
style={{ paddingBottom: config.space.S100 }}
ref={virtualizer.measureElement}
key={vItem.index}
>
<MenuItem
data-room-id={roomId}
onClick={handleRoomClick}
variant={selectedItem ? 'Success' : 'Surface'}
size="400"
radii="400"
disabled={applyingChanges}
aria-pressed={selectedItem}
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="200" joinRule={room.getJoinRule()} />
)}
</Avatar>
}
after={selectedItem && <Icon size="200" src={Icons.Check} />}
>
<Box grow="Yes">
<Text truncate size="T400">
{queryHighlighRegex
? highlightText(queryHighlighRegex, [room.name])
: room.name}
</Text>
</Box>
</MenuItem>
</VirtualTile>
);
})}
</Box>
{selected.length > 0 && (
<Menu
style={{
position: 'sticky',
padding: config.space.S200,
paddingLeft: config.space.S400,
bottom: config.space.S400,
left: config.space.S400,
right: 0,
zIndex: 1,
}}
variant="Success"
>
<Box alignItems="Center" gap="400">
<Box grow="Yes" direction="Column">
{applyState.status === AsyncStatus.Error ? (
<Text size="T200">
<b>Failed to apply changes! Please try again.</b>
</Text>
) : (
<Text size="T200">
<b>Apply when ready. ({selected.length} Selected)</b>
</Text>
)}
</Box>
<Box shrink="No" gap="200">
<Button
size="300"
variant="Success"
fill="None"
radii="300"
disabled={applyingChanges}
onClick={resetChanges}
>
<Text size="B300">Reset</Text>
</Button>
<Button
size="300"
variant="Success"
radii="300"
disabled={applyingChanges}
before={
applyingChanges && (
<Spinner variant="Success" fill="Solid" size="100" />
)
}
onClick={handleApplyChanges}
>
<Text size="B300">Apply Changes</Text>
</Button>
</Box>
</Box>
</Menu>
)}
</Box>
</Scroll>
</Box>
</Box>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}

1
src/app/features/add-existing/index.ts Normal file
View file

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

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

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

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

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

22
src/app/features/common-settings/general/RoomAddress.tsx
View file

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

14
src/app/features/common-settings/general/RoomEncryption.tsx
View file

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

14
src/app/features/common-settings/general/RoomHistoryVisibility.tsx
View file

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

13
src/app/features/common-settings/general/RoomJoinRules.tsx
View file

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

14
src/app/features/common-settings/general/RoomProfile.tsx
View file

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

13
src/app/features/common-settings/general/RoomPublish.tsx
View file

@ -8,23 +8,22 @@ import { SettingTile } from '../../../components/setting-tile';
import { useRoom } from '../../../hooks/useRoom'; import { useRoom } from '../../../hooks/useRoom';
import { useRoomDirectoryVisibility } from '../../../hooks/useRoomDirectoryVisibility'; import { useRoomDirectoryVisibility } from '../../../hooks/useRoomDirectoryVisibility';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels';
import { StateEvent } from '../../../../types/matrix/room'; import { StateEvent } from '../../../../types/matrix/room';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { useStateEvent } from '../../../hooks/useStateEvent'; import { useStateEvent } from '../../../hooks/useStateEvent';
import { ExtendedJoinRules } from '../../../components/JoinRulesSwitcher'; import { ExtendedJoinRules } from '../../../components/JoinRulesSwitcher';
import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
type RoomPublishProps = { type RoomPublishProps = {
powerLevels: IPowerLevels; permissions: RoomPermissionsAPI;
}; };
export function RoomPublish({ powerLevels }: RoomPublishProps) { export function RoomPublish({ permissions }: RoomPublishProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const room = useRoom(); const room = useRoom();
const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId());
const canEditCanonical = powerLevelAPI.canSendStateEvent( const canEditCanonical = permissions.stateEvent(
powerLevels,
StateEvent.RoomCanonicalAlias, StateEvent.RoomCanonicalAlias,
userPowerLevel mx.getSafeUserId()
); );
const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules); const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>(); const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();

242
src/app/features/common-settings/general/RoomUpgrade.tsx
View file

@ -1,4 +1,4 @@
import React, { FormEventHandler, useCallback, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { import {
Button, Button,
color, color,
@ -14,54 +14,172 @@ import {
IconButton, IconButton,
Icon, Icon,
Icons, Icons,
Input,
} from 'folds'; } from 'folds';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { MatrixError } from 'matrix-js-sdk'; import { MatrixError, Method } from 'matrix-js-sdk';
import { RoomCreateEventContent, RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types'; import { RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';
import { SequenceCard } from '../../../components/sequence-card'; import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../../room-settings/styles.css'; import { SequenceCardStyle } from '../../room-settings/styles.css';
import { SettingTile } from '../../../components/setting-tile'; import { SettingTile } from '../../../components/setting-tile';
import { useRoom } from '../../../hooks/useRoom'; import { useRoom } from '../../../hooks/useRoom';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { IPowerLevels, powerLevelAPI } from '../../../hooks/usePowerLevels'; import { IRoomCreateContent, StateEvent } from '../../../../types/matrix/room';
import { StateEvent } from '../../../../types/matrix/room';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { useStateEvent } from '../../../hooks/useStateEvent'; import { useStateEvent } from '../../../hooks/useStateEvent';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate'; import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
import { useCapabilities } from '../../../hooks/useCapabilities'; import { useCapabilities } from '../../../hooks/useCapabilities';
import { stopPropagation } from '../../../utils/keyboard'; 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 = { type RoomUpgradeProps = {
powerLevels: IPowerLevels; permissions: RoomPermissionsAPI;
requestClose: () => void; requestClose: () => void;
}; };
export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) { export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const room = useRoom(); const room = useRoom();
const { navigateRoom, navigateSpace } = useRoomNavigate(); const { navigateRoom, navigateSpace } = useRoomNavigate();
const createContent = useStateEvent( const createContent = useStateEvent(
room, room,
StateEvent.RoomCreate StateEvent.RoomCreate
)?.getContent<RoomCreateEventContent>(); )?.getContent<IRoomCreateContent>();
const roomVersion = createContent?.room_version ?? 1; const roomVersion = createContent?.room_version ?? '1';
const predecessorRoomId = createContent?.predecessor?.room_id; const predecessorRoomId = createContent?.predecessor?.room_id;
const capabilities = useCapabilities();
const defaultRoomVersion = capabilities['m.room_versions']?.default;
const tombstoneContent = useStateEvent( const tombstoneContent = useStateEvent(
room, room,
StateEvent.RoomTombstone StateEvent.RoomTombstone
)?.getContent<RoomTombstoneEventContent>(); )?.getContent<RoomTombstoneEventContent>();
const replacementRoom = tombstoneContent?.replacement_room; const replacementRoom = tombstoneContent?.replacement_room;
const userPowerLevel = powerLevelAPI.getPowerLevel(powerLevels, mx.getSafeUserId()); const canUpgrade = permissions.stateEvent(StateEvent.RoomTombstone, mx.getSafeUserId());
const canUpgrade = powerLevelAPI.canSendStateEvent(
powerLevels,
StateEvent.RoomTombstone,
userPowerLevel
);
const handleOpenRoom = () => { const handleOpenRoom = () => {
if (replacementRoom) { if (replacementRoom) {
@ -85,31 +203,8 @@ export function RoomUpgrade({ powerLevels, 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 [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 ( return (
<SequenceCard <SequenceCard
className={SequenceCardStyle} className={SequenceCardStyle}
@ -123,7 +218,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
replacementRoom replacementRoom
? tombstoneContent.body || ? tombstoneContent.body ||
`This ${room.isSpaceRoom() ? 'space' : 'room'} has been replaced!` `This ${room.isSpaceRoom() ? 'space' : 'room'} has been replaced!`
: `Current room version: ${roomVersion}.` : `Current version: ${roomVersion}.`
} }
after={ after={
<Box alignItems="Center" gap="200"> <Box alignItems="Center" gap="200">
@ -155,8 +250,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
variant="Secondary" variant="Secondary"
fill="Solid" fill="Solid"
radii="300" radii="300"
disabled={upgrading || !canUpgrade} disabled={!canUpgrade}
before={upgrading && <Spinner size="100" variant="Secondary" fill="Solid" />}
onClick={() => setPrompt(true)} onClick={() => setPrompt(true)}
> >
<Text size="B300">Upgrade</Text> <Text size="B300">Upgrade</Text>
@ -165,63 +259,7 @@ export function RoomUpgrade({ powerLevels, requestClose }: RoomUpgradeProps) {
</Box> </Box>
} }
> >
{upgradeState.status === AsyncStatus.Error && ( {prompt && <RoomUpgradeDialog requestClose={() => setPrompt(false)} />}
<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> </SettingTile>
</SequenceCard> </SequenceCard>
); );

41
src/app/features/common-settings/members/Members.tsx
View file

@ -27,17 +27,12 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
import { useRoom } from '../../../hooks/useRoom'; import { useRoom } from '../../../hooks/useRoom';
import { useRoomMembers } from '../../../hooks/useRoomMembers'; import { useRoomMembers } from '../../../hooks/useRoomMembers';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels'; import { usePowerLevels } from '../../../hooks/usePowerLevels';
import {
useFlattenPowerLevelTagMembers,
usePowerLevelTags,
} from '../../../hooks/usePowerLevelTags';
import { VirtualTile } from '../../../components/virtualizer'; import { VirtualTile } from '../../../components/virtualizer';
import { MemberTile } from '../../../components/member-tile'; import { MemberTile } from '../../../components/member-tile';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix'; import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
import { ServerBadge } from '../../../components/server-badge'; import { ServerBadge } from '../../../components/server-badge';
import { openProfileViewer } from '../../../../client/action/navigation';
import { useDebounce } from '../../../hooks/useDebounce'; import { useDebounce } from '../../../hooks/useDebounce';
import { import {
SearchItemStrGetter, SearchItemStrGetter,
@ -46,13 +41,21 @@ import {
} from '../../../hooks/useAsyncSearch'; } from '../../../hooks/useAsyncSearch';
import { getMemberSearchStr } from '../../../utils/room'; import { getMemberSearchStr } from '../../../utils/room';
import { useMembershipFilter, useMembershipFilterMenu } from '../../../hooks/useMemberFilter'; import { useMembershipFilter, useMembershipFilterMenu } from '../../../hooks/useMemberFilter';
import { useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort'; import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort';
import { settingsAtom } from '../../../state/settings'; import { settingsAtom } from '../../../state/settings';
import { useSetting } from '../../../state/hooks/settings'; import { useSetting } from '../../../state/hooks/settings';
import { UseStateProvider } from '../../../components/UseStateProvider'; import { UseStateProvider } from '../../../components/UseStateProvider';
import { MembershipFilterMenu } from '../../../components/MembershipFilterMenu'; import { MembershipFilterMenu } from '../../../components/MembershipFilterMenu';
import { MemberSortMenu } from '../../../components/MemberSortMenu'; import { MemberSortMenu } from '../../../components/MemberSortMenu';
import { ScrollTopContainer } from '../../../components/scroll-top-container'; 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';
import { getMouseEventCords } from '../../../utils/dom';
const SEARCH_OPTIONS: UseAsyncSearchOptions = { const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 1000, limit: 1000,
@ -77,15 +80,19 @@ export function Members({ requestClose }: MembersProps) {
const room = useRoom(); const room = useRoom();
const members = useRoomMembers(mx, room.roomId); const members = useRoomMembers(mx, room.roomId);
const fetchingMembers = members.length < room.getJoinedMemberCount(); const fetchingMembers = members.length < room.getJoinedMemberCount();
const openProfile = useOpenUserRoomProfile();
const profileUser = useUserRoomProfileState();
const space = useSpaceOptionally();
const powerLevels = usePowerLevels(room); const powerLevels = usePowerLevels(room);
const { getPowerLevel } = usePowerLevelsAPI(powerLevels); const creators = useRoomCreators(room);
const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels); const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
const [membershipFilterIndex, setMembershipFilterIndex] = useState(0); const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex'); const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
const membershipFilter = useMembershipFilter(membershipFilterIndex, useMembershipFilterMenu()); const membershipFilter = useMembershipFilter(membershipFilterIndex, useMembershipFilterMenu());
const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu()); const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
const memberPowerSort = useMemberPowerSort(creators);
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const searchInputRef = useRef<HTMLInputElement>(null); const searchInputRef = useRef<HTMLInputElement>(null);
@ -96,8 +103,8 @@ export function Members({ requestClose }: MembersProps) {
Array.from(members) Array.from(members)
.filter(membershipFilter.filterFn) .filter(membershipFilter.filterFn)
.sort(memberSort.sortFn) .sort(memberSort.sortFn)
.sort((a, b) => b.powerLevel - a.powerLevel), .sort(memberPowerSort),
[members, membershipFilter, memberSort] [members, membershipFilter, memberSort, memberPowerSort]
); );
const [result, search, resetSearch] = useAsyncSearch( const [result, search, resetSearch] = useAsyncSearch(
@ -107,11 +114,7 @@ export function Members({ requestClose }: MembersProps) {
); );
if (!result && searchInputRef.current?.value) search(searchInputRef.current.value); if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
const flattenTagMembers = useFlattenPowerLevelTagMembers( const flattenTagMembers = useFlattenPowerTagMembers(result?.items ?? sortedMembers, getPowerTag);
result?.items ?? sortedMembers,
getPowerLevel,
getPowerLevelTag
);
const virtualizer = useVirtualizer({ const virtualizer = useVirtualizer({
count: flattenTagMembers.length, count: flattenTagMembers.length,
@ -142,8 +145,9 @@ export function Members({ requestClose }: MembersProps) {
const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => { const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
const btn = evt.currentTarget as HTMLButtonElement; const btn = evt.currentTarget as HTMLButtonElement;
const userId = btn.getAttribute('data-user-id'); const userId = btn.getAttribute('data-user-id');
openProfileViewer(userId, room.roomId); if (userId) {
requestClose(); openProfile(room.roomId, space?.roomId, userId, getMouseEventCords(evt.nativeEvent));
}
}; };
return ( return (
@ -317,6 +321,7 @@ export function Members({ requestClose }: MembersProps) {
<MemberTile <MemberTile
data-user-id={tagOrMember.userId} data-user-id={tagOrMember.userId}
onClick={handleMemberClick} onClick={handleMemberClick}
aria-pressed={profileUser?.userId === tagOrMember.userId}
mx={mx} mx={mx}
room={room} room={room}
member={tagOrMember} member={tagOrMember}

31
src/app/features/common-settings/permissions/PermissionGroups.tsx
View file

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

42
src/app/features/common-settings/permissions/Powers.tsx
View file

@ -16,7 +16,7 @@ import {
} from 'folds'; } from 'folds';
import { SequenceCard } from '../../../components/sequence-card'; import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css'; import { SequenceCardStyle } from '../styles.css';
import { getPowers, getTagIconSrc, usePowerLevelTags } from '../../../hooks/usePowerLevelTags'; import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
import { SettingTile } from '../../../components/setting-tile'; import { SettingTile } from '../../../components/setting-tile';
import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels'; import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels';
import { useRoom } from '../../../hooks/useRoom'; import { useRoom } from '../../../hooks/useRoom';
@ -25,6 +25,9 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { stopPropagation } from '../../../utils/keyboard'; import { stopPropagation } from '../../../utils/keyboard';
import { PermissionGroup } from './types'; import { PermissionGroup } from './types';
import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
import { useRoomCreators } from '../../../hooks/useRoomCreators';
type PeekPermissionsProps = { type PeekPermissionsProps = {
powerLevels: IPowerLevels; powerLevels: IPowerLevels;
@ -108,10 +111,43 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const room = useRoom(); const room = useRoom();
const [powerLevelTags] = usePowerLevelTags(room, powerLevels); const powerLevelTags = usePowerLevelTags(room, powerLevels);
const creators = useRoomCreators(room);
const creatorsTag = useRoomCreatorsTag();
const creatorTagIconSrc =
creatorsTag.icon && getPowerTagIconSrc(mx, useAuthentication, creatorsTag.icon);
return ( return (
<Box direction="Column" gap="100"> <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 <SequenceCard
variant="SurfaceVariant" variant="SurfaceVariant"
className={SequenceCardStyle} className={SequenceCardStyle}
@ -142,7 +178,7 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
<Box gap="200" wrap="Wrap"> <Box gap="200" wrap="Wrap">
{getPowers(powerLevelTags).map((power) => { {getPowers(powerLevelTags).map((power) => {
const tag = powerLevelTags[power]; const tag = powerLevelTags[power];
const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon); const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
return ( return (
<PeekPermissions <PeekPermissions

29
src/app/features/common-settings/permissions/PowersEditor.tsx
View file

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

33
src/app/features/create-room/CreateRoom.tsx
View file

@ -1,4 +1,4 @@
import React, { FormEventHandler, useCallback, useState } from 'react'; import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
import { MatrixError, Room } from 'matrix-js-sdk'; import { MatrixError, Room } from 'matrix-js-sdk';
import { import {
Box, Box,
@ -16,7 +16,12 @@ import {
} from 'folds'; } from 'folds';
import { SettingTile } from '../../components/setting-tile'; import { SettingTile } from '../../components/setting-tile';
import { SequenceCard } from '../../components/sequence-card'; import { SequenceCard } from '../../components/sequence-card';
import { knockRestrictedSupported, knockSupported, restrictedSupported } from '../../utils/matrix'; import {
creatorsSupported,
knockRestrictedSupported,
knockSupported,
restrictedSupported,
} from '../../utils/matrix';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common'; import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
@ -24,12 +29,14 @@ import { useCapabilities } from '../../hooks/useCapabilities';
import { useAlive } from '../../hooks/useAlive'; import { useAlive } from '../../hooks/useAlive';
import { ErrorCode } from '../../cs-errorcode'; import { ErrorCode } from '../../cs-errorcode';
import { import {
AdditionalCreatorInput,
createRoom, createRoom,
CreateRoomAliasInput, CreateRoomAliasInput,
CreateRoomData, CreateRoomData,
CreateRoomKind, CreateRoomKind,
CreateRoomKindSelector, CreateRoomKindSelector,
RoomVersionSelector, RoomVersionSelector,
useAdditionalCreators,
} from '../../components/create-room'; } from '../../components/create-room';
const getCreateRoomKindToIcon = (kind: CreateRoomKind) => { const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
@ -50,12 +57,19 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
const capabilities = useCapabilities(); const capabilities = useCapabilities();
const roomVersions = capabilities['m.room_versions']; const roomVersions = capabilities['m.room_versions'];
const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1'); const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1');
useEffect(() => {
// capabilities load async
selectRoomVersion(roomVersions?.default ?? '1');
}, [roomVersions?.default]);
const allowRestricted = space && restrictedSupported(selectedRoomVersion); const allowRestricted = space && restrictedSupported(selectedRoomVersion);
const [kind, setKind] = useState( const [kind, setKind] = useState(
defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
); );
const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
useAdditionalCreators();
const [federation, setFederation] = useState(true); const [federation, setFederation] = useState(true);
const [encryption, setEncryption] = useState(false); const [encryption, setEncryption] = useState(false);
const [knock, setKnock] = useState(false); const [knock, setKnock] = useState(false);
@ -112,6 +126,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
encryption: publicRoom ? false : encryption, encryption: publicRoom ? false : encryption,
knock: roomKnock, knock: roomKnock,
allowFederation: federation, allowFederation: federation,
additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
}).then((roomId) => { }).then((roomId) => {
if (alive()) { if (alive()) {
onCreate?.(roomId); onCreate?.(roomId);
@ -172,6 +187,20 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
</Chip> </Chip>
</Box> </Box>
</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 && ( {kind !== CreateRoomKind.Public && (
<> <>
<SequenceCard <SequenceCard

1
src/app/features/create-room/CreateRoomModal.tsx
View file

@ -54,7 +54,6 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
style={{ style={{
padding: config.space.S200, padding: config.space.S200,
paddingLeft: config.space.S400, paddingLeft: config.space.S400,
borderBottomWidth: config.borderWidth.B300,
}} }}
> >
<Box grow="Yes"> <Box grow="Yes">

34
src/app/features/create-space/CreateSpace.tsx
View file

@ -1,4 +1,4 @@
import React, { FormEventHandler, useCallback, useState } from 'react'; import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
import { MatrixError, Room } from 'matrix-js-sdk'; import { MatrixError, Room } from 'matrix-js-sdk';
import { import {
Box, Box,
@ -16,7 +16,12 @@ import {
} from 'folds'; } from 'folds';
import { SettingTile } from '../../components/setting-tile'; import { SettingTile } from '../../components/setting-tile';
import { SequenceCard } from '../../components/sequence-card'; import { SequenceCard } from '../../components/sequence-card';
import { knockRestrictedSupported, knockSupported, restrictedSupported } from '../../utils/matrix'; import {
creatorsSupported,
knockRestrictedSupported,
knockSupported,
restrictedSupported,
} from '../../utils/matrix';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common'; import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
@ -24,12 +29,14 @@ import { useCapabilities } from '../../hooks/useCapabilities';
import { useAlive } from '../../hooks/useAlive'; import { useAlive } from '../../hooks/useAlive';
import { ErrorCode } from '../../cs-errorcode'; import { ErrorCode } from '../../cs-errorcode';
import { import {
AdditionalCreatorInput,
createRoom, createRoom,
CreateRoomAliasInput, CreateRoomAliasInput,
CreateRoomData, CreateRoomData,
CreateRoomKind, CreateRoomKind,
CreateRoomKindSelector, CreateRoomKindSelector,
RoomVersionSelector, RoomVersionSelector,
useAdditionalCreators,
} from '../../components/create-room'; } from '../../components/create-room';
import { RoomType } from '../../../types/matrix/room'; import { RoomType } from '../../../types/matrix/room';
@ -51,12 +58,20 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
const capabilities = useCapabilities(); const capabilities = useCapabilities();
const roomVersions = capabilities['m.room_versions']; const roomVersions = capabilities['m.room_versions'];
const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1'); const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1');
useEffect(() => {
// capabilities load async
selectRoomVersion(roomVersions?.default ?? '1');
}, [roomVersions?.default]);
const allowRestricted = space && restrictedSupported(selectedRoomVersion); const allowRestricted = space && restrictedSupported(selectedRoomVersion);
const [kind, setKind] = useState( const [kind, setKind] = useState(
defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
); );
const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
useAdditionalCreators();
const [federation, setFederation] = useState(true); const [federation, setFederation] = useState(true);
const [knock, setKnock] = useState(false); const [knock, setKnock] = useState(false);
const [advance, setAdvance] = useState(false); const [advance, setAdvance] = useState(false);
@ -112,6 +127,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
aliasLocalPart: publicRoom ? aliasLocalPart : undefined, aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
knock: roomKnock, knock: roomKnock,
allowFederation: federation, allowFederation: federation,
additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
}).then((roomId) => { }).then((roomId) => {
if (alive()) { if (alive()) {
onCreate?.(roomId); onCreate?.(roomId);
@ -172,6 +188,20 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
</Chip> </Chip>
</Box> </Box>
</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) && ( {kind !== CreateRoomKind.Public && advance && (allowKnock || allowKnockRestricted) && (
<SequenceCard <SequenceCard
style={{ padding: config.space.S300 }} style={{ padding: config.space.S300 }}

22
src/app/features/lobby/HierarchyItemMenu.tsx
View file

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

63
src/app/features/lobby/Lobby.tsx
View file

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

21
src/app/features/lobby/LobbyHeader.tsx
View file

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

59
src/app/features/lobby/SpaceHierarchy.tsx
View file

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

14
src/app/features/lobby/SpaceItem.tsx
View file

@ -30,12 +30,12 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import * as css from './SpaceItem.css'; import * as css from './SpaceItem.css';
import * as styleCss from './style.css'; import * as styleCss from './style.css';
import { useDraggableItem } from './DnD'; import { useDraggableItem } from './DnD';
import { openSpaceAddExisting } from '../../../client/action/navigation';
import { stopPropagation } from '../../utils/keyboard'; import { stopPropagation } from '../../utils/keyboard';
import { mxcUrlToHttp } from '../../utils/matrix'; import { mxcUrlToHttp } from '../../utils/matrix';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal'; import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal'; import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
import { AddExistingModal } from '../add-existing';
function SpaceProfileLoading() { function SpaceProfileLoading() {
return ( return (
@ -243,6 +243,7 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
function AddRoomButton({ item }: { item: HierarchyItem }) { function AddRoomButton({ item }: { item: HierarchyItem }) {
const [cords, setCords] = useState<RectCords>(); const [cords, setCords] = useState<RectCords>();
const openCreateRoomModal = useOpenCreateRoomModal(); const openCreateRoomModal = useOpenCreateRoomModal();
const [addExisting, setAddExisting] = useState(false);
const handleAddRoom: MouseEventHandler<HTMLButtonElement> = (evt) => { const handleAddRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
setCords(evt.currentTarget.getBoundingClientRect()); setCords(evt.currentTarget.getBoundingClientRect());
@ -254,7 +255,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
}; };
const handleAddExisting = () => { const handleAddExisting = () => {
openSpaceAddExisting(item.roomId); setAddExisting(true);
setCords(undefined); setCords(undefined);
}; };
@ -300,6 +301,9 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
> >
<Text size="B300">Add Room</Text> <Text size="B300">Add Room</Text>
</Chip> </Chip>
{addExisting && (
<AddExistingModal parentId={item.roomId} requestClose={() => setAddExisting(false)} />
)}
</PopOut> </PopOut>
); );
} }
@ -307,6 +311,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
function AddSpaceButton({ item }: { item: HierarchyItem }) { function AddSpaceButton({ item }: { item: HierarchyItem }) {
const [cords, setCords] = useState<RectCords>(); const [cords, setCords] = useState<RectCords>();
const openCreateSpaceModal = useOpenCreateSpaceModal(); const openCreateSpaceModal = useOpenCreateSpaceModal();
const [addExisting, setAddExisting] = useState(false);
const handleAddSpace: MouseEventHandler<HTMLButtonElement> = (evt) => { const handleAddSpace: MouseEventHandler<HTMLButtonElement> = (evt) => {
setCords(evt.currentTarget.getBoundingClientRect()); setCords(evt.currentTarget.getBoundingClientRect());
@ -318,7 +323,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
}; };
const handleAddExisting = () => { const handleAddExisting = () => {
openSpaceAddExisting(item.roomId, true); setAddExisting(true);
setCords(undefined); setCords(undefined);
}; };
return ( return (
@ -363,6 +368,9 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
> >
<Text size="B300">Add Space</Text> <Text size="B300">Add Space</Text>
</Chip> </Chip>
{addExisting && (
<AddExistingModal space parentId={item.roomId} requestClose={() => setAddExisting(false)} />
)}
</PopOut> </PopOut>
); );
} }

39
src/app/features/message-search/SearchResultGroup.tsx
View file

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

10
src/app/features/room-nav/RoomNavItem.tsx
View file

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

20
src/app/features/room-settings/general/General.tsx
View file

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

21
src/app/features/room-settings/permissions/Permissions.tsx
View file

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

4
src/app/features/room/MembersDrawer.css.ts
View file

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

326
src/app/features/room/MembersDrawer.tsx
View file

@ -26,11 +26,10 @@ import {
TooltipProvider, TooltipProvider,
config, config,
} from 'folds'; } from 'folds';
import { Room, RoomMember } from 'matrix-js-sdk'; import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
import { useVirtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
import classNames from 'classnames'; import classNames from 'classnames';
import { openProfileViewer } from '../../../client/action/navigation';
import * as css from './MembersDrawer.css'; import * as css from './MembersDrawer.css';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { UseStateProvider } from '../../components/UseStateProvider'; import { UseStateProvider } from '../../components/UseStateProvider';
@ -40,7 +39,6 @@ import {
useAsyncSearch, useAsyncSearch,
} from '../../hooks/useAsyncSearch'; } from '../../hooks/useAsyncSearch';
import { useDebounce } from '../../hooks/useDebounce'; import { useDebounce } from '../../hooks/useDebounce';
import { usePowerLevelTags, useFlattenPowerLevelTagMembers } from '../../hooks/usePowerLevelTags';
import { TypingIndicator } from '../../components/typing-indicator'; import { TypingIndicator } from '../../components/typing-indicator';
import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room'; import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix'; import { getMxIdLocalPart } from '../../utils/matrix';
@ -52,101 +50,25 @@ import { UserAvatar } from '../../components/user-avatar';
import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers'; import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useMembershipFilter, useMembershipFilterMenu } from '../../hooks/useMemberFilter'; import { useMembershipFilter, useMembershipFilterMenu } from '../../hooks/useMemberFilter';
import { useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort'; import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels'; import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { MembershipFilterMenu } from '../../components/MembershipFilterMenu'; import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
import { MemberSortMenu } from '../../components/MemberSortMenu'; 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';
import { useUserPresence } from '../../hooks/useUserPresence';
import { AvatarPresence, PresenceBadge } from '../../components/presence';
const SEARCH_OPTIONS: UseAsyncSearchOptions = { type MemberDrawerHeaderProps = {
limit: 1000,
matchOptions: {
contain: true,
},
};
const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
getMemberSearchStr(m, query, mxIdToName);
type MembersDrawerProps = {
room: Room; room: Room;
members: RoomMember[];
}; };
export function MembersDrawer({ room, members }: MembersDrawerProps) { function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const scrollRef = useRef<HTMLDivElement>(null);
const searchInputRef = useRef<HTMLInputElement>(null);
const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
const powerLevels = usePowerLevelsContext();
const [, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
const fetchingMembers = members.length < room.getJoinedMemberCount();
const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer'); 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 typingMembers = useRoomTypingMember(room.roomId);
const filteredMembers = useMemo(
() =>
members
.filter(membershipFilter.filterFn)
.sort(memberSort.sortFn)
.sort((a, b) => b.powerLevel - a.powerLevel),
[members, membershipFilter, memberSort]
);
const [result, search, resetSearch] = useAsyncSearch(
filteredMembers,
getRoomMemberStr,
SEARCH_OPTIONS
);
if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
const processMembers = result ? result.items : filteredMembers;
const PLTagOrRoomMember = useFlattenPowerLevelTagMembers(
processMembers,
getPowerLevel,
getPowerLevelTag
);
const virtualizer = useVirtualizer({
count: PLTagOrRoomMember.length,
getScrollElement: () => scrollRef.current,
estimateSize: () => 40,
overscan: 10,
});
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
useCallback(
(evt) => {
if (evt.target.value) search(evt.target.value);
else resetSearch();
},
[search, resetSearch]
),
{ 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');
openProfileViewer(userId, room.roomId);
};
return ( return (
<Box className={css.MembersDrawer} shrink="No" direction="Column">
<Header className={css.MembersDrawerHeader} variant="Background" size="600"> <Header className={css.MembersDrawerHeader} variant="Background" size="600">
<Box grow="Yes" alignItems="Center" gap="200"> <Box grow="Yes" alignItems="Center" gap="200">
<Box grow="Yes" alignItems="Center" gap="200"> <Box grow="Yes" alignItems="Center" gap="200">
@ -178,6 +100,164 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
</Box> </Box>
</Box> </Box>
</Header> </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;
const presence = useUserPresence(member.userId)
return (
<MenuItem
style={{ padding: `0 ${config.space.S200}` }}
aria-pressed={pressed}
data-user-id={member.userId}
variant="Background"
radii="400"
onClick={onClick}
before={
<AvatarPresence
badge={
presence && <PresenceBadge presence={presence.presence} status={presence.status} size="200" />
}>
<Avatar size="200">
<UserAvatar
userId={member.userId}
src={avatarUrl ?? undefined}
alt={name}
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
/>
</Avatar>
</AvatarPresence>
}
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,
matchOptions: {
contain: true,
},
};
const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
getMemberSearchStr(m, query, mxIdToName);
type MembersDrawerProps = {
room: Room;
members: RoomMember[];
};
export function MembersDrawer({ room, members }: MembersDrawerProps) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const scrollRef = useRef<HTMLDivElement>(null);
const searchInputRef = useRef<HTMLInputElement>(null);
const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
const powerLevels = usePowerLevelsContext();
const creators = useRoomCreators(room);
const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
const fetchingMembers = members.length < room.getJoinedMemberCount();
const openUserRoomProfile = useOpenUserRoomProfile();
const space = useSpaceOptionally();
const openProfileUserId = useUserRoomProfileState()?.userId;
const membershipFilterMenu = useMembershipFilterMenu();
const sortFilterMenu = useMemberSortMenu();
const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
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]
);
const [result, search, resetSearch] = useAsyncSearch(
filteredMembers,
getRoomMemberStr,
SEARCH_OPTIONS
);
if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
const processMembers = result ? result.items : filteredMembers;
const PLTagOrRoomMember = useFlattenPowerTagMembers(processMembers, getPowerTag);
const virtualizer = useVirtualizer({
count: PLTagOrRoomMember.length,
getScrollElement: () => scrollRef.current,
estimateSize: () => 40,
overscan: 10,
});
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
useCallback(
(evt) => {
if (evt.target.value) search(evt.target.value);
else resetSearch();
},
[search, resetSearch]
),
{ wait: 200 }
);
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');
};
return (
<Box
className={classNames(css.MembersDrawer, ContainerColor({ variant: 'Background' }))}
shrink="No"
direction="Column"
>
<MemberDrawerHeader room={room} />
<Box className={css.MemberDrawerContentBase} grow="Yes"> <Box className={css.MemberDrawerContentBase} grow="Yes">
<Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack> <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
<Box className={css.MemberDrawerContent} direction="Column" gap="200"> <Box className={css.MemberDrawerContent} direction="Column" gap="200">
@ -274,8 +354,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
}} }}
after={<Icon size="50" src={Icons.Cross} />} after={<Icon size="50" src={Icons.Cross} />}
> >
<Text size="B300">{`${result.items.length || 'No'} ${ <Text size="B300">{`${result.items.length || 'No'} ${result.items.length === 1 ? 'Result' : 'Results'
result.items.length === 1 ? 'Result' : 'Results'
}`}</Text> }`}</Text>
</Chip> </Chip>
) )
@ -329,59 +408,28 @@ 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 ( return (
<MenuItem <div
style={{ style={{
padding: `0 ${config.space.S200}`,
transform: `translateY(${vItem.start}px)`, transform: `translateY(${vItem.start}px)`,
}} }}
data-index={vItem.index}
data-user-id={member.userId}
ref={virtualizer.measureElement}
key={`${room.roomId}-${member.userId}`}
className={css.DrawerVirtualItem} className={css.DrawerVirtualItem}
variant="Background" data-index={vItem.index}
radii="400" key={`${room.roomId}-${tagOrMember.userId}`}
onClick={handleMemberClick} ref={virtualizer.measureElement}
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>
)
}
> >
<Box grow="Yes"> <MemberItem
<Text size="T400" truncate> mx={mx}
{name} useAuthentication={useAuthentication}
</Text> room={room}
</Box> member={tagOrMember}
</MenuItem> onClick={handleMemberClick}
pressed={openProfileUserId === tagOrMember.userId}
typing={typingMembers.some(
(receipt) => receipt.userId === tagOrMember.userId
)}
/>
</div>
); );
})} })}
</div> </div>

44
src/app/features/room/RoomInput.tsx
View file

@ -108,21 +108,23 @@ import { ReplyLayout, ThreadIndicator } from '../../components/message';
import { roomToParentsAtom } from '../../state/room/roomToParents'; import { roomToParentsAtom } from '../../state/room/roomToParents';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useImagePackRooms } from '../../hooks/useImagePackRooms'; import { useImagePackRooms } from '../../hooks/useImagePackRooms';
import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags'; import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { powerLevelAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
import { useIsDirectRoom } from '../../hooks/useRoom'; 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 { interface RoomInputProps {
editor: Editor; editor: Editor;
fileDropContainerRef: RefObject<HTMLElement>; fileDropContainerRef: RefObject<HTMLElement>;
roomId: string; roomId: string;
room: Room; room: Room;
getPowerLevelTag: GetPowerLevelTag;
accessibleTagColors: Map<string, string>;
} }
export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>( export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
({ editor, fileDropContainerRef, roomId, room, getPowerLevelTag, accessibleTagColors }, ref) => { ({ editor, fileDropContainerRef, roomId, room }, ref) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline'); const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
@ -134,13 +136,24 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const emojiBtnRef = useRef<HTMLButtonElement>(null); const emojiBtnRef = useRef<HTMLButtonElement>(null);
const roomToParents = useAtomValue(roomToParentsAtom); const roomToParents = useAtomValue(roomToParentsAtom);
const powerLevels = usePowerLevelsContext(); const powerLevels = usePowerLevelsContext();
const creators = useRoomCreators(room);
const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId)); const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId)); const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
const replyUserID = replyDraft?.userId; const replyUserID = replyDraft?.userId;
const replyPowerTag = getPowerLevelTag(powerLevelAPI.getPowerLevel(powerLevels, replyUserID)); const powerLevelTags = usePowerLevelTags(room, powerLevels);
const replyPowerColor = replyPowerTag.color 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
? accessibleTagColors.get(replyPowerTag.color) ? accessibleTagColors.get(replyPowerTag.color)
: undefined; : undefined;
const replyUsernameColor = const replyUsernameColor =
@ -277,7 +290,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
}); });
handleCancelUpload(uploads); handleCancelUpload(uploads);
const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises)); const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
contents.forEach((content) => mx.sendMessage(roomId, content)); contents.forEach((content) => mx.sendMessage(roomId, content as any));
}; };
const submit = useCallback(() => { const submit = useCallback(() => {
@ -356,7 +369,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
content['m.relates_to'].is_falling_back = false; content['m.relates_to'].is_falling_back = false;
} }
} }
mx.sendMessage(roomId, content); mx.sendMessage(roomId, content as any);
resetEditor(editor); resetEditor(editor);
resetEditorHistory(editor); resetEditorHistory(editor);
setReplyDraft(undefined); setReplyDraft(undefined);
@ -567,6 +580,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
) )
} }
before={ before={
room.hasEncryptionStateEvent() ?
[
<IconButton <IconButton
onClick={() => pickFile('*')} onClick={() => pickFile('*')}
variant="SurfaceVariant" variant="SurfaceVariant"
@ -574,7 +589,18 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
radii="300" radii="300"
> >
<Icon src={Icons.PlusCircle} /> <Icon src={Icons.PlusCircle} />
</IconButton>,
<Icon src={Icons.ShieldLock} />,
] : (
< IconButton
onClick={() => pickFile('*')}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon src={Icons.PlusCircle} />
</IconButton> </IconButton>
)
} }
after={ after={
<> <>

84
src/app/features/room/RoomTimeline.tsx
View file

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

21
src/app/features/room/RoomView.tsx
View file

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

10
src/app/features/room/RoomViewHeader.tsx
View file

@ -42,7 +42,7 @@ import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../util
import { _SearchPathSearchParams } from '../../pages/paths'; import { _SearchPathSearchParams } from '../../pages/paths';
import * as css from './RoomViewHeader.css'; import * as css from './RoomViewHeader.css';
import { useRoomUnread } from '../../state/hooks/unread'; import { useRoomUnread } from '../../state/hooks/unread';
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels'; import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { markAsRead } from '../../../client/action/notifications'; import { markAsRead } from '../../../client/action/notifications';
import { roomToUnreadAtom } from '../../state/room/roomToUnread'; import { roomToUnreadAtom } from '../../state/room/roomToUnread';
import { openInviteUser } from '../../../client/action/navigation'; import { openInviteUser } from '../../../client/action/navigation';
@ -67,6 +67,8 @@ import {
} from '../../hooks/useRoomsNotificationPreferences'; } from '../../hooks/useRoomsNotificationPreferences';
import { JumpToTime } from './jump-to-time'; import { JumpToTime } from './jump-to-time';
import { useRoomNavigate } from '../../hooks/useRoomNavigate'; import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
type RoomMenuProps = { type RoomMenuProps = {
room: Room; room: Room;
@ -77,8 +79,10 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomUnread(room.roomId, roomToUnreadAtom); const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
const powerLevels = usePowerLevelsContext(); const powerLevels = usePowerLevelsContext();
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels); const creators = useRoomCreators(room);
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
const permissions = useRoomPermissions(creators, powerLevels);
const canInvite = permissions.action('invite', mx.getSafeUserId());
const notificationPreferences = useRoomsNotificationPreferencesContext(); const notificationPreferences = useRoomsNotificationPreferencesContext();
const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId); const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
const { navigateRoom } = useRoomNavigate(); const { navigateRoom } = useRoomNavigate();

18
src/app/features/room/message/Message.tsx
View file

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

23
src/app/features/room/reaction-viewer/ReactionViewer.tsx
View file

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

91
src/app/features/room/room-pin-menu/RoomPinMenu.tsx
View file

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

10
src/app/features/settings/about/About.tsx
View file

@ -46,16 +46,18 @@ export function About({ requestClose }: AboutProps) {
<Box direction="Column" gap="300"> <Box direction="Column" gap="300">
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Box gap="100" alignItems="End"> <Box gap="100" alignItems="End">
<Text size="H3">Cinny</Text> <Text size="H3">Gaboule Chat</Text>
<Text size="T200">v{cons.version}</Text> <Text size="T200">{cons.version}</Text>
</Box> </Box>
<Text>Yet another matrix client.</Text> <Text>Yet another matrix client.<br />
This is a fork of <a href="https://github.com/cinnyapp/cinny">Cinny.</a>
</Text>
</Box> </Box>
<Box gap="200" wrap="Wrap"> <Box gap="200" wrap="Wrap">
<Button <Button
as="a" as="a"
href="https://github.com/cinnyapp/cinny" href="https://git.gaboule.com/Gaboule/chat"
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
variant="Secondary" variant="Secondary"

2
src/app/features/space-settings/SpaceSettingsRenderer.tsx
View file

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

16
src/app/features/space-settings/general/General.tsx
View file

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

21
src/app/features/space-settings/permissions/Permissions.tsx
View file

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

27
src/app/hooks/useDirectUsers.ts Normal file
View file

@ -0,0 +1,27 @@
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;
};

28
src/app/hooks/useMemberPowerCompare.ts Normal file
View file

@ -0,0 +1,28 @@
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,
};
};

87
src/app/hooks/useMemberPowerTag.ts Normal file
View file

@ -0,0 +1,87 @@
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;
};

19
src/app/hooks/useMemberSort.ts
View file

@ -1,5 +1,5 @@
import { RoomMember } from 'matrix-js-sdk'; import { RoomMember } from 'matrix-js-sdk';
import { useMemo } from 'react'; import { useCallback, useMemo } from 'react';
export const MemberSort = { export const MemberSort = {
Ascending: (a: RoomMember, b: RoomMember) => Ascending: (a: RoomMember, b: RoomMember) =>
@ -46,3 +46,20 @@ export const useMemberSort = (index: number, memberSort: MemberSortItem[]): Memb
const item = memberSort[index] ?? memberSort[0]; const item = memberSort[index] ?? memberSort[0];
return item; 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;
};

28
src/app/hooks/useMembership.ts Normal file
View file

@ -0,0 +1,28 @@
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;
};

9
src/app/hooks/useMentionClickHandler.ts
View file

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

30
src/app/hooks/useMutualRooms.ts Normal file
View file

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

132
src/app/hooks/usePowerLevelTags.ts
View file

@ -1,29 +1,24 @@
import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk'; import { Room } from 'matrix-js-sdk';
import { useCallback, useMemo } from 'react'; import { useMemo } from 'react';
import { IPowerLevels } from './usePowerLevels'; import { IPowerLevels } from './usePowerLevels';
import { useStateEvent } from './useStateEvent'; import { useStateEvent } from './useStateEvent';
import { StateEvent } from '../../types/matrix/room'; import { MemberPowerTag, StateEvent } from '../../types/matrix/room';
import { IImageInfo } from '../../types/matrix/common';
import { ThemeKind } from './useTheme';
import { accessibleColor } from '../plugins/color';
export type PowerLevelTagIcon = { export type PowerLevelTags = Record<number, MemberPowerTag>;
key?: string;
info?: IImageInfo;
};
export type PowerLevelTag = {
name: string;
color?: string;
icon?: PowerLevelTagIcon;
};
export type PowerLevelTags = Record<number, PowerLevelTag>; const powerSortFn = (a: number, b: number) => b - a;
const sortPowers = (powers: number[]): number[] => powers.sort(powerSortFn);
export const powerSortFn = (a: number, b: number) => b - a;
export const sortPowers = (powers: number[]): number[] => powers.sort(powerSortFn);
export const getPowers = (tags: PowerLevelTags): number[] => { export const getPowers = (tags: PowerLevelTags): number[] => {
const powers: number[] = Object.keys(tags).map((p) => parseInt(p, 10)); 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');
return sortPowers(powers); return sortPowers(powers);
}; };
@ -51,26 +46,22 @@ export const getUsedPowers = (powerLevels: IPowerLevels): Set<number> => {
}; };
const DEFAULT_TAGS: PowerLevelTags = { const DEFAULT_TAGS: PowerLevelTags = {
9001: {
name: 'Goku',
color: '#ff6a00',
},
102: {
name: 'Goku Reborn',
color: '#ff6a7f',
},
101: {
name: 'Founder',
color: '#0000ff',
},
100: { 100: {
name: 'Admin', name: 'Admin',
color: '#ed0800',
},
70: {
name: 'Manager',
color: '#0088ff', color: '#0088ff',
}, },
50: { 50: {
name: 'Moderator', name: 'Moderator',
color: '#1fd81f', color: '#1fd81f',
}, },
10: {
name: 'Helper',
color: '#0be0ce',
},
0: { 0: {
name: 'Member', name: 'Member',
color: '#91cfdf', color: '#91cfdf',
@ -81,18 +72,14 @@ const DEFAULT_TAGS: PowerLevelTags = {
}, },
}; };
const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): PowerLevelTag => { const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): MemberPowerTag => {
const highToLow = sortPowers(getPowers(powerLevelTags));
const tagPower = highToLow.find((p) => p < power);
const tag = typeof tagPower === 'number' ? powerLevelTags[tagPower] : undefined;
return { return {
name: tag ? `${tag.name} ${power}` : `Team ${power}`, name: `Team ${power}`,
}; };
}; };
export type GetPowerLevelTag = (powerLevel: number) => PowerLevelTag; export type GetPowerLevelTag = (powerLevel: number) => MemberPowerTag;
export const usePowerLevelTags = ( export const usePowerLevelTags = (
room: Room, room: Room,
@ -114,66 +101,13 @@ export const usePowerLevelTags = (
return powerToTags; return powerToTags;
}, [powerLevels, tagsEvent]); }, [powerLevels, tagsEvent]);
const getTag: GetPowerLevelTag = useCallback( return powerLevelTags;
(power) => {
const tag: PowerLevelTag | undefined = powerLevelTags[power];
return tag ?? generateFallbackTag(DEFAULT_TAGS, power);
},
[powerLevelTags]
);
return [powerLevelTags, getTag];
}; };
export const useFlattenPowerLevelTagMembers = ( export const getPowerLevelTag = (
members: RoomMember[], powerLevelTags: PowerLevelTags,
getPowerLevel: (userId: string) => number, powerLevel: number
getTag: GetPowerLevelTag ): MemberPowerTag => {
): Array<PowerLevelTag | RoomMember> => { const tag: MemberPowerTag | undefined = powerLevelTags[powerLevel];
const PLTagOrRoomMember = useMemo(() => { return tag ?? generateFallbackTag(powerLevelTags, powerLevel);
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;
}; };

93
src/app/hooks/usePowerLevels.ts
View file

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

49
src/app/hooks/useRoomCreators.ts Normal file
View file

@ -0,0 +1,49 @@
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);
};

8
src/app/hooks/useRoomCreatorsTag.ts Normal file
View file

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

60
src/app/hooks/useRoomPermissions.ts Normal file
View file

@ -0,0 +1,60 @@
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;
};

58
src/app/hooks/useUserPresence.ts Normal file
View file

@ -0,0 +1,58 @@
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',
}),
[]
);

2
src/app/molecules/power-level-selector/PowerLevelSelector.jsx
View file

@ -35,7 +35,9 @@ function PowerLevelSelector({
{max >= 0 && <MenuHeader>Presets</MenuHeader>} {max >= 0 && <MenuHeader>Presets</MenuHeader>}
{max >= 100 && <MenuItem variant={value === 100 ? 'positive' : 'surface'} onClick={() => onSelect(100)}>Admin - 100</MenuItem>} {max >= 100 && <MenuItem variant={value === 100 ? 'positive' : 'surface'} onClick={() => onSelect(100)}>Admin - 100</MenuItem>}
{max >= 50 && <MenuItem variant={value === 50 ? 'positive' : 'surface'} onClick={() => onSelect(50)}>Mod - 50</MenuItem>} {max >= 50 && <MenuItem variant={value === 50 ? 'positive' : 'surface'} onClick={() => onSelect(50)}>Mod - 50</MenuItem>}
{max >= 10 && <MenuItem variant={value === 10 ? 'positive' : 'surface'} onClick={() => onSelect(10)}>Helper - 10</MenuItem>}
{max >= 0 && <MenuItem variant={value === 0 ? 'positive' : 'surface'} onClick={() => onSelect(0)}>Member - 0</MenuItem>} {max >= 0 && <MenuItem variant={value === 0 ? 'positive' : 'surface'} onClick={() => onSelect(0)}>Member - 0</MenuItem>}
{max >= -1 && <MenuItem variant={value === -1 ? 'positive' : 'surface'} onClick={() => onSelect(-1)}>Muted - -1</MenuItem>}
</div> </div>
); );
} }

2
src/app/pages/Router.tsx
View file

@ -62,6 +62,7 @@ import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
import { RoomSettingsRenderer } from '../features/room-settings'; import { RoomSettingsRenderer } from '../features/room-settings';
import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences'; import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
import { SpaceSettingsRenderer } from '../features/space-settings'; import { SpaceSettingsRenderer } from '../features/space-settings';
import { UserRoomProfileRenderer } from '../components/UserRoomProfileRenderer';
import { CreateRoomModalRenderer } from '../features/create-room'; import { CreateRoomModalRenderer } from '../features/create-room';
import { HomeCreateRoom } from './client/home/CreateRoom'; import { HomeCreateRoom } from './client/home/CreateRoom';
import { Create } from './client/create'; import { Create } from './client/create';
@ -130,6 +131,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
> >
<Outlet /> <Outlet />
</ClientLayout> </ClientLayout>
<UserRoomProfileRenderer />
<CreateRoomModalRenderer /> <CreateRoomModalRenderer />
<CreateSpaceModalRenderer /> <CreateSpaceModalRenderer />
<RoomSettingsRenderer /> <RoomSettingsRenderer />

7
src/app/pages/auth/AuthFooter.tsx
View file

@ -11,14 +11,11 @@ export function AuthFooter() {
<Text <Text
as="a" as="a"
size="T300" size="T300"
href="https://github.com/ajbura/cinny/releases" href="https://git.gaboule.com/Gaboule/chat"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
v4.8.1 latest
</Text>
<Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
Twitter
</Text> </Text>
<Text as="a" size="T300" href="https://matrix.org" target="_blank" rel="noreferrer"> <Text as="a" size="T300" href="https://matrix.org" target="_blank" rel="noreferrer">
Powered by Matrix Powered by Matrix

2
src/app/pages/auth/AuthLayout.tsx
View file

@ -135,7 +135,7 @@ export function AuthLayout() {
<Header className={css.AuthHeader} size="600" variant="Surface"> <Header className={css.AuthHeader} size="600" variant="Surface">
<Box grow="Yes" direction="Row" gap="300" alignItems="Center"> <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
<img className={css.AuthLogo} src={CinnySVG} alt="Cinny Logo" /> <img className={css.AuthLogo} src={CinnySVG} alt="Cinny Logo" />
<Text size="H3">Cinny</Text> <Text size="H3">Gaboule Chat</Text>
</Box> </Box>
</Header> </Header>
<Box className={css.AuthCardContent} direction="Column"> <Box className={css.AuthCardContent} direction="Column">

21
src/app/pages/client/SyncStatus.tsx
View file

@ -30,27 +30,6 @@ export function SyncStatus({ mx }: SyncStatusProps) {
}, []) }, [])
); );
if (
(stateData.current === SyncState.Prepared ||
stateData.current === SyncState.Syncing ||
stateData.current === SyncState.Catchup) &&
stateData.previous !== SyncState.Syncing
) {
return (
<Box direction="Column" shrink="No">
<Box
className={ContainerColor({ variant: 'Success' })}
style={{ padding: `${config.space.S100} 0` }}
alignItems="Center"
justifyContent="Center"
>
<Text size="L400">Connecting...</Text>
</Box>
<Line variant="Success" size="300" />
</Box>
);
}
if (stateData.current === SyncState.Reconnecting) { if (stateData.current === SyncState.Reconnecting) {
return ( return (
<Box direction="Column" shrink="No"> <Box direction="Column" shrink="No">

12
src/app/pages/client/WelcomePage.tsx
View file

@ -15,16 +15,18 @@ export function WelcomePage() {
<PageHeroSection> <PageHeroSection>
<PageHero <PageHero
icon={<img width="70" height="70" src={CinnySVG} alt="Cinny Logo" />} icon={<img width="70" height="70" src={CinnySVG} alt="Cinny Logo" />}
title="Welcome to Cinny" title="Welcome to Gaboule Chat (Cinny)"
subTitle={ subTitle={
<span> <span>
Yet another matrix client.{' '} Yet another matrix client.
Modified by Gaboule.
{' '}
<a <a
href="https://github.com/cinnyapp/cinny/releases" href="https://git.gaboule.com/Gaboule/chat"
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
v4.8.1 latest
</a> </a>
</span> </span>
} }
@ -33,7 +35,7 @@ export function WelcomePage() {
<Box grow="Yes" style={{ maxWidth: toRem(300) }} direction="Column" gap="300"> <Box grow="Yes" style={{ maxWidth: toRem(300) }} direction="Column" gap="300">
<Button <Button
as="a" as="a"
href="https://github.com/cinnyapp/cinny" href="https://git.gaboule.com/Gaboule/chat"
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
before={<Icon size="200" src={Icons.Code} />} before={<Icon size="200" src={Icons.Code} />}

45
src/app/pages/client/home/Home.tsx
View file

@ -30,10 +30,12 @@ import {
NavLink, NavLink,
} from '../../../components/nav'; } from '../../../components/nav';
import { import {
encodeSearchParamValueArray,
getExplorePath, getExplorePath,
getHomeCreatePath, getHomeCreatePath,
getHomeRoomPath, getHomeRoomPath,
getHomeSearchPath, getHomeSearchPath,
withSearchParam,
} from '../../pathUtils'; } from '../../pathUtils';
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix'; import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom'; import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
@ -49,7 +51,6 @@ import { makeNavCategoryId } from '../../../state/closedNavCategories';
import { roomToUnreadAtom } from '../../../state/room/roomToUnread'; import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
import { useCategoryHandler } from '../../../hooks/useCategoryHandler'; import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper'; import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
import { openJoinAlias } from '../../../../client/action/navigation';
import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page'; import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page';
import { useRoomsUnread } from '../../../state/hooks/unread'; import { useRoomsUnread } from '../../../state/hooks/unread';
import { markAsRead } from '../../../../client/action/notifications'; import { markAsRead } from '../../../../client/action/notifications';
@ -61,6 +62,9 @@ import {
getRoomNotificationMode, getRoomNotificationMode,
useRoomsNotificationPreferencesContext, useRoomsNotificationPreferencesContext,
} from '../../../hooks/useRoomsNotificationPreferences'; } from '../../../hooks/useRoomsNotificationPreferences';
import { UseStateProvider } from '../../../components/UseStateProvider';
import { JoinAddressPrompt } from '../../../components/join-address-prompt';
import { _RoomSearchParams } from '../../paths';
type HomeMenuProps = { type HomeMenuProps = {
requestClose: () => void; requestClose: () => void;
@ -77,11 +81,6 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
requestClose(); requestClose();
}; };
const handleJoinAddress = () => {
openJoinAlias();
requestClose();
};
return ( return (
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}> <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}> <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@ -96,16 +95,6 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
Mark as Read Mark as Read
</Text> </Text>
</MenuItem> </MenuItem>
<MenuItem
onClick={handleJoinAddress}
size="300"
radii="300"
after={<Icon size="100" src={Icons.Link} />}
>
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Join with Address
</Text>
</MenuItem>
</Box> </Box>
</Menu> </Menu>
); );
@ -268,8 +257,11 @@ export function Home() {
</NavItemContent> </NavItemContent>
</NavButton> </NavButton>
</NavItem> </NavItem>
<UseStateProvider initial={false}>
{(open, setOpen) => (
<>
<NavItem variant="Background" radii="400"> <NavItem variant="Background" radii="400">
<NavButton onClick={() => openJoinAlias()}> <NavButton onClick={() => setOpen(true)}>
<NavItemContent> <NavItemContent>
<Box as="span" grow="Yes" alignItems="Center" gap="200"> <Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200" radii="400"> <Avatar size="200" radii="400">
@ -284,6 +276,25 @@ export function Home() {
</NavItemContent> </NavItemContent>
</NavButton> </NavButton>
</NavItem> </NavItem>
{open && (
<JoinAddressPrompt
onCancel={() => setOpen(false)}
onOpen={(roomIdOrAlias, viaServers, eventId) => {
setOpen(false);
const path = getHomeRoomPath(roomIdOrAlias, eventId);
navigate(
viaServers
? withSearchParam<_RoomSearchParams>(path, {
viaServers: encodeSearchParamValueArray(viaServers),
})
: path
);
}}
/>
)}
</>
)}
</UseStateProvider>
<NavItem variant="Background" radii="400" aria-selected={searchSelected}> <NavItem variant="Background" radii="400" aria-selected={searchSelected}>
<NavLink to={getHomeSearchPath()}> <NavLink to={getHomeSearchPath()}>
<NavItemContent> <NavItemContent>

39
src/app/pages/client/inbox/Notifications.tsx
View file

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

29
src/app/pages/client/sidebar/CreateTab.tsx
View file

@ -7,15 +7,22 @@ import { stopPropagation } from '../../../utils/keyboard';
import { SequenceCard } from '../../../components/sequence-card'; import { SequenceCard } from '../../../components/sequence-card';
import { SettingTile } from '../../../components/setting-tile'; import { SettingTile } from '../../../components/setting-tile';
import { ContainerColor } from '../../../styles/ContainerColor.css'; import { ContainerColor } from '../../../styles/ContainerColor.css';
import { openJoinAlias } from '../../../../client/action/navigation'; import {
import { getCreatePath } from '../../pathUtils'; encodeSearchParamValueArray,
getCreatePath,
getSpacePath,
withSearchParam,
} from '../../pathUtils';
import { useCreateSelected } from '../../../hooks/router/useCreateSelected'; import { useCreateSelected } from '../../../hooks/router/useCreateSelected';
import { JoinAddressPrompt } from '../../../components/join-address-prompt';
import { _RoomSearchParams } from '../../paths';
export function CreateTab() { export function CreateTab() {
const createSelected = useCreateSelected(); const createSelected = useCreateSelected();
const navigate = useNavigate(); const navigate = useNavigate();
const [menuCords, setMenuCords] = useState<RectCords>(); const [menuCords, setMenuCords] = useState<RectCords>();
const [joinAddress, setJoinAddress] = useState(false);
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => { const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
setMenuCords(menuCords ? undefined : evt.currentTarget.getBoundingClientRect()); setMenuCords(menuCords ? undefined : evt.currentTarget.getBoundingClientRect());
@ -27,7 +34,7 @@ export function CreateTab() {
}; };
const handleJoinWithAddress = () => { const handleJoinWithAddress = () => {
openJoinAlias(); setJoinAddress(true);
setMenuCords(undefined); setMenuCords(undefined);
}; };
@ -103,6 +110,22 @@ export function CreateTab() {
> >
<Icon src={Icons.Plus} /> <Icon src={Icons.Plus} />
</SidebarAvatar> </SidebarAvatar>
{joinAddress && (
<JoinAddressPrompt
onCancel={() => setJoinAddress(false)}
onOpen={(roomIdOrAlias, viaServers) => {
setJoinAddress(false);
const path = getSpacePath(roomIdOrAlias);
navigate(
viaServers
? withSearchParam<_RoomSearchParams>(path, {
viaServers: encodeSearchParamValueArray(viaServers),
})
: path
);
}}
/>
)}
</PopOut> </PopOut>
)} )}
</SidebarItemTooltip> </SidebarItemTooltip>

10
src/app/pages/client/sidebar/SpaceTabs.tsx
View file

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

95
src/app/pages/client/space/Space.tsx
View file

@ -10,6 +10,7 @@ import { useAtom, useAtomValue } from 'jotai';
import { import {
Avatar, Avatar,
Box, Box,
Button,
Icon, Icon,
IconButton, IconButton,
Icons, Icons,
@ -18,7 +19,9 @@ import {
MenuItem, MenuItem,
PopOut, PopOut,
RectCords, RectCords,
Spinner,
Text, Text,
color,
config, config,
toRem, toRem,
} from 'folds'; } from 'folds';
@ -53,7 +56,7 @@ import { useRoomName } from '../../../hooks/useRoomMeta';
import { useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy'; import { useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy';
import { allRoomsAtom } from '../../../state/room-list/roomList'; import { allRoomsAtom } from '../../../state/room-list/roomList';
import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page'; import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels'; import { usePowerLevels } from '../../../hooks/usePowerLevels';
import { openInviteUser } from '../../../../client/action/navigation'; import { openInviteUser } from '../../../../client/action/navigation';
import { useRecursiveChildScopeFactory, useSpaceChildren } from '../../../state/hooks/roomList'; import { useRecursiveChildScopeFactory, useSpaceChildren } from '../../../state/hooks/roomList';
import { roomToParentsAtom } from '../../../state/room/roomToParents'; import { roomToParentsAtom } from '../../../state/room/roomToParents';
@ -64,7 +67,7 @@ import { LeaveSpacePrompt } from '../../../components/leave-space-prompt';
import { copyToClipboard } from '../../../utils/dom'; import { copyToClipboard } from '../../../utils/dom';
import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories'; import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
import { useStateEvent } from '../../../hooks/useStateEvent'; import { useStateEvent } from '../../../hooks/useStateEvent';
import { StateEvent } from '../../../../types/matrix/room'; import { Membership, StateEvent } from '../../../../types/matrix/room';
import { stopPropagation } from '../../../utils/keyboard'; import { stopPropagation } from '../../../utils/keyboard';
import { getMatrixToRoom } from '../../../plugins/matrix-to'; import { getMatrixToRoom } from '../../../plugins/matrix-to';
import { getViaServers } from '../../../plugins/via-servers'; import { getViaServers } from '../../../plugins/via-servers';
@ -76,6 +79,11 @@ import {
} from '../../../hooks/useRoomsNotificationPreferences'; } from '../../../hooks/useRoomsNotificationPreferences';
import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings'; import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate'; 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 = { type SpaceMenuProps = {
room: Room; room: Room;
@ -87,8 +95,10 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
const [developerTools] = useSetting(settingsAtom, 'developerTools'); const [developerTools] = useSetting(settingsAtom, 'developerTools');
const roomToParents = useAtomValue(roomToParentsAtom); const roomToParents = useAtomValue(roomToParentsAtom);
const powerLevels = usePowerLevels(room); const powerLevels = usePowerLevels(room);
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels); const creators = useRoomCreators(room);
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
const permissions = useRoomPermissions(creators, powerLevels);
const canInvite = permissions.action('invite', mx.getSafeUserId());
const openSpaceSettings = useOpenSpaceSettings(); const openSpaceSettings = useOpenSpaceSettings();
const { navigateRoom } = useRoomNavigate(); const { navigateRoom } = useRoomNavigate();
@ -284,6 +294,75 @@ function SpaceHeader() {
); );
} }
type SpaceTombstoneProps = { roomId: string; replacementRoomId: string };
export function SpaceTombstone({ roomId, replacementRoomId }: SpaceTombstoneProps) {
const mx = useMatrixClient();
const { navigateSpace } = 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) navigateSpace(replacementRoom.roomId);
if (joinState.status === AsyncStatus.Success) navigateSpace(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() { export function Space() {
const mx = useMatrixClient(); const mx = useMatrixClient();
const space = useSpace(); const space = useSpace();
@ -296,6 +375,8 @@ export function Space() {
const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]); const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
const notificationPreferences = useRoomsNotificationPreferencesContext(); const notificationPreferences = useRoomsNotificationPreferencesContext();
const tombstoneEvent = useStateEvent(space, StateEvent.RoomTombstone);
const selectedRoomId = useSelectedRoom(); const selectedRoomId = useSelectedRoom();
const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias); const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
const searchSelected = useSpaceSearchSelected(spaceIdOrAlias); const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
@ -351,6 +432,12 @@ export function Space() {
<SpaceHeader /> <SpaceHeader />
<PageNavContent scrollRef={scrollRef}> <PageNavContent scrollRef={scrollRef}>
<Box direction="Column" gap="300"> <Box direction="Column" gap="300">
{tombstoneEvent && (
<SpaceTombstone
roomId={space.roomId}
replacementRoomId={tombstoneEvent.getContent().replacement_room}
/>
)}
<NavCategory> <NavCategory>
<NavItem variant="Background" radii="400" aria-selected={lobbySelected}> <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
<NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}> <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>

4
src/app/plugins/matrix-to.ts
View file

@ -42,9 +42,9 @@ const MATRIX_TO = /^https?:\/\/matrix\.to\S*$/;
export const testMatrixTo = (href: string): boolean => MATRIX_TO.test(href); export const testMatrixTo = (href: string): boolean => MATRIX_TO.test(href);
const MATRIX_TO_USER = /^https?:\/\/matrix\.to\/#\/(@[^:\s]+:[^?/\s]+)\/?$/; const MATRIX_TO_USER = /^https?:\/\/matrix\.to\/#\/(@[^:\s]+:[^?/\s]+)\/?$/;
const MATRIX_TO_ROOM = /^https?:\/\/matrix\.to\/#\/([#!][^:\s]+:[^?/\s]+)\/?(\?[\S]*)?$/; const MATRIX_TO_ROOM = /^https?:\/\/matrix\.to\/#\/([#!][^?/\s]+)\/?(\?[\S]*)?$/;
const MATRIX_TO_ROOM_EVENT = const MATRIX_TO_ROOM_EVENT =
/^https?:\/\/matrix\.to\/#\/([#!][^:\s]+:[^?/\s]+)\/(\$[^?/\s]+)\/?(\?[\S]*)?$/; /^https?:\/\/matrix\.to\/#\/([#!][^?/\s]+)\/(\$[^?/\s]+)\/?(\?[\S]*)?$/;
export const parseMatrixToUser = (href: string): string | undefined => { export const parseMatrixToUser = (href: string): string | undefined => {
const match = href.match(MATRIX_TO_USER); const match = href.match(MATRIX_TO_USER);

12
src/app/plugins/via-servers.ts
View file

@ -1,11 +1,19 @@
import { Room } from 'matrix-js-sdk'; import { Room } from 'matrix-js-sdk';
import { IPowerLevels } from '../hooks/usePowerLevels'; import { IPowerLevels } from '../hooks/usePowerLevels';
import { getMxIdServer } from '../utils/matrix'; import { creatorsSupported, getMxIdServer } from '../utils/matrix';
import { StateEvent } from '../../types/matrix/room'; import { IRoomCreateContent, StateEvent } from '../../types/matrix/room';
import { getStateEvent } from '../utils/room'; import { getStateEvent } from '../utils/room';
export const getViaServers = (room: Room): string[] => { export const getViaServers = (room: Room): string[] => {
const getHighestPowerUserId = (): string | undefined => { const getHighestPowerUserId = (): string | undefined => {
const creatorEvent = getStateEvent(room, StateEvent.RoomCreate);
if (
creatorEvent &&
creatorsSupported(creatorEvent.getContent<IRoomCreateContent>().room_version)
) {
return creatorEvent.getSender();
}
const powerLevels = getStateEvent(room, StateEvent.RoomPowerLevels)?.getContent<IPowerLevels>(); const powerLevels = getStateEvent(room, StateEvent.RoomPowerLevels)?.getContent<IPowerLevels>();
if (!powerLevels) return undefined; if (!powerLevels) return undefined;

41
src/app/state/hooks/userRoomProfile.ts Normal file
View file

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

12
src/app/state/userRoomProfile.ts Normal file
View file

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

Some files were not shown because too many files have changed in this diff Show more