mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-11 09:40:28 +03:00
New room settings, add customizable power levels and dev tools (#2222)
* WIP - add room settings dialog * join rule setting - WIP * show emojis & stickers in room settings - WIP * restyle join rule switcher * Merge branch 'dev' into new-room-settings * add join rule hook * open room settings from global state * open new room settings from all places * rearrange settings menu item * add option for creating new image pack * room devtools - WIP * render room state events as list * add option to open state event * add option to edit state event * refactor text area code editor into hook * add option to send message and state event * add cutout card component * add hook for room account data * display room account data - WIP * refactor global account data editor component * add account data editor in room * fix font style in devtool * show state events in compact form * add option to delete room image pack * add server badge component * add member tile component * render members in room settings * add search in room settings member * add option to reset member search * add filter in room members * fix member virtual item key * remove color from serve badge in room members * show room in settings * fix loading indicator position * power level tags in room setting - WIP * generate fallback tag in backward compatible way * add color picker * add powers editor - WIP * add props to stop adding emoji to recent usage * add beta feature notice badge * add types for power level tag icon * refactor image pack rooms code to hook * option for adding new power levels tags * remove console log * refactor power icon * add option to edit power level tags * remove power level from powers pill * fix power level labels * add option to delete power levels * fix long power level name shrinks power integer * room permissions - WIP * add power level selector component * add room permissions * move user default permission setting to other group * add power permission peek menu * fix weigh of power switch text * hide above for max power in permission switcher * improve beta badge description * render room profile in room settings * add option to edit room profile * make room topic input text area * add option to enable room encryption in room settings * add option to change message history visibility * add option to change join rule * add option for addresses in room settings * close encryption dialog after enabling
This commit is contained in:
Ajay Bura
GitHub
parent
00f3df8719
commit
286983c833
73 changed files with 6196 additions and 420 deletions
208
src/app/features/room-settings/developer-tools/SendRoomEvent.tsx
Normal file
208
src/app/features/room-settings/developer-tools/SendRoomEvent.tsx
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
|
||||
import { MatrixError } from 'matrix-js-sdk';
|
||||
import {
|
||||
Box,
|
||||
Chip,
|
||||
Icon,
|
||||
Icons,
|
||||
IconButton,
|
||||
Text,
|
||||
config,
|
||||
Button,
|
||||
Spinner,
|
||||
color,
|
||||
TextArea as TextAreaComponent,
|
||||
Input,
|
||||
} from 'folds';
|
||||
import { Page, PageHeader } from '../../../components/page';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useRoom } from '../../../hooks/useRoom';
|
||||
import { useAlive } from '../../../hooks/useAlive';
|
||||
import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { syntaxErrorPosition } from '../../../utils/dom';
|
||||
import { Cursor } from '../../../plugins/text-area';
|
||||
|
||||
const EDITOR_INTENT_SPACE_COUNT = 2;
|
||||
|
||||
export type SendRoomEventProps = {
|
||||
type?: string;
|
||||
stateKey?: string;
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventProps) {
|
||||
const mx = useMatrixClient();
|
||||
const room = useRoom();
|
||||
const alive = useAlive();
|
||||
const composeStateEvent = typeof stateKey === 'string';
|
||||
|
||||
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [jsonError, setJSONError] = useState<SyntaxError>();
|
||||
const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
|
||||
textAreaRef,
|
||||
EDITOR_INTENT_SPACE_COUNT
|
||||
);
|
||||
|
||||
const [submitState, submit] = useAsyncCallback<
|
||||
object,
|
||||
MatrixError,
|
||||
[string, string | undefined, object]
|
||||
>(
|
||||
useCallback(
|
||||
(evtType, evtStateKey, evtContent) => {
|
||||
if (typeof evtStateKey === 'string') {
|
||||
return mx.sendStateEvent(room.roomId, evtType as any, evtContent, evtStateKey);
|
||||
}
|
||||
return mx.sendEvent(room.roomId, evtType as any, evtContent);
|
||||
},
|
||||
[mx, room]
|
||||
)
|
||||
);
|
||||
const submitting = submitState.status === AsyncStatus.Loading;
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (submitting) return;
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const typeInput = target?.typeInput as HTMLInputElement | undefined;
|
||||
const stateKeyInput = target?.stateKeyInput as HTMLInputElement | undefined;
|
||||
const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
|
||||
if (!typeInput || !contentTextArea) return;
|
||||
|
||||
const evtType = typeInput.value;
|
||||
const evtStateKey = stateKeyInput?.value;
|
||||
const contentStr = contentTextArea.value.trim();
|
||||
|
||||
let parsedContent: object;
|
||||
try {
|
||||
parsedContent = JSON.parse(contentStr);
|
||||
} catch (e) {
|
||||
setJSONError(e as SyntaxError);
|
||||
return;
|
||||
}
|
||||
setJSONError(undefined);
|
||||
|
||||
if (parsedContent === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
submit(evtType, evtStateKey, parsedContent).then(() => {
|
||||
if (alive()) {
|
||||
requestClose();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (jsonError) {
|
||||
const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
|
||||
const cursor = new Cursor(errorPosition, errorPosition, 'none');
|
||||
operations.select(cursor);
|
||||
getTarget()?.focus();
|
||||
}
|
||||
}, [jsonError, operations, getTarget]);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader outlined={false} balance>
|
||||
<Box alignItems="Center" grow="Yes" gap="200">
|
||||
<Box alignItems="Inherit" grow="Yes" gap="200">
|
||||
<Chip
|
||||
size="500"
|
||||
radii="Pill"
|
||||
onClick={requestClose}
|
||||
before={<Icon size="100" src={Icons.ArrowLeft} />}
|
||||
>
|
||||
<Text size="T300">Developer Tools</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton onClick={requestClose} variant="Surface">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit}
|
||||
grow="Yes"
|
||||
style={{ padding: config.space.S400 }}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
aria-disabled={submitting}
|
||||
>
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">{composeStateEvent ? 'State Event Type' : 'Message Event Type'}</Text>
|
||||
<Box gap="300">
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Input
|
||||
variant="Background"
|
||||
name="typeInput"
|
||||
size="400"
|
||||
radii="300"
|
||||
readOnly={submitting}
|
||||
defaultValue={type}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
variant="Success"
|
||||
size="400"
|
||||
radii="300"
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
|
||||
>
|
||||
<Text size="B400">Send</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{submitState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{submitState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
{composeStateEvent && (
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">State Key (Optional)</Text>
|
||||
<Input
|
||||
variant="Background"
|
||||
name="stateKeyInput"
|
||||
size="400"
|
||||
radii="300"
|
||||
readOnly={submitting}
|
||||
defaultValue={stateKey}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Box shrink="No">
|
||||
<Text size="L400">JSON Content</Text>
|
||||
</Box>
|
||||
<TextAreaComponent
|
||||
ref={textAreaRef}
|
||||
name="contentTextArea"
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
onKeyDown={handleKeyDown}
|
||||
resize="None"
|
||||
spellCheck="false"
|
||||
required
|
||||
readOnly={submitting}
|
||||
/>
|
||||
{jsonError && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>
|
||||
{jsonError.name}: {jsonError.message}
|
||||
</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue