g4borg/cinny
1
0
Fork 0
forked from github/cinny
Code Pull Requests Packages Wiki Activity

refactor: rename kind/voice to access/type and simplify room creation

Browse Source 
- rename CreateRoomVoice to CreateRoomType and modal voice state to type
- rename CreateRoomKind to CreateRoomAccess and KindSelector to AccessSelector
- propagate access/defaultAccess through create room and create space forms
- set voice room power levels via createRoom power_level_content_override
This commit is contained in:
hazre
2026-02-19 22:31:42 +01:00
parent c97fba71fa
commit 7f73cafb27
11 changed files with 130 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/components/create-room/CreateRoomKindSelector.tsx → src/app/components/create-room/CreateRoomAccessSelector.tsx
View File

@@ -2,39 +2,39 @@ import React from 'react';
import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
import { SequenceCard } from '../sequence-card';
import { SettingTile } from '../setting-tile';
import { CreateRoomKind } from './types';
import { CreateRoomAccess } from './types';
type CreateRoomKindSelectorProps = {
value?: CreateRoomKind;
onSelect: (value: CreateRoomKind) => void;
type CreateRoomAccessSelectorProps = {
value?: CreateRoomAccess;
onSelect: (value: CreateRoomAccess) => void;
canRestrict?: boolean;
disabled?: boolean;
getIcon: (kind: CreateRoomKind) => IconSrc;
getIcon: (access: CreateRoomAccess) => IconSrc;
};
export function CreateRoomKindSelector({
export function CreateRoomAccessSelector({
value,
onSelect,
canRestrict,
disabled,
getIcon,
}: CreateRoomKindSelectorProps) {
}: CreateRoomAccessSelectorProps) {
return (
<Box shrink="No" direction="Column" gap="100">
{canRestrict && (
<SequenceCard
style={{ padding: config.space.S300 }}
variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
variant={value === CreateRoomAccess.Restricted ? 'Primary' : 'SurfaceVariant'}
direction="Column"
gap="100"
as="button"
type="button"
aria-pressed={value === CreateRoomKind.Restricted}
onClick={() => onSelect(CreateRoomKind.Restricted)}
aria-pressed={value === CreateRoomAccess.Restricted}
onClick={() => onSelect(CreateRoomAccess.Restricted)}
disabled={disabled}
>
<SettingTile
before={<Icon size="400" src={getIcon(CreateRoomKind.Restricted)} />}
after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
before={<Icon size="400" src={getIcon(CreateRoomAccess.Restricted)} />}
after={value === CreateRoomAccess.Restricted && <Icon src={Icons.Check} />}
>
<Text size="H6">Restricted</Text>
<Text size="T300" priority="300">
@@ -45,18 +45,18 @@ export function CreateRoomKindSelector({
)}
<SequenceCard
style={{ padding: config.space.S300 }}
variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
variant={value === CreateRoomAccess.Private ? 'Primary' : 'SurfaceVariant'}
direction="Column"
gap="100"
as="button"
type="button"
aria-pressed={value === CreateRoomKind.Private}
onClick={() => onSelect(CreateRoomKind.Private)}
aria-pressed={value === CreateRoomAccess.Private}
onClick={() => onSelect(CreateRoomAccess.Private)}
disabled={disabled}
>
<SettingTile
before={<Icon size="400" src={getIcon(CreateRoomKind.Private)} />}
after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
before={<Icon size="400" src={getIcon(CreateRoomAccess.Private)} />}
after={value === CreateRoomAccess.Private && <Icon src={Icons.Check} />}
>
<Text size="H6">Private</Text>
<Text size="T300" priority="300">
@@ -66,18 +66,18 @@ export function CreateRoomKindSelector({
</SequenceCard>
<SequenceCard
style={{ padding: config.space.S300 }}
variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
variant={value === CreateRoomAccess.Public ? 'Primary' : 'SurfaceVariant'}
direction="Column"
gap="100"
as="button"
type="button"
aria-pressed={value === CreateRoomKind.Public}
onClick={() => onSelect(CreateRoomKind.Public)}
aria-pressed={value === CreateRoomAccess.Public}
onClick={() => onSelect(CreateRoomAccess.Public)}
disabled={disabled}
>
<SettingTile
before={<Icon size="400" src={getIcon(CreateRoomKind.Public)} />}
after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
before={<Icon size="400" src={getIcon(CreateRoomAccess.Public)} />}
after={value === CreateRoomAccess.Public && <Icon src={Icons.Check} />}
>
<Text size="H6">Public</Text>
<Text size="T300" priority="300">

34
src/app/components/create-room/CreateRoomVoiceSelector.tsx → src/app/components/create-room/CreateRoomTypeSelector.tsx
View File

@@ -2,36 +2,36 @@ import React from 'react';
import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
import { SequenceCard } from '../sequence-card';
import { SettingTile } from '../setting-tile';
import { CreateRoomVoice } from './types';
import { CreateRoomType } from './types';
type CreateRoomVoiceSelectorProps = {
value?: CreateRoomVoice;
onSelect: (value: CreateRoomVoice) => void;
type CreateRoomTypeSelectorProps = {
value?: CreateRoomType;
onSelect: (value: CreateRoomType) => void;
disabled?: boolean;
getIcon: (kind: CreateRoomVoice) => IconSrc;
getIcon: (type: CreateRoomType) => IconSrc;
};
export function CreateRoomVoiceSelector({
export function CreateRoomTypeSelector({
value,
onSelect,
disabled,
getIcon,
}: CreateRoomVoiceSelectorProps) {
}: CreateRoomTypeSelectorProps) {
return (
<Box shrink="No" direction="Column" gap="100">
<SequenceCard
style={{ padding: config.space.S300 }}
variant={value === CreateRoomVoice.TextRoom ? 'Primary' : 'SurfaceVariant'}
variant={value === CreateRoomType.TextRoom ? 'Primary' : 'SurfaceVariant'}
direction="Column"
gap="100"
as="button"
type="button"
aria-pressed={value === CreateRoomVoice.TextRoom}
onClick={() => onSelect(CreateRoomVoice.TextRoom)}
aria-pressed={value === CreateRoomType.TextRoom}
onClick={() => onSelect(CreateRoomType.TextRoom)}
disabled={disabled}
>
<SettingTile
before={<Icon size="400" src={getIcon(CreateRoomVoice.TextRoom)} />}
after={value === CreateRoomVoice.TextRoom && <Icon src={Icons.Check} />}
before={<Icon size="400" src={getIcon(CreateRoomType.TextRoom)} />}
after={value === CreateRoomType.TextRoom && <Icon src={Icons.Check} />}
>
<Text size="H6">Text</Text>
<Text size="T300" priority="300">
@@ -41,18 +41,18 @@ export function CreateRoomVoiceSelector({
</SequenceCard>
<SequenceCard
style={{ padding: config.space.S300 }}
variant={value === CreateRoomVoice.VoiceRoom ? 'Primary' : 'SurfaceVariant'}
variant={value === CreateRoomType.VoiceRoom ? 'Primary' : 'SurfaceVariant'}
direction="Column"
gap="100"
as="button"
type="button"
aria-pressed={value === CreateRoomVoice.VoiceRoom}
onClick={() => onSelect(CreateRoomVoice.VoiceRoom)}
aria-pressed={value === CreateRoomType.VoiceRoom}
onClick={() => onSelect(CreateRoomType.VoiceRoom)}
disabled={disabled}
>
<SettingTile
before={<Icon size="400" src={getIcon(CreateRoomVoice.VoiceRoom)} />}
after={value === CreateRoomVoice.VoiceRoom && <Icon src={Icons.Check} />}
before={<Icon size="400" src={getIcon(CreateRoomType.VoiceRoom)} />}
after={value === CreateRoomType.VoiceRoom && <Icon src={Icons.Check} />}
>
<Text size="H6">Voice</Text>
<Text size="T300" priority="300">

2
src/app/components/create-room/index.ts
View File

@@ -1,4 +1,4 @@
export * from './CreateRoomKindSelector';
export * from './CreateRoomAccessSelector';
export * from './CreateRoomAliasInput';
export * from './RoomVersionSelector';
export * from './utils';

4
src/app/components/create-room/types.ts
View File

@@ -1,9 +1,9 @@
export enum CreateRoomVoice {
export enum CreateRoomType {
TextRoom = 'text',
VoiceRoom = 'voice',
}
export enum CreateRoomKind {
export enum CreateRoomAccess {
Private = 'private',
Restricted = 'restricted',
Public = 'public',

60
src/app/components/create-room/utils.ts
View File

@@ -10,8 +10,7 @@ import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
import { RoomType, StateEvent } from '../../../types/matrix/room';
import { getViaServers } from '../../plugins/via-servers';
import { getMxIdServer } from '../../utils/matrix';
import { IPowerLevels } from '../../hooks/usePowerLevels';
import { CreateRoomKind } from './types';
import { CreateRoomAccess } from './types';
export const createRoomCreationContent = (
type: RoomType | undefined,
@@ -33,7 +32,7 @@ export const createRoomCreationContent = (
};
export const createRoomJoinRulesState = (
kind: CreateRoomKind,
access: CreateRoomAccess,
parent: Room | undefined,
knock: boolean
) => {
@@ -41,13 +40,13 @@ export const createRoomJoinRulesState = (
join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
};
if (kind === CreateRoomKind.Public) {
if (access === CreateRoomAccess.Public) {
content = {
join_rule: JoinRule.Public,
};
}
if (kind === CreateRoomKind.Restricted && parent) {
if (access === CreateRoomAccess.Restricted && parent) {
content = {
join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
allow: [
@@ -89,43 +88,17 @@ export const createRoomCallState = () => ({
content: {},
});
export const createPowerLevelContentOverrides = (
base: IPowerLevels,
overrides: Partial<IPowerLevels>
): IPowerLevels => ({
...base,
...overrides,
...(base.events || overrides.events
? {
events: {
...base.events,
...overrides.events,
},
}
: {}),
...(base.users || overrides.users
? {
users: {
...base.users,
...overrides.users,
},
}
: {}),
...(base.notifications || overrides.notifications
? {
notifications: {
...base.notifications,
...overrides.notifications,
},
}
: {}),
export const createVoiceRoomPowerLevelsOverride = () => ({
events: {
[StateEvent.GroupCallMemberPrefix]: 0,
},
});
export type CreateRoomData = {
version: string;
type?: RoomType;
parent?: Room;
kind: CreateRoomKind;
access: CreateRoomAccess;
name: string;
topic?: string;
aliasLocalPart?: string;
@@ -133,7 +106,6 @@ export type CreateRoomData = {
knock: boolean;
allowFederation: boolean;
additionalCreators?: string[];
powerLevelContentOverrides?: IPowerLevels;
};
export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
const initialState: ICreateRoomStateEvent[] = [];
@@ -150,7 +122,7 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
initialState.push(createRoomCallState());
}
initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
initialState.push(createRoomJoinRulesState(data.access, data.parent, data.knock));
const options: ICreateRoomOpts = {
room_version: data.version,
@@ -162,6 +134,8 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
data.allowFederation,
data.additionalCreators
),
power_level_content_override:
data.type === RoomType.Call ? createVoiceRoomPowerLevelsOverride() : undefined,
initial_state: initialState,
};
@@ -180,15 +154,5 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
);
}
if (data.powerLevelContentOverrides) {
const roomPowers = await mx.getStateEvent(result.room_id, StateEvent.RoomPowerLevels, '');
const updatedPowers = createPowerLevelContentOverrides(
roomPowers,
data.powerLevelContentOverrides
);
await mx.sendStateEvent(result.room_id, StateEvent.RoomPowerLevels as any, updatedPowers, '');
}
return result.room_id;
};

84
src/app/features/create-room/CreateRoom.tsx
View File

@@ -33,41 +33,40 @@ import {
createRoom,
CreateRoomAliasInput,
CreateRoomData,
CreateRoomKind,
CreateRoomKindSelector,
CreateRoomAccess,
CreateRoomAccessSelector,
RoomVersionSelector,
useAdditionalCreators,
CreateRoomVoice,
CreateRoomType,
} from '../../components/create-room';
import { RoomType, StateEvent } from '../../../types/matrix/room';
import { IPowerLevels } from '../../hooks/usePowerLevels';
import { CreateRoomVoiceSelector } from '../../components/create-room/CreateRoomVoiceSelector';
import { RoomType } from '../../../types/matrix/room';
import { CreateRoomTypeSelector } from '../../components/create-room/CreateRoomTypeSelector';
import { getRoomIconSrc } from '../../utils/room';
const getCreateRoomKindToIcon = (kind: CreateRoomKind, voice?: CreateRoomVoice) => {
const isVoiceRoom = voice === CreateRoomVoice.VoiceRoom;
const getCreateRoomAccessToIcon = (access: CreateRoomAccess, type?: CreateRoomType) => {
const isVoiceRoom = type === CreateRoomType.VoiceRoom;
let joinRule: JoinRule = JoinRule.Public;
if (kind === CreateRoomKind.Restricted) joinRule = JoinRule.Restricted;
if (kind === CreateRoomKind.Private) joinRule = JoinRule.Knock;
if (access === CreateRoomAccess.Restricted) joinRule = JoinRule.Restricted;
if (access === CreateRoomAccess.Private) joinRule = JoinRule.Knock;
return getRoomIconSrc(Icons, isVoiceRoom ? RoomType.Call : undefined, joinRule);
};
const getCreateRoomVoiceToIcon = (kind: CreateRoomVoice) => {
if (kind === CreateRoomVoice.VoiceRoom) return Icons.VolumeHigh;
const getCreateRoomTypeToIcon = (type: CreateRoomType) => {
if (type === CreateRoomType.VoiceRoom) return Icons.VolumeHigh;
return Icons.Hash;
};
type CreateRoomFormProps = {
defaultKind?: CreateRoomKind;
defaultVoice?: CreateRoomVoice;
defaultAccess?: CreateRoomAccess;
defaultType?: CreateRoomType;
space?: Room;
onCreate?: (roomId: string) => void;
};
export function CreateRoomForm({
defaultKind,
defaultVoice,
defaultAccess,
defaultType,
space,
onCreate,
}: CreateRoomFormProps) {
@@ -84,9 +83,9 @@ export function CreateRoomForm({
const allowRestricted = space && restrictedSupported(selectedRoomVersion);
const [voice, setVoice] = useState(defaultVoice ?? CreateRoomVoice.TextRoom);
const [kind, setKind] = useState(
defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
const [type, setType] = useState(defaultType ?? CreateRoomType.TextRoom);
const [access, setAccess] = useState(
defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
);
const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
@@ -96,13 +95,13 @@ export function CreateRoomForm({
const [knock, setKnock] = useState(false);
const [advance, setAdvance] = useState(false);
const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
const allowKnock = access === CreateRoomAccess.Private && knockSupported(selectedRoomVersion);
const allowKnockRestricted =
kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
access === CreateRoomAccess.Restricted && knockRestrictedSupported(selectedRoomVersion);
const handleRoomVersionChange = (version: string) => {
if (!restrictedSupported(version)) {
setKind(CreateRoomKind.Private);
setAccess(CreateRoomAccess.Private);
}
selectRoomVersion(version);
};
@@ -128,29 +127,23 @@ export function CreateRoomForm({
aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
if (!roomName) return;
const publicRoom = kind === CreateRoomKind.Public;
const publicRoom = access === CreateRoomAccess.Public;
let roomKnock = false;
if (allowKnock && kind === CreateRoomKind.Private) {
if (allowKnock && access === CreateRoomAccess.Private) {
roomKnock = knock;
}
if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
if (allowKnockRestricted && access === CreateRoomAccess.Restricted) {
roomKnock = knock;
}
let roomType;
const powerOverrides: IPowerLevels = {
events: {},
};
if (voice === CreateRoomVoice.VoiceRoom) {
roomType = RoomType.Call;
powerOverrides.events![StateEvent.GroupCallMemberPrefix] = 0;
}
let roomType: RoomType | undefined;
if (type === CreateRoomType.VoiceRoom) roomType = RoomType.Call;
create({
version: selectedRoomVersion,
type: roomType,
parent: space,
kind,
access,
name: roomName,
topic: roomTopic || undefined,
aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
@@ -158,7 +151,6 @@ export function CreateRoomForm({
knock: roomKnock,
allowFederation: federation,
additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
powerLevelContentOverrides: powerOverrides,
}).then((roomId) => {
if (alive()) {
onCreate?.(roomId);
@@ -171,29 +163,29 @@ export function CreateRoomForm({
{!space && (
<Box direction="Column" gap="100">
<Text size="L400">Type</Text>
<CreateRoomVoiceSelector
value={voice}
onSelect={setVoice}
<CreateRoomTypeSelector
value={type}
onSelect={setType}
disabled={disabled}
getIcon={getCreateRoomVoiceToIcon}
getIcon={getCreateRoomTypeToIcon}
/>
</Box>
)}
<Box direction="Column" gap="100">
<Text size="L400">Access</Text>
<CreateRoomKindSelector
value={kind}
onSelect={setKind}
<CreateRoomAccessSelector
value={access}
onSelect={setAccess}
canRestrict={allowRestricted}
disabled={disabled}
getIcon={(roomKind) => getCreateRoomKindToIcon(roomKind, voice)}
getIcon={(roomAccess) => getCreateRoomAccessToIcon(roomAccess, type)}
/>
</Box>
<Box shrink="No" direction="Column" gap="100">
<Text size="L400">Name</Text>
<Input
required
before={<Icon size="100" src={getCreateRoomKindToIcon(kind, voice)} />}
before={<Icon size="100" src={getCreateRoomAccessToIcon(access, type)} />}
name="nameInput"
autoFocus
size="500"
@@ -214,7 +206,7 @@ export function CreateRoomForm({
/>
</Box>
{kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
{access === CreateRoomAccess.Public && <CreateRoomAliasInput disabled={disabled} />}
<Box shrink="No" direction="Column" gap="100">
<Box gap="200" alignItems="End">
@@ -244,7 +236,7 @@ export function CreateRoomForm({
/>
</SequenceCard>
)}
{kind !== CreateRoomKind.Public && (
{access !== CreateRoomAccess.Public && (
<>
<SequenceCard
style={{ padding: config.space.S300 }}

8
src/app/features/create-room/CreateRoomModal.tsx
View File

@@ -23,13 +23,13 @@ import {
} from '../../state/hooks/createRoomModal';
import { CreateRoomModalState } from '../../state/createRoomModal';
import { stopPropagation } from '../../utils/keyboard';
import { CreateRoomVoice } from '../../components/create-room/types';
import { CreateRoomType } from '../../components/create-room/types';
type CreateRoomModalProps = {
state: CreateRoomModalState;
};
function CreateRoomModal({ state }: CreateRoomModalProps) {
const { spaceId, voice } = state;
const { spaceId, type } = state;
const closeDialog = useCloseCreateRoomModal();
const allJoinedRooms = useAllJoinedRoomsSet();
@@ -58,7 +58,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
}}
>
<Box grow="Yes">
<Text size="H4">New {voice === CreateRoomVoice.VoiceRoom && 'Voice '}Room</Text>
<Text size="H4">New {type === CreateRoomType.VoiceRoom && 'Voice '}Room</Text>
</Box>
<Box shrink="No">
<IconButton size="300" radii="300" onClick={closeDialog}>
@@ -75,7 +75,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
direction="Column"
gap="500"
>
<CreateRoomForm space={space} onCreate={closeDialog} defaultVoice={voice} />
<CreateRoomForm space={space} onCreate={closeDialog} defaultType={type} />
</Box>
</Scroll>
</Box>

46
src/app/features/create-space/CreateSpace.tsx
View File

@@ -33,25 +33,25 @@ import {
createRoom,
CreateRoomAliasInput,
CreateRoomData,
CreateRoomKind,
CreateRoomKindSelector,
CreateRoomAccess,
CreateRoomAccessSelector,
RoomVersionSelector,
useAdditionalCreators,
} from '../../components/create-room';
import { RoomType } from '../../../types/matrix/room';
const getCreateSpaceKindToIcon = (kind: CreateRoomKind) => {
if (kind === CreateRoomKind.Private) return Icons.SpaceLock;
if (kind === CreateRoomKind.Restricted) return Icons.Space;
const getCreateSpaceAccessToIcon = (access: CreateRoomAccess) => {
if (access === CreateRoomAccess.Private) return Icons.SpaceLock;
if (access === CreateRoomAccess.Restricted) return Icons.Space;
return Icons.SpaceGlobe;
};
type CreateSpaceFormProps = {
defaultKind?: CreateRoomKind;
defaultAccess?: CreateRoomAccess;
space?: Room;
onCreate?: (roomId: string) => void;
};
export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFormProps) {
export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceFormProps) {
const mx = useMatrixClient();
const alive = useAlive();
@@ -65,8 +65,8 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
const allowRestricted = space && restrictedSupported(selectedRoomVersion);
const [kind, setKind] = useState(
defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
const [access, setAccess] = useState(
defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
);
const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
@@ -76,13 +76,13 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
const [knock, setKnock] = useState(false);
const [advance, setAdvance] = useState(false);
const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
const allowKnock = access === CreateRoomAccess.Private && knockSupported(selectedRoomVersion);
const allowKnockRestricted =
kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
access === CreateRoomAccess.Restricted && knockRestrictedSupported(selectedRoomVersion);
const handleRoomVersionChange = (version: string) => {
if (!restrictedSupported(version)) {
setKind(CreateRoomKind.Private);
setAccess(CreateRoomAccess.Private);
}
selectRoomVersion(version);
};
@@ -108,12 +108,12 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
if (!roomName) return;
const publicRoom = kind === CreateRoomKind.Public;
const publicRoom = access === CreateRoomAccess.Public;
let roomKnock = false;
if (allowKnock && kind === CreateRoomKind.Private) {
if (allowKnock && access === CreateRoomAccess.Private) {
roomKnock = knock;
}
if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
if (allowKnockRestricted && access === CreateRoomAccess.Restricted) {
roomKnock = knock;
}
@@ -121,7 +121,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
version: selectedRoomVersion,
type: RoomType.Space,
parent: space,
kind,
access,
name: roomName,
topic: roomTopic || undefined,
aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
@@ -139,19 +139,19 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
<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}
<CreateRoomAccessSelector
value={access}
onSelect={setAccess}
canRestrict={allowRestricted}
disabled={disabled}
getIcon={getCreateSpaceKindToIcon}
getIcon={getCreateSpaceAccessToIcon}
/>
</Box>
<Box shrink="No" direction="Column" gap="100">
<Text size="L400">Name</Text>
<Input
required
before={<Icon size="100" src={getCreateSpaceKindToIcon(kind)} />}
before={<Icon size="100" src={getCreateSpaceAccessToIcon(access)} />}
name="nameInput"
autoFocus
size="500"
@@ -172,7 +172,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
/>
</Box>
{kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
{access === CreateRoomAccess.Public && <CreateRoomAliasInput disabled={disabled} />}
<Box shrink="No" direction="Column" gap="100">
<Box gap="200" alignItems="End">
@@ -202,7 +202,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
/>
</SequenceCard>
)}
{kind !== CreateRoomKind.Public && advance && (allowKnock || allowKnockRestricted) && (
{access !== CreateRoomAccess.Public && advance && (allowKnock || allowKnockRestricted) && (
<SequenceCard
style={{ padding: config.space.S300 }}
variant="SurfaceVariant"

10
src/app/features/lobby/SpaceItem.tsx
View File

@@ -36,7 +36,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
import { AddExistingModal } from '../add-existing';
import { CreateRoomVoice } from '../../components/create-room/types';
import { CreateRoomType } from '../../components/create-room/types';
function SpaceProfileLoading() {
return (
@@ -250,8 +250,8 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
setCords(evt.currentTarget.getBoundingClientRect());
};
const handleCreateRoom = (voice?: CreateRoomVoice) => {
openCreateRoomModal(item.roomId, voice);
const handleCreateRoom = (type?: CreateRoomType) => {
openCreateRoomModal(item.roomId, type);
setCords(undefined);
};
@@ -282,7 +282,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
radii="300"
variant="Primary"
fill="None"
onClick={() => handleCreateRoom(CreateRoomVoice.TextRoom)}
onClick={() => handleCreateRoom(CreateRoomType.TextRoom)}
>
<Text size="T300">New Room</Text>
</MenuItem>
@@ -291,7 +291,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
radii="300"
variant="Primary"
fill="None"
onClick={() => handleCreateRoom(CreateRoomVoice.VoiceRoom)}
onClick={() => handleCreateRoom(CreateRoomType.VoiceRoom)}
>
<Text size="T300">New Voice Room</Text>
</MenuItem>

4
src/app/state/createRoomModal.ts
View File

@@ -1,9 +1,9 @@
import { atom } from 'jotai';
import { CreateRoomVoice } from '../components/create-room/types';
import { CreateRoomType } from '../components/create-room/types';
export type CreateRoomModalState = {
spaceId?: string;
voice?: CreateRoomVoice;
type?: CreateRoomType;
};
export const createRoomModalAtom = atom<CreateRoomModalState | undefined>(undefined);

8
src/app/state/hooks/createRoomModal.ts
View File

@@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useAtomValue, useSetAtom } from 'jotai';
import { createRoomModalAtom, CreateRoomModalState } from '../createRoomModal';
import { CreateRoomVoice } from '../../components/create-room/types';
import { CreateRoomType } from '../../components/create-room/types';
export const useCreateRoomModalState = (): CreateRoomModalState | undefined => {
const data = useAtomValue(createRoomModalAtom);
@@ -20,13 +20,13 @@ export const useCloseCreateRoomModal = (): CloseCallback => {
return close;
};
type OpenCallback = (space?: string, voice?: CreateRoomVoice) => void;
type OpenCallback = (space?: string, type?: CreateRoomType) => void;
export const useOpenCreateRoomModal = (): OpenCallback => {
const setSettings = useSetAtom(createRoomModalAtom);
const open: OpenCallback = useCallback(
(spaceId, voice) => {
setSettings({ spaceId, voice });
(spaceId, type) => {
setSettings({ spaceId, type });
},
[setSettings]
);