From 4c76a7fd180c56daacae3fc3c01706aa3ea92bd2 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Fri, 31 May 2024 19:49:46 +0530 Subject: [PATCH] URL navigation in interface and other improvements (#1633) * load room on url change * add direct room list * render space room list * fix css syntax error * update scroll virtualizer * render subspaces room list * improve sidebar notification badge perf * add nav category components * add space recursive direct component * use nav category component in home, direct and space room list * add empty home and direct list layout * fix unread room menu ref * add more navigation items in room, direct and space tab * add more navigation * fix unread room menu to links * fix space lobby and search link * add explore navigation section * add notifications navigation menu * redirect to initial path after login * include unsupported room in rooms * move router hooks in hooks/router folder * add featured explore - WIP * load featured room with room summary * fix room card topic line clamp * add react query * load room summary using react query * add join button in room card * add content component * use content component in featured community content * fix content width * add responsive room card grid * fix async callback error status * add room card error button * fix client drawer shrink * add room topic viewer * open room card topic in viewer * fix room topic close btn * add get orphan parent util * add room card error dialog * add view featured room or space btn * refactor orphanParent to orphanParents * WIP - explore server * show space hint in room card * add room type filters * add per page item limit popout * reset scroll on public rooms load * refactor explore ui * refactor public rooms component * reset search on server change * fix typo * add empty featured section info * display user server on top * make server room card view btn clickable * add user server as default redirect for explore path * make home empty btn clickable * add thirdparty instance filter in server explore * remove since param on instance change * add server button in explore menu * rename notifications path to inbox * update react-virtual * Add notification messages inbox - WIP * add scroll top container component * add useInterval hook * add visibility change callback prop to scroll top container component * auto refresh notifications every 10 seconds * make message related component reusable * refactor matrix event renderer hoook * render notification message content * refactor matrix event renderer hook * update sequence card styles * move room navigate hook in global hooks * add open message button in notifications * add mark room as read button in notification group * show error in notification messages * add more featured spaces * render reply in notification messages * make notification message reply clickable * add outline prop for attachments * make old settings dialog viewable * add open featured communities as default config option * add invite count notification badge in sidebar and inbox menu * add element size observer hook * improve element size observer hook props * improve screen size hook * fix room avatar util function * allow Text props in Time component * fix dm room util function * add invitations * add no invites and notification cards * fix inbox tab unread badge visible without invite count * update folds and change inbox icon * memo search param construction * add message search in home * fix default message search order * fix display edited message new content * highlight search text in search messages * fix message search loading * disable log in production * add use space context * add useRoom context * fix space room list * fix inbox tab active state * add hook to get space child room recursive * add search for space * add virtual tile component * virtualize home and directs room list * update nav category component * use virtual tile component in more places * fix message highlight when click on reply twice * virtualize space room list * fix space room list lag issue * update folds * add room nav item component in space room list * use room nav item in home and direct room list * make space categories closable and save it in local storage * show unread room when category is collapsed * make home and direct room list category closable * rename room nav item show avatar prop * fix explore server category text alignment * rename closedRoomCategories to closedNavCategories * add nav category handler hook * save and restore last navigation path on space select * filter space rooms category by activity when it is closed * save and restore home and direct nav path state * save and restore inbox active path on open * save and restore explore tab active path * remove notification badge unread menu * add join room or space before navigate screen * move room component to features folder and add new room header * update folds * add room header menu * fix home room list activity sorting * do not hide selected room item on category closed in home and direct tab * replace old select room/tab call with navigate hook * improve state event hooks * show room card summary for joined rooms * prevent room from opening in wrong tab * only show message sender id on hover in modern layout * revert state event hooks changes * add key prop to room provider components * add welcome page * prevent excessive redirects * fix sidebar style with no spaces * move room settings in popup window * remove invite option from room settings * fix open room list search * add leave room prompt * standardize room and user avatar * fix avatar text size * add new reply layout * rename space hierarchy hook * add room topic hook * add room name hook * add room avatar hook and add direct room avatar util * space lobby - WIP * hide invalid space child event from space hierarchy in lobby * move lobby to features * fix element size observer hook width and height * add lobby header and hero section * add hierarchy room item error and loading state * add first and last child prop in sequence card * redirect to lobby from index path * memo and retry hierarchy room summary error * fix hierarchy room item styles * rename lobby hierarchy item card to room item card * show direct room avatar in space lobby * add hierarchy space item * add space item unknown room join button * fix space hierarchy hook refresh after new space join * change user avatar color and fallback render to user icon * change room avatar fallback to room icon * rename room/user avatar renderInitial prop to renderFallback * add room join and view button in space lobby * make power level api more reusable * fix space hierarchy not updating on child update * add menu to suggest or remove space children * show reply arrow in place of reply bend in message * fix typeerror in search because of wrong js-sdk t.ds * do not refetch hierarchy room summary on window focus * make room/user avatar un-draggable * change welcome page support button copy * drag-and-drop ordering of lobby spaces/rooms - WIP * add ASCIILexicalTable algorithms * fix wrong power level check in lobby items options * fix lobby can drop checks * fix join button error crash * fix reply spacing * fix m direct updated with other account data * add option to open room/space settings from lobby * add option in lobby to add new or existing room/spaces * fix room nav item selected styles * add space children reorder mechanism * fix space child reorder bug * fix hierarchy item sort function * Apply reorder of lobby into room list * add and improve space lobby menu items * add existing spaces menu in lobby * change restricted room allow params when dragging outside space * move featured servers config from homeserver list * removed unused features from space settings * add canonical alias as name fallback in lobby item * fix unreliable unread count update bug * fix after login redirect * fix room card topic hover style * Add dnd and folders in sidebar spaces * fix orphan space not visible in sidebar * fix sso login has mix of icon and button * fix space children not visible in home upon leaving space * recalculate notification on updating any space child * fix user color saturation/lightness * add user color to user avatar * add background colors to room avatar * show 2 length initial in sidebar space avatar * improve link color * add nav button component * open legacy create room and create direct * improve page route structure * handle hash router in path utils * mobile friendly router and navigation * make room header member drawer icon mobile friendly * setup index redirect for inbox and explore server route * add leave space prompt * improve member drawer filter menu * add space context menu * add context menu in home * add leave button in lobby items * render user tab avatar on sidebar * force overwrite netlify - test * netlify test * fix reset-password path without server redirected to login * add message link copy button in message menu * reset unread on sync prepared * fix stuck typing notifications * show typing indication in room nav item * refactor closedNavCategories atom to use userId in store key * refactor closedLobbyCategoriesAtom to include userId in store key * refactor navToActivePathAtom to use userId in storage key * remove unused file * refactor openedSidebarFolderAtom to include userId in storage key * add context menu for sidebar space tab * fix eslint not working * add option to pin/unpin child spaces * add context menu for directs tab * add context menu for direct and home tab * show lock icon for non-public space in header * increase matrix max listener count * wrap lobby add space room in callback hook --- .eslintrc.js => .eslintrc.cjs | 0 config.json | 20 + netlify.toml | 6 +- package-lock.json | 121 +- package.json | 9 +- .../CapabilitiesAndMediaConfigLoader.tsx | 36 + src/app/components/CapabilitiesLoader.tsx | 19 + src/app/components/MediaConfigLoader.tsx | 19 + src/app/components/Pdf-viewer/PdfViewer.tsx | 34 +- src/app/components/RenderMessageContent.tsx | 245 ++++ src/app/components/RoomSummaryLoader.tsx | 90 ++ src/app/components/RoomUnreadProvider.tsx | 24 + .../components/SpaceChildDirectsProvider.tsx | 28 + .../components/SpaceChildRoomsProvider.tsx | 28 + src/app/components/SpecVersionsLoader.tsx | 31 +- src/app/components/editor/Toolbar.tsx | 43 +- .../autocomplete/RoomMentionAutocomplete.tsx | 56 +- .../autocomplete/UserMentionAutocomplete.tsx | 37 +- .../components/event-readers/EventReaders.tsx | 22 +- .../leave-room-prompt/LeaveRoomPrompt.tsx | 106 ++ src/app/components/leave-room-prompt/index.ts | 1 + .../leave-space-prompt/LeaveSpacePrompt.tsx | 106 ++ .../components/leave-space-prompt/index.ts | 1 + .../message/FileHeader.tsx | 2 +- .../components/message/MsgTypeRenderers.tsx | 398 ++++++ src/app/components/message/RenderBody.tsx | 37 + src/app/components/message/Reply.css.ts | 15 +- src/app/components/message/Reply.tsx | 171 +-- src/app/components/message/Time.tsx | 38 +- .../message/content/AudioContent.tsx | 199 +++ .../message/content}/EventContent.tsx | 2 +- .../FallbackContent.tsx} | 0 .../message/content}/FileContent.tsx | 99 +- .../message/content}/ImageContent.tsx | 67 +- .../message/content/ThumbnailContent.tsx | 34 + .../message/content}/VideoContent.tsx | 71 +- src/app/components/message/content/index.ts | 7 + .../components/message/content/style.css.ts | 37 + .../message/content}/util.ts | 0 src/app/components/message/index.ts | 5 +- .../components/message/layout/layout.css.ts | 7 +- src/app/components/nav/NavCategory.tsx | 11 + src/app/components/nav/NavCategoryHeader.tsx | 19 + src/app/components/nav/NavEmptyLayout.tsx | 40 + src/app/components/nav/NavItem.tsx | 33 + src/app/components/nav/NavItemContent.tsx | 10 + src/app/components/nav/NavItemOptions.tsx | 17 + src/app/components/nav/index.ts | 6 + src/app/components/nav/styles.css.ts | 127 ++ src/app/components/page/Page.tsx | 146 +++ src/app/components/page/index.tsx | 1 + src/app/components/page/style.css.ts | 69 ++ .../components/room-avatar/RoomAvatar.css.ts | 14 + src/app/components/room-avatar/RoomAvatar.tsx | 56 + src/app/components/room-avatar/index.ts | 1 + src/app/components/room-card/RoomCard.tsx | 314 +++++ src/app/components/room-card/index.ts | 1 + src/app/components/room-card/style.css.ts | 36 + src/app/components/room-intro/RoomIntro.tsx | 49 +- .../room-topic-viewer/RoomTopicViewer.tsx | 41 + src/app/components/room-topic-viewer/index.ts | 1 + .../components/room-topic-viewer/style.css.ts | 23 + .../ScrollTopContainer.tsx | 39 + .../components/scroll-top-container/index.ts | 1 + .../scroll-top-container/style.css.ts | 20 + .../components/sequence-card/SequenceCard.tsx | 18 + src/app/components/sequence-card/index.ts | 1 + src/app/components/sequence-card/style.css.ts | 52 + src/app/components/sidebar/Sidebar.css.ts | 162 ++- src/app/components/sidebar/SidebarAvatar.tsx | 75 -- src/app/components/sidebar/SidebarContent.tsx | 6 +- src/app/components/sidebar/SidebarItem.tsx | 81 ++ src/app/components/sidebar/index.ts | 2 +- .../typing-indicator/TypingIndicator.css.ts | 7 +- .../typing-indicator/TypingIndicator.tsx | 31 +- .../components/unread-badge/UnreadBadge.tsx | 36 + src/app/components/unread-badge/index.ts | 1 + .../url-preview/UrlPreviewCard.css.tsx | 47 + .../url-preview}/UrlPreviewCard.tsx | 15 +- src/app/components/url-preview/index.ts | 1 + .../components/user-avatar/UserAvatar.css.ts | 14 + src/app/components/user-avatar/UserAvatar.tsx | 40 + src/app/components/user-avatar/index.ts | 1 + .../components/virtualizer/VirtualTile.tsx | 20 + src/app/components/virtualizer/index.ts | 1 + src/app/components/virtualizer/style.css.ts | 11 + src/app/cs-api.ts | 2 +- .../JoinBeforeNavigate.tsx | 61 + .../features/join-before-navigate/index.ts | 1 + src/app/features/lobby/DnD.css.ts | 91 ++ src/app/features/lobby/DnD.tsx | 146 +++ src/app/features/lobby/HierarchyItemMenu.tsx | 306 +++++ src/app/features/lobby/Lobby.tsx | 528 ++++++++ src/app/features/lobby/LobbyHeader.css.ts | 13 + src/app/features/lobby/LobbyHeader.tsx | 214 ++++ src/app/features/lobby/LobbyHero.css.tsx | 15 + src/app/features/lobby/LobbyHero.tsx | 77 ++ src/app/features/lobby/RoomItem.css.ts | 22 + src/app/features/lobby/RoomItem.tsx | 441 +++++++ src/app/features/lobby/SpaceItem.css.ts | 39 + src/app/features/lobby/SpaceItem.tsx | 493 ++++++++ src/app/features/lobby/index.ts | 1 + src/app/features/lobby/style.css.ts | 15 + .../features/message-search/MessageSearch.tsx | 329 +++++ .../features/message-search/SearchFilters.tsx | 413 +++++++ .../features/message-search/SearchInput.tsx | 66 + .../message-search/SearchResultGroup.tsx | 262 ++++ src/app/features/message-search/index.ts | 1 + .../message-search/useMessageSearch.ts | 115 ++ .../room-nav/RoomNavCategoryButton.tsx | 27 + src/app/features/room-nav/RoomNavItem.tsx | 297 +++++ src/app/features/room-nav/index.ts | 2 + src/app/features/room-nav/styles.css.ts | 9 + .../room/CommandAutocomplete.tsx | 0 .../room/MembersDrawer.css.ts | 0 .../room/MembersDrawer.tsx | 174 ++- src/app/features/room/Room.tsx | 33 + .../room/RoomInput.tsx | 122 +- .../room/RoomInputPlaceholder.css.ts | 0 .../room/RoomInputPlaceholder.tsx | 0 .../room/RoomTimeline.css.ts | 0 .../room/RoomTimeline.tsx | 1085 +++++++---------- .../room/RoomTombstone.css.ts | 0 .../room/RoomTombstone.tsx | 8 +- src/app/features/room/RoomView.tsx | 84 ++ .../room/RoomViewFollowing.css.ts | 0 .../room/RoomViewFollowing.tsx | 0 src/app/features/room/RoomViewHeader.css.ts | 10 + src/app/features/room/RoomViewHeader.tsx | 348 ++++++ .../room/RoomViewTyping.css.ts | 0 src/app/features/room/RoomViewTyping.tsx | 121 ++ src/app/features/room/index.ts | 1 + .../room/message/EncryptedContent.tsx | 0 .../room/message/Message.tsx | 247 ++-- .../room/message/MessageEditor.tsx | 57 +- .../room/message/Reactions.tsx | 0 src/app/features/room/message/index.ts | 3 + src/app/features/room/message/styles.css.ts | 50 + .../room/msgContent.ts | 2 +- .../reaction-viewer/ReactionViewer.css.ts | 0 .../room/reaction-viewer/ReactionViewer.tsx | 22 +- .../room/reaction-viewer/index.ts | 0 src/app/hooks/router/useDirectSelected.ts | 22 + src/app/hooks/router/useExploreSelected.ts | 28 + src/app/hooks/router/useHomeSelected.ts | 47 + src/app/hooks/router/useInbox.ts | 36 + src/app/hooks/router/useSelectedRoom.ts | 15 + src/app/hooks/router/useSelectedSpace.ts | 37 + src/app/hooks/useAccountDataCallback.ts | 14 + src/app/hooks/useAsyncCallback.ts | 17 +- src/app/hooks/useCapabilities.ts | 12 + src/app/hooks/useCategoryHandler.ts | 27 + src/app/hooks/useClientConfig.ts | 15 +- src/app/hooks/useCommands.ts | 14 +- src/app/hooks/useElementSizeObserver.ts | 23 + src/app/hooks/useInterval.ts | 24 + src/app/hooks/useJoinedRoomId.ts | 19 + src/app/hooks/useLocalRoomSummary.ts | 44 + src/app/hooks/useMatrixEventRenderer.ts | 81 +- src/app/hooks/useMediaConfig.ts | 16 + src/app/hooks/useNavToActivePathMapper.ts | 18 + src/app/hooks/usePowerLevels.ts | 167 ++- src/app/hooks/useRoom.ts | 12 + src/app/hooks/useRoomMeta.ts | 41 + src/app/hooks/useRoomMsgContentRenderer.ts | 68 -- src/app/hooks/useRoomNavigate.ts | 55 + src/app/hooks/useRoomTypingMembers.ts | 10 + src/app/hooks/useScreenSize.ts | 35 +- src/app/hooks/useSidebarItems.ts | 138 +++ src/app/hooks/useSpace.ts | 17 + src/app/hooks/useSpaceHierarchy.ts | 253 ++++ src/app/hooks/useSyncState.ts | 14 + src/app/hooks/useTypingStatusUpdater.ts | 3 +- .../space-add-existing/SpaceAddExisting.jsx | 175 +-- src/app/organisms/navigation/Drawer.jsx | 12 +- src/app/organisms/navigation/Sidebar1.tsx | 125 -- src/app/organisms/pw/Windows.jsx | 14 +- src/app/organisms/room/Room.scss | 1 + src/app/organisms/room/Room.tsx | 46 - src/app/organisms/room/RoomSettings.jsx | 162 ++- src/app/organisms/room/RoomSettings.scss | 65 +- src/app/organisms/room/RoomView.jsx | 118 -- src/app/organisms/room/RoomViewTyping.tsx | 118 -- .../organisms/room/message/AudioContent.tsx | 194 --- .../organisms/room/message/StickerContent.tsx | 48 - .../organisms/room/message/fileRenderer.tsx | 45 - src/app/organisms/room/message/index.ts | 10 - src/app/organisms/room/message/styles.css.ts | 131 -- src/app/organisms/search/Search.jsx | 30 +- .../space-settings/SpaceSettings.jsx | 79 +- src/app/pages/App.tsx | 101 +- src/app/pages/MobileFriendly.tsx | 44 + src/app/pages/Router.tsx | 269 ++++ src/app/pages/afterLoginRedirectPath.ts | 12 + src/app/pages/auth/AuthLayout.tsx | 17 +- src/app/pages/auth/SSOLogin.tsx | 6 +- src/app/pages/auth/ServerPicker.tsx | 39 +- src/app/pages/auth/login/Login.tsx | 18 +- .../pages/auth/login/PasswordLoginForm.tsx | 38 +- src/app/pages/auth/login/loginUtil.ts | 11 +- src/app/pages/auth/register/Register.tsx | 18 +- src/app/pages/auth/register/registerUtil.ts | 23 +- .../auth/reset-password/ResetPassword.tsx | 21 +- src/app/pages/client/ClientBindAtoms.ts | 14 + .../pages/client/ClientInitStorageAtom.tsx | 38 + src/app/pages/client/ClientLayout.tsx | 15 + src/app/pages/client/ClientRoot.tsx | 87 ++ src/app/pages/client/SidebarNav.tsx | 76 ++ src/app/pages/client/SpecVersions.tsx | 46 + src/app/pages/client/WelcomePage.tsx | 64 + src/app/pages/client/direct/Direct.tsx | 263 ++++ src/app/pages/client/direct/RoomProvider.tsx | 26 + src/app/pages/client/direct/index.ts | 2 + src/app/pages/client/direct/useDirectRooms.ts | 12 + src/app/pages/client/explore/Explore.tsx | 269 ++++ src/app/pages/client/explore/Featured.tsx | 121 ++ src/app/pages/client/explore/Server.tsx | 645 ++++++++++ src/app/pages/client/explore/index.ts | 3 + src/app/pages/client/explore/style.css.ts | 19 + src/app/pages/client/home/Home.tsx | 315 +++++ src/app/pages/client/home/RoomProvider.tsx | 26 + src/app/pages/client/home/Search.tsx | 37 + src/app/pages/client/home/index.ts | 3 + src/app/pages/client/home/useHomeRooms.ts | 14 + src/app/pages/client/inbox/Inbox.tsx | 87 ++ src/app/pages/client/inbox/Invites.tsx | 288 +++++ src/app/pages/client/inbox/Notifications.tsx | 609 +++++++++ src/app/pages/client/inbox/index.ts | 3 + src/app/pages/client/index.ts | 3 + src/app/pages/client/sidebar/DirectTab.tsx | 132 ++ src/app/pages/client/sidebar/ExploreTab.tsx | 64 + src/app/pages/client/sidebar/HomeTab.tsx | 134 ++ src/app/pages/client/sidebar/InboxTab.tsx | 62 + src/app/pages/client/sidebar/SpaceTabs.tsx | 844 +++++++++++++ src/app/pages/client/sidebar/UserTab.tsx | 63 + src/app/pages/client/sidebar/index.ts | 6 + src/app/pages/client/space/RoomProvider.tsx | 37 + src/app/pages/client/space/Search.tsx | 52 + src/app/pages/client/space/Space.tsx | 417 +++++++ src/app/pages/client/space/SpaceProvider.tsx | 30 + src/app/pages/client/space/index.ts | 4 + src/app/pages/pathUtils.ts | 133 +- src/app/pages/paths.ts | 65 + src/app/plugins/millify.ts | 9 + src/app/plugins/pdfjs-dist.ts | 5 +- src/app/plugins/react-custom-html-parser.tsx | 56 +- src/app/state/closedLobbyCategories.ts | 68 ++ src/app/state/closedNavCategories.ts | 68 ++ src/app/state/hooks/closedLobbyCategories.ts | 15 + src/app/state/hooks/closedNavCategories.ts | 15 + src/app/state/hooks/inviteList.ts | 11 +- src/app/state/hooks/navToActivePath.ts | 15 + src/app/state/hooks/openedSidebarFolder.ts | 15 + src/app/state/hooks/roomList.ts | 189 ++- src/app/state/hooks/unread.ts | 46 + src/app/state/hooks/useBindAtoms.ts | 13 +- src/app/state/mDirectList.ts | 10 +- src/app/state/navToActivePath.ts | 66 + src/app/state/openedSidebarFolder.ts | 66 + src/app/state/{ => room-list}/inviteList.ts | 2 +- .../state/{ => room-list}/mutedRoomList.ts | 4 +- src/app/state/{ => room-list}/roomList.ts | 2 +- src/app/state/{ => room-list}/utils.ts | 6 +- src/app/state/{ => room}/roomInputDrafts.ts | 6 +- src/app/state/{ => room}/roomToParents.ts | 8 +- src/app/state/{ => room}/roomToUnread.ts | 94 +- src/app/state/selectedRoom.ts | 3 - src/app/state/selectedTab.ts | 8 - src/app/state/spaceRooms.ts | 54 + src/app/state/tabToRoom.ts | 34 - src/app/state/typingMembers.ts | 133 +- src/app/styles/ContainerColor.css.ts | 33 + src/app/styles/CustomHtml.css.ts | 8 + src/app/templates/client/Client.jsx | 94 +- src/app/templates/client/Client.scss | 3 +- src/app/templates/client/ClientContent.jsx | 2 +- src/app/utils/ASCIILexicalTable.ts | 393 ++++++ src/app/utils/common.ts | 17 + src/app/utils/keyboard.ts | 7 + src/app/utils/matrix.ts | 89 +- src/app/utils/regex.ts | 8 + src/app/utils/room.ts | 61 +- src/app/utils/sort.ts | 59 + src/client/action/navigation.js | 8 +- src/client/event/hotkeys.js | 6 +- src/client/initMatrix.js | 21 +- src/client/state/navigation.js | 12 +- src/index.scss | 40 +- src/types/matrix/room.ts | 22 +- vite.config.js | 6 + 290 files changed, 17447 insertions(+), 3224 deletions(-) rename .eslintrc.js => .eslintrc.cjs (100%) create mode 100644 src/app/components/CapabilitiesAndMediaConfigLoader.tsx create mode 100644 src/app/components/CapabilitiesLoader.tsx create mode 100644 src/app/components/MediaConfigLoader.tsx create mode 100644 src/app/components/RenderMessageContent.tsx create mode 100644 src/app/components/RoomSummaryLoader.tsx create mode 100644 src/app/components/RoomUnreadProvider.tsx create mode 100644 src/app/components/SpaceChildDirectsProvider.tsx create mode 100644 src/app/components/SpaceChildRoomsProvider.tsx create mode 100644 src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx create mode 100644 src/app/components/leave-room-prompt/index.ts create mode 100644 src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx create mode 100644 src/app/components/leave-space-prompt/index.ts rename src/app/{organisms/room => components}/message/FileHeader.tsx (91%) create mode 100644 src/app/components/message/MsgTypeRenderers.tsx create mode 100644 src/app/components/message/RenderBody.tsx create mode 100644 src/app/components/message/content/AudioContent.tsx rename src/app/{organisms/room/message => components/message/content}/EventContent.tsx (93%) rename src/app/components/message/{MessageContentFallback.tsx => content/FallbackContent.tsx} (100%) rename src/app/{organisms/room/message => components/message/content}/FileContent.tsx (76%) rename src/app/{organisms/room/message => components/message/content}/ImageContent.tsx (81%) create mode 100644 src/app/components/message/content/ThumbnailContent.tsx rename src/app/{organisms/room/message => components/message/content}/VideoContent.tsx (77%) create mode 100644 src/app/components/message/content/index.ts create mode 100644 src/app/components/message/content/style.css.ts rename src/app/{organisms/room/message => components/message/content}/util.ts (100%) create mode 100644 src/app/components/nav/NavCategory.tsx create mode 100644 src/app/components/nav/NavCategoryHeader.tsx create mode 100644 src/app/components/nav/NavEmptyLayout.tsx create mode 100644 src/app/components/nav/NavItem.tsx create mode 100644 src/app/components/nav/NavItemContent.tsx create mode 100644 src/app/components/nav/NavItemOptions.tsx create mode 100644 src/app/components/nav/index.ts create mode 100644 src/app/components/nav/styles.css.ts create mode 100644 src/app/components/page/Page.tsx create mode 100644 src/app/components/page/index.tsx create mode 100644 src/app/components/page/style.css.ts create mode 100644 src/app/components/room-avatar/RoomAvatar.css.ts create mode 100644 src/app/components/room-avatar/RoomAvatar.tsx create mode 100644 src/app/components/room-avatar/index.ts create mode 100644 src/app/components/room-card/RoomCard.tsx create mode 100644 src/app/components/room-card/index.ts create mode 100644 src/app/components/room-card/style.css.ts create mode 100644 src/app/components/room-topic-viewer/RoomTopicViewer.tsx create mode 100644 src/app/components/room-topic-viewer/index.ts create mode 100644 src/app/components/room-topic-viewer/style.css.ts create mode 100644 src/app/components/scroll-top-container/ScrollTopContainer.tsx create mode 100644 src/app/components/scroll-top-container/index.ts create mode 100644 src/app/components/scroll-top-container/style.css.ts create mode 100644 src/app/components/sequence-card/SequenceCard.tsx create mode 100644 src/app/components/sequence-card/index.ts create mode 100644 src/app/components/sequence-card/style.css.ts delete mode 100644 src/app/components/sidebar/SidebarAvatar.tsx create mode 100644 src/app/components/sidebar/SidebarItem.tsx create mode 100644 src/app/components/unread-badge/UnreadBadge.tsx create mode 100644 src/app/components/unread-badge/index.ts create mode 100644 src/app/components/url-preview/UrlPreviewCard.css.tsx rename src/app/{organisms/room/message => components/url-preview}/UrlPreviewCard.tsx (94%) create mode 100644 src/app/components/user-avatar/UserAvatar.css.ts create mode 100644 src/app/components/user-avatar/UserAvatar.tsx create mode 100644 src/app/components/user-avatar/index.ts create mode 100644 src/app/components/virtualizer/VirtualTile.tsx create mode 100644 src/app/components/virtualizer/index.ts create mode 100644 src/app/components/virtualizer/style.css.ts create mode 100644 src/app/features/join-before-navigate/JoinBeforeNavigate.tsx create mode 100644 src/app/features/join-before-navigate/index.ts create mode 100644 src/app/features/lobby/DnD.css.ts create mode 100644 src/app/features/lobby/DnD.tsx create mode 100644 src/app/features/lobby/HierarchyItemMenu.tsx create mode 100644 src/app/features/lobby/Lobby.tsx create mode 100644 src/app/features/lobby/LobbyHeader.css.ts create mode 100644 src/app/features/lobby/LobbyHeader.tsx create mode 100644 src/app/features/lobby/LobbyHero.css.tsx create mode 100644 src/app/features/lobby/LobbyHero.tsx create mode 100644 src/app/features/lobby/RoomItem.css.ts create mode 100644 src/app/features/lobby/RoomItem.tsx create mode 100644 src/app/features/lobby/SpaceItem.css.ts create mode 100644 src/app/features/lobby/SpaceItem.tsx create mode 100644 src/app/features/lobby/index.ts create mode 100644 src/app/features/lobby/style.css.ts create mode 100644 src/app/features/message-search/MessageSearch.tsx create mode 100644 src/app/features/message-search/SearchFilters.tsx create mode 100644 src/app/features/message-search/SearchInput.tsx create mode 100644 src/app/features/message-search/SearchResultGroup.tsx create mode 100644 src/app/features/message-search/index.ts create mode 100644 src/app/features/message-search/useMessageSearch.ts create mode 100644 src/app/features/room-nav/RoomNavCategoryButton.tsx create mode 100644 src/app/features/room-nav/RoomNavItem.tsx create mode 100644 src/app/features/room-nav/index.ts create mode 100644 src/app/features/room-nav/styles.css.ts rename src/app/{organisms => features}/room/CommandAutocomplete.tsx (100%) rename src/app/{organisms => features}/room/MembersDrawer.css.ts (100%) rename src/app/{organisms => features}/room/MembersDrawer.tsx (79%) create mode 100644 src/app/features/room/Room.tsx rename src/app/{organisms => features}/room/RoomInput.tsx (85%) rename src/app/{organisms => features}/room/RoomInputPlaceholder.css.ts (100%) rename src/app/{organisms => features}/room/RoomInputPlaceholder.tsx (100%) rename src/app/{organisms => features}/room/RoomTimeline.css.ts (100%) rename src/app/{organisms => features}/room/RoomTimeline.tsx (62%) rename src/app/{organisms => features}/room/RoomTombstone.css.ts (100%) rename src/app/{organisms => features}/room/RoomTombstone.tsx (90%) create mode 100644 src/app/features/room/RoomView.tsx rename src/app/{organisms => features}/room/RoomViewFollowing.css.ts (100%) rename src/app/{organisms => features}/room/RoomViewFollowing.tsx (100%) create mode 100644 src/app/features/room/RoomViewHeader.css.ts create mode 100644 src/app/features/room/RoomViewHeader.tsx rename src/app/{organisms => features}/room/RoomViewTyping.css.ts (100%) create mode 100644 src/app/features/room/RoomViewTyping.tsx create mode 100644 src/app/features/room/index.ts rename src/app/{organisms => features}/room/message/EncryptedContent.tsx (100%) rename src/app/{organisms => features}/room/message/Message.tsx (84%) rename src/app/{organisms => features}/room/message/MessageEditor.tsx (89%) rename src/app/{organisms => features}/room/message/Reactions.tsx (100%) create mode 100644 src/app/features/room/message/index.ts create mode 100644 src/app/features/room/message/styles.css.ts rename src/app/{organisms => features}/room/msgContent.ts (98%) rename src/app/{organisms => features}/room/reaction-viewer/ReactionViewer.css.ts (100%) rename src/app/{organisms => features}/room/reaction-viewer/ReactionViewer.tsx (89%) rename src/app/{organisms => features}/room/reaction-viewer/index.ts (100%) create mode 100644 src/app/hooks/router/useDirectSelected.ts create mode 100644 src/app/hooks/router/useExploreSelected.ts create mode 100644 src/app/hooks/router/useHomeSelected.ts create mode 100644 src/app/hooks/router/useInbox.ts create mode 100644 src/app/hooks/router/useSelectedRoom.ts create mode 100644 src/app/hooks/router/useSelectedSpace.ts create mode 100644 src/app/hooks/useAccountDataCallback.ts create mode 100644 src/app/hooks/useCapabilities.ts create mode 100644 src/app/hooks/useCategoryHandler.ts create mode 100644 src/app/hooks/useElementSizeObserver.ts create mode 100644 src/app/hooks/useInterval.ts create mode 100644 src/app/hooks/useJoinedRoomId.ts create mode 100644 src/app/hooks/useLocalRoomSummary.ts create mode 100644 src/app/hooks/useMediaConfig.ts create mode 100644 src/app/hooks/useNavToActivePathMapper.ts create mode 100644 src/app/hooks/useRoom.ts create mode 100644 src/app/hooks/useRoomMeta.ts delete mode 100644 src/app/hooks/useRoomMsgContentRenderer.ts create mode 100644 src/app/hooks/useRoomNavigate.ts create mode 100644 src/app/hooks/useRoomTypingMembers.ts create mode 100644 src/app/hooks/useSidebarItems.ts create mode 100644 src/app/hooks/useSpace.ts create mode 100644 src/app/hooks/useSpaceHierarchy.ts create mode 100644 src/app/hooks/useSyncState.ts delete mode 100644 src/app/organisms/navigation/Sidebar1.tsx delete mode 100644 src/app/organisms/room/Room.tsx delete mode 100644 src/app/organisms/room/RoomView.jsx delete mode 100644 src/app/organisms/room/RoomViewTyping.tsx delete mode 100644 src/app/organisms/room/message/AudioContent.tsx delete mode 100644 src/app/organisms/room/message/StickerContent.tsx delete mode 100644 src/app/organisms/room/message/fileRenderer.tsx delete mode 100644 src/app/organisms/room/message/index.ts delete mode 100644 src/app/organisms/room/message/styles.css.ts create mode 100644 src/app/pages/MobileFriendly.tsx create mode 100644 src/app/pages/Router.tsx create mode 100644 src/app/pages/afterLoginRedirectPath.ts create mode 100644 src/app/pages/client/ClientBindAtoms.ts create mode 100644 src/app/pages/client/ClientInitStorageAtom.tsx create mode 100644 src/app/pages/client/ClientLayout.tsx create mode 100644 src/app/pages/client/ClientRoot.tsx create mode 100644 src/app/pages/client/SidebarNav.tsx create mode 100644 src/app/pages/client/SpecVersions.tsx create mode 100644 src/app/pages/client/WelcomePage.tsx create mode 100644 src/app/pages/client/direct/Direct.tsx create mode 100644 src/app/pages/client/direct/RoomProvider.tsx create mode 100644 src/app/pages/client/direct/index.ts create mode 100644 src/app/pages/client/direct/useDirectRooms.ts create mode 100644 src/app/pages/client/explore/Explore.tsx create mode 100644 src/app/pages/client/explore/Featured.tsx create mode 100644 src/app/pages/client/explore/Server.tsx create mode 100644 src/app/pages/client/explore/index.ts create mode 100644 src/app/pages/client/explore/style.css.ts create mode 100644 src/app/pages/client/home/Home.tsx create mode 100644 src/app/pages/client/home/RoomProvider.tsx create mode 100644 src/app/pages/client/home/Search.tsx create mode 100644 src/app/pages/client/home/index.ts create mode 100644 src/app/pages/client/home/useHomeRooms.ts create mode 100644 src/app/pages/client/inbox/Inbox.tsx create mode 100644 src/app/pages/client/inbox/Invites.tsx create mode 100644 src/app/pages/client/inbox/Notifications.tsx create mode 100644 src/app/pages/client/inbox/index.ts create mode 100644 src/app/pages/client/index.ts create mode 100644 src/app/pages/client/sidebar/DirectTab.tsx create mode 100644 src/app/pages/client/sidebar/ExploreTab.tsx create mode 100644 src/app/pages/client/sidebar/HomeTab.tsx create mode 100644 src/app/pages/client/sidebar/InboxTab.tsx create mode 100644 src/app/pages/client/sidebar/SpaceTabs.tsx create mode 100644 src/app/pages/client/sidebar/UserTab.tsx create mode 100644 src/app/pages/client/sidebar/index.ts create mode 100644 src/app/pages/client/space/RoomProvider.tsx create mode 100644 src/app/pages/client/space/Search.tsx create mode 100644 src/app/pages/client/space/Space.tsx create mode 100644 src/app/pages/client/space/SpaceProvider.tsx create mode 100644 src/app/pages/client/space/index.ts create mode 100644 src/app/plugins/millify.ts create mode 100644 src/app/state/closedLobbyCategories.ts create mode 100644 src/app/state/closedNavCategories.ts create mode 100644 src/app/state/hooks/closedLobbyCategories.ts create mode 100644 src/app/state/hooks/closedNavCategories.ts create mode 100644 src/app/state/hooks/navToActivePath.ts create mode 100644 src/app/state/hooks/openedSidebarFolder.ts create mode 100644 src/app/state/hooks/unread.ts create mode 100644 src/app/state/navToActivePath.ts create mode 100644 src/app/state/openedSidebarFolder.ts rename src/app/state/{ => room-list}/inviteList.ts (94%) rename src/app/state/{ => room-list}/mutedRoomList.ts (96%) rename src/app/state/{ => room-list}/roomList.ts (93%) rename src/app/state/{ => room-list}/utils.ts (91%) rename src/app/state/{ => room}/roomInputDrafts.ts (88%) rename src/app/state/{ => room}/roomToParents.ts (93%) rename src/app/state/{ => room}/roomToUnread.ts (74%) delete mode 100644 src/app/state/selectedRoom.ts delete mode 100644 src/app/state/selectedTab.ts create mode 100644 src/app/state/spaceRooms.ts delete mode 100644 src/app/state/tabToRoom.ts create mode 100644 src/app/styles/ContainerColor.css.ts create mode 100644 src/app/utils/ASCIILexicalTable.ts create mode 100644 src/app/utils/sort.ts diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 100% rename from .eslintrc.js rename to .eslintrc.cjs diff --git a/config.json b/config.json index 484c7cd7..762c3a3b 100644 --- a/config.json +++ b/config.json @@ -10,6 +10,26 @@ ], "allowCustomHomeservers": true, + "featuredCommunities": { + "openAsDefault": false, + "spaces": [ + "#cinny-space:matrix.org", + "#community:matrix.org", + "#space:envs.net", + "#science-space:matrix.org", + "#libregaming-games:tchncs.de", + "#mathematics-on:matrix.org" + ], + "rooms": [ + "#cinny:matrix.org", + "#foundation-office:matrix.org", + "#thisweekinmatrix:matrix.org", + "#matrix-dev:matrix.org", + "#matrix:matrix.org" + ], + "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"] + }, + "hashRouter": { "enabled": false, "basename": "/" diff --git a/netlify.toml b/netlify.toml index e7d948e6..d79aa91c 100644 --- a/netlify.toml +++ b/netlify.toml @@ -9,9 +9,10 @@ status = 200 [[redirects]] - from = "/olm.wasm" + from = "*/olm.wasm" to = "/olm.wasm" status = 200 + force = true [[redirects]] from = "/pdf.worker.min.js" @@ -31,4 +32,5 @@ [[redirects]] from = "/*" to = "/index.html" - status = 200 \ No newline at end of file + status = 200 + force = true \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2eec2912..17e4dd50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,15 @@ "version": "3.2.0", "license": "AGPL-3.0-only", "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "1.1.6", + "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0", + "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3", "@fontsource/inter": "4.5.14", "@khanacademy/simple-markdown": "0.8.6", "@matrix-org/olm": "3.2.14", - "@tanstack/react-virtual": "3.0.0-beta.54", + "@tanstack/react-query": "5.24.1", + "@tanstack/react-query-devtools": "5.24.1", + "@tanstack/react-virtual": "3.2.0", "@tippyjs/react": "4.2.6", "@vanilla-extract/css": "1.9.3", "@vanilla-extract/recipes": "0.3.0", @@ -29,7 +34,7 @@ "file-saver": "2.0.5", "flux": "4.0.3", "focus-trap-react": "10.0.2", - "folds": "1.5.1", + "folds": "2.0.0", "formik": "2.2.9", "html-dom-parser": "4.0.0", "html-react-parser": "4.2.0", @@ -111,6 +116,34 @@ "node": ">=6.0.0" } }, + "node_modules/@atlaskit/pragmatic-drag-and-drop": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop/-/pragmatic-drag-and-drop-1.1.6.tgz", + "integrity": "sha512-+jGspaRMyHWB6g9w+N1KImS5I+xt0ML89pwUyCueEhf2KGsl6zyH9ZxjTVKfrbY89FyZvuuXT9oFRHTUKGBi/w==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "bind-event-listener": "^3.0.0", + "raf-schd": "^4.0.3" + } + }, + "node_modules/@atlaskit/pragmatic-drag-and-drop-auto-scroll": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop-auto-scroll/-/pragmatic-drag-and-drop-auto-scroll-1.3.0.tgz", + "integrity": "sha512-8wjKAI5qSrLojt8ZJ2WhoS5P75oBu5g0yMpAnTDgfqFyQnkt5Uc1txCRWpG26SS1mv19nm8ak9XHF2DOugVfpw==", + "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "^1.1.0", + "@babel/runtime": "^7.0.0" + } + }, + "node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop-hitbox/-/pragmatic-drag-and-drop-hitbox-1.0.3.tgz", + "integrity": "sha512-/Sbu/HqN2VGLYBhnsG7SbRNg98XKkbF6L7XDdBi+izRybfaK1FeMfodPpm/xnBHPJzwYMdkE0qtLyv6afhgMUA==", + "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "^1.1.0", + "@babel/runtime": "^7.0.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.23.4", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.4.tgz", @@ -3093,25 +3126,75 @@ "@swc/counter": "^0.1.3" } }, - "node_modules/@tanstack/react-virtual": { - "version": "3.0.0-beta.54", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.54.tgz", - "integrity": "sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ==", + "node_modules/@tanstack/query-core": { + "version": "5.24.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.24.1.tgz", + "integrity": "sha512-DZ6Nx9p7BhjkG50ayJ+MKPgff+lMeol7QYXkvuU5jr2ryW/4ok5eanaS9W5eooA4xN0A/GPHdLGOZGzArgf5Cg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-devtools": { + "version": "5.24.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.24.0.tgz", + "integrity": "sha512-pThim455t69zrZaQKa7IRkEIK8UBTS+gHVAdNfhO72Xh4rWpMc63ovRje5/n6iw63+d6QiJzVadsJVdPoodSeQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.24.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.24.1.tgz", + "integrity": "sha512-4+09JEdO4d6+Gc8Y/g2M/MuxDK5IY0QV8+2wL2304wPKJgJ54cBbULd3nciJ5uvh/as8rrxx6s0mtIwpRuGd1g==", "dependencies": { - "@tanstack/virtual-core": "3.0.0-beta.54" + "@tanstack/query-core": "5.24.1" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^18.0.0" + } + }, + "node_modules/@tanstack/react-query-devtools": { + "version": "5.24.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.24.1.tgz", + "integrity": "sha512-qa4SEugN+EF8JJXcpsM9Lu05HfUv5cvHvLuB0uw/81eJZyNHFdtHFBi5RLCgpBrOyVMDfH8UQ3VBMqXzFKV68A==", + "dependencies": { + "@tanstack/query-devtools": "5.24.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-query": "^5.24.1", + "react": "^18.0.0" + } + }, + "node_modules/@tanstack/react-virtual": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz", + "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==", + "dependencies": { + "@tanstack/virtual-core": "3.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "node_modules/@tanstack/virtual-core": { - "version": "3.0.0-beta.54", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.54.tgz", - "integrity": "sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz", + "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" @@ -4065,6 +4148,11 @@ "node": ">=8" } }, + "node_modules/bind-event-listener": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bind-event-listener/-/bind-event-listener-3.0.0.tgz", + "integrity": "sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==" + }, "node_modules/blurhash": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.4.tgz", @@ -5665,9 +5753,9 @@ } }, "node_modules/folds": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/folds/-/folds-1.5.1.tgz", - "integrity": "sha512-2QxyA+FRKjPKXDTMDoD7NmOUiReWrKYO0Msg44QqlzTkTrRVEzJgyPIfC/Ia4/u0ByQpk6dbq8UQxomKmneJ/g==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/folds/-/folds-2.0.0.tgz", + "integrity": "sha512-lKv31vij4GEpEzGKWk5c3ar78fMZ9Di5n1XFR14Z2wnnpqhiiM5JTIzr127Gk5dOfy4mJkjnv/ZfMZvM2k+OQg==", "peerDependencies": { "@vanilla-extract/css": "^1.9.2", "@vanilla-extract/recipes": "^0.3.0", @@ -7580,6 +7668,11 @@ } ] }, + "node_modules/raf-schd": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", diff --git a/package.json b/package.json index 44c28d34..e626e837 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,15 @@ "author": "Ajay Bura", "license": "AGPL-3.0-only", "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "1.1.6", + "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0", + "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3", "@fontsource/inter": "4.5.14", "@khanacademy/simple-markdown": "0.8.6", "@matrix-org/olm": "3.2.14", - "@tanstack/react-virtual": "3.0.0-beta.54", + "@tanstack/react-query": "5.24.1", + "@tanstack/react-query-devtools": "5.24.1", + "@tanstack/react-virtual": "3.2.0", "@tippyjs/react": "4.2.6", "@vanilla-extract/css": "1.9.3", "@vanilla-extract/recipes": "0.3.0", @@ -40,7 +45,7 @@ "file-saver": "2.0.5", "flux": "4.0.3", "focus-trap-react": "10.0.2", - "folds": "1.5.1", + "folds": "2.0.0", "formik": "2.2.9", "html-dom-parser": "4.0.0", "html-react-parser": "4.2.0", diff --git a/src/app/components/CapabilitiesAndMediaConfigLoader.tsx b/src/app/components/CapabilitiesAndMediaConfigLoader.tsx new file mode 100644 index 00000000..338e5280 --- /dev/null +++ b/src/app/components/CapabilitiesAndMediaConfigLoader.tsx @@ -0,0 +1,36 @@ +import { ReactNode, useCallback, useEffect } from 'react'; +import { Capabilities } from 'matrix-js-sdk'; +import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback'; +import { useMatrixClient } from '../hooks/useMatrixClient'; +import { MediaConfig } from '../hooks/useMediaConfig'; +import { promiseFulfilledResult } from '../utils/common'; + +type CapabilitiesAndMediaConfigLoaderProps = { + children: (capabilities?: Capabilities, mediaConfig?: MediaConfig) => ReactNode; +}; +export function CapabilitiesAndMediaConfigLoader({ + children, +}: CapabilitiesAndMediaConfigLoaderProps) { + const mx = useMatrixClient(); + + const [state, load] = useAsyncCallback< + [Capabilities | undefined, MediaConfig | undefined], + unknown, + [] + >( + useCallback(async () => { + const result = await Promise.allSettled([mx.getCapabilities(true), mx.getMediaConfig()]); + const capabilities = promiseFulfilledResult(result[0]); + const mediaConfig = promiseFulfilledResult(result[1]); + return [capabilities, mediaConfig]; + }, [mx]) + ); + + useEffect(() => { + load(); + }, [load]); + + const [capabilities, mediaConfig] = + state.status === AsyncStatus.Success ? state.data : [undefined, undefined]; + return children(capabilities, mediaConfig); +} diff --git a/src/app/components/CapabilitiesLoader.tsx b/src/app/components/CapabilitiesLoader.tsx new file mode 100644 index 00000000..dad59ec8 --- /dev/null +++ b/src/app/components/CapabilitiesLoader.tsx @@ -0,0 +1,19 @@ +import { ReactNode, useCallback, useEffect } from 'react'; +import { Capabilities } from 'matrix-js-sdk'; +import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback'; +import { useMatrixClient } from '../hooks/useMatrixClient'; + +type CapabilitiesLoaderProps = { + children: (capabilities: Capabilities | undefined) => ReactNode; +}; +export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) { + const mx = useMatrixClient(); + + const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(true), [mx])); + + useEffect(() => { + load(); + }, [load]); + + return children(state.status === AsyncStatus.Success ? state.data : undefined); +} diff --git a/src/app/components/MediaConfigLoader.tsx b/src/app/components/MediaConfigLoader.tsx new file mode 100644 index 00000000..9fd99330 --- /dev/null +++ b/src/app/components/MediaConfigLoader.tsx @@ -0,0 +1,19 @@ +import { ReactNode, useCallback, useEffect } from 'react'; +import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback'; +import { useMatrixClient } from '../hooks/useMatrixClient'; +import { MediaConfig } from '../hooks/useMediaConfig'; + +type MediaConfigLoaderProps = { + children: (mediaConfig: MediaConfig | undefined) => ReactNode; +}; +export function MediaConfigLoader({ children }: MediaConfigLoaderProps) { + const mx = useMatrixClient(); + + const [state, load] = useAsyncCallback(useCallback(() => mx.getMediaConfig(), [mx])); + + useEffect(() => { + load(); + }, [load]); + + return children(state.status === AsyncStatus.Success ? state.data : undefined); +} diff --git a/src/app/components/Pdf-viewer/PdfViewer.tsx b/src/app/components/Pdf-viewer/PdfViewer.tsx index c440cce9..a78c13f2 100644 --- a/src/app/components/Pdf-viewer/PdfViewer.tsx +++ b/src/app/components/Pdf-viewer/PdfViewer.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-param-reassign */ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -import React, { FormEventHandler, useEffect, useRef, useState } from 'react'; +import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react'; import classNames from 'classnames'; import { Box, @@ -13,6 +13,7 @@ import { Input, Menu, PopOut, + RectCords, Scroll, Spinner, Text, @@ -48,7 +49,7 @@ export const PdfViewer = as<'div', PdfViewerProps>( const isError = pdfJSState.status === AsyncStatus.Error || docState.status === AsyncStatus.Error; const [pageNo, setPageNo] = useState(1); - const [openJump, setOpenJump] = useState(false); + const [jumpAnchor, setJumpAnchor] = useState(); useEffect(() => { loadPdfJS(); @@ -86,7 +87,7 @@ export const PdfViewer = as<'div', PdfViewerProps>( if (!jumpInput) return; const jumpTo = parseInt(jumpInput.value, 10); setPageNo(Math.max(1, Math.min(docState.data.numPages, jumpTo))); - setOpenJump(false); + setJumpAnchor(undefined); }; const handlePrevPage = () => { @@ -98,6 +99,10 @@ export const PdfViewer = as<'div', PdfViewerProps>( setPageNo((n) => Math.min(n + 1, docState.data.numPages)); }; + const handleOpenJump: MouseEventHandler = (evt) => { + setJumpAnchor(evt.currentTarget.getBoundingClientRect()); + }; + return (
@@ -187,14 +192,14 @@ export const PdfViewer = as<'div', PdfViewerProps>( setOpenJump(false), + onDeactivate: () => setJumpAnchor(undefined), clickOutsideDeactivates: true, }} > @@ -227,17 +232,14 @@ export const PdfViewer = as<'div', PdfViewerProps>( } > - {(anchorRef) => ( - setOpenJump(!openJump)} - ref={anchorRef} - variant="SurfaceVariant" - radii="300" - aria-pressed={openJump} - > - {`${pageNo}/${docState.data.numPages}`} - - )} + + {`${pageNo}/${docState.data.numPages}`} + () => T; + mediaAutoLoad?: boolean; + urlPreview?: boolean; + highlightRegex?: RegExp; + htmlReactParserOptions: HTMLReactParserOptions; + outlineAttachment?: boolean; +}; +export function RenderMessageContent({ + displayName, + msgType, + ts, + edited, + getContent, + mediaAutoLoad, + urlPreview, + highlightRegex, + htmlReactParserOptions, + outlineAttachment, +}: RenderMessageContentProps) { + const renderFile = () => ( + ( + ( + } + /> + )} + renderAsTextFile={() => ( + } + /> + )} + > + + + )} + outlined={outlineAttachment} + /> + ); + + if (msgType === MsgType.Text) { + return ( + ( + + )} + renderUrlsPreview={ + urlPreview + ? (urls) => ( + + {urls.map((url) => ( + + ))} + + ) + : undefined + } + /> + ); + } + + if (msgType === MsgType.Emote) { + return ( + ( + + )} + renderUrlsPreview={ + urlPreview + ? (urls) => ( + + {urls.map((url) => ( + + ))} + + ) + : undefined + } + /> + ); + } + + if (msgType === MsgType.Notice) { + return ( + ( + + )} + renderUrlsPreview={ + urlPreview + ? (urls) => ( + + {urls.map((url) => ( + + ))} + + ) + : undefined + } + /> + ); + } + + if (msgType === MsgType.Image) { + return ( + ( + } + renderViewer={(p) => } + /> + )} + outlined={outlineAttachment} + /> + ); + } + + if (msgType === MsgType.Video) { + return ( + ( + ( + ( + {body} + )} + /> + ) + : undefined + } + renderVideo={(p) =>