mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-04 22:40:29 +03:00
add new create room
This commit is contained in:
Ajay Bura
parent
31942b1114
commit
6a0e3735ea
16 changed files with 963 additions and 22 deletions
|
|
@ -7,12 +7,18 @@ import * as css from './style.css';
|
|||
export const SequenceCard = as<
|
||||
'div',
|
||||
ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
|
||||
>(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => (
|
||||
<Box
|
||||
className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
|
||||
data-first-child={firstChild}
|
||||
data-last-child={lastChild}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
));
|
||||
>(
|
||||
(
|
||||
{ as: AsSequenceCard = 'div', className, variant, firstChild, lastChild, outlined, ...props },
|
||||
ref
|
||||
) => (
|
||||
<Box
|
||||
as={AsSequenceCard}
|
||||
className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
|
||||
data-first-child={firstChild}
|
||||
data-last-child={lastChild}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -37,6 +37,10 @@ export const SequenceCard = recipe({
|
|||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
},
|
||||
|
||||
'button&': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,11 @@ import {
|
|||
} from '../../../state/hooks/roomList';
|
||||
import { allRoomsAtom } from '../../../state/room-list/roomList';
|
||||
import { roomToParentsAtom } from '../../../state/room/roomToParents';
|
||||
import {
|
||||
knockRestrictedSupported,
|
||||
knockSupported,
|
||||
restrictedSupported,
|
||||
} from '../../../utils/matrix';
|
||||
|
||||
type RestrictedRoomAllowContent = {
|
||||
room_id: string;
|
||||
|
|
@ -39,10 +44,9 @@ type RoomJoinRulesProps = {
|
|||
export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) {
|
||||
const mx = useMatrixClient();
|
||||
const room = useRoom();
|
||||
const roomVersion = parseInt(room.getVersion(), 10);
|
||||
const allowKnockRestricted = roomVersion >= 10;
|
||||
const allowRestricted = roomVersion >= 8;
|
||||
const allowKnock = roomVersion >= 7;
|
||||
const allowKnockRestricted = knockRestrictedSupported(room.getVersion());
|
||||
const allowRestricted = restrictedSupported(room.getVersion());
|
||||
const allowKnock = knockSupported(room.getVersion());
|
||||
|
||||
const roomIdToParents = useAtomValue(roomToParentsAtom);
|
||||
const space = useSpaceOptionally();
|
||||
|
|
|
|||
680
src/app/features/create-room/CreateRoom.tsx
Normal file
680
src/app/features/create-room/CreateRoom.tsx
Normal file
|
|
@ -0,0 +1,680 @@
|
|||
import React, {
|
||||
FormEventHandler,
|
||||
KeyboardEventHandler,
|
||||
MouseEventHandler,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
ICreateRoomOpts,
|
||||
ICreateRoomStateEvent,
|
||||
JoinRule,
|
||||
MatrixClient,
|
||||
MatrixError,
|
||||
RestrictedAllowType,
|
||||
Room,
|
||||
} from 'matrix-js-sdk';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
color,
|
||||
config,
|
||||
Icon,
|
||||
Icons,
|
||||
Input,
|
||||
Menu,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Spinner,
|
||||
Switch,
|
||||
Text,
|
||||
TextArea,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
|
||||
import { isKeyHotkey } from 'is-hotkey';
|
||||
import { SettingTile } from '../../components/setting-tile';
|
||||
import { SequenceCard } from '../../components/sequence-card';
|
||||
import {
|
||||
getMxIdServer,
|
||||
knockRestrictedSupported,
|
||||
knockSupported,
|
||||
restrictedSupported,
|
||||
} from '../../utils/matrix';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common';
|
||||
import { AsyncState, AsyncStatus, useAsync, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||
import { useDebounce } from '../../hooks/useDebounce';
|
||||
import { useCapabilities } from '../../hooks/useCapabilities';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { getViaServers } from '../../plugins/via-servers';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import { getIdServer } from '../../../util/matrixUtil';
|
||||
import { useAlive } from '../../hooks/useAlive';
|
||||
import { ErrorCode } from '../../cs-errorcode';
|
||||
|
||||
export enum CreateRoomKind {
|
||||
Private = 'private',
|
||||
Restricted = 'restricted',
|
||||
Public = 'public',
|
||||
}
|
||||
type CreateRoomKindSelectorProps = {
|
||||
value?: CreateRoomKind;
|
||||
onSelect: (value: CreateRoomKind) => void;
|
||||
canRestrict?: boolean;
|
||||
disabled?: boolean;
|
||||
};
|
||||
export function CreateRoomKindSelector({
|
||||
value,
|
||||
onSelect,
|
||||
canRestrict,
|
||||
disabled,
|
||||
}: CreateRoomKindSelectorProps) {
|
||||
return (
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
|
||||
direction="Column"
|
||||
gap="100"
|
||||
as="button"
|
||||
type="button"
|
||||
aria-pressed={value === CreateRoomKind.Private}
|
||||
onClick={() => onSelect(CreateRoomKind.Private)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SettingTile
|
||||
before={<Icon size="400" src={Icons.HashLock} />}
|
||||
after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
|
||||
>
|
||||
<Text size="H6">Private</Text>
|
||||
<Text size="T300" priority="300">
|
||||
Only people with invite can join.
|
||||
</Text>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
{canRestrict && (
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
|
||||
direction="Column"
|
||||
gap="100"
|
||||
as="button"
|
||||
type="button"
|
||||
aria-pressed={value === CreateRoomKind.Restricted}
|
||||
onClick={() => onSelect(CreateRoomKind.Restricted)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SettingTile
|
||||
before={<Icon size="400" src={Icons.Hash} />}
|
||||
after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
|
||||
>
|
||||
<Text size="H6">Restricted</Text>
|
||||
<Text size="T300" priority="300">
|
||||
Only member of parent space can join.
|
||||
</Text>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
)}
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
|
||||
direction="Column"
|
||||
gap="100"
|
||||
as="button"
|
||||
type="button"
|
||||
aria-pressed={value === CreateRoomKind.Public}
|
||||
onClick={() => onSelect(CreateRoomKind.Public)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SettingTile
|
||||
before={<Icon size="400" src={Icons.HashGlobe} />}
|
||||
after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
|
||||
>
|
||||
<Text size="H6">Public</Text>
|
||||
<Text size="T300" priority="300">
|
||||
Anyone with the room address can join.
|
||||
</Text>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export function AliasInput({ disabled }: { disabled?: boolean }) {
|
||||
const mx = useMatrixClient();
|
||||
const aliasInputRef = useRef<HTMLInputElement>(null);
|
||||
const [aliasAvail, setAliasAvail] = useState<AsyncState<boolean, Error>>({
|
||||
status: AsyncStatus.Idle,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (aliasAvail.status === AsyncStatus.Success && aliasInputRef.current?.value === '') {
|
||||
setAliasAvail({ status: AsyncStatus.Idle });
|
||||
}
|
||||
}, [aliasAvail]);
|
||||
|
||||
const checkAliasAvail = useAsync(
|
||||
useCallback(
|
||||
async (aliasLocalPart: string) => {
|
||||
const roomAlias = `#${aliasLocalPart}:${getMxIdServer(mx.getSafeUserId())}`;
|
||||
try {
|
||||
const result = await mx.getRoomIdForAlias(roomAlias);
|
||||
return typeof result.room_id !== 'string';
|
||||
} catch (e) {
|
||||
if (e instanceof MatrixError && e.httpStatus === 404) {
|
||||
return true;
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
[mx]
|
||||
),
|
||||
setAliasAvail
|
||||
);
|
||||
const aliasAvailable: boolean | undefined =
|
||||
aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;
|
||||
|
||||
const debounceCheckAliasAvail = useDebounce(checkAliasAvail, { wait: 500 });
|
||||
|
||||
const handleAliasChange: FormEventHandler<HTMLInputElement> = (evt) => {
|
||||
const aliasInput = evt.currentTarget;
|
||||
const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
|
||||
if (aliasLocalPart) {
|
||||
aliasInput.value = aliasLocalPart;
|
||||
debounceCheckAliasAvail(aliasLocalPart);
|
||||
} else {
|
||||
setAliasAvail({ status: AsyncStatus.Idle });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAliasKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
|
||||
if (isKeyHotkey('enter', evt)) {
|
||||
evt.preventDefault();
|
||||
|
||||
const aliasInput = evt.currentTarget;
|
||||
const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
|
||||
if (aliasLocalPart) {
|
||||
checkAliasAvail(aliasLocalPart);
|
||||
} else {
|
||||
setAliasAvail({ status: AsyncStatus.Idle });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">Address (Optional)</Text>
|
||||
<Text size="T200" priority="300">
|
||||
Pick an unique address to make your room discoverable to public.
|
||||
</Text>
|
||||
<Input
|
||||
ref={aliasInputRef}
|
||||
onChange={handleAliasChange}
|
||||
before={
|
||||
aliasAvail.status === AsyncStatus.Loading ? (
|
||||
<Spinner size="100" variant="Secondary" />
|
||||
) : (
|
||||
<Icon size="100" src={Icons.Hash} />
|
||||
)
|
||||
}
|
||||
after={
|
||||
<Text style={{ maxWidth: toRem(150) }} truncate>
|
||||
:{getMxIdServer(mx.getSafeUserId())}
|
||||
</Text>
|
||||
}
|
||||
onKeyDown={handleAliasKeyDown}
|
||||
name="aliasInput"
|
||||
size="500"
|
||||
variant={aliasAvailable === true ? 'Success' : 'SurfaceVariant'}
|
||||
radii="400"
|
||||
disabled={disabled}
|
||||
/>
|
||||
{aliasAvailable === false && (
|
||||
<Box style={{ color: color.Critical.Main }} alignItems="Center" gap="100">
|
||||
<Icon src={Icons.Warning} filled size="50" />
|
||||
<Text size="T200">
|
||||
<b>This address is already taken. Please select a different one.</b>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export function RoomVersionSelector({
|
||||
versions,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
versions: string[];
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
|
||||
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handleSelect = (version: string) => {
|
||||
setMenuCords(undefined);
|
||||
onChange(version);
|
||||
};
|
||||
|
||||
return (
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="500"
|
||||
>
|
||||
<SettingTile
|
||||
title="Room Version"
|
||||
after={
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
offset={5}
|
||||
position="Bottom"
|
||||
align="End"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||
isKeyBackward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{ padding: config.space.S200, maxWidth: toRem(300) }}
|
||||
>
|
||||
<Text size="L400">Room Versions</Text>
|
||||
<Box wrap="Wrap" gap="100">
|
||||
{versions.map((version) => (
|
||||
<Chip
|
||||
key={version}
|
||||
variant={value === version ? 'Primary' : 'SurfaceVariant'}
|
||||
aria-pressed={value === version}
|
||||
outlined={value === version}
|
||||
radii="300"
|
||||
onClick={() => handleSelect(version)}
|
||||
type="button"
|
||||
>
|
||||
<Text truncate size="T300">
|
||||
{version}
|
||||
</Text>
|
||||
</Chip>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleMenu}
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
aria-pressed={!!menuCords}
|
||||
before={<Icon size="50" src={menuCords ? Icons.ChevronTop : Icons.ChevronBottom} />}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Text size="B300">{value}</Text>
|
||||
</Button>
|
||||
</PopOut>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
);
|
||||
}
|
||||
|
||||
type CreateRoomData = {
|
||||
version: string;
|
||||
parent?: Room;
|
||||
kind: CreateRoomKind;
|
||||
name: string;
|
||||
topic?: string;
|
||||
aliasLocalPart?: string;
|
||||
encryption: boolean;
|
||||
knock: boolean;
|
||||
allowFederation: boolean;
|
||||
};
|
||||
const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
|
||||
const creationContent = {
|
||||
'm.federate': data.allowFederation,
|
||||
};
|
||||
|
||||
const initialState: ICreateRoomStateEvent[] = [];
|
||||
|
||||
if (data.encryption) {
|
||||
initialState.push({
|
||||
type: 'm.room.encryption',
|
||||
state_key: '',
|
||||
content: {
|
||||
algorithm: 'm.megolm.v1.aes-sha2',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (data.parent) {
|
||||
initialState.push({
|
||||
type: StateEvent.SpaceParent,
|
||||
state_key: data.parent.roomId,
|
||||
content: {
|
||||
canonical: true,
|
||||
via: getViaServers(data.parent),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const getJoinRuleContent = (): RoomJoinRulesEventContent => {
|
||||
if (data.kind === CreateRoomKind.Public) {
|
||||
return {
|
||||
join_rule: JoinRule.Public,
|
||||
};
|
||||
}
|
||||
|
||||
if (data.kind === CreateRoomKind.Restricted && data.parent) {
|
||||
return {
|
||||
join_rule: data.knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
|
||||
allow: [
|
||||
{
|
||||
type: RestrictedAllowType.RoomMembership,
|
||||
room_id: data.parent.roomId,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
join_rule: data.knock ? JoinRule.Knock : JoinRule.Invite,
|
||||
};
|
||||
};
|
||||
|
||||
initialState.push({
|
||||
type: StateEvent.RoomJoinRules,
|
||||
content: getJoinRuleContent(),
|
||||
});
|
||||
|
||||
const options: ICreateRoomOpts = {
|
||||
room_version: data.version,
|
||||
name: data.name,
|
||||
topic: data.topic,
|
||||
room_alias_name: data.aliasLocalPart,
|
||||
creation_content: creationContent,
|
||||
initial_state: initialState,
|
||||
};
|
||||
|
||||
const result = await mx.createRoom(options);
|
||||
|
||||
if (data.parent) {
|
||||
await mx.sendStateEvent(
|
||||
data.parent.roomId,
|
||||
StateEvent.SpaceChild as any,
|
||||
{
|
||||
auto_join: false,
|
||||
suggested: false,
|
||||
via: [getIdServer(mx.getUserId())],
|
||||
},
|
||||
result.room_id
|
||||
);
|
||||
}
|
||||
|
||||
return result.room_id;
|
||||
};
|
||||
|
||||
const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
|
||||
if (kind === CreateRoomKind.Private) return Icons.HashLock;
|
||||
if (kind === CreateRoomKind.Restricted) return Icons.Hash;
|
||||
return Icons.HashGlobe;
|
||||
};
|
||||
|
||||
type CreateRoomFormProps = {
|
||||
defaultKind?: CreateRoomKind;
|
||||
space?: Room;
|
||||
onCreate?: (roomId: string) => void;
|
||||
};
|
||||
export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
|
||||
const mx = useMatrixClient();
|
||||
const alive = useAlive();
|
||||
|
||||
const capabilities = useCapabilities();
|
||||
const roomVersion = capabilities['m.room_versions'];
|
||||
const [selectedRoomVersion, selectRoomVersion] = useState(roomVersion?.default ?? '1');
|
||||
|
||||
const [kind, setKind] = useState(defaultKind ?? CreateRoomKind.Private);
|
||||
const [federation, setFederation] = useState(true);
|
||||
const [encryption, setEncryption] = useState(false);
|
||||
const [knock, setKnock] = useState(false);
|
||||
const [advance, setAdvance] = useState(false);
|
||||
|
||||
const allowRestricted = space && restrictedSupported(selectedRoomVersion);
|
||||
const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
|
||||
const allowKnockRestricted =
|
||||
kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
|
||||
|
||||
const handleRoomVersionChange = (version: string) => {
|
||||
if (!restrictedSupported(version)) {
|
||||
setKind(CreateRoomKind.Private);
|
||||
}
|
||||
selectRoomVersion(version);
|
||||
};
|
||||
|
||||
const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
|
||||
useCallback((data) => createRoom(mx, data), [mx])
|
||||
);
|
||||
const loading = createState.status === AsyncStatus.Loading;
|
||||
const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
|
||||
const disabled = createState.status === AsyncStatus.Loading;
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
if (disabled) return;
|
||||
const form = evt.currentTarget;
|
||||
|
||||
const nameInput = form.nameInput as HTMLInputElement | undefined;
|
||||
const topicTextArea = form.topicTextAria as HTMLTextAreaElement | undefined;
|
||||
const aliasInput = form.aliasInput as HTMLInputElement | undefined;
|
||||
const roomName = nameInput?.value.trim();
|
||||
const roomTopic = topicTextArea?.value.trim();
|
||||
const aliasLocalPart =
|
||||
aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
|
||||
|
||||
if (!roomName) return;
|
||||
const publicRoom = kind === CreateRoomKind.Public;
|
||||
let roomKnock = false;
|
||||
if (allowKnock && kind === CreateRoomKind.Private) {
|
||||
roomKnock = knock;
|
||||
}
|
||||
if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
|
||||
roomKnock = knock;
|
||||
}
|
||||
|
||||
create({
|
||||
version: selectedRoomVersion,
|
||||
parent: space,
|
||||
kind,
|
||||
name: roomName,
|
||||
topic: roomTopic || undefined,
|
||||
aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
|
||||
encryption: publicRoom ? false : encryption,
|
||||
knock: roomKnock,
|
||||
allowFederation: federation,
|
||||
}).then((roomId) => {
|
||||
if (alive()) {
|
||||
onCreate?.(roomId);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Access</Text>
|
||||
<CreateRoomKindSelector
|
||||
value={kind}
|
||||
onSelect={setKind}
|
||||
canRestrict={allowRestricted}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</Box>
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">Name</Text>
|
||||
<Input
|
||||
required
|
||||
before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />}
|
||||
name="nameInput"
|
||||
autoFocus
|
||||
size="500"
|
||||
variant="SurfaceVariant"
|
||||
radii="400"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</Box>
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">Topic (Optional)</Text>
|
||||
<TextArea
|
||||
name="topicTextAria"
|
||||
size="500"
|
||||
variant="SurfaceVariant"
|
||||
radii="400"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{kind === CreateRoomKind.Public && <AliasInput />}
|
||||
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Box gap="200" alignItems="End">
|
||||
<Text size="L400">Options</Text>
|
||||
<Box grow="Yes" justifyContent="End">
|
||||
<Chip
|
||||
radii="Pill"
|
||||
before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
|
||||
onClick={() => setAdvance(!advance)}
|
||||
type="button"
|
||||
>
|
||||
<Text size="T200">Advance Options</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
</Box>
|
||||
{kind !== CreateRoomKind.Public && (
|
||||
<>
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="500"
|
||||
>
|
||||
<SettingTile
|
||||
title="End-to-End Encryption"
|
||||
description="Once this feature is enabled, it can't be disabled after the room is created."
|
||||
after={
|
||||
<Switch
|
||||
variant="Primary"
|
||||
value={encryption}
|
||||
onChange={setEncryption}
|
||||
disabled={disabled}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
{advance && (allowKnock || allowKnockRestricted) && (
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="500"
|
||||
>
|
||||
<SettingTile
|
||||
title="Knock to Join"
|
||||
description="Anyone can send request to join this room."
|
||||
after={
|
||||
<Switch
|
||||
variant="Primary"
|
||||
value={knock}
|
||||
onChange={setKnock}
|
||||
disabled={disabled}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="500"
|
||||
>
|
||||
<SettingTile
|
||||
title="Allow Federation"
|
||||
description="Users from other servers can join."
|
||||
after={
|
||||
<Switch
|
||||
variant="Primary"
|
||||
value={federation}
|
||||
onChange={setFederation}
|
||||
disabled={disabled}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
{advance && (
|
||||
<RoomVersionSelector
|
||||
versions={roomVersion?.available ? Object.keys(roomVersion.available) : ['1']}
|
||||
value={selectedRoomVersion}
|
||||
onChange={handleRoomVersionChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Box style={{ color: color.Critical.Main }} alignItems="Center" gap="200">
|
||||
<Icon src={Icons.Warning} filled size="100" />
|
||||
<Text size="T300" style={{ color: color.Critical.Main }}>
|
||||
<b>
|
||||
{error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
|
||||
? `Server rate-limited your request for ${millisecondsToMinutes(
|
||||
(error.data.retry_after_ms as number | undefined) ?? 0
|
||||
)} minutes!`
|
||||
: error.message}
|
||||
</b>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
<Box shrink="No" direction="Column" gap="200">
|
||||
<Button
|
||||
type="submit"
|
||||
size="500"
|
||||
variant="Primary"
|
||||
radii="400"
|
||||
disabled={disabled}
|
||||
before={loading && <Spinner variant="Primary" fill="Solid" size="200" />}
|
||||
>
|
||||
<Text size="B500">Create</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
81
src/app/features/create-room/CreateRoomModalRenderer.tsx
Normal file
81
src/app/features/create-room/CreateRoomModalRenderer.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Header,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Modal,
|
||||
Overlay,
|
||||
OverlayBackdrop,
|
||||
OverlayCenter,
|
||||
Scroll,
|
||||
Text,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
|
||||
import { SpaceProvider } from '../../hooks/useSpace';
|
||||
import { CreateRoomForm } from './CreateRoom';
|
||||
import {
|
||||
useCloseCreateRoomModal,
|
||||
useCreateRoomModalState,
|
||||
} from '../../state/hooks/createRoomModal';
|
||||
import { CreateRoomModalState } from '../../state/createRoomModal';
|
||||
import * as css from './styles.css';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
|
||||
type CreateRoomModalProps = {
|
||||
state: CreateRoomModalState;
|
||||
};
|
||||
function CreateRoomModal({ state }: CreateRoomModalProps) {
|
||||
const { spaceId } = state;
|
||||
const closeDialog = useCloseCreateRoomModal();
|
||||
|
||||
const allJoinedRooms = useAllJoinedRoomsSet();
|
||||
const getRoom = useGetRoom(allJoinedRooms);
|
||||
const space = spaceId ? getRoom(spaceId) : undefined;
|
||||
|
||||
return (
|
||||
<SpaceProvider value={space ?? null}>
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
clickOutsideDeactivates: true,
|
||||
onDeactivate: closeDialog,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Modal className={css.CreateRoomModal} size="300" flexHeight>
|
||||
<Box direction="Column">
|
||||
<Header size="500" className={css.CreateRoomModalHeader}>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">New Room</Text>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton size="300" radii="300" onClick={closeDialog}>
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Header>
|
||||
<Scroll size="300" hideTrack>
|
||||
<Box className={css.CreateRoomModalContent} direction="Column" gap="500">
|
||||
<CreateRoomForm space={space} onCreate={closeDialog} />
|
||||
</Box>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Modal>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
</SpaceProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function CreateRoomModalRenderer() {
|
||||
const state = useCreateRoomModalState();
|
||||
|
||||
if (!state) return null;
|
||||
return <CreateRoomModal state={state} />;
|
||||
}
|
||||
2
src/app/features/create-room/index.ts
Normal file
2
src/app/features/create-room/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export * from './CreateRoom';
|
||||
export * from './CreateRoomModalRenderer';
|
||||
17
src/app/features/create-room/styles.css.ts
Normal file
17
src/app/features/create-room/styles.css.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { config } from 'folds';
|
||||
|
||||
export const CreateRoomModal = style({
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const CreateRoomModalHeader = style({
|
||||
padding: config.space.S200,
|
||||
paddingLeft: config.space.S400,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
});
|
||||
|
||||
export const CreateRoomModalContent = style({
|
||||
padding: config.space.S400,
|
||||
paddingRight: config.space.S200,
|
||||
});
|
||||
|
|
@ -34,6 +34,7 @@ import { openCreateRoom, openSpaceAddExisting } from '../../../client/action/nav
|
|||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { mxcUrlToHttp } from '../../utils/matrix';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
|
||||
|
||||
function SpaceProfileLoading() {
|
||||
return (
|
||||
|
|
@ -240,13 +241,14 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
|
|||
|
||||
function AddRoomButton({ item }: { item: HierarchyItem }) {
|
||||
const [cords, setCords] = useState<RectCords>();
|
||||
const openCreateRoomModal = useOpenCreateRoomModal();
|
||||
|
||||
const handleAddRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handleCreateRoom = () => {
|
||||
openCreateRoom(false, item.roomId as any);
|
||||
openCreateRoomModal(item.roomId);
|
||||
setCords(undefined);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@ import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
|
|||
import { RoomSettingsRenderer } from '../features/room-settings';
|
||||
import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
|
||||
import { SpaceSettingsRenderer } from '../features/space-settings';
|
||||
import { CreateRoomModalRenderer } from '../features/create-room';
|
||||
import { HomeCreateRoom } from './client/home/CreateRoom';
|
||||
|
||||
export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
|
||||
const { hashRouter } = clientConfig;
|
||||
|
|
@ -125,6 +127,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
|
|||
>
|
||||
<Outlet />
|
||||
</ClientLayout>
|
||||
<CreateRoomModalRenderer />
|
||||
<RoomSettingsRenderer />
|
||||
<SpaceSettingsRenderer />
|
||||
<ReceiveSelfDeviceVerification />
|
||||
|
|
@ -152,7 +155,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
|
|||
}
|
||||
>
|
||||
{mobile ? null : <Route index element={<WelcomePage />} />}
|
||||
<Route path={_CREATE_PATH} element={<p>create</p>} />
|
||||
<Route path={_CREATE_PATH} element={<HomeCreateRoom />} />
|
||||
<Route path={_JOIN_PATH} element={<p>join</p>} />
|
||||
<Route path={_SEARCH_PATH} element={<HomeSearch />} />
|
||||
<Route
|
||||
|
|
|
|||
57
src/app/pages/client/home/CreateRoom.tsx
Normal file
57
src/app/pages/client/home/CreateRoom.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import React, { useRef } from 'react';
|
||||
import { Box, Icon, Icons, Scroll, IconButton } from 'folds';
|
||||
import {
|
||||
Page,
|
||||
PageContent,
|
||||
PageContentCenter,
|
||||
PageHeader,
|
||||
PageHero,
|
||||
PageHeroSection,
|
||||
} from '../../../components/page';
|
||||
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||
import { CreateRoomForm } from '../../../features/create-room';
|
||||
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
||||
|
||||
export function HomeCreateRoom() {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const screenSize = useScreenSizeContext();
|
||||
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
|
||||
return (
|
||||
<Page>
|
||||
{screenSize === ScreenSize.Mobile && (
|
||||
<PageHeader balance outlined={false}>
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<BackRouteHandler>
|
||||
{(onBack) => (
|
||||
<IconButton onClick={onBack}>
|
||||
<Icon src={Icons.ArrowLeft} />
|
||||
</IconButton>
|
||||
)}
|
||||
</BackRouteHandler>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
)}
|
||||
<Box style={{ position: 'relative' }} grow="Yes">
|
||||
<Scroll ref={scrollRef} hideTrack visibility="Hover">
|
||||
<PageContent>
|
||||
<PageContentCenter>
|
||||
<PageHeroSection>
|
||||
<Box direction="Column" gap="700">
|
||||
<PageHero
|
||||
icon={<Icon size="600" src={Icons.Hash} />}
|
||||
title="Create Room"
|
||||
subTitle="Build a Room for Real-Time Conversations"
|
||||
/>
|
||||
<CreateRoomForm onCreate={navigateRoom} />
|
||||
</Box>
|
||||
</PageHeroSection>
|
||||
</PageContentCenter>
|
||||
</PageContent>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
|
@ -29,10 +29,18 @@ import {
|
|||
NavItemContent,
|
||||
NavLink,
|
||||
} from '../../../components/nav';
|
||||
import { getExplorePath, getHomeRoomPath, getHomeSearchPath } from '../../pathUtils';
|
||||
import {
|
||||
getExplorePath,
|
||||
getHomeCreatePath,
|
||||
getHomeRoomPath,
|
||||
getHomeSearchPath,
|
||||
} from '../../pathUtils';
|
||||
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
|
||||
import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
|
||||
import { useHomeSearchSelected } from '../../../hooks/router/useHomeSelected';
|
||||
import {
|
||||
useHomeCreateSelected,
|
||||
useHomeSearchSelected,
|
||||
} from '../../../hooks/router/useHomeSelected';
|
||||
import { useHomeRooms } from './useHomeRooms';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { VirtualTile } from '../../../components/virtualizer';
|
||||
|
|
@ -41,7 +49,7 @@ import { makeNavCategoryId } from '../../../state/closedNavCategories';
|
|||
import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
|
||||
import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
|
||||
import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
|
||||
import { openCreateRoom, openJoinAlias } from '../../../../client/action/navigation';
|
||||
import { openJoinAlias } from '../../../../client/action/navigation';
|
||||
import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page';
|
||||
import { useRoomsUnread } from '../../../state/hooks/unread';
|
||||
import { markAsRead } from '../../../../client/action/notifications';
|
||||
|
|
@ -174,7 +182,7 @@ function HomeEmpty() {
|
|||
}
|
||||
options={
|
||||
<>
|
||||
<Button onClick={() => openCreateRoom()} variant="Secondary" size="300">
|
||||
<Button onClick={() => navigate(getHomeCreatePath())} variant="Secondary" size="300">
|
||||
<Text size="B300" truncate>
|
||||
Create Room
|
||||
</Text>
|
||||
|
|
@ -204,8 +212,10 @@ export function Home() {
|
|||
const rooms = useHomeRooms();
|
||||
const notificationPreferences = useRoomsNotificationPreferencesContext();
|
||||
const roomToUnread = useAtomValue(roomToUnreadAtom);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const selectedRoomId = useSelectedRoom();
|
||||
const createRoomSelected = useHomeCreateSelected();
|
||||
const searchSelected = useHomeSearchSelected();
|
||||
const noRoomToDisplay = rooms.length === 0;
|
||||
const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
|
||||
|
|
@ -242,8 +252,8 @@ export function Home() {
|
|||
<PageNavContent scrollRef={scrollRef}>
|
||||
<Box direction="Column" gap="300">
|
||||
<NavCategory>
|
||||
<NavItem variant="Background" radii="400">
|
||||
<NavButton onClick={() => openCreateRoom()}>
|
||||
<NavItem variant="Background" radii="400" aria-selected={createRoomSelected}>
|
||||
<NavButton onClick={() => navigate(getHomeCreatePath())}>
|
||||
<NavItemContent>
|
||||
<Box as="span" grow="Yes" alignItems="Center" gap="200">
|
||||
<Avatar size="200" radii="400">
|
||||
|
|
|
|||
7
src/app/state/createRoomModal.ts
Normal file
7
src/app/state/createRoomModal.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { atom } from 'jotai';
|
||||
|
||||
export type CreateRoomModalState = {
|
||||
spaceId?: string;
|
||||
};
|
||||
|
||||
export const createRoomModalAtom = atom<CreateRoomModalState | undefined>(undefined);
|
||||
34
src/app/state/hooks/createRoomModal.ts
Normal file
34
src/app/state/hooks/createRoomModal.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { useCallback } from 'react';
|
||||
import { useAtomValue, useSetAtom } from 'jotai';
|
||||
import { createRoomModalAtom, CreateRoomModalState } from '../createRoomModal';
|
||||
|
||||
export const useCreateRoomModalState = (): CreateRoomModalState | undefined => {
|
||||
const data = useAtomValue(createRoomModalAtom);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
type CloseCallback = () => void;
|
||||
export const useCloseCreateRoomModal = (): CloseCallback => {
|
||||
const setSettings = useSetAtom(createRoomModalAtom);
|
||||
|
||||
const close: CloseCallback = useCallback(() => {
|
||||
setSettings(undefined);
|
||||
}, [setSettings]);
|
||||
|
||||
return close;
|
||||
};
|
||||
|
||||
type OpenCallback = (space?: string) => void;
|
||||
export const useOpenCreateRoomModal = (): OpenCallback => {
|
||||
const setSettings = useSetAtom(createRoomModalAtom);
|
||||
|
||||
const open: OpenCallback = useCallback(
|
||||
(spaceId) => {
|
||||
setSettings({ spaceId });
|
||||
},
|
||||
[setSettings]
|
||||
);
|
||||
|
||||
return open;
|
||||
};
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { ComplexStyleRule } from '@vanilla-extract/css';
|
||||
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
|
||||
import { ContainerColor as TContainerColor, DefaultReset, color } from 'folds';
|
||||
import { ContainerColor as TContainerColor, DefaultReset, color, config } from 'folds';
|
||||
|
||||
const getVariant = (variant: TContainerColor): ComplexStyleRule => ({
|
||||
vars: {
|
||||
|
|
@ -9,6 +9,20 @@ const getVariant = (variant: TContainerColor): ComplexStyleRule => ({
|
|||
outlineColor: color[variant].ContainerLine,
|
||||
color: color[variant].OnContainer,
|
||||
},
|
||||
selectors: {
|
||||
'button&[aria-pressed=true]': {
|
||||
backgroundColor: color[variant].ContainerActive,
|
||||
},
|
||||
'button&:hover, &:focus-visible': {
|
||||
backgroundColor: color[variant].ContainerHover,
|
||||
},
|
||||
'button&:active': {
|
||||
backgroundColor: color[variant].ContainerActive,
|
||||
},
|
||||
'button&[disabled]': {
|
||||
opacity: config.opacity.Disabled,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const ContainerColor = recipe({
|
||||
|
|
|
|||
|
|
@ -18,6 +18,13 @@ export const millisecondsToMinutesAndSeconds = (milliseconds: number): string =>
|
|||
return `${mm}:${ss < 10 ? '0' : ''}${ss}`;
|
||||
};
|
||||
|
||||
export const millisecondsToMinutes = (milliseconds: number): string => {
|
||||
const seconds = Math.floor(milliseconds / 1000);
|
||||
const mm = Math.floor(seconds / 60);
|
||||
|
||||
return mm.toString();
|
||||
};
|
||||
|
||||
export const secondsToMinutesAndSeconds = (seconds: number): string => {
|
||||
const mm = Math.floor(seconds / 60);
|
||||
const ss = Math.round(seconds % 60);
|
||||
|
|
|
|||
|
|
@ -344,3 +344,16 @@ export const rateLimitedActions = async <T, R = void>(
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const knockSupported = (version: string): boolean => {
|
||||
const unsupportedVersion = ['1', '2', '3', '4', '5', '6'];
|
||||
return !unsupportedVersion.includes(version);
|
||||
};
|
||||
export const restrictedSupported = (version: string): boolean => {
|
||||
const unsupportedVersion = ['1', '2', '3', '4', '5', '6', '7'];
|
||||
return !unsupportedVersion.includes(version);
|
||||
};
|
||||
export const knockRestrictedSupported = (version: string): boolean => {
|
||||
const unsupportedVersion = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
||||
return !unsupportedVersion.includes(version);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue