From ccf10fc20cadde14868e27f913414b251dbb75f2 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Mon, 4 Aug 2025 20:29:12 +0530 Subject: [PATCH 01/39] Revert "Fix menus congestion and improve thread reply layout (#2402)" (#2409) This reverts commit d8d4714370fbe6c6ea6f6889ba4a5aae505220b8. --- src/app/components/BackupRestore.tsx | 8 ++++++-- src/app/components/HexColorPickerPopOut.tsx | 2 +- src/app/components/JoinRulesSwitcher.tsx | 2 +- src/app/components/ManualVerification.tsx | 2 +- src/app/components/MemberSortMenu.tsx | 2 +- src/app/components/MembershipFilterMenu.tsx | 2 +- src/app/components/RoomNotificationSwitcher.tsx | 4 ++-- src/app/components/editor/Toolbar.tsx | 2 +- .../components/image-pack-view/UsageSwitcher.tsx | 2 +- src/app/components/message/Reply.css.ts | 6 ++++++ src/app/components/message/Reply.tsx | 15 ++++----------- src/app/components/power/PowerSelector.tsx | 5 ++--- src/app/components/room-card/RoomCard.tsx | 2 +- .../general/RoomHistoryVisibility.tsx | 2 +- .../common-settings/permissions/Powers.tsx | 2 +- src/app/features/lobby/HierarchyItemMenu.tsx | 6 +++--- src/app/features/lobby/LobbyHeader.tsx | 6 +++--- src/app/features/lobby/SpaceItem.tsx | 4 ++-- src/app/features/message-search/SearchFilters.tsx | 5 +++-- src/app/features/room-nav/RoomNavItem.tsx | 8 ++++---- src/app/features/room/RoomInput.tsx | 2 +- src/app/features/room/RoomViewHeader.tsx | 8 ++++---- src/app/features/room/message/Message.tsx | 10 ++++------ src/app/features/room/message/styles.css.ts | 2 +- .../features/settings/devices/Verification.tsx | 2 +- src/app/features/settings/general/General.tsx | 6 +++--- .../notifications/NotificationModeSwitcher.tsx | 2 +- src/app/pages/auth/ServerPicker.tsx | 4 ++-- src/app/pages/auth/login/PasswordLoginForm.tsx | 4 ++-- src/app/pages/client/ClientRoot.tsx | 2 +- src/app/pages/client/direct/Direct.tsx | 4 ++-- src/app/pages/client/explore/Server.tsx | 6 +++--- src/app/pages/client/home/Home.tsx | 4 ++-- src/app/pages/client/sidebar/DirectTab.tsx | 4 ++-- src/app/pages/client/sidebar/HomeTab.tsx | 4 ++-- src/app/pages/client/sidebar/SpaceTabs.tsx | 6 +++--- src/app/pages/client/space/Space.tsx | 8 ++++---- 37 files changed, 83 insertions(+), 82 deletions(-) diff --git a/src/app/components/BackupRestore.tsx b/src/app/components/BackupRestore.tsx index 8b3732b1..068f437b 100644 --- a/src/app/components/BackupRestore.tsx +++ b/src/app/components/BackupRestore.tsx @@ -203,8 +203,12 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) { escapeDeactivates: stopPropagation, }} > - - + + ({ }} > - + {rules.map((rule) => ( - + - + {memberSortMenu.map((menuItem, index) => ( - + {membershipFilterMenu.map((menuItem, index) => ( - + {modes.map((mode) => ( - + } diff --git a/src/app/components/image-pack-view/UsageSwitcher.tsx b/src/app/components/image-pack-view/UsageSwitcher.tsx index 1878beb4..1a1eb432 100644 --- a/src/app/components/image-pack-view/UsageSwitcher.tsx +++ b/src/app/components/image-pack-view/UsageSwitcher.tsx @@ -33,7 +33,7 @@ export function UsageSelector({ selected, onChange }: UsageSelectorProps) { ); return ( - + {allUsages.map((usage) => ( ( ); export const ThreadIndicator = as<'div'>(({ ...props }, ref) => ( - - - Thread + + + Threaded reply )); @@ -104,7 +97,7 @@ export const Reply = as<'div', ReplyProps>( const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody; return ( - + {threadRootId && ( )} diff --git a/src/app/components/power/PowerSelector.tsx b/src/app/components/power/PowerSelector.tsx index 9e7eb81b..2b3b48c3 100644 --- a/src/app/components/power/PowerSelector.tsx +++ b/src/app/components/power/PowerSelector.tsx @@ -16,14 +16,13 @@ export const PowerSelector = forwardRef( ref={ref} style={{ maxHeight: '75vh', - maxWidth: toRem(200), - width: '100vw', + maxWidth: toRem(300), display: 'flex', }} > -
+
{getPowers(powerLevelTags).map((power) => { const selected = value === power; const tag = powerLevelTags[power]; diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx index 8c65f2f3..34a7e24b 100644 --- a/src/app/components/room-card/RoomCard.tsx +++ b/src/app/components/room-card/RoomCard.tsx @@ -273,7 +273,7 @@ export const RoomCard = as<'div', RoomCardProps>( variant="Secondary" size="300" disabled={joining} - before={joining && } + before={joining && } > {joining ? 'Joining' : 'Join'} diff --git a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx index c6313f11..7b329b13 100644 --- a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx +++ b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx @@ -119,7 +119,7 @@ export function RoomHistoryVisibility({ powerLevels }: RoomHistoryVisibilityProp escapeDeactivates: stopPropagation, }} > - + {visibilityMenu.map((visibility) => ( - + {permissionGroups.map((group, groupIndex) => ( {group.name} diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx index d13c9133..f126e7cb 100644 --- a/src/app/features/lobby/HierarchyItemMenu.tsx +++ b/src/app/features/lobby/HierarchyItemMenu.tsx @@ -234,9 +234,9 @@ export function HierarchyItemMenu({ escapeDeactivates: stopPropagation, }} > - + {joined && ( - + {onTogglePin && ( )} {canEditChild && ( - + diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx index 08f0cc6a..bc4c46fe 100644 --- a/src/app/features/lobby/LobbyHeader.tsx +++ b/src/app/features/lobby/LobbyHeader.tsx @@ -60,8 +60,8 @@ const LobbyMenu = forwardRef( }; return ( - - + + ( - + {(promptLeave, setPromptLeave) => ( <> diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx index dca81b90..0a4d9de5 100644 --- a/src/app/features/lobby/SpaceItem.tsx +++ b/src/app/features/lobby/SpaceItem.tsx @@ -271,7 +271,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) { escapeDeactivates: stopPropagation, }} > - + - + Sort by -
+ +
setOrder()} variant="Surface" @@ -290,7 +291,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto - + diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx index ff26438d..af4164fd 100644 --- a/src/app/pages/client/home/Home.tsx +++ b/src/app/pages/client/home/Home.tsx @@ -75,8 +75,8 @@ const HomeMenu = forwardRef(({ requestClose }, re }; return ( - - + + (({ requestClose } }; return ( - - + + (({ requestClose }, re }; return ( - - + + ( }; return ( - - + + ( )} - + (({ room, requestClo }; return ( - - + + (({ room, requestClo - + (({ room, requestClo )} - + {(promptLeave, setPromptLeave) => ( <> From 6a277207092893f19f21f52c919c1084f31cf865 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Mon, 4 Aug 2025 20:34:01 +0530 Subject: [PATCH 02/39] Improve thread reply layout (#2410) --- src/app/components/message/Reply.css.ts | 6 ------ src/app/components/message/Reply.tsx | 15 +++++++++++---- src/app/features/room/RoomInput.tsx | 2 +- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts index 06799391..7e5540fd 100644 --- a/src/app/components/message/Reply.css.ts +++ b/src/app/components/message/Reply.css.ts @@ -7,7 +7,6 @@ export const ReplyBend = style({ export const ThreadIndicator = style({ opacity: config.opacity.P300, - gap: toRem(2), selectors: { 'button&': { @@ -19,11 +18,6 @@ export const ThreadIndicator = style({ }, }); -export const ThreadIndicatorIcon = style({ - width: toRem(14), - height: toRem(14), -}); - export const Reply = style({ marginBottom: toRem(1), minWidth: 0, diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx index 563d1bf8..dc92bf83 100644 --- a/src/app/components/message/Reply.tsx +++ b/src/app/components/message/Reply.tsx @@ -38,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>( ); export const ThreadIndicator = as<'div'>(({ ...props }, ref) => ( - - - Threaded reply + + + Thread )); @@ -97,7 +104,7 @@ export const Reply = as<'div', ReplyProps>( const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody; return ( - + {threadRootId && ( )} diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index 501ee0dc..1399ec15 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -543,7 +543,7 @@ export const RoomInput = forwardRef( > - + {replyDraft.relation?.rel_type === RelationType.Thread && } Date: Tue, 5 Aug 2025 13:04:21 +0000 Subject: [PATCH 03/39] Fix room input for virtual keyboard on webkit (#2346) * Slate style has certain behavior elements that iOS expects * Swap to using that implementation --- src/app/components/editor/Editor.css.ts | 18 ++++++++--------- src/app/components/editor/Editor.tsx | 27 ++++++++++--------------- 2 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/app/components/editor/Editor.css.ts b/src/app/components/editor/Editor.css.ts index 09a444ec..d128ed07 100644 --- a/src/app/components/editor/Editor.css.ts +++ b/src/app/components/editor/Editor.css.ts @@ -41,21 +41,21 @@ export const EditorTextarea = style([ }, ]); -export const EditorPlaceholder = style([ +export const EditorPlaceholderContainer = style([ DefaultReset, { - position: 'absolute', - zIndex: 1, - width: '100%', opacity: config.opacity.Placeholder, pointerEvents: 'none', userSelect: 'none', + }, +]); - selectors: { - '&:not(:first-child)': { - display: 'none', - }, - }, +export const EditorPlaceholderTextVisual = style([ + DefaultReset, + { + display: 'block', + paddingTop: toRem(13), + paddingLeft: toRem(1), }, ]); diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx index 044d0837..bd848dd5 100644 --- a/src/app/components/editor/Editor.tsx +++ b/src/app/components/editor/Editor.tsx @@ -106,22 +106,17 @@ export const CustomEditor = forwardRef( [editor, onKeyDown] ); - const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => { - // drop style attribute as we use our custom placeholder css. - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { style, ...props } = attributes; - return ( - - {children} - - ); - }, []); + const renderPlaceholder = useCallback( + ({ attributes, children }: RenderPlaceholderProps) => ( + + {/* Inner component to style the actual text position and appearance */} + + {children} + + + ), + [] + ); return (
From e9798a22c327cd8d1d8623226789053f513dc0bc Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Tue, 5 Aug 2025 18:35:18 +0530 Subject: [PATCH 04/39] Show file size exceeds error on upload (#2411) * Show file size exceeds error on upload * fix missing import and make size bold --- .../upload-card/CompactUploadCardRenderer.tsx | 22 ++++++++++++++++--- .../upload-card/UploadCardRenderer.tsx | 22 ++++++++++++++++--- 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/src/app/components/upload-card/CompactUploadCardRenderer.tsx b/src/app/components/upload-card/CompactUploadCardRenderer.tsx index 998b517a..b9bada71 100644 --- a/src/app/components/upload-card/CompactUploadCardRenderer.tsx +++ b/src/app/components/upload-card/CompactUploadCardRenderer.tsx @@ -4,7 +4,8 @@ import { UploadCard, UploadCardError, CompactUploadCardProgress } from './Upload import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload'; import { useMatrixClient } from '../../hooks/useMatrixClient'; import { TUploadContent } from '../../utils/matrix'; -import { getFileTypeIcon } from '../../utils/common'; +import { bytesToSize, getFileTypeIcon } from '../../utils/common'; +import { useMediaConfig } from '../../hooks/useMediaConfig'; type CompactUploadCardRendererProps = { isEncrypted?: boolean; @@ -19,10 +20,16 @@ export function CompactUploadCardRenderer({ onComplete, }: CompactUploadCardRendererProps) { const mx = useMatrixClient(); + const mediaConfig = useMediaConfig(); + const allowSize = mediaConfig['m.upload.size'] || Infinity; + const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted); const { file } = upload; + const fileSizeExceeded = file.size >= allowSize; - if (upload.status === UploadStatus.Idle) startUpload(); + if (upload.status === UploadStatus.Idle && !fileSizeExceeded) { + startUpload(); + } const removeUpload = () => { cancelUpload(); @@ -76,7 +83,7 @@ export function CompactUploadCardRenderer({ ) : ( <> - {upload.status === UploadStatus.Idle && ( + {upload.status === UploadStatus.Idle && !fileSizeExceeded && ( )} {upload.status === UploadStatus.Loading && ( @@ -87,6 +94,15 @@ export function CompactUploadCardRenderer({ {upload.error.message} )} + {upload.status === UploadStatus.Idle && fileSizeExceeded && ( + + + The file size exceeds the limit. Maximum allowed size is{' '} + {bytesToSize(allowSize)}, but the uploaded file is{' '} + {bytesToSize(file.size)}. + + + )} )} diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx index 4383e204..0a127a08 100644 --- a/src/app/components/upload-card/UploadCardRenderer.tsx +++ b/src/app/components/upload-card/UploadCardRenderer.tsx @@ -4,13 +4,14 @@ import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard'; import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload'; import { useMatrixClient } from '../../hooks/useMatrixClient'; import { TUploadContent } from '../../utils/matrix'; -import { getFileTypeIcon } from '../../utils/common'; +import { bytesToSize, getFileTypeIcon } from '../../utils/common'; import { roomUploadAtomFamily, TUploadItem, TUploadMetadata, } from '../../state/room/roomInputDrafts'; import { useObjectURL } from '../../hooks/useObjectURL'; +import { useMediaConfig } from '../../hooks/useMediaConfig'; type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void }; function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) { @@ -75,12 +76,18 @@ export function UploadCardRenderer({ onComplete, }: UploadCardRendererProps) { const mx = useMatrixClient(); + const mediaConfig = useMediaConfig(); + const allowSize = mediaConfig['m.upload.size'] || Infinity; + const uploadAtom = roomUploadAtomFamily(fileItem.file); const { metadata } = fileItem; const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted); const { file } = upload; + const fileSizeExceeded = file.size >= allowSize; - if (upload.status === UploadStatus.Idle) startUpload(); + if (upload.status === UploadStatus.Idle && !fileSizeExceeded) { + startUpload(); + } const handleSpoiler = (marked: boolean) => { setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked }); @@ -131,7 +138,7 @@ export function UploadCardRenderer({ {fileItem.originalFile.type.startsWith('image') && ( )} - {upload.status === UploadStatus.Idle && ( + {upload.status === UploadStatus.Idle && !fileSizeExceeded && ( )} {upload.status === UploadStatus.Loading && ( @@ -142,6 +149,15 @@ export function UploadCardRenderer({ {upload.error.message} )} + {upload.status === UploadStatus.Idle && fileSizeExceeded && ( + + + The file size exceeds the limit. Maximum allowed size is{' '} + {bytesToSize(allowSize)}, but the uploaded file is{' '} + {bytesToSize(file.size)}. + + + )} } > From faa952295f71acc605c68c798e5adc955a4bcf69 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Tue, 5 Aug 2025 18:37:07 +0530 Subject: [PATCH 05/39] 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 --- .../create-room/CreateRoomAliasInput.tsx | 118 ++++++++ .../create-room/CreateRoomKindSelector.tsx | 94 ++++++ .../create-room/RoomVersionSelector.tsx | 117 ++++++++ src/app/components/create-room/index.ts | 4 + src/app/components/create-room/utils.ts | 131 +++++++++ .../components/sequence-card/SequenceCard.tsx | 37 ++- src/app/components/sequence-card/style.css.ts | 46 ++- .../common-settings/general/RoomJoinRules.tsx | 12 +- src/app/features/create-room/CreateRoom.tsx | 277 ++++++++++++++++++ .../features/create-room/CreateRoomModal.tsx | 95 ++++++ src/app/features/create-room/index.ts | 2 + src/app/features/create-space/CreateSpace.tsx | 249 ++++++++++++++++ .../create-space/CreateSpaceModal.tsx | 95 ++++++ src/app/features/create-space/index.ts | 2 + src/app/features/lobby/Lobby.tsx | 8 +- src/app/features/lobby/SpaceItem.tsx | 12 +- src/app/hooks/router/useCreateSelected.ts | 12 + src/app/pages/Router.tsx | 10 +- src/app/pages/client/SidebarNav.tsx | 18 +- src/app/pages/client/create/Create.tsx | 38 +++ src/app/pages/client/create/index.ts | 1 + src/app/pages/client/home/CreateRoom.tsx | 56 ++++ src/app/pages/client/home/Home.tsx | 22 +- src/app/pages/client/sidebar/CreateTab.tsx | 111 +++++++ src/app/pages/pathUtils.ts | 3 + src/app/pages/paths.ts | 2 + src/app/state/createRoomModal.ts | 7 + src/app/state/createSpaceModal.ts | 7 + src/app/state/hooks/createRoomModal.ts | 34 +++ src/app/state/hooks/createSpaceModal.ts | 34 +++ src/app/styles/ContainerColor.css.ts | 16 +- src/app/utils/common.ts | 7 + src/app/utils/matrix.ts | 13 + 33 files changed, 1637 insertions(+), 53 deletions(-) create mode 100644 src/app/components/create-room/CreateRoomAliasInput.tsx create mode 100644 src/app/components/create-room/CreateRoomKindSelector.tsx create mode 100644 src/app/components/create-room/RoomVersionSelector.tsx create mode 100644 src/app/components/create-room/index.ts create mode 100644 src/app/components/create-room/utils.ts create mode 100644 src/app/features/create-room/CreateRoom.tsx create mode 100644 src/app/features/create-room/CreateRoomModal.tsx create mode 100644 src/app/features/create-room/index.ts create mode 100644 src/app/features/create-space/CreateSpace.tsx create mode 100644 src/app/features/create-space/CreateSpaceModal.tsx create mode 100644 src/app/features/create-space/index.ts create mode 100644 src/app/hooks/router/useCreateSelected.ts create mode 100644 src/app/pages/client/create/Create.tsx create mode 100644 src/app/pages/client/create/index.ts create mode 100644 src/app/pages/client/home/CreateRoom.tsx create mode 100644 src/app/pages/client/sidebar/CreateTab.tsx create mode 100644 src/app/state/createRoomModal.ts create mode 100644 src/app/state/createSpaceModal.ts create mode 100644 src/app/state/hooks/createRoomModal.ts create mode 100644 src/app/state/hooks/createSpaceModal.ts diff --git a/src/app/components/create-room/CreateRoomAliasInput.tsx b/src/app/components/create-room/CreateRoomAliasInput.tsx new file mode 100644 index 00000000..e84658c0 --- /dev/null +++ b/src/app/components/create-room/CreateRoomAliasInput.tsx @@ -0,0 +1,118 @@ +import React, { + FormEventHandler, + KeyboardEventHandler, + useCallback, + useEffect, + useRef, + useState, +} from 'react'; +import { MatrixError } from 'matrix-js-sdk'; +import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds'; +import { isKeyHotkey } from 'is-hotkey'; +import { getMxIdServer } from '../../utils/matrix'; +import { useMatrixClient } from '../../hooks/useMatrixClient'; +import { replaceSpaceWithDash } from '../../utils/common'; +import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback'; +import { useDebounce } from '../../hooks/useDebounce'; + +export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) { + const mx = useMatrixClient(); + const aliasInputRef = useRef(null); + const [aliasAvail, setAliasAvail] = useState>({ + status: AsyncStatus.Idle, + }); + + useEffect(() => { + if (aliasAvail.status === AsyncStatus.Success && aliasInputRef.current?.value === '') { + setAliasAvail({ status: AsyncStatus.Idle }); + } + }, [aliasAvail]); + + const checkAliasAvail = useAsync( + useCallback( + async (aliasLocalPart: string) => { + const roomAlias = `#${aliasLocalPart}:${getMxIdServer(mx.getSafeUserId())}`; + try { + const result = await mx.getRoomIdForAlias(roomAlias); + return typeof result.room_id !== 'string'; + } catch (e) { + if (e instanceof MatrixError && e.httpStatus === 404) { + return true; + } + throw e; + } + }, + [mx] + ), + setAliasAvail + ); + const aliasAvailable: boolean | undefined = + aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined; + + const debounceCheckAliasAvail = useDebounce(checkAliasAvail, { wait: 500 }); + + const handleAliasChange: FormEventHandler = (evt) => { + const aliasInput = evt.currentTarget; + const aliasLocalPart = replaceSpaceWithDash(aliasInput.value); + if (aliasLocalPart) { + aliasInput.value = aliasLocalPart; + debounceCheckAliasAvail(aliasLocalPart); + } else { + setAliasAvail({ status: AsyncStatus.Idle }); + } + }; + + const handleAliasKeyDown: KeyboardEventHandler = (evt) => { + if (isKeyHotkey('enter', evt)) { + evt.preventDefault(); + + const aliasInput = evt.currentTarget; + const aliasLocalPart = replaceSpaceWithDash(aliasInput.value); + if (aliasLocalPart) { + checkAliasAvail(aliasLocalPart); + } else { + setAliasAvail({ status: AsyncStatus.Idle }); + } + } + }; + + return ( + + Address (Optional) + + Pick an unique address to make it discoverable. + + + ) : ( + + ) + } + after={ + + :{getMxIdServer(mx.getSafeUserId())} + + } + onKeyDown={handleAliasKeyDown} + name="aliasInput" + size="500" + variant={aliasAvailable === true ? 'Success' : 'SurfaceVariant'} + radii="400" + autoComplete="off" + disabled={disabled} + /> + {aliasAvailable === false && ( + + + + This address is already taken. Please select a different one. + + + )} + + ); +} diff --git a/src/app/components/create-room/CreateRoomKindSelector.tsx b/src/app/components/create-room/CreateRoomKindSelector.tsx new file mode 100644 index 00000000..096954fb --- /dev/null +++ b/src/app/components/create-room/CreateRoomKindSelector.tsx @@ -0,0 +1,94 @@ +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 CreateRoomKind { + Private = 'private', + Restricted = 'restricted', + Public = 'public', +} +type CreateRoomKindSelectorProps = { + value?: CreateRoomKind; + onSelect: (value: CreateRoomKind) => void; + canRestrict?: boolean; + disabled?: boolean; + getIcon: (kind: CreateRoomKind) => IconSrc; +}; +export function CreateRoomKindSelector({ + value, + onSelect, + canRestrict, + disabled, + getIcon, +}: CreateRoomKindSelectorProps) { + return ( + + {canRestrict && ( + onSelect(CreateRoomKind.Restricted)} + disabled={disabled} + > + } + after={value === CreateRoomKind.Restricted && } + > + Restricted + + Only member of parent space can join. + + + + )} + onSelect(CreateRoomKind.Private)} + disabled={disabled} + > + } + after={value === CreateRoomKind.Private && } + > + Private + + Only people with invite can join. + + + + onSelect(CreateRoomKind.Public)} + disabled={disabled} + > + } + after={value === CreateRoomKind.Public && } + > + Public + + Anyone with the address can join. + + + + + ); +} diff --git a/src/app/components/create-room/RoomVersionSelector.tsx b/src/app/components/create-room/RoomVersionSelector.tsx new file mode 100644 index 00000000..281f520a --- /dev/null +++ b/src/app/components/create-room/RoomVersionSelector.tsx @@ -0,0 +1,117 @@ +import React, { MouseEventHandler, useState } from 'react'; +import { + Box, + Button, + Chip, + config, + Icon, + Icons, + Menu, + PopOut, + RectCords, + Text, + toRem, +} from 'folds'; +import FocusTrap from 'focus-trap-react'; +import { SettingTile } from '../setting-tile'; +import { SequenceCard } from '../sequence-card'; +import { stopPropagation } from '../../utils/keyboard'; + +export function RoomVersionSelector({ + versions, + value, + onChange, + disabled, +}: { + versions: string[]; + value: string; + onChange: (value: string) => void; + disabled?: boolean; +}) { + const [menuCords, setMenuCords] = useState(); + + const handleMenu: MouseEventHandler = (evt) => { + setMenuCords(evt.currentTarget.getBoundingClientRect()); + }; + + const handleSelect = (version: string) => { + setMenuCords(undefined); + onChange(version); + }; + + return ( + + setMenuCords(undefined), + clickOutsideDeactivates: true, + isKeyForward: (evt: KeyboardEvent) => + evt.key === 'ArrowDown' || evt.key === 'ArrowRight', + isKeyBackward: (evt: KeyboardEvent) => + evt.key === 'ArrowUp' || evt.key === 'ArrowLeft', + escapeDeactivates: stopPropagation, + }} + > + + + Versions + + {versions.map((version) => ( + handleSelect(version)} + type="button" + > + + {version} + + + ))} + + + + + } + > + + + } + /> + + ); +} diff --git a/src/app/components/create-room/index.ts b/src/app/components/create-room/index.ts new file mode 100644 index 00000000..ffca558d --- /dev/null +++ b/src/app/components/create-room/index.ts @@ -0,0 +1,4 @@ +export * from './CreateRoomKindSelector'; +export * from './CreateRoomAliasInput'; +export * from './RoomVersionSelector'; +export * from './utils'; diff --git a/src/app/components/create-room/utils.ts b/src/app/components/create-room/utils.ts new file mode 100644 index 00000000..9abff4ff --- /dev/null +++ b/src/app/components/create-room/utils.ts @@ -0,0 +1,131 @@ +import { + ICreateRoomOpts, + ICreateRoomStateEvent, + JoinRule, + MatrixClient, + RestrictedAllowType, + 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'; + +export const createRoomCreationContent = ( + type: RoomType | undefined, + allowFederation: boolean +): object => { + const content: Record = {}; + if (typeof type === 'string') { + content.type = type; + } + if (allowFederation === false) { + content['m.federate'] = false; + } + + return content; +}; + +export const createRoomJoinRulesState = ( + kind: CreateRoomKind, + parent: Room | undefined, + knock: boolean +) => { + let content: RoomJoinRulesEventContent = { + join_rule: knock ? JoinRule.Knock : JoinRule.Invite, + }; + + if (kind === CreateRoomKind.Public) { + content = { + join_rule: JoinRule.Public, + }; + } + + if (kind === CreateRoomKind.Restricted && parent) { + content = { + join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted, + allow: [ + { + type: RestrictedAllowType.RoomMembership, + room_id: parent.roomId, + }, + ], + }; + } + + return { + type: StateEvent.RoomJoinRules, + state_key: '', + content, + }; +}; + +export const createRoomParentState = (parent: Room) => ({ + type: StateEvent.SpaceParent, + state_key: parent.roomId, + content: { + canonical: true, + via: getViaServers(parent), + }, +}); + +export const createRoomEncryptionState = () => ({ + type: 'm.room.encryption', + state_key: '', + content: { + algorithm: 'm.megolm.v1.aes-sha2', + }, +}); + +export type CreateRoomData = { + version: string; + type?: RoomType; + parent?: Room; + kind: CreateRoomKind; + name: string; + topic?: string; + aliasLocalPart?: string; + encryption?: boolean; + knock: boolean; + allowFederation: boolean; +}; +export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise => { + const initialState: ICreateRoomStateEvent[] = []; + + if (data.encryption) { + initialState.push(createRoomEncryptionState()); + } + + if (data.parent) { + initialState.push(createRoomParentState(data.parent)); + } + + initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock)); + + const options: ICreateRoomOpts = { + room_version: data.version, + name: data.name, + topic: data.topic, + room_alias_name: data.aliasLocalPart, + creation_content: createRoomCreationContent(data.type, data.allowFederation), + initial_state: initialState, + }; + + const result = await mx.createRoom(options); + + if (data.parent) { + await mx.sendStateEvent( + data.parent.roomId, + StateEvent.SpaceChild as any, + { + auto_join: false, + suggested: false, + via: [getMxIdServer(mx.getUserId() ?? '') ?? ''], + }, + result.room_id + ); + } + + return result.room_id; +}; diff --git a/src/app/components/sequence-card/SequenceCard.tsx b/src/app/components/sequence-card/SequenceCard.tsx index 4036b963..d0e77ae6 100644 --- a/src/app/components/sequence-card/SequenceCard.tsx +++ b/src/app/components/sequence-card/SequenceCard.tsx @@ -7,12 +7,31 @@ import * as css from './style.css'; export const SequenceCard = as< 'div', ComponentProps & ContainerColorVariants & css.SequenceCardVariants ->(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => ( - -)); +>( + ( + { + as: AsSequenceCard = 'div', + className, + variant, + radii, + firstChild, + lastChild, + outlined, + ...props + }, + ref + ) => ( + + ) +); diff --git a/src/app/components/sequence-card/style.css.ts b/src/app/components/sequence-card/style.css.ts index c8ed48b8..9d503264 100644 --- a/src/app/components/sequence-card/style.css.ts +++ b/src/app/components/sequence-card/style.css.ts @@ -3,6 +3,7 @@ import { RecipeVariants, recipe } from '@vanilla-extract/recipes'; import { config } from 'folds'; const outlinedWidth = createVar('0'); +const radii = createVar(config.radii.R400); export const SequenceCard = recipe({ base: { vars: { @@ -13,33 +14,59 @@ export const SequenceCard = recipe({ borderBottomWidth: 0, selectors: { '&:first-child, :not(&) + &': { - borderTopLeftRadius: config.radii.R400, - borderTopRightRadius: config.radii.R400, + borderTopLeftRadius: [radii], + borderTopRightRadius: [radii], }, '&:last-child, &:not(:has(+&))': { - borderBottomLeftRadius: config.radii.R400, - borderBottomRightRadius: config.radii.R400, + borderBottomLeftRadius: [radii], + borderBottomRightRadius: [radii], borderBottomWidth: outlinedWidth, }, [`&[data-first-child="true"]`]: { - borderTopLeftRadius: config.radii.R400, - borderTopRightRadius: config.radii.R400, + borderTopLeftRadius: [radii], + borderTopRightRadius: [radii], }, [`&[data-first-child="false"]`]: { borderTopLeftRadius: 0, borderTopRightRadius: 0, }, [`&[data-last-child="true"]`]: { - borderBottomLeftRadius: config.radii.R400, - borderBottomRightRadius: config.radii.R400, + borderBottomLeftRadius: [radii], + borderBottomRightRadius: [radii], }, [`&[data-last-child="false"]`]: { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, }, + + 'button&': { + cursor: 'pointer', + }, }, }, variants: { + radii: { + '0': { + vars: { + [radii]: config.radii.R0, + }, + }, + '300': { + vars: { + [radii]: config.radii.R300, + }, + }, + '400': { + vars: { + [radii]: config.radii.R400, + }, + }, + '500': { + vars: { + [radii]: config.radii.R500, + }, + }, + }, outlined: { true: { vars: { @@ -48,5 +75,8 @@ export const SequenceCard = recipe({ }, }, }, + defaultVariants: { + radii: '400', + }, }); export type SequenceCardVariants = RecipeVariants; diff --git a/src/app/features/common-settings/general/RoomJoinRules.tsx b/src/app/features/common-settings/general/RoomJoinRules.tsx index c0d62a6a..f47ff757 100644 --- a/src/app/features/common-settings/general/RoomJoinRules.tsx +++ b/src/app/features/common-settings/general/RoomJoinRules.tsx @@ -27,6 +27,11 @@ import { } from '../../../state/hooks/roomList'; import { allRoomsAtom } from '../../../state/room-list/roomList'; import { roomToParentsAtom } from '../../../state/room/roomToParents'; +import { + knockRestrictedSupported, + knockSupported, + restrictedSupported, +} from '../../../utils/matrix'; type RestrictedRoomAllowContent = { room_id: string; @@ -39,10 +44,9 @@ type RoomJoinRulesProps = { export function RoomJoinRules({ powerLevels }: RoomJoinRulesProps) { const mx = useMatrixClient(); const room = useRoom(); - const roomVersion = parseInt(room.getVersion(), 10); - const allowKnockRestricted = roomVersion >= 10; - const allowRestricted = roomVersion >= 8; - const allowKnock = roomVersion >= 7; + const allowKnockRestricted = knockRestrictedSupported(room.getVersion()); + const allowRestricted = restrictedSupported(room.getVersion()); + const allowKnock = knockSupported(room.getVersion()); const roomIdToParents = useAtomValue(roomToParentsAtom); const space = useSpaceOptionally(); diff --git a/src/app/features/create-room/CreateRoom.tsx b/src/app/features/create-room/CreateRoom.tsx new file mode 100644 index 00000000..c88bf680 --- /dev/null +++ b/src/app/features/create-room/CreateRoom.tsx @@ -0,0 +1,277 @@ +import React, { FormEventHandler, useCallback, useState } from 'react'; +import { MatrixError, Room } from 'matrix-js-sdk'; +import { + Box, + Button, + Chip, + color, + config, + Icon, + Icons, + Input, + Spinner, + Switch, + Text, + TextArea, +} from 'folds'; +import { SettingTile } from '../../components/setting-tile'; +import { SequenceCard } from '../../components/sequence-card'; +import { knockRestrictedSupported, knockSupported, restrictedSupported } from '../../utils/matrix'; +import { useMatrixClient } from '../../hooks/useMatrixClient'; +import { millisecondsToMinutes, replaceSpaceWithDash } from '../../utils/common'; +import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; +import { useCapabilities } from '../../hooks/useCapabilities'; +import { useAlive } from '../../hooks/useAlive'; +import { ErrorCode } from '../../cs-errorcode'; +import { + createRoom, + CreateRoomAliasInput, + CreateRoomData, + CreateRoomKind, + CreateRoomKindSelector, + RoomVersionSelector, +} from '../../components/create-room'; + +const getCreateRoomKindToIcon = (kind: CreateRoomKind) => { + if (kind === CreateRoomKind.Private) return Icons.HashLock; + if (kind === CreateRoomKind.Restricted) return Icons.Hash; + return Icons.HashGlobe; +}; + +type CreateRoomFormProps = { + defaultKind?: CreateRoomKind; + space?: Room; + onCreate?: (roomId: string) => void; +}; +export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) { + const mx = useMatrixClient(); + const alive = useAlive(); + + const capabilities = useCapabilities(); + const roomVersions = capabilities['m.room_versions']; + const [selectedRoomVersion, selectRoomVersion] = useState(roomVersions?.default ?? '1'); + + const allowRestricted = space && restrictedSupported(selectedRoomVersion); + + const [kind, setKind] = useState( + defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private + ); + const [federation, setFederation] = useState(true); + const [encryption, setEncryption] = useState(false); + const [knock, setKnock] = useState(false); + const [advance, setAdvance] = useState(false); + + const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion); + const allowKnockRestricted = + kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion); + + const handleRoomVersionChange = (version: string) => { + if (!restrictedSupported(version)) { + setKind(CreateRoomKind.Private); + } + selectRoomVersion(version); + }; + + const [createState, create] = useAsyncCallback( + useCallback((data) => createRoom(mx, data), [mx]) + ); + const loading = createState.status === AsyncStatus.Loading; + const error = createState.status === AsyncStatus.Error ? createState.error : undefined; + const disabled = createState.status === AsyncStatus.Loading; + + const handleSubmit: FormEventHandler = (evt) => { + evt.preventDefault(); + if (disabled) return; + const form = evt.currentTarget; + + const nameInput = form.nameInput as HTMLInputElement | undefined; + const topicTextArea = form.topicTextAria as HTMLTextAreaElement | undefined; + const aliasInput = form.aliasInput as HTMLInputElement | undefined; + const roomName = nameInput?.value.trim(); + const roomTopic = topicTextArea?.value.trim(); + const aliasLocalPart = + aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined; + + if (!roomName) return; + const publicRoom = kind === CreateRoomKind.Public; + let roomKnock = false; + if (allowKnock && kind === CreateRoomKind.Private) { + roomKnock = knock; + } + if (allowKnockRestricted && kind === CreateRoomKind.Restricted) { + roomKnock = knock; + } + + create({ + version: selectedRoomVersion, + parent: space, + kind, + name: roomName, + topic: roomTopic || undefined, + aliasLocalPart: publicRoom ? aliasLocalPart : undefined, + encryption: publicRoom ? false : encryption, + knock: roomKnock, + allowFederation: federation, + }).then((roomId) => { + if (alive()) { + onCreate?.(roomId); + } + }); + }; + + return ( + + + Access + + + + Name + } + name="nameInput" + autoFocus + size="500" + variant="SurfaceVariant" + radii="400" + autoComplete="off" + disabled={disabled} + /> + + + Topic (Optional) +