Move enums to types.ts and change icons selection to use

`getRoomIconSrc`

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

@@ -2,12 +2,8 @@ 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';
 
-export enum CreateRoomKind {
-  Private = 'private',
-  Restricted = 'restricted',
-  Public = 'public',
-}
 type CreateRoomKindSelectorProps = {
   value?: CreateRoomKind;
   onSelect: (value: CreateRoomKind) => void;

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

@@ -2,11 +2,8 @@ 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';
 
-export enum CreateRoomVoice {
-  TextRoom = 'text',
-  VoiceRoom = 'voice',
-}
 type CreateRoomVoiceSelectorProps = {
   value?: CreateRoomVoice;
   onSelect: (value: CreateRoomVoice) => void;

src/app/components/create-room/index.ts

@@ -3,3 +3,4 @@ export * from './CreateRoomAliasInput';
 export * from './RoomVersionSelector';
 export * from './utils';
 export * from './AdditionalCreatorInput';
+export * from './types';

src/app/components/create-room/types.ts

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

src/app/components/create-room/utils.ts

@@ -7,11 +7,11 @@ import {
   Room,
 } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { CreateRoomKind } from './CreateRoomKindSelector';
 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';
 
 export const createRoomCreationContent = (
   type: RoomType | undefined,

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

@@ -1,5 +1,5 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
+import { MatrixError, Room, JoinRule } from 'matrix-js-sdk';
 import {
   Box,
   Button,
@@ -37,20 +37,21 @@ import {
   CreateRoomKindSelector,
   RoomVersionSelector,
   useAdditionalCreators,
+  CreateRoomVoice,
 } from '../../components/create-room';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
-import {
-  CreateRoomVoice,
-  CreateRoomVoiceSelector,
-} from '../../components/create-room/CreateRoomVoiceSelector';
+import { CreateRoomVoiceSelector } from '../../components/create-room/CreateRoomVoiceSelector';
+import { getRoomIconSrc } from '../../utils/room';
 
 const getCreateRoomKindToIcon = (kind: CreateRoomKind, voice?: CreateRoomVoice) => {
   const isVoiceRoom = voice === CreateRoomVoice.VoiceRoom;
-  // TODO: Add VoiceLock and VoiceGlobe icons
-  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;
+
+  let joinRule: JoinRule = JoinRule.Public;
+  if (kind === CreateRoomKind.Restricted) joinRule = JoinRule.Restricted;
+  if (kind === CreateRoomKind.Private) joinRule = JoinRule.Knock;
+
+  return getRoomIconSrc(Icons, isVoiceRoom ? RoomType.Call : undefined, joinRule);
 };
 
 const getCreateRoomVoiceToIcon = (kind: CreateRoomVoice) => {

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

@@ -23,14 +23,13 @@ import {
 } from '../../state/hooks/createRoomModal';
 import { CreateRoomModalState } from '../../state/createRoomModal';
 import { stopPropagation } from '../../utils/keyboard';
-import { CreateRoomVoice } from '../../components/create-room/CreateRoomVoiceSelector';
+import { CreateRoomVoice } from '../../components/create-room/types';
 
 type CreateRoomModalProps = {
   state: CreateRoomModalState;
 };
 function CreateRoomModal({ state }: CreateRoomModalProps) {
   const { spaceId, voice } = state;
-  console.log({ voice });
   const closeDialog = useCloseCreateRoomModal();
 
   const allJoinedRooms = useAllJoinedRoomsSet();

src/app/features/lobby/SpaceItem.tsx

@@ -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/CreateRoomVoiceSelector';
+import { CreateRoomVoice } from '../../components/create-room/types';
 
 function SpaceProfileLoading() {
   return (

src/app/state/createRoomModal.ts

@@ -1,5 +1,5 @@
 import { atom } from 'jotai';
-import { CreateRoomVoice } from '../components/create-room/CreateRoomVoiceSelector';
+import { CreateRoomVoice } from '../components/create-room/types';
 
 export type CreateRoomModalState = {
   spaceId?: string;

src/app/state/hooks/createRoomModal.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { createRoomModalAtom, CreateRoomModalState } from '../createRoomModal';
-import { CreateRoomVoice } from '../../components/create-room/CreateRoomVoiceSelector';
+import { CreateRoomVoice } from '../../components/create-room/types';
 
 export const useCreateRoomModalState = (): CreateRoomModalState | undefined => {
   const data = useAtomValue(createRoomModalAtom);