Add proper support for room selection from the enu

This commit is contained in:
Tymek
2026-02-14 19:23:05 +01:00
parent 31e4a02d27
commit 2a10347515
2 changed files with 21 additions and 16 deletions

View File

@@ -45,10 +45,12 @@ import {
CreateRoomVoiceSelector, CreateRoomVoiceSelector,
} from '../../components/create-room/CreateRoomVoiceSelector'; } from '../../components/create-room/CreateRoomVoiceSelector';
const getCreateRoomKindToIcon = (kind: CreateRoomKind) => { const getCreateRoomKindToIcon = (kind: CreateRoomKind, voice?: CreateRoomVoice) => {
if (kind === CreateRoomKind.Private) return Icons.HashLock; const isVoiceRoom = voice === CreateRoomVoice.VoiceRoom;
if (kind === CreateRoomKind.Restricted) return Icons.Hash; // TODO: Add VoiceLock and VoiceGlobe icons
return Icons.HashGlobe; if (kind === CreateRoomKind.Private) return isVoiceRoom ? Icons.Lock : Icons.HashLock;
if (kind === CreateRoomKind.Restricted) return isVoiceRoom ? Icons.VolumeHigh : Icons.Hash;
return isVoiceRoom ? Icons.VolumeHigh : Icons.HashGlobe;
}; };
const getCreateRoomVoiceToIcon = (kind: CreateRoomVoice) => { const getCreateRoomVoiceToIcon = (kind: CreateRoomVoice) => {
@@ -165,15 +167,17 @@ export function CreateRoomForm({
return ( return (
<Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500"> <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
<Box direction="Column" gap="100"> {!space && (
<Text size="L400">Type</Text> <Box direction="Column" gap="100">
<CreateRoomVoiceSelector <Text size="L400">Type</Text>
value={voice} <CreateRoomVoiceSelector
onSelect={setVoice} value={voice}
disabled={disabled} onSelect={setVoice}
getIcon={getCreateRoomVoiceToIcon} disabled={disabled}
/> getIcon={getCreateRoomVoiceToIcon}
</Box> />
</Box>
)}
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Text size="L400">Access</Text> <Text size="L400">Access</Text>
<CreateRoomKindSelector <CreateRoomKindSelector
@@ -181,14 +185,14 @@ export function CreateRoomForm({
onSelect={setKind} onSelect={setKind}
canRestrict={allowRestricted} canRestrict={allowRestricted}
disabled={disabled} disabled={disabled}
getIcon={getCreateRoomKindToIcon} getIcon={(roomKind) => getCreateRoomKindToIcon(roomKind, voice)}
/> />
</Box> </Box>
<Box shrink="No" direction="Column" gap="100"> <Box shrink="No" direction="Column" gap="100">
<Text size="L400">Name</Text> <Text size="L400">Name</Text>
<Input <Input
required required
before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />} before={<Icon size="100" src={getCreateRoomKindToIcon(kind, voice)} />}
name="nameInput" name="nameInput"
autoFocus autoFocus
size="500" size="500"

View File

@@ -23,6 +23,7 @@ import {
} from '../../state/hooks/createRoomModal'; } from '../../state/hooks/createRoomModal';
import { CreateRoomModalState } from '../../state/createRoomModal'; import { CreateRoomModalState } from '../../state/createRoomModal';
import { stopPropagation } from '../../utils/keyboard'; import { stopPropagation } from '../../utils/keyboard';
import { CreateRoomVoice } from '../../components/create-room/CreateRoomVoiceSelector';
type CreateRoomModalProps = { type CreateRoomModalProps = {
state: CreateRoomModalState; state: CreateRoomModalState;
@@ -58,7 +59,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
}} }}
> >
<Box grow="Yes"> <Box grow="Yes">
<Text size="H4">New Room</Text> <Text size="H4">New {voice === CreateRoomVoice.VoiceRoom && 'Voice '}Room</Text>
</Box> </Box>
<Box shrink="No"> <Box shrink="No">
<IconButton size="300" radii="300" onClick={closeDialog}> <IconButton size="300" radii="300" onClick={closeDialog}>