Redesign space/room creation panel (#2408)

* add new create room * rename create room modal file * default restrict access for space children in room create modal * move create room kind selector to components * add radii variant to sequence card component * more more reusable create room logic to components * add create space * update address input description * add new space modal * fix add room button visible on left room in space lobby
2025-08-05 18:37:07 +05:30
parent e9798a22c3
commit faa952295f
33 changed files with 1637 additions and 53 deletions
--- a/src/app/features/create-room/CreateRoomModal.tsx
+++ b/src/app/features/create-room/CreateRoomModal.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import {
+  Box,
+  config,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { SpaceProvider } from '../../hooks/useSpace';
+import { CreateRoomForm } from './CreateRoom';
+import {
+  useCloseCreateRoomModal,
+  useCreateRoomModalState,
+} from '../../state/hooks/createRoomModal';
+import { CreateRoomModalState } from '../../state/createRoomModal';
+import { stopPropagation } from '../../utils/keyboard';
+
+type CreateRoomModalProps = {
+  state: CreateRoomModalState;
+};
+function CreateRoomModal({ state }: CreateRoomModalProps) {
+  const { spaceId } = state;
+  const closeDialog = useCloseCreateRoomModal();
+
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allJoinedRooms);
+  const space = spaceId ? getRoom(spaceId) : undefined;
+
+  return (
+    <SpaceProvider value={space ?? null}>
+      <Overlay open backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              clickOutsideDeactivates: true,
+              onDeactivate: closeDialog,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Modal size="300" flexHeight>
+              <Box direction="Column">
+                <Header
+                  size="500"
+                  style={{
+                    padding: config.space.S200,
+                    paddingLeft: config.space.S400,
+                    borderBottomWidth: config.borderWidth.B300,
+                  }}
+                >
+                  <Box grow="Yes">
+                    <Text size="H4">New Room</Text>
+                  </Box>
+                  <Box shrink="No">
+                    <IconButton size="300" radii="300" onClick={closeDialog}>
+                      <Icon src={Icons.Cross} />
+                    </IconButton>
+                  </Box>
+                </Header>
+                <Scroll size="300" hideTrack>
+                  <Box
+                    style={{
+                      padding: config.space.S400,
+                      paddingRight: config.space.S200,
+                    }}
+                    direction="Column"
+                    gap="500"
+                  >
+                    <CreateRoomForm space={space} onCreate={closeDialog} />
+                  </Box>
+                </Scroll>
+              </Box>
+            </Modal>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </SpaceProvider>
+  );
+}
+
+export function CreateRoomModalRenderer() {
+  const state = useCreateRoomModalState();
+
+  if (!state) return null;
+  return <CreateRoomModal state={state} />;
+}