Add option for voice rooms, which for now sets the default selected

option in the creation modal

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

@@ -28,7 +28,8 @@ type CreateRoomModalProps = {
   state: CreateRoomModalState;
 };
 function CreateRoomModal({ state }: CreateRoomModalProps) {
-  const { spaceId } = state;
+  const { spaceId, voice } = state;
+  console.log({ voice });
   const closeDialog = useCloseCreateRoomModal();
 
   const allJoinedRooms = useAllJoinedRoomsSet();
@@ -74,7 +75,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                     direction="Column"
                     gap="500"
                   >
-                    <CreateRoomForm space={space} onCreate={closeDialog} />
+                    <CreateRoomForm space={space} onCreate={closeDialog} defaultVoice={voice} />
                   </Box>
                 </Scroll>
               </Box>

src/app/features/lobby/SpaceItem.tsx

@@ -36,6 +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/CreateRoomVoiceSelector';
 
 function SpaceProfileLoading() {
   return (
@@ -249,8 +250,8 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
-  const handleCreateRoom = () => {
-    openCreateRoomModal(item.roomId);
+  const handleCreateRoom = (voice?: CreateRoomVoice) => {
+    openCreateRoomModal(item.roomId, voice);
     setCords(undefined);
   };
 
@@ -281,10 +282,19 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
               radii="300"
               variant="Primary"
               fill="None"
-              onClick={handleCreateRoom}
+              onClick={() => handleCreateRoom(CreateRoomVoice.TextRoom)}
             >
               <Text size="T300">New Room</Text>
             </MenuItem>
+            <MenuItem
+              size="300"
+              radii="300"
+              variant="Primary"
+              fill="None"
+              onClick={() => handleCreateRoom(CreateRoomVoice.VoiceRoom)}
+            >
+              <Text size="T300">New Voice Room</Text>
+            </MenuItem>
             <MenuItem size="300" radii="300" fill="None" onClick={handleAddExisting}>
               <Text size="T300">Existing Room</Text>
             </MenuItem>

src/app/state/createRoomModal.ts

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

src/app/state/hooks/createRoomModal.ts

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