Add channel type selecor

src/app/components/create-room/CreateRoomVoiceSelector.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
+import { SequenceCard } from '../sequence-card';
+import { SettingTile } from '../setting-tile';
+
+export enum CreateRoomVoice {
+  TextRoom = 'text',
+  VoiceRoom = 'voice',
+}
+type CreateRoomVoiceSelectorProps = {
+  value?: CreateRoomVoice;
+  onSelect: (value: CreateRoomVoice) => void;
+  disabled?: boolean;
+  getIcon: (kind: CreateRoomVoice) => IconSrc;
+};
+export function CreateRoomVoiceSelector({
+  value,
+  onSelect,
+  disabled,
+  getIcon,
+}: CreateRoomVoiceSelectorProps) {
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomVoice.TextRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomVoice.TextRoom}
+        onClick={() => onSelect(CreateRoomVoice.TextRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomVoice.TextRoom)} />}
+          after={value === CreateRoomVoice.TextRoom && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Text</Text>
+          <Text size="T300" priority="300">
+            Send text messages, videos and GIFs.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomVoice.VoiceRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomVoice.VoiceRoom}
+        onClick={() => onSelect(CreateRoomVoice.VoiceRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomVoice.VoiceRoom)} />}
+          after={value === CreateRoomVoice.VoiceRoom && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Voice</Text>
+          <Text size="T300" priority="300">
+            A room optimized for voice calls.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/features/create-room/CreateRoom.tsx

@@ -40,6 +40,10 @@ import {
 } from '../../components/create-room';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
+import {
+  CreateRoomVoice,
+  CreateRoomVoiceSelector,
+} from '../../components/create-room/CreateRoomVoiceSelector';
 
 const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
   if (kind === CreateRoomKind.Private) return Icons.HashLock;
@@ -47,12 +51,23 @@ const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
   return Icons.HashGlobe;
 };
 
+const getCreateRoomVoiceToIcon = (kind: CreateRoomVoice) => {
+  if (kind === CreateRoomVoice.VoiceRoom) return Icons.VolumeHigh;
+  return Icons.Hash;
+};
+
 type CreateRoomFormProps = {
   defaultKind?: CreateRoomKind;
+  defaultVoice?: CreateRoomVoice;
   space?: Room;
   onCreate?: (roomId: string) => void;
 };
-export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
+export function CreateRoomForm({
+  defaultKind,
+  defaultVoice,
+  space,
+  onCreate,
+}: CreateRoomFormProps) {
   const mx = useMatrixClient();
   const alive = useAlive();
 
@@ -66,6 +81,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
 
   const allowRestricted = space && restrictedSupported(selectedRoomVersion);
 
+  const [voice, setVoice] = useState(defaultVoice ?? CreateRoomVoice.TextRoom);
   const [kind, setKind] = useState(
     defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
   );
@@ -74,7 +90,6 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
     useAdditionalCreators();
   const [federation, setFederation] = useState(true);
   const [encryption, setEncryption] = useState(false);
-  const [callRoom, setCallRoom] = useState(false);
   const [knock, setKnock] = useState(false);
   const [advance, setAdvance] = useState(false);
 
@@ -123,7 +138,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
     const powerOverrides: IPowerLevels = {
       events: {},
     };
-    if (callRoom) {
+    if (voice === CreateRoomVoice.VoiceRoom) {
       roomType = RoomType.Call;
       powerOverrides.events![StateEvent.GroupCallMemberPrefix] = 0;
     }
@@ -150,6 +165,15 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
 
   return (
     <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
+      <Box direction="Column" gap="100">
+        <Text size="L400">Type</Text>
+        <CreateRoomVoiceSelector
+          value={voice}
+          onSelect={setVoice}
+          disabled={disabled}
+          getIcon={getCreateRoomVoiceToIcon}
+        />
+      </Box>
       <Box direction="Column" gap="100">
         <Text size="L400">Access</Text>
         <CreateRoomKindSelector
@@ -184,20 +208,6 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
           disabled={disabled}
         />
       </Box>
-      <SequenceCard
-        style={{ padding: config.space.S300 }}
-        variant="SurfaceVariant"
-        direction="Column"
-        gap="500"
-      >
-        <SettingTile
-          title="Call Room"
-          description="Enable this to create a room optimized for voice calls."
-          after={
-            <Switch variant="Primary" value={callRoom} onChange={setCallRoom} disabled={disabled} />
-          }
-        />
-      </SequenceCard>
 
       {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}